mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
<mat-select> wrapped with <mat-form-field> and fixed relative issues.
This commit is contained in:
parent
cb89da4647
commit
688b443ea8
|
@ -72,6 +72,7 @@
|
||||||
<mat-divider></mat-divider>
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
<h3>Router Animation:</h3>
|
<h3>Router Animation:</h3>
|
||||||
|
<mat-form-field class="w-100-p">
|
||||||
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||||
<mat-option value="none">
|
<mat-option value="none">
|
||||||
None
|
None
|
||||||
|
@ -92,7 +93,7 @@
|
||||||
Fade in
|
Fade in
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -49,6 +49,7 @@
|
||||||
<!-- Front -->
|
<!-- Front -->
|
||||||
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
||||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<mat-form-field>
|
||||||
<mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
|
<mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
|
||||||
aria-label="Change range">
|
aria-label="Change range">
|
||||||
<mat-option *ngFor="let range of widgets.widget1.ranges | keys"
|
<mat-option *ngFor="let range of widgets.widget1.ranges | keys"
|
||||||
|
@ -56,11 +57,10 @@
|
||||||
{{range.value}}
|
{{range.value}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
<button mat-icon-button fuseWidgetToggle aria-label="more">
|
<button mat-icon-button fuseWidgetToggle aria-label="more">
|
||||||
<mat-icon>more_vert</mat-icon>
|
<mat-icon>more_vert</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
||||||
|
@ -306,14 +306,14 @@
|
||||||
|
|
||||||
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
<div class="h3">{{widgets.widget6.title}}</div>
|
<div class="h3">{{widgets.widget6.title}}</div>
|
||||||
<div class="py-16">
|
<mat-form-field>
|
||||||
<mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
|
<mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
|
||||||
<mat-option *ngFor="let range of widgets.widget6.ranges | keys"
|
<mat-option *ngFor="let range of widgets.widget6.ranges | keys"
|
||||||
[value]="range.key">
|
[value]="range.key">
|
||||||
{{range.value}}
|
{{range.value}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</div>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h-400">
|
<div class="h-400">
|
||||||
|
@ -356,8 +356,7 @@
|
||||||
|
|
||||||
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
<div class="h3">{{widgets.widget7.title}}</div>
|
<div class="h3">{{widgets.widget7.title}}</div>
|
||||||
|
<mat-form-field>
|
||||||
<div class="py-16">
|
|
||||||
<mat-select class="simplified" [(ngModel)]="widget7.currentRange"
|
<mat-select class="simplified" [(ngModel)]="widget7.currentRange"
|
||||||
aria-label="Change range">
|
aria-label="Change range">
|
||||||
<mat-option *ngFor="let range of widgets.widget7.ranges | keys"
|
<mat-option *ngFor="let range of widgets.widget7.ranges | keys"
|
||||||
|
@ -365,7 +364,7 @@
|
||||||
{{range.value}}
|
{{range.value}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</div>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
|
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
|
||||||
|
@ -438,16 +437,14 @@
|
||||||
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
||||||
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
<div class="h3">{{widgets.widget9.title}}</div>
|
<div class="h3">{{widgets.widget9.title}}</div>
|
||||||
|
<mat-form-field>
|
||||||
<div class="py-16">
|
|
||||||
<mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
|
<mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
|
||||||
<mat-option *ngFor="let range of widgets.widget9.ranges | keys"
|
<mat-option *ngFor="let range of widgets.widget9.ranges | keys"
|
||||||
[value]="range.key">
|
[value]="range.key">
|
||||||
{{range.value}}
|
{{range.value}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
|
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<!-- SIDENAV HEADER -->
|
<!-- SIDENAV HEADER -->
|
||||||
<div fxLayout="column" fxLayoutAlign="space-between start"
|
<div fxLayout="column" fxLayoutAlign="space-between start"
|
||||||
class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
|
||||||
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
|
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
|
||||||
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
|
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
|
||||||
|
@ -8,13 +8,14 @@
|
||||||
|
|
||||||
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
||||||
<div class="title">John Doe</div>
|
<div class="title">John Doe</div>
|
||||||
|
<mat-form-field floatPlaceholder="never">
|
||||||
<mat-select class="account-selection" placeholder="Mail Selection"
|
<mat-select class="account-selection" placeholder="Mail Selection"
|
||||||
floatPlaceholder="never"
|
|
||||||
[ngModel]="selectedAccount">
|
[ngModel]="selectedAccount">
|
||||||
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
||||||
{{account.value}}
|
{{account.value}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<!-- SIDENAV HEADER -->
|
<!-- SIDENAV HEADER -->
|
||||||
<div fxLayout="column" fxLayoutAlign="space-between start"
|
<div fxLayout="column" fxLayoutAlign="space-between start"
|
||||||
class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
|
||||||
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
|
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
|
||||||
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
|
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
|
||||||
|
@ -8,13 +8,14 @@
|
||||||
|
|
||||||
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
||||||
<div class="title">John Doe</div>
|
<div class="title">John Doe</div>
|
||||||
|
<mat-form-field floatPlaceholder="never">
|
||||||
<mat-select class="account-selection" placeholder="Todo Selection"
|
<mat-select class="account-selection" placeholder="Todo Selection"
|
||||||
floatPlaceholder="never"
|
|
||||||
[ngModel]="selectedAccount">
|
[ngModel]="selectedAccount">
|
||||||
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
||||||
{{account.value}}
|
{{account.value}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user