UI changes
This commit is contained in:
venbatechnologies@gmail.com
parent
c62d273c7a
commit
164bc3c5b7
@ -92,9 +92,22 @@
|
||||
</div>
|
||||
<div class="bg-overlay"></div>
|
||||
</mat-sidenav>
|
||||
<mat-toolbar class="main-header">
|
||||
<mat-toolbar class="main-header" style="border-bottom:2px solid #f44336;">
|
||||
<div class="horizontal-top-bar w-100">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="horizontal-logo">
|
||||
<div class="branding">
|
||||
<!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
|
||||
</h2> -->
|
||||
<!--<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{fullName}})</span>
|
||||
</h2>-->
|
||||
<a (click)="menunav('HOME')">
|
||||
<img [routerLink]="['/dashboard']" [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 35px;;"> <span> {{userDep}} </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
@ -102,18 +115,36 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="horizontal-logo">
|
||||
<div class="branding text-center">
|
||||
<!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
|
||||
</h2> -->
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{fullName}})</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="menu-links">
|
||||
<span *ngFor="let menuitem of horizontalMenuItems.getAll()">
|
||||
<button mat-icon-button matTooltip="{{ menuitem.name}}" matTooltipPosition="below" [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<!--<span>{{ menuitem.name | translate }}</span>-->
|
||||
</button>
|
||||
</span>
|
||||
<button [mat-menu-trigger-for]="multi" matTooltip="settings" matTooltipPosition="below" mat-icon-button class="ml-xs">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
<mat-menu #multi="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<div *ngFor="let menuitem of horizontalMenuItems.getAll()">
|
||||
<div class="dropdown" *ngIf="menuitem.type === 'multi'">
|
||||
<!--{{menuitem | json}}-->
|
||||
<div *ngFor="let childitem of menuitem.children">
|
||||
<button mat-menu-item [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</button>
|
||||
<!--<ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
|
||||
<li *ngFor="let subchild of childitem.subchildren">
|
||||
<a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
|
||||
</li>
|
||||
</ul>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<button appToggleFullscreen mat-icon-button>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
@ -261,12 +292,12 @@
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
{{fullName}}
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<!--<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
</button>-->
|
||||
<button mat-menu-item (click)="userprofile()">
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
@ -282,7 +313,7 @@
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div class="horizontal-menu text-center">
|
||||
<!--<div class="horizontal-menu text-center">
|
||||
<nav>
|
||||
<ul class="main-h-list">
|
||||
<li *ngFor="let menuitem of horizontalMenuItems.getAll()">
|
||||
@ -308,7 +339,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="body-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
sidebarBg: boolean = true;
|
||||
currentLang = 'en';
|
||||
layoutDir = 'ltr';
|
||||
menuLayout : any = 'vertical-menu';
|
||||
menuLayout : any = 'top-menu';
|
||||
selectedSidebarImage : any = 'bg-1';
|
||||
selectedSidebarColor : any = 'sidebar-red';
|
||||
selectedHeaderColor : any = 'header-default';
|
||||
|
||||
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.html
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.html
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.scss
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.scss
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.spec.ts
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.spec.ts
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.ts
Normal file → Executable file
0
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.ts
Normal file → Executable file
@ -12,14 +12,15 @@
|
||||
<div style="text-align:right;position:absolute;z-index:2;right:1px">
|
||||
<button mat-fab color="primary" matTooltip="Close" matTooltipPosition="above" (click)="goList()"><mat-icon>close</mat-icon></button>
|
||||
</div>
|
||||
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" style="position:absolute;z-index:1">
|
||||
<div fxFlex="row">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
|
||||
|
||||
<div [style.overflow]="'auto'" [style.height.px]="'500'" *ngIf="pdList.length > 0">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header style="background-color:#f44336;color:#fff">
|
||||
<mat-card>
|
||||
<!--<mat-card-header style="background-color:#f44336;color:#fff;padding: 20px;">
|
||||
PD Details
|
||||
</mat-expansion-panel-header>
|
||||
</mat-card-header>-->
|
||||
<mat-card-content style="max-height:500px;overflow:auto;">
|
||||
<div>
|
||||
<input style="border-bottom: 1px solid #dcd9d9;padding-top: 5%;" matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
|
||||
|
||||
@ -54,6 +55,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-list *ngIf="recordStatus">
|
||||
<mat-list-item>
|
||||
@ -62,7 +64,7 @@
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
</mat-expansion-panel>
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
@ -71,13 +73,14 @@
|
||||
[pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
|
||||
</mat-paginator> -->
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<div fxFlex.xs="70" fxFlex.sm="70" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70">
|
||||
<mat-card class="mb-2" *ngIf="pdList.length > 0">
|
||||
<agm-map [latitude]="lat" [longitude]="lng">
|
||||
<agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.lat" [longitude]="getMap.lng"></agm-marker>
|
||||
</agm-map>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div><!--End Row-->
|
||||
<div style="text-align:right;position:absolute;z-index:2;bottom: 0;right: 0;">
|
||||
<span style="width: 30px; height: 10px; background:#009688;color:#009688">II</span> Full <span style="width: 30px; height: 10px; background:#673ab7;color:#673ab7">II</span> Smart
|
||||
</div>
|
||||
|
||||
@ -22,200 +22,43 @@ export interface Menu {
|
||||
}
|
||||
|
||||
const HORIZONTALMENUITEMS = [
|
||||
{
|
||||
state: 'home',
|
||||
name: 'HOME',
|
||||
type: 'link',
|
||||
icon: 'home'
|
||||
},
|
||||
{
|
||||
state: 'apps',
|
||||
name: 'APPS',
|
||||
type: 'sub',
|
||||
icon: 'apps',
|
||||
children: [
|
||||
{state: 'apps/calendar', name: 'CALENDAR'},
|
||||
{state: 'apps/messages', name: 'MESSAGES'},
|
||||
{state: 'apps/social', name: 'SOCIAL'},
|
||||
{state: 'apps/chat', name: 'CHAT'}
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'features',
|
||||
name: 'FEATURES',
|
||||
type: 'sub',
|
||||
icon: 'library_books',
|
||||
children: [
|
||||
{state: 'features/colorpicker', name: 'COLOR PICKER'},
|
||||
{state: 'features/cropper', name: 'CROPPER'},
|
||||
{state: 'features/dragula', name: 'DRAGULA'},
|
||||
{state: 'features/sortable', name: 'SORTABLE'},
|
||||
{
|
||||
state: 'charts',
|
||||
name: 'CHARTS',
|
||||
type: 'super-sub',
|
||||
icon: 'show_chart',
|
||||
subchildren: [
|
||||
{state: 'charts/bar-charts', name: 'BAR'},
|
||||
{state: 'charts/pie-charts', name: 'PIE'},
|
||||
{state: 'charts/line-charts', name: 'LINE'},
|
||||
{state: 'charts/mixed-charts', name: 'MIXED'},
|
||||
{state: 'charts/ng2-charts', name: 'NG2 CHARTS'},
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'maps',
|
||||
name: 'MAPS',
|
||||
type: 'super-sub',
|
||||
icon: 'navigation',
|
||||
subchildren: [
|
||||
{state: 'maps/google', name: 'GOOGLE'},
|
||||
{state: 'maps/leaflet', name: 'LEAFLET'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// {
|
||||
// state: 'home',
|
||||
// name: 'HOME',
|
||||
// type: 'link',
|
||||
// icon: 'home'
|
||||
// },
|
||||
{
|
||||
state:'setting',
|
||||
name:'Settings',
|
||||
type:'sub',
|
||||
type:'multi',
|
||||
icon:'settings',
|
||||
children:[
|
||||
{state:'mastermodule',name:'Master Details'},
|
||||
// {state:'entitymodule',name:'Entity Type'}
|
||||
{state:'setting/users',name:'Users'},
|
||||
{state:'setting/mastermodule',name:'Master Details'},
|
||||
{state:'setting/entity',name:'Entities'},
|
||||
{state:'setting/pdteamlist',name:'PD Team'},
|
||||
{state:'template/questions', name: 'Questions'},
|
||||
{state:'template/templates', name: 'Templates'},
|
||||
]
|
||||
},
|
||||
// {
|
||||
// state:'pdtrigger',
|
||||
// name:'PD Trigger',
|
||||
// type:'sub',
|
||||
// icon:'bubble_chart',
|
||||
// children:[
|
||||
// {state:'pdtriggerlist',name:'Pd Trigger Listing'}
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
state: 'material',
|
||||
name: 'MATERIAL',
|
||||
type: 'sub',
|
||||
icon: 'equalizer',
|
||||
children: [
|
||||
{state: 'material/button', name: 'BUTTON'},
|
||||
{state: 'material/cards', name: 'CARDS'},
|
||||
{state: 'material/select', name: 'SELECT'},
|
||||
{state: 'material/autocomplete', name: 'AUTOCOMPLETE'},
|
||||
{state: 'material/chips', name: 'CHIPS'},
|
||||
{state: 'material/input', name: 'INPUT'},
|
||||
{state: 'material/checkbox', name: 'CHECKBOX'},
|
||||
{state: 'material/radio', name: 'RADIO'},
|
||||
{state: 'material/toolbar', name: 'TOOLBAR'},
|
||||
{state: 'material/lists', name: 'LISTS'},
|
||||
{state: 'material/grid', name: 'GRID'},
|
||||
{state: 'material/progress', name: 'PROGRESS'},
|
||||
{state: 'material/tabs', name: 'TABS'},
|
||||
{state: 'material/switch', name: 'SWITCH'},
|
||||
{state: 'material/tooltip', name: 'TOOLTIP'},
|
||||
{state: 'material/menu', name: 'MENU'},
|
||||
{state: 'material/slider', name: 'SLIDER'},
|
||||
{state: 'material/snackbar', name: 'SNACKBAR'},
|
||||
{state: 'material/dialog', name: 'DIALOG'}
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'forms',
|
||||
name: 'FORMS',
|
||||
type: 'sub',
|
||||
icon: 'looks_3',
|
||||
children: [
|
||||
{state: 'forms/editor', name: 'EDITOR'},
|
||||
{state: 'forms/validation', name: 'VALIDATION'},
|
||||
{state: 'forms/upload', name: 'UPLOAD'},
|
||||
{state: 'forms/tree', name: 'TREE'},
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'tables',
|
||||
name: 'TABLES',
|
||||
type: 'sub',
|
||||
icon: 'format_line_spacing',
|
||||
children: [
|
||||
{state: 'tables/fullscreen', name: 'FULLSCREEN'},
|
||||
{state: 'tables/editing', name: 'EDITING'},
|
||||
{state: 'tables/filter', name: 'FILTER'},
|
||||
{state: 'tables/tables/paging', name: 'PAGING'},
|
||||
{state: 'tables/sorting', name: 'SORTING'},
|
||||
{state: 'tables/pinning', name: 'PINNING'},
|
||||
{state: 'tables/selection', name: 'SELECTION'},
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'pages',
|
||||
name: 'PAGES',
|
||||
type: 'sub',
|
||||
icon: 'web',
|
||||
children: [
|
||||
{state: 'pages/about', name: 'ABOUT'},
|
||||
{state: 'pages/contact', name: 'CONTACT'},
|
||||
{state: 'pages/pricing', name: 'PRICING'},
|
||||
{state: 'pages/blank', name: 'BLANK'},
|
||||
{
|
||||
state: 'user-pages',
|
||||
name: 'USERS',
|
||||
type: 'super-sub',
|
||||
icon: 'person',
|
||||
subchildren: [
|
||||
{state: 'user-pages/userlist', name: 'USER LIST'},
|
||||
{state: 'user-pages/userprofile', name: 'USER PROFILE'},
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'gallery',
|
||||
name: 'GALLERY',
|
||||
type: 'super-sub',
|
||||
icon: 'person',
|
||||
subchildren: [
|
||||
{state: 'gallery/gallery-v1', name: 'GALLERY SIMPLE'},
|
||||
{state: 'gallery/gallerygallery-v2', name: 'GALLERY ADVANCED'},
|
||||
{state: 'gallery/gallery-v3', name: 'GALLERY 3RD PARTY'}
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'ecommerce',
|
||||
name: 'ECOMMERCE',
|
||||
type: 'super-sub',
|
||||
icon: 'person',
|
||||
subchildren: [
|
||||
{state: 'ecommerce/ecommerce-product', name: 'PRODUCT LISTING'},
|
||||
{state: 'ecommerce/ecommerce-product-detail', name: 'PRODUCT DETAIL'},
|
||||
{state: 'ecommerce/ecommerce-cart', name: 'CART'},
|
||||
{state: 'ecommerce/ecommerce-checkout', name: 'CHECKOUT'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
state: 'authentication',
|
||||
name: 'AUTHENTICATION',
|
||||
type: 'sub',
|
||||
icon: 'security',
|
||||
children: [
|
||||
{state: 'authentication/login', name: 'LOGIN'},
|
||||
{state: 'authentication/register', name: 'REGISTER'},
|
||||
{state: 'authentication/forgot-password', name: 'FORGOT'},
|
||||
{state: 'authentication/lockscreen', name: 'LOCKSCREEN'},
|
||||
{
|
||||
state: 'error',
|
||||
name: 'ERROR',
|
||||
type: 'super-sub',
|
||||
icon: 'error_outline',
|
||||
subchildren: [
|
||||
{state: 'error/404', name: '404'},
|
||||
{state: 'error/503', name: '503'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
{
|
||||
state:'personal_discussion',
|
||||
name:'Personal Discussion',
|
||||
type:'link',
|
||||
icon:'forum',
|
||||
|
||||
// children:[
|
||||
// {state:'pdtriggerlist',name:'Pd Trigger Listing'}
|
||||
// ]
|
||||
},
|
||||
{
|
||||
state:'quality_check_discussion',
|
||||
name:'Quality Check',
|
||||
type:'link',
|
||||
icon:'done_all',
|
||||
},
|
||||
];
|
||||
|
||||
@Injectable()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user