Skip to content

B
business-java
Commit 355db151 authored by prumde's avatar prumde
Browse files
Options

Added SVG image 

Added Cart option, User Option - Signin, Checkout


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174337 ce508802-f39f-4f6c-b175-0d175dae99d5
parent bcdaf035
Show whitespace changes
Inline Side-by-side
Showing with 241 additions and 40 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css
View file @ 355db151
...@@ -13,13 +13,7 @@ ...@@ -13,13 +13,7 @@
z-index : -1; z-index : -1;
} }
/*Images Source*/ /*Images Source*/
.user-image-128{
width: 128px;
height: 128px;
}
.img-user-32 {
content: url(../../assets/images/w_user_32_32.png);
}
.img-user { .img-user {
content: url(../../assets/images/w_user_128_128.png); content: url(../../assets/images/w_user_128_128.png);
} }
...@@ -32,9 +26,7 @@ ...@@ -32,9 +26,7 @@
filter: contrast(100%) brightness(85%); filter: contrast(100%) brightness(85%);
border-radius: 100%; border-radius: 100%;
} }
.img-logo-32 {
content: url(../../assets/images/logo_32_32.png);
}
.img-logo { .img-logo {
content: url(../../assets/images/logo.png); content: url(../../assets/images/logo.png);
} }
...@@ -47,6 +39,25 @@ ...@@ -47,6 +39,25 @@
padding-top: 75px; padding-top: 75px;
margin: 0; margin: 0;
} }
.user-image-128{
width: 128px;
height: 128px;
}
.img-user-32 {
/*content: url(../../assets/images/w_user_32_32.png);*/
content: url(../../assets/images/svg/user_32_32.svg);
}
.img-logo-32 {
/*content: url(../../assets/images/logo_32_32.png);*/
content: url(../../assets/images/svg/logo_32_32.svg);
}
.img-cart-32 {
/*content: url(../../assets/images/logo_32_32.png);*/
content: url(../../assets/images/svg/cart_32_32.svg);
}
/*Fixed Header*/ /*Fixed Header*/
.invisible{ .invisible{
...@@ -64,19 +75,76 @@ ...@@ -64,19 +75,76 @@
} }
.fixed-header-logo{ .fixed-header-logo{
float: left; float: left;
cursor: pointer;
} }
.fixed-header-user{ .fixed-header-user{
float: right; float: right;
border-radius: 100%; border-radius: 100%;
cursor: pointer;
} }
.fixed-header-logo, .fixed-header-logo,
.fixed-header-user { .fixed-header-user,
.fixed-header-cart {
position: relative; position: relative;
top: 4px; top: 4px;
height: 32px; height: 32px;
width: 32px; width: 32px;
padding: 0; padding: 0;
} }
.fixed-header-badge {
float: right;
background: #fff;
color: mediumvioletred;
font-weight: bolder;
font-size: xx-small;
border-radius: 100%;
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
margin: 5px 5px 5px 2px;
}
.fixed-header-cart{
float: right;
cursor: pointer;
margin-right: -10px;
margin-top: 3px;
height: 28px;
width: 28px;
}
.no-badge {
margin-right: 10px !important;
}
.user-span,
.cart-span{
float: right;
}
.user-span:after,
.cart-span:after {
content: '';
display: block;
position: absolute;
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 10px;
top: 24px;
margin-left: 6px;
}
.siteHeading {
position: absolute;
width: 25%;
display: inline-block;
margin-left: 20px !important;
margin-top: 12px;
color: #fff;
}
/*Fixed Header Menu*/ /*Fixed Header Menu*/
.fixed-header-nav{ .fixed-header-nav{
...@@ -84,6 +152,83 @@ ...@@ -84,6 +152,83 @@
left: 0; left: 0;
position: fixed; position: fixed;
z-index: 4; z-index: 4;
height: 100%; /* height: 100%; */
height: 40px;
}
/*Right Slide Panel*/
.rightSlidePanel {
width: 400px;
height: calc( 100% - 60px );
position: fixed;
right: 5px;
top: 40px;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
z-index: 4;
display: none;
border-radius: 5px;
background: #fff;
}
.button {
width: 90px;
height: 35px;
line-height: 15px;
text-align: center;
border: 1px solid mediumvioletred;
background-color:transparent;
border-radius: 2px;
float: left;
position: relative;
top: 15px;
color: #333;
right: 10px;
margin:2rem;
font-size: .9rem;
}
.button:hover {
background-color: mediumvioletred;
color: #fff;
} }
/* Toggle button */
.hide-button {
top: 0;
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
margin: 15px;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 100%;
transition: 0.6s;
-webkit-transition: 0.6s;
}
.hide-button:hover {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1);
}
.hide-button:before, .hide-button:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
background-color: mediumvioletred;
border-radius: 5px;
transition: 0.5s;
}
.hide-button:before {
transform: translateY(-50%) rotate(45deg) scale(1);
}
.hide-button:after {
transform: translateY(-50%) rotate(-45deg) scale(1);
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html
View file @ 355db151
<ecm-nav-menu class="fixed-header-nav"> </ecm-nav-menu> <ecm-nav-menu class="fixed-header-nav"> </ecm-nav-menu>
<section class="header-section visible">
<div #rightSlidePanel class="rightSlidePanel" >
<span (click)="hideSidePanel();" class="hide-button"></span>
<ecm-user-option *ngIf="sideOption=='USER_OPT'" ></ecm-user-option>
<div *ngIf="sideOption=='CART_OPT'" style="margin: 5rem;" >
Show Cart option will be display here
<button class="button medium-btn">Checkout</button>
</div>
</div>
<section *ngIf="isFixedHeader" class="header-section visible">
<div class="input-container-bg" [@fadeState]="headerFadeState"></div> <div class="input-container-bg" [@fadeState]="headerFadeState"></div>
<div class="input-container"> <div class="input-container">
<img *ngIf="userData" class="user-adj user-image-128"title="{{userData.name}}"src="/ibase/resource/images/users/{{userData.jti}}.png"onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_128_128.png'; "[@userState]="headerFadeState" /> <img *ngIf="userData" (click)="showSidePanel('USER_OPT');" class="user-adj user-image-128" title="{{userData.name}}" src="/ibase/resource/images/users/{{userData.jti}}.png" onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_128_128.png'; " [@userState]="headerFadeState" />
<img *ngIf="!userData"class="img-user user-adj" [@userState]="headerFadeState" /> <img *ngIf="!userData" (click)="showSidePanel('USER_OPT');" class="img-user user-adj" [@userState]="headerFadeState" />
<div class="row"> <div class="row">
<div class="small-12 medium-10 large-10 medium-centered column"> <div class="small-12 medium-10 large-10 medium-centered column">
<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" /> <img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" />
...@@ -12,11 +22,38 @@ ...@@ -12,11 +22,38 @@
</div> </div>
</div> </div>
</section> </section>
<section class="fixed-header-section"
[@fixedHeaderShow]="headerFadeState"> <section *ngIf="isFixedHeader" class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
<div class="large-11 medium-centered">
<img class="fixed-header-logo img-logo-32" />
<span class="siteHeading">{{siteHeading}}</span>
<span [ngClass]="{'user-span': sideOption=='USER_OPT'}">
<img *ngIf="userData" (click)="showSidePanel('USER_OPT');" class="fixed-header-user" title="{{userData.name}}" src="/ibase/resource/images/users/{{userData.jti}}.png" onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " />
<img *ngIf="!userData" (click)="showSidePanel('USER_OPT');" class="fixed-header-user img-user-32" />
</span>
<span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" >
<span *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-badge">{{cartItems}}</span>
<img *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32" />
<img *ngIf="cartItems == 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32 no-badge" />
</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
</div>
</section>
<section *ngIf="!isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
<div class="large-11 medium-centered"> <div class="large-11 medium-centered">
<img class="fixed-header-logo img-logo-32" /> <img *ngIf="userData"class="fixed-header-user" title="{{userData.name}}"src="/ibase/resource/images/users/{{userData.jti}}.png"onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " /> <img class="fixed-header-logo img-logo-32" />
<img *ngIf="!userData" class="fixed-header-user img-user-32" /> <!-- <img class="fixed-header-back img-back-32" (click) = "backClicked();" /> -->
<span class="siteHeading">{{siteHeading}}</span>
<span [ngClass]="{'user-span': sideOption=='USER_OPT'}">
<img *ngIf="userData" (click)="showSidePanel('USER_OPT');" class="fixed-header-user" title="{{userData.name}}" src="/ibase/resource/images/users/{{userData.jti}}.png" onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " />
<img *ngIf="!userData" (click)="showSidePanel('USER_OPT');" class="fixed-header-user img-user-32" />
</span>
<span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" >
<span *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-badge">{{cartItems}}</span>
<img *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32" />
<img *ngIf="cartItems == 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32 no-badge" />
</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search> <ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
</div> </div>
</section> </section>
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.ts
View file @ 355db151
import { Component, Input, Output, Inject, OnInit, OnDestroy, AfterViewChecked, HostListener, trigger, state, animate, transition, style } from '@angular/core'; import { Component, Input, Output, Inject, OnInit, OnDestroy, HostListener, ElementRef, ViewChild, trigger, state, animate, transition, style } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/platform-browser';
import { Location } from '@angular/common';
import { ActivatedRoute, Router,ActivatedRouteSnapshot,RoutesRecognized } from '@angular/router';
import { ScrollService } from '../scroll.service';
import 'rxjs/add/operator/filter';
declare var initSearch: any;
@Component({ @Component({
selector: 'ecm-header', selector: 'ecm-header',
...@@ -62,35 +70,24 @@ import { DOCUMENT } from '@angular/platform-browser'; ...@@ -62,35 +70,24 @@ import { DOCUMENT } from '@angular/platform-browser';
] ]
}) })
export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy { export class ECMHeaderComponent implements OnInit, OnDestroy {
@ViewChild('rightSlidePanel') rightSlidePanel : ElementRef;
@Input() siteHeading : any = 'Local2do';
@Input() isFixedHeader:boolean=true;
@Input() headerFadeState = 'false'; @Input() headerFadeState = 'false';
userData: any; userData: any;
sideOption: any;
cartItems = 3;
constructor(@Inject(DOCUMENT) private document: Document) { } constructor(@Inject(DOCUMENT) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private _location: Location) { }
ngOnInit() { ngOnInit() {
console.log('ECMHeaderComponent onInit' ); console.log('ECMHeaderComponent onInit' );
this.createUserData(); this.createUserData();
} }
ngAfterViewChecked(){
console.log('ECMHeaderComponent ngAfterViewChecked');
/*
let currScrollTop: string = localStorage.getItem('currentScrollTop') ? localStorage.getItem('currentScrollTop') : '0';
let prevScrollHeight: string = localStorage.getItem('scrollHeight') ? localStorage.getItem('scrollHeight') : '0';
let currScrollTopNum: number = +currScrollTop;
let prevScrollHeightNum: number = +prevScrollHeight;
if ( document.body.scrollHeight >= prevScrollHeightNum && !this.isScrollTopDone ) {
console.log(' ECMAdminComponent ngAfterViewChecked prevScrollHeightNum : ' + prevScrollHeightNum + ' currScrollTopNum :' + currScrollTopNum + ' document.body.scrollHeight :' + document.body.scrollHeight );
window.scrollTo(0, currScrollTopNum);
this.isScrollTopDone = true;
}
*/
}
ngOnDestroy(){ ngOnDestroy(){
console.log('ECMHeaderComponent onDestroyed'); console.log('ECMHeaderComponent onDestroyed');
//localStorage.setItem('currentScrollTop', this.scrollTop + ''); //localStorage.setItem('currentScrollTop', this.scrollTop + '');
...@@ -109,6 +106,8 @@ export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy { ...@@ -109,6 +106,8 @@ export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy {
let scrollTop: number = this.document.body.scrollTop; let scrollTop: number = this.document.body.scrollTop;
if(this.isFixedHeader)
{
if (scrollTop > 10 && scrollTop < 50) { if (scrollTop > 10 && scrollTop < 50) {
this.headerFadeState = 'true'; this.headerFadeState = 'true';
} else if (scrollTop > 50 && scrollTop < 150) { } else if (scrollTop > 50 && scrollTop < 150) {
...@@ -134,10 +133,30 @@ export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy { ...@@ -134,10 +133,30 @@ export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy {
}else if (scrollTop < 10) { }else if (scrollTop < 10) {
this.headerFadeState = 'false'; this.headerFadeState = 'false';
} }
}
//console.log('headerFadeState[' + this.headerFadeState + ']' + scrollTop ); //console.log('headerFadeState[' + this.headerFadeState + ']' + scrollTop );
localStorage.setItem('scrollTop', scrollTop + ''); localStorage.setItem('scrollTop', scrollTop + '');
//this.scrollTop = scrollTop; //this.scrollTop = scrollTop;
//localStorage.setItem('scrollHeight', document.body.scrollHeight + ''); //localStorage.setItem('scrollHeight', document.body.scrollHeight + '');
} }
ngAfterViewInit(){
initSearch();
}
showSidePanel(opt : any) {
console.log('ShowSidePanel : ' + opt);
this.rightSlidePanel.nativeElement.style.display = "block";
this.sideOption = opt;
}
hideSidePanel() {
this.rightSlidePanel.nativeElement.style.display = "none";
this.sideOption = null;
}
backClicked() {
this._location.back();
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment