purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Angular and Angular Material 6 compatibility (wip)

Browse Source
This commit is contained in:
Sercan Yemen 2018-05-05 19:54:52 +03:00
parent 3401a67959
commit 5fd146b8da
61 changed files with 211 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/@fuse/components/search-bar/search-bar.component.html
View File

@ -15,7 +15,7 @@
<input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
fxFlex> fxFlex>
<button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()" <button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
aria-label="Collapse Search Bar"> aria-label="Collapse Search Bar">
<mat-icon class="s-24">close</mat-icon> <mat-icon class="s-24">close</mat-icon>
</button> </button>

5
src/@fuse/components/shortcuts/shortcuts.component.html
View File

@ -17,7 +17,7 @@
*ngFor="let shortcutItem of shortcutItems"> *ngFor="let shortcutItem of shortcutItems">
<a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url"> <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
<mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon> <mat-icon class="secondary-text" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold"> <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
{{shortcutItem.title.substr(0, 1).toUpperCase()}} {{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
@ -42,11 +42,12 @@
<mat-menu #addMenu="matMenu" class="w-240"> <mat-menu #addMenu="matMenu" class="w-240">
<mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never"> <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatLabel="never">
<input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)"> <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
</mat-form-field> </mat-form-field>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar> <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<mat-list-item *ngFor="let shortcutItem of shortcutItems" <mat-list-item *ngFor="let shortcutItem of shortcutItems"

6
src/@fuse/components/widget/widget.component.scss
View File

@ -67,16 +67,16 @@ fuse-widget {
&.mat-form-field-type-mat-select { &.mat-form-field-type-mat-select {
.mat-input-wrapper { .mat-form-field-wrapper {
padding: 16px 0; padding: 16px 0;
.mat-input-infix { .mat-form-field-infix {
border: none; border: none;
padding: 0; padding: 0;
} }
} }
.mat-input-underline { .mat-form-field-underline {
display: none; display: none;
} }
} }

17
src/@fuse/scss/partials/_angular-material-fix.scss
View File

@ -7,7 +7,7 @@
} }
// Fix: "Inconsistent font sizes across elements" // Fix: "Inconsistent font sizes across elements"
.mat-input-wrapper { .mat-form-field-wrapper {
font-size: 16px; font-size: 16px;
} }
@ -34,7 +34,7 @@
&.mat-form-field-type-mat-select { &.mat-form-field-type-mat-select {
.mat-input-infix { .mat-form-field-infix {
display: inline-flex; display: inline-flex;
width: auto; width: auto;
@ -57,7 +57,7 @@
} }
} }
// Fix: "Stepper icons are broken due to Fuse's icon helpers" // Fix: Stepper icons are broken due to Fuse's icon helpers
mat-horizontal-stepper, mat-horizontal-stepper,
mat-vertical-stepper { mat-vertical-stepper {
@ -68,11 +68,20 @@ mat-vertical-stepper {
width: 16px !important; width: 16px !important;
min-width: 0 !important; min-width: 0 !important;
min-height: 0 !important; min-height: 0 !important;
color: rgba(255, 255, 255, 0.87) !important; color: inherit !important;
} }
} }
} }
mat-vertical-stepper { mat-vertical-stepper {
padding: 16px 0; padding: 16px 0;
}
// Fix: Chip remove icon is broken due to Fuse's icon helpers
mat-chip {
mat-icon {
min-width: 0 !important;
min-height: 0 !important;
}
} }

12
src/@fuse/scss/partials/_colors.scss
View File

@ -1,6 +1,6 @@
.secondary-text, .secondary-text,
.mat-icon, .icon,
.icon { i {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
@ -51,7 +51,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// If the base text color is black... // If the base text color is black...
@if (rgba(black, 1) == rgba($baseTextColor, 1)) { @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
.mat-icon, i,
.icon { .icon {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
@ -81,7 +81,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// If the base text color is white... // If the base text color is white...
@else { @else {
.mat-icon, i,
.icon { .icon {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
@ -135,11 +135,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
} }
// Input // Input
.mat-input-placeholder { .mat-form-field-label {
color: map_get($fuseForeground, hint-text); color: map_get($fuseForeground, hint-text);
} }
.mat-input-underline { .mat-form-field-underline {
background-color: map_get($fuseForeground, divider); background-color: map_get($fuseForeground, divider);
} }

1
src/@fuse/scss/partials/_icons.scss
View File

@ -1,6 +1,5 @@
i, i,
mat-icon { mat-icon {
color: rgba(0, 0, 0, 0.54);
font-size: 24px; font-size: 24px;
width: 24px; width: 24px;
height: 24px; height: 24px;

4
src/@fuse/scss/partials/_reset.scss
View File

@ -28,7 +28,7 @@ html, body {
} }
// Reset non angular-material input's default browser/os styles // Reset non angular-material input's default browser/os styles
*:not(mat-input-container) { *:not(mat-form-field) {
> input { > input {
border: none; border: none;
@ -55,7 +55,7 @@ html, body {
} }
} }
*:not(mat-input-container) { *:not(mat-form-field) {
> input[type="button"], > input[type="button"],
> button, > button,

4
src/app/main/content/apps/academy/course/course.component.html
View File

@ -33,12 +33,12 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button mr-16 sidenav-toggle" <button mat-icon-button class="mr-16 sidenav-toggle"
fuseMatSidenavToggler="academy-left-sidenav" fxHide.gt-md> fuseMatSidenavToggler="academy-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button mr-16" [routerLink]="'/apps/academy/courses'"> <button mat--iconbutton class="mr-16" [routerLink]="'/apps/academy/courses'">
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>

7
src/app/main/content/apps/academy/courses/courses.component.html
View File

@ -33,7 +33,7 @@
<mat-form-field class="category-selector"> <mat-form-field class="category-selector">
<mat-select placeholder="Select Category" [(ngModel)]="currentCategory" <mat-select placeholder="Select Category" [(ngModel)]="currentCategory"
(change)="filterCoursesByCategory()"> (selectionChange)="filterCoursesByCategory()">
<mat-option [value]="'all'"> <mat-option [value]="'all'">
All All
</mat-option> </mat-option>
@ -46,10 +46,11 @@
</div> </div>
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center"> <div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}"
*fuseIfOnDom>
<div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50" <div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50"
fxFlex.gt-sm="33" [ngClass]="course.category"> fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}">
<div class="course-content" fxLayout="column"> <div class="course-content" fxLayout="column">

5
src/app/main/content/apps/academy/courses/courses.component.ts
View File

@ -1,12 +1,15 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { fuseAnimations } from '@fuse/animations';
import { AcademyCoursesService } from '../courses.service'; import { AcademyCoursesService } from '../courses.service';
@Component({ @Component({
selector : 'fuse-academy-courses', selector : 'fuse-academy-courses',
templateUrl: './courses.component.html', templateUrl: './courses.component.html',
styleUrls : ['./courses.component.scss'] styleUrls : ['./courses.component.scss'],
animations : fuseAnimations
}) })
export class FuseAcademyCoursesComponent implements OnInit, OnDestroy export class FuseAcademyCoursesComponent implements OnInit, OnDestroy
{ {

18
src/app/main/content/apps/calendar/calendar.component.html
View File

@ -15,31 +15,27 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div class="toolbar" fxLayout="row" fxLayoutAlign="start center"> <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search"> <button mat-icon-button aria-label="Search" matTooltip="Search">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" <button mat-icon-button
mwlCalendarToday mwlCalendarToday
[(viewDate)]="viewDate" [(viewDate)]="viewDate"
(viewDateChange)="selectedDay = {date:$event}" (viewDateChange)="selectedDay = {date:$event}"
aria-label="Today" matTooltip="Today"> aria-label="Today" matTooltip="Today">
<!--(click)="selectedDay = viewDate"-->
<mat-icon>today</mat-icon> <mat-icon>today</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="view='day'" <button mat-icon-button (click)="view='day'" aria-label="Day" matTooltip="Day">
aria-label="Day" matTooltip="Day">
<mat-icon>view_day</mat-icon> <mat-icon>view_day</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="view='week'" <button mat-icon-button (click)="view='week'" aria-label="Week" matTooltip="Week">
aria-label="Week" matTooltip="Week">
<mat-icon>view_week</mat-icon> <mat-icon>view_week</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="view='month'" <button mat-icon-button (click)="view='month'" aria-label="Month" matTooltip="Month">
aria-label="Month" matTooltip="Month">
<mat-icon>view_module</mat-icon> <mat-icon>view_module</mat-icon>
</button> </button>
</div> </div>
@ -50,7 +46,7 @@
<div class="header-bottom" fxLayout="row" fxLayoutAlign="center center" <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">
<button mat-button class="mat-icon-button arrow" <button mat-icon-button class="arrow"
mwlCalendarPreviousView mwlCalendarPreviousView
[view]="view" [view]="view"
[(viewDate)]="viewDate" [(viewDate)]="viewDate"
@ -63,7 +59,7 @@
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }} {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
</div> </div>
<button mat-button class="mat-icon-button arrow" <button mat-icon-button class="arrow"
mwlCalendarNextView mwlCalendarNextView
[view]="view" [view]="view"
[(viewDate)]="viewDate" [(viewDate)]="viewDate"

9
src/app/main/content/apps/calendar/event-form/event-form.component.html
View File

@ -1,10 +1,8 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span> <span class="title dialog-title">{{dialogTitle}}</span>
<button mat-button class="mat-icon-button" <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
(click)="dialogRef.close()"
aria-label="Close dialog">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
@ -136,8 +134,7 @@
</button> </button>
<button *ngIf="action ==='edit'" <button *ngIf="action ==='edit'"
mat-button mat-icon-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',eventForm])" (click)="dialogRef.close(['delete',eventForm])"
aria-label="Delete" aria-label="Delete"
matTooltip="Delete"> matTooltip="Delete">

7
src/app/main/content/apps/chat/chat-view/chat-view.component.html
View File

@ -9,7 +9,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<!-- RESPONSIVE CHATS BUTTON--> <!-- RESPONSIVE CHATS BUTTON-->
<div mat-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16" <div mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
fuseMatSidenavToggler="chat-left-sidenav" fuseMatSidenavToggler="chat-left-sidenav"
aria-label="chats button"> aria-label="chats button">
<mat-icon class="s-36">chat</mat-icon> <mat-icon class="s-36">chat</mat-icon>
@ -40,8 +40,7 @@
</div> </div>
<div> <div>
<button mat-button class="mat-icon-button" [matMenuTriggerFor]="contactMenu" <button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
aria-label="more">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
@ -98,7 +97,7 @@
fxLayout="row" fxLayout="row"
fxLayoutAlign="start center"> fxLayoutAlign="start center">
<mat-form-field class="" fxFlex floatPlaceholder="never"> <mat-form-field class="" fxFlex floatLabel="never">
<textarea matInput #replyInput placeholder="Type and hit enter to send message" <textarea matInput #replyInput placeholder="Type and hit enter to send message"
ngModel name="message"></textarea> ngModel name="message"></textarea>
</mat-form-field> </mat-form-field>

2
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
View File

@ -56,7 +56,7 @@
<!-- / USER AVATAR --> <!-- / USER AVATAR -->
<div> <div>
<button mat-button class="mat-icon-button" <button mat-icon-button
[matMenuTriggerFor]="userMenu" [matMenuTriggerFor]="userMenu"
aria-label="more"> aria-label="more">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>

2
src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
View File

@ -7,7 +7,7 @@
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back"> <button mat-icon-button (click)="changeLeftSidenavView('chats')" aria-label="back">
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>

4
src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
View File

@ -9,7 +9,7 @@
<div>Contact Info</div> <div>Contact Info</div>
<button mat-button class="mat-icon-button" fuseMatSidenavToggler="chat-right-sidenav" aria-label="close"> <button mat-icon-button fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@ -36,7 +36,7 @@
<!-- CONTACT MOOD --> <!-- CONTACT MOOD -->
<mat-card> <mat-card>
<mat-form-field fxFlex> <mat-form-field class="w-100-p">
<textarea matInput placeholder="Mood" name="mood" <textarea matInput placeholder="Mood" name="mood"
[value]="contact.mood" rows="3" disabled> [value]="contact.mood" rows="3" disabled>
</textarea> </textarea>

7
src/app/main/content/apps/contacts/contact-form/contact-form.component.html
View File

@ -2,9 +2,7 @@
<mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span> <span class="title dialog-title">{{dialogTitle}}</span>
<button mat-button class="mat-icon-button" <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
(click)="dialogRef.close()"
aria-label="Close dialog">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-toolbar-row> </mat-toolbar-row>
@ -116,8 +114,7 @@
</button> </button>
<button *ngIf="action ==='edit'" <button *ngIf="action ==='edit'"
mat-button mat-icon-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',contactForm])" (click)="dialogRef.close(['delete',contactForm])"
aria-label="Delete" aria-label="Delete"
matTooltip="Delete"> matTooltip="Delete">

10
src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
View File

@ -8,11 +8,8 @@ fuse-contacts-contact-list {
box-shadow: none; box-shadow: none;
.mat-column-checkbox { .mat-column-checkbox {
flex: 0 1 48px; flex: 0 1 64px;
padding-left: 18px;
.mat-checkbox-ripple {
display: none !important; //fix for broken rendering
}
} }
.mat-column-avatar { .mat-column-avatar {
@ -26,7 +23,7 @@ fuse-contacts-contact-list {
.mat-row { .mat-row {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 8px 8px 8px 24px; padding: 8px;
.mat-cell { .mat-cell {
min-width: 0; min-width: 0;
@ -34,6 +31,7 @@ fuse-contacts-contact-list {
&.mat-column-detail-button { &.mat-column-detail-button {
flex: 0 1 auto; flex: 0 1 auto;
padding: 0 24px 0 0; padding: 0 24px 0 0;
@include media-breakpoint('gt-md') { @include media-breakpoint('gt-md') {
display: none; display: none;
} }

4
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -7,7 +7,7 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-12" <button mat-icon-button class="sidenav-toggle mr-12"
fuseMatSidenavToggler="contacts-main-sidenav" fuseMatSidenavToggler="contacts-main-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
@ -26,7 +26,7 @@
<label for="search" class="mr-8"> <label for="search" class="mr-8">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</label> </label>
<mat-form-field mat-no-float class="m-0" floatPlaceholder="never"> <mat-form-field mat-no-float class="m-0" floatLabel="never">
<input matInput [formControl]="searchInput" id="search" placeholder="Search for anything"> <input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
</mat-form-field> </mat-form-field>
</div> </div>

2
src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
View File

@ -11,7 +11,7 @@
<div> <div>
<span class="selected-contacts-count"> <span class="selected-contacts-count">
<span>{{selectedContacts.length}}</span> <span class="mr-4">{{selectedContacts.length}}</span>
<span>selected</span> <span>selected</span>
</span> </span>

4
src/app/main/content/apps/dashboards/project/project.component.html
View File

@ -666,8 +666,8 @@
<!-- Avatar Column --> <!-- Avatar Column -->
<ng-container cdkColumnDef="avatar"> <ng-container cdkColumnDef="avatar">
<mat-header-cell fxFlex="64px" *cdkHeaderCellDef></mat-header-cell> <mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell>
<mat-cell fxFlex="64px" *cdkCellDef="let contact"> <mat-cell fxFlex="96px" *cdkCellDef="let contact">
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name" <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
[src]="contact.avatar"/> [src]="contact.avatar"/>
</mat-cell> </mat-cell>

14
src/app/main/content/apps/e-commerce/order/order.component.html
View File

@ -14,7 +14,7 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button class="mr-16" mat-icon-button [routerLink]="'/apps/e-commerce/orders'"> <button mat-icon-button class="mr-16" [routerLink]="'/apps/e-commerce/orders'">
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
@ -49,7 +49,7 @@
<div class="section pb-48"> <div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center"> <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16">account_circle</mat-icon> <mat-icon class="m-0 mr-16 secondary-text">account_circle</mat-icon>
<div class="h2 secondary-text">Customer</div> <div class="h2 secondary-text">Customer</div>
</div> </div>
@ -88,7 +88,7 @@
<mat-tab-group class="addresses"> <mat-tab-group class="addresses">
<mat-tab label="Shipping Address"> <mat-tab label="Shipping Address">
<div fxFlex fxLayout="column" *fuseIfOnDom> <div fxFlex fxLayout="column">
<div class="address h4 py-24">{{order.customer.shippingAddress.address}}</div> <div class="address h4 py-24">{{order.customer.shippingAddress.address}}</div>
<agm-map class="w-100-p h-400" [zoom]="15" <agm-map class="w-100-p h-400" [zoom]="15"
[latitude]="order.customer.shippingAddress.lat" [latitude]="order.customer.shippingAddress.lat"
@ -101,7 +101,7 @@
</mat-tab> </mat-tab>
<mat-tab label="Invoice Address" fxLayout="column"> <mat-tab label="Invoice Address" fxLayout="column">
<div fxFlex fxLayout="column" *fuseIfOnDom> <div fxFlex fxLayout="column">
<div class="address h4 py-24">{{order.customer.invoiceAddress.address}}</div> <div class="address h4 py-24">{{order.customer.invoiceAddress.address}}</div>
<agm-map class="w-100-p h-400" [zoom]="15" <agm-map class="w-100-p h-400" [zoom]="15"
[latitude]="order.customer.invoiceAddress.lat" [latitude]="order.customer.invoiceAddress.lat"
@ -118,7 +118,7 @@
<div class="section pb-48"> <div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center"> <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16">access_time</mat-icon> <mat-icon class="m-0 mr-16 secondary-text">access_time</mat-icon>
<div class="h2 secondary-text">Order Status</div> <div class="h2 secondary-text">Order Status</div>
</div> </div>
@ -172,7 +172,7 @@
<div class="section pb-48"> <div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center"> <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16">attach_money</mat-icon> <mat-icon class="m-0 mr-16 secondary-text">attach_money</mat-icon>
<div class="h2 secondary-text">Payment</div> <div class="h2 secondary-text">Payment</div>
</div> </div>
@ -216,7 +216,7 @@
<div class="section pb-48"> <div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center"> <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16">local_shipping</mat-icon> <mat-icon class="m-0 mr-16 secondary-text">local_shipping</mat-icon>
<div class="h2 secondary-text">Shipping</div> <div class="h2 secondary-text">Shipping</div>
</div> </div>

2
src/app/main/content/apps/e-commerce/orders/orders.component.html
View File

@ -26,7 +26,7 @@
<label for="search" class="mr-8"> <label for="search" class="mr-8">
<mat-icon class="secondary-text">search</mat-icon> <mat-icon class="secondary-text">search</mat-icon>
</label> </label>
<mat-form-field floatPlaceholder="never" fxFlex="1 0 auto"> <mat-form-field floatLabel="never" fxFlex="1 0 auto">
<input id="search" matInput #filter placeholder="Search"> <input id="search" matInput #filter placeholder="Search">
</mat-form-field> </mat-form-field>
</div> </div>

58
src/app/main/content/apps/e-commerce/product/product.component.html
View File

@ -13,11 +13,12 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button class="mr-0 mr-sm-16" mat-icon-button [routerLink]="'/apps/e-commerce/products'"> <button mat-icon-button class="mr-0 mr-sm-16" [routerLink]="'/apps/e-commerce/products'">
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
<div class="product-image mr-8 mr-sm-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}"> <div class="product-image mr-8 mr-sm-16" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<img *ngIf="product.images[0]" [src]="product.images[0].url"> <img *ngIf="product.images[0]" [src]="product.images[0].url">
<img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'"> <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
</div> </div>
@ -64,6 +65,7 @@
<mat-tab-group> <mat-tab-group>
<mat-tab label="Basic Info"> <mat-tab label="Basic Info">
<div class="tab-content p-24" fusePerfectScrollbar> <div class="tab-content p-24" fusePerfectScrollbar>
<mat-form-field class="w-100-p"> <mat-form-field class="w-100-p">
@ -83,44 +85,46 @@
</textarea> </textarea>
</mat-form-field> </mat-form-field>
<h3 class="mb-0">Categories</h3> <mat-form-field class="w-100-p">
<mat-form-field class="w-100-p" floatPlaceholder="never">
<mat-chip-list matPrefix #categoryList <mat-chip-list #categoryList name="categories" formControlName="categories">
name="categories"
formControlName="categories">
<mat-chip *ngFor="let category of product.categories" <mat-chip *ngFor="let category of product.categories"
removable="true" (removed)="product.removeCategory(category)"> [removable]="true" (removed)="product.removeCategory(category)">
{{category}} {{category}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
<input placeholder="Categories"
[matChipInputFor]="categoryList"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="product.addCategory($event)"/>
</mat-chip-list> </mat-chip-list>
<input matInput
matChipInputAddOnBlur="true"
(matChipInputTokenEnd)="product.addCategory($event)"
placeholder="Add category..."
[matChipInputFor]="categoryList"/>
</mat-form-field> </mat-form-field>
<h3 class="mb-0">Tags</h3> <mat-form-field class="w-100-p">
<mat-form-field class="w-100-p" floatPlaceholder="never">
<mat-chip-list matPrefix #tagList <mat-chip-list #tagList name="tags" formControlName="tags">
name="tags"
formControlName="tags">
<mat-chip *ngFor="let tag of product.tags" <mat-chip *ngFor="let tag of product.tags"
removable="true" (removed)="product.removeTag(tag)"> [removable]="true" (removed)="product.removeTag(tag)">
{{tag}} {{tag}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
<input placeholder="Tags"
[matChipInputFor]="tagList"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="product.addTag($event)"/>
</mat-chip-list> </mat-chip-list>
<input matInput
matChipInputAddOnBlur="true"
(matChipInputTokenEnd)="product.addTag($event)"
placeholder="Add tag..."
[matChipInputFor]="tagList"/>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="Product Images"> <mat-tab label="Product Images">
@ -129,7 +133,8 @@
<div *ngIf="product.images.length === 0" <div *ngIf="product.images.length === 0"
class="product-image" fxlayout="row" fxLayoutAlign="center center"> class="product-image" fxlayout="row" fxLayoutAlign="center center">
<img class="media" [src]="'assets/images/ecommerce/product-image-placeholder.png'"> <img class="media"
[src]="'assets/images/ecommerce/product-image-placeholder.png'">
</div> </div>
<div *ngFor="let image of product.images"> <div *ngFor="let image of product.images">
@ -175,7 +180,8 @@
formControlName="comparedPrice" formControlName="comparedPrice"
placeholder="Compared Price" type="number"> placeholder="Compared Price" type="number">
<span matPrefix>$&nbsp;</span> <span matPrefix>$&nbsp;</span>
<mat-hint align="start">Add a compare price to show next to the real price</mat-hint> <mat-hint align="start">Add a compare price to show next to the real price
</mat-hint>
</mat-form-field> </mat-form-field>
</div> </div>

2
src/app/main/content/apps/e-commerce/products/products.component.html
View File

@ -26,7 +26,7 @@
<label for="search" class="mr-8"> <label for="search" class="mr-8">
<mat-icon class="secondary-text">search</mat-icon> <mat-icon class="secondary-text">search</mat-icon>
</label> </label>
<mat-form-field floatPlaceholder="never" fxFlex="1 0 auto"> <mat-form-field floatLabel="never" fxFlex="1 0 auto">
<input id="search" matInput #filter placeholder="Search"> <input id="search" matInput #filter placeholder="Search">
</mat-form-field> </mat-form-field>
</div> </div>

2
src/app/main/content/apps/file-manager/file-manager.component.html
View File

@ -26,7 +26,7 @@
</div> </div>
<div class="right-side" fxLayout="row"> <div class="right-side" fxLayout="row">
<button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search"> <button mat-icon-button aria-label="Search" matTooltip="Search">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</div> </div>

4
src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
View File

@ -3,7 +3,7 @@
<div class="toolbar" fxLayout="row" fxLayoutAlign="end center"> <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">
<button mat-icon-button class="mat-icon-button" matTooltip="Delete"> <button mat-icon-button matTooltip="Delete">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
@ -11,7 +11,7 @@
<mat-icon>file_download</mat-icon> <mat-icon>file_download</mat-icon>
</button> </button>
<button mat-icon-button class="mat-icon-button" aria-label="More" matTooltip="More"> <button mat-icon-button aria-label="More" matTooltip="More">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>

11
src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.html
View File

@ -1,10 +1,8 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">New Message</span> <span class="title dialog-title">New Message</span>
<button mat-button class="mat-icon-button" <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
(click)="dialogRef.close()"
aria-label="Close dialog">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
@ -100,10 +98,7 @@
</button> </button>
</div> </div>
<button mat-button <button mat-icon-button (click)="dialogRef.close(['delete',composeForm])" aria-label="Delete"
class="mat-icon-button"
(click)="dialogRef.close(['delete',composeForm])"
aria-label="Delete"
matTooltip="Delete"> matTooltip="Delete">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>

9
src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<mat-icon class="s-128 mb-16 select-message-icon"> <mat-icon class="s-128 mb-16 select-message-icon hint-text">
email email
</mat-icon> </mat-icon>
<span class="select-message-text hint-text"> <span class="select-message-text hint-text">
@ -24,12 +24,12 @@
</div> </div>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"> <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
<mat-icon *ngIf="mail.starred">star</mat-icon> <mat-icon *ngIf="mail.starred">star</mat-icon>
<mat-icon *ngIf="!mail.starred">star_outline</mat-icon> <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"> <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
<mat-icon *ngIf="mail.important">label</mat-icon> <mat-icon *ngIf="mail.important">label</mat-icon>
<mat-icon *ngIf="!mail.important">label_outline</mat-icon> <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
</button> </button>
@ -87,8 +87,7 @@
</div> </div>
</div> </div>
<button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button" <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()">
(click)="$event.stopPropagation()">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>

2
src/app/main/content/apps/mail-ngrx/mail.component.html
View File

@ -21,7 +21,7 @@
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav" fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav"> fxHide.gt-md aria-label="Toggle Sidenav">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

8
src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
View File

@ -9,7 +9,7 @@
<div class="account" fxLayout="column"> <div class="account" fxLayout="column">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<mat-form-field floatPlaceholder="never"> <mat-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Mail Selection" <mat-select class="account-selection" placeholder="Mail Selection"
[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">
@ -48,7 +48,8 @@
<div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div> <div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div>
<div class="nav-item" *ngFor="let filter of (filters$ | async)"> <div class="nav-item" *ngFor="let filter of (filters$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
routerLinkActive="active">
<mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span> <span>{{filter.title}}</span>
</a> </a>
@ -57,7 +58,8 @@
<div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div> <div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div>
<div class="nav-item" *ngFor="let label of (labels$ | async)"> <div class="nav-item" *ngFor="let label of (labels$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle"
routerLinkActive="active">
<mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon> <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
<span>{{label.title}}</span> <span>{{label.title}}</span>
</a> </a>

10
src/app/main/content/apps/mail/dialogs/compose/compose.component.html
View File

@ -1,10 +1,8 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">New Message</span> <span class="title dialog-title">New Message</span>
<button mat-button class="mat-icon-button" <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
(click)="dialogRef.close()"
aria-label="Close dialog">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
@ -105,9 +103,7 @@
</button> </button>
</div> </div>
<button mat-button <button mat-icon-button (click)="dialogRef.close(['delete',composeForm])"
class="mat-icon-button"
(click)="dialogRef.close(['delete',composeForm])"
aria-label="Delete" aria-label="Delete"
matTooltip="Delete"> matTooltip="Delete">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>

10
src/app/main/content/apps/mail/mail-details/mail-details.component.html
View File

@ -1,5 +1,6 @@
<div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}"> <mat-icon class="s-128 mb-16 select-message-icon hint-text" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
email email
</mat-icon> </mat-icon>
<span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}"> <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">
@ -25,12 +26,12 @@
</div> </div>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"> <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
<mat-icon *ngIf="mail.starred">star</mat-icon> <mat-icon *ngIf="mail.starred">star</mat-icon>
<mat-icon *ngIf="!mail.starred">star_outline</mat-icon> <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"> <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
<mat-icon *ngIf="mail.important">label</mat-icon> <mat-icon *ngIf="mail.important">label</mat-icon>
<mat-icon *ngIf="!mail.important">label_outline</mat-icon> <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
</button> </button>
@ -88,8 +89,7 @@
</div> </div>
</div> </div>
<button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button" <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()">
(click)="$event.stopPropagation()">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>

2
src/app/main/content/apps/mail/mail.component.html
View File

@ -21,7 +21,7 @@
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav" fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav"> fxHide.gt-md aria-label="Toggle Sidenav">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -9,7 +9,7 @@
<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-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Mail Selection" <mat-select class="account-selection" placeholder="Mail Selection"
[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">

61
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
View File

@ -35,7 +35,8 @@
<mat-menu #labelsMenu="matMenu" [overlapTrigger]="false" class="scrumboard-labels-menu"> <mat-menu #labelsMenu="matMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
<fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector> <fuse-scrumboard-label-selector [card]="card"
(onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
</mat-menu> </mat-menu>
</div> </div>
@ -49,7 +50,8 @@
</button> </button>
<mat-menu #membersMenu="matMenu" [overlapTrigger]="false"> <mat-menu #membersMenu="matMenu" [overlapTrigger]="false">
<div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()"> <div fxFlex fxLayout="column" class="scrumboard-members-menu"
(click)="$event.stopPropagation()">
<mat-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1" <mat-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
*ngFor="let member of board.members" *ngFor="let member of board.members"
(change)="toggleInArray(member.id, card.idMembers);updateCard()"> (change)="toggleInArray(member.id, card.idMembers);updateCard()">
@ -72,20 +74,25 @@
<!-- CHECKLIST --> <!-- CHECKLIST -->
<div class="due-date " fxFlex="0 1 auto"> <div class="due-date " fxFlex="0 1 auto">
<button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()"> <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu"
#checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
<mat-icon>check_box</mat-icon> <mat-icon>check_box</mat-icon>
</button> </button>
<mat-menu #checklistMenu="matMenu" [overlapTrigger]="false"> <mat-menu #checklistMenu="matMenu" [overlapTrigger]="false">
<form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()" <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)"
(click)="$event.stopPropagation()"
fxLayout="column" fxLayoutAlign="start end"> fxLayout="column" fxLayoutAlign="start end">
<mat-form-field floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex> <mat-form-field floatLabel="never" (click)="$event.stopPropagation()" fxFlex>
<input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required> <input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel"
name="checklistTitle" placeholder="Checklist title" required>
</mat-form-field> </mat-form-field>
<button mat-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button> <button mat-raised-button class="mat-accent" aria-label="Add Checklist"
[disabled]="!newChecklistForm.valid">Add Checklist
</button>
</form> </form>
</mat-menu> </mat-menu>
@ -127,7 +134,9 @@
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<!-- / CLOSE DIALOG BUTTON --> <!-- / CLOSE DIALOG BUTTON -->
</div> </div>
</mat-toolbar> </mat-toolbar>
<div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar> <div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
@ -146,7 +155,7 @@
<!-- DUE DATE --> <!-- DUE DATE -->
<div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center"> <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
<mat-form-field floatPlaceholder="never"> <mat-form-field floatLabel="never">
<input matInput [matDatepicker]="picker" [(ngModel)]="card.due" placeholder="Choose a due date"> <input matInput [matDatepicker]="picker" [(ngModel)]="card.due" placeholder="Choose a due date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
@ -164,7 +173,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<mat-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</mat-icon> <mat-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</mat-icon>
<div class="card-name"> <div class="card-name">
<mat-form-field floatPlaceholder="never" fxFlex> <mat-form-field floatLabel="never" class="w-100-p">
<input matInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()"> <input matInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
</mat-form-field> </mat-form-field>
</div> </div>
@ -173,8 +182,9 @@
<!-- DESCRIPTION --> <!-- DESCRIPTION -->
<div class="description"> <div class="description">
<mat-form-field fxFlex> <mat-form-field class="w-100-p">
<textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1" mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea> <textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1"
mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<!-- / DESCRIPTION --> <!-- / DESCRIPTION -->
@ -198,7 +208,9 @@
[ngClass]="board.labels | getById:labelId:'color'" [ngClass]="board.labels | getById:labelId:'color'"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<span>{{board.labels|getById:labelId:'name'}}</span> <span>{{board.labels|getById:labelId:'name'}}</span>
<mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon> <mat-icon class="ml-8 s-16 chip-remove"
(click)="toggleInArray(labelId, card.idLabels);updateCard()">close
</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
</div> </div>
@ -215,7 +227,9 @@
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'" <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
[matTooltip]="board.members | getById:memberId:'name'"> [matTooltip]="board.members | getById:memberId:'name'">
<mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</mat-icon> <mat-icon class="ml-8 s-16 chip-remove"
(click)="toggleInArray(memberId, card.idMembers);updateCard()">close
</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
</div> </div>
@ -257,7 +271,8 @@
<span class="attachment-time">{{item.time}}</span> <span class="attachment-time">{{item.time}}</span>
<div> <div>
<button mat-raised-button class="attachment-actions-button" [matMenuTriggerFor]="attachmentActionsMenu"> <button mat-raised-button class="attachment-actions-button"
[matMenuTriggerFor]="attachmentActionsMenu">
<span fxLayout="row" fxLayoutAlign="center center"> <span fxLayout="row" fxLayoutAlign="center center">
<span>Actions</span> <span>Actions</span>
<mat-icon class="s-20">arrow_drop_down</mat-icon> <mat-icon class="s-20">arrow_drop_down</mat-icon>
@ -313,7 +328,8 @@
<div> <div>
<button mat-icon-button class="checklist-actions-button" [matMenuTriggerFor]="checklistActionsMenu"> <button mat-icon-button class="checklist-actions-button"
[matMenuTriggerFor]="checklistActionsMenu">
<mat-icon class="s-20">more_vert</mat-icon> <mat-icon class="s-20">more_vert</mat-icon>
</button> </button>
<mat-menu #checklistActionsMenu="matMenu"> <mat-menu #checklistActionsMenu="matMenu">
@ -341,7 +357,8 @@
<div class="check-items"> <div class="check-items">
<div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center"> <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row"
fxLayoutAlign="space-between center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-checkbox [(ngModel)]="checkItem.checked" <mat-checkbox [(ngModel)]="checkItem.checked"
@ -353,21 +370,24 @@
</mat-form-field> </mat-form-field>
</div> </div>
<button mat-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)"> <button mat-icon-button class="checklist-actions-button"
(click)="removeChecklistItem(checkItem, checklist)">
<mat-icon class="s-20">delete</mat-icon> <mat-icon class="s-20">delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
<form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form" <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)"
name="newCheckItemForm" class="new-check-item-form"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<mat-icon class="s-20">add</mat-icon> <mat-icon class="s-20">add</mat-icon>
<mat-form-field class="no-errors-spacer mx-12" fxFlex> <mat-form-field class="no-errors-spacer mx-12" fxFlex>
<input matInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off"> <input matInput ngModel #checkItem="ngModel" name="checkItem"
placeholder="Add an item" autocomplete="off">
</mat-form-field> </mat-form-field>
</div> </div>
@ -444,7 +464,8 @@
</div> </div>
<div class="section-content"> <div class="section-content">
<div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities"> <div class="activity" fxLayout="row" fxLayoutAlign="start center"
*ngFor="let activity of card.activities">
<img class="activity-member-avatar" <img class="activity-member-avatar"
[src]="board.members| getById:activity.idMember:'avatar'"> [src]="board.members| getById:activity.idMember:'avatar'">
<div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div> <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>

2
src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
View File

@ -11,7 +11,7 @@
<form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column"> <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
<mat-form-field fxFlex floatPlaceholder="never"> <mat-form-field fxFlex floatLabel="never">
<input #nameInput matInput formControlName="name" placeholder="Card title" autocomplete="off" required> <input #nameInput matInput formControlName="name" placeholder="Card title" autocomplete="off" required>
</mat-form-field> </mat-form-field>

4
src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -3,12 +3,12 @@
class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg"> class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="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>
</div> </div>
<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-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Todo Selection" <mat-select class="account-selection" placeholder="Todo Selection"
[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">

12
src/app/main/content/apps/todo/todo-details/todo-details.component.html
View File

@ -11,26 +11,26 @@
<div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center"> <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
<button mat-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)" <button mat-button class="toggle-complete-button" (click)="toggleCompleted($event)"
aria-label="Toggle completed" fxFlex="0 1 auto"> aria-label="Toggle completed" fxFlex="0 1 auto">
<mat-icon *ngIf="todo.completed">check_box</mat-icon> <mat-icon *ngIf="todo.completed">check_box</mat-icon>
<mat-icon *ngIf="!todo.completed">check_box_outline_blank</mat-icon> <mat-icon *ngIf="!todo.completed">check_box_outline_blank</mat-icon>
<span>Mark as Done</span> <span class="ml-8">Mark as Done</span>
</button> </button>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button" (click)="toggleDeleted($event)" aria-label="Toggle delete"> <button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
<mat-icon *ngIf="todo.deleted">delete_forever</mat-icon> <mat-icon *ngIf="todo.deleted">delete_forever</mat-icon>
<mat-icon *ngIf="!todo.deleted">delete</mat-icon> <mat-icon *ngIf="!todo.deleted">delete</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"> <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
<mat-icon *ngIf="todo.important">error</mat-icon> <mat-icon *ngIf="todo.important">error</mat-icon>
<mat-icon *ngIf="!todo.important">error_outline</mat-icon> <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"> <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
<mat-icon *ngIf="todo.starred">star</mat-icon> <mat-icon *ngIf="todo.starred">star</mat-icon>
<mat-icon *ngIf="!todo.starred">star_outline</mat-icon> <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
</button> </button>
@ -53,7 +53,7 @@
<form [formGroup]="todoForm" (submit)="addTodo()"> <form [formGroup]="todoForm" (submit)="addTodo()">
<mat-form-field class="title mt-8" floatPlaceholder="never" fxFill> <mat-form-field class="title mt-8" floatLabel="never" fxFill>
<textarea matInput <textarea matInput
#titleInput #titleInput
name="title" name="title"

1
src/app/main/content/apps/todo/todo-details/todo-details.component.scss
View File

@ -14,7 +14,6 @@
.actions { .actions {
min-width: 88px; min-width: 88px;
} }
} }
.todo-content { .todo-content {

8
src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
View File

@ -33,20 +33,20 @@
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button" (click)="toggleImportant($event)" <button mat-icon-button (click)="toggleImportant($event)"
aria-label="Toggle important" fxHide.xs> aria-label="Toggle important" fxHide.xs>
<mat-icon *ngIf="todo.important">error</mat-icon> <mat-icon *ngIf="todo.important">error</mat-icon>
<mat-icon *ngIf="!todo.important">error_outline</mat-icon> <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
</button> </button>
<button mat-button class="mat-icon-button" (click)="toggleStar($event)" <button mat-icon-button (click)="toggleStar($event)"
aria-label="Toggle star" fxHide.xs> aria-label="Toggle star" fxHide.xs>
<mat-icon *ngIf="todo.starred">star</mat-icon> <mat-icon *ngIf="todo.starred">star</mat-icon>
<mat-icon *ngIf="!todo.starred">star_outline</mat-icon> <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
</button> </button>
<button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button" <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()"
(click)="$event.stopPropagation();" fxHide.xs> fxHide.xs>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>

4
src/app/main/content/apps/todo/todo.component.html
View File

@ -21,7 +21,7 @@
<div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav" fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav"> fxHide.gt-md aria-label="Toggle Sidenav">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
@ -29,7 +29,7 @@
<div class="search" flex fxLayout="row" fxLayoutAlign="start center"> <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
<input [formControl]="searchInput" placeholder="Search for an todo" fxFlex> <input [formControl]="searchInput" placeholder="Search for a task" fxFlex>
</div> </div>
</div> </div>

2
src/app/main/content/components/angular-material/angular-material.component.html
View File

@ -15,7 +15,7 @@
</div> </div>
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/" target="_blank"> <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/" target="_blank">
<mat-icon>link</mat-icon> <mat-icon class="mr-8">link</mat-icon>
<span>Reference</span> <span>Reference</span>
</a> </a>
</div> </div>

4
src/app/main/content/components/angular-material/example-viewer/example-viewer.html
View File

@ -64,8 +64,8 @@
</div> </div>
<div class="example-viewer-body" [fxHide]="showSource"> <div class="example-viewer-body" [fxHide]="showSource">
<!--<ng-template [portalHost]="selectedPortal"></ng-template>--> <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
<!--<ng-template [cdkPortalHost]="selectedPortal"></ng-template>--> <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
<div #previewContainer></div> <div #previewContainer></div>
</div> </div>
</div> </div>

2
src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
View File

@ -35,7 +35,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8" <button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md> fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>

2
src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -41,7 +41,7 @@
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav" fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
View File

@ -35,7 +35,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8" <button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md> fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>

2
src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
View File

@ -41,7 +41,7 @@
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav" fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
View File

@ -14,7 +14,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8" <button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md> fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>

2
src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -20,7 +20,7 @@
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-right-sidenav" fuseMatSidenavToggler="carded-right-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
View File

@ -14,7 +14,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8" <button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md> fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>

2
src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
View File

@ -20,7 +20,7 @@
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-right-sidenav" fuseMatSidenavToggler="carded-right-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
View File

@ -17,7 +17,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-left-sidenav-2" fuseMatSidenavToggler="simple-left-sidenav-2"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
View File

@ -3,7 +3,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-left-sidenav-3" fuseMatSidenavToggler="simple-left-sidenav-3"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
View File

@ -21,7 +21,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-left-sidenav" fuseMatSidenavToggler="simple-left-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
View File

@ -8,7 +8,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-right-sidenav-2" fuseMatSidenavToggler="simple-right-sidenav-2"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
View File

@ -3,7 +3,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-right-sidenav-3" fuseMatSidenavToggler="simple-right-sidenav-3"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

2
src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
View File

@ -8,7 +8,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-right-sidenav" fuseMatSidenavToggler="simple-right-sidenav"
fxHide.gt-md> fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>

4
src/app/main/navbar/navbar.component.html
View File

@ -9,12 +9,12 @@
<span class="logo-text">FUSE</span> <span class="logo-text">FUSE</span>
</div> </div>
<button mat-button class="toggle-button-navbar mat-icon-button" <button mat-icon-button class="toggle-button-navbar"
(click)="toggleSidebarFolded()" fxHide.lt-lg> (click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<button mat-button class="toggle-button-navbar mat-icon-button" <button mat-icon-button class="toggle-button-navbar"
(click)="toggleSidebarOpened()" fxHide.gt-md> (click)="toggleSidebarOpened()" fxHide.gt-md>
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>

4
src/app/main/toolbar/toolbar.component.html
View File

@ -6,7 +6,7 @@
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="toggle-button-navbar mat-icon-button" <button mat-icon-button class="toggle-button-navbar"
*ngIf="!noNav" *ngIf="!noNav"
(click)="toggleSidebarOpened('navbar')" fxHide.gt-md> (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
@ -91,7 +91,7 @@
<div class="toolbar-separator" fxHide fxShow.gt-xs></div> <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
<button mat-icon-button <button mat-icon-button
class="mat-icon-button quick-panel-toggle-button" class="quick-panel-toggle-button"
fuseMatSidenavToggler="quick-panel" fuseMatSidenavToggler="quick-panel"
aria-label="Toggle quick panel"> aria-label="Toggle quick panel">
<mat-icon class="icon">format_list_bulleted</mat-icon> <mat-icon class="icon">format_list_bulleted</mat-icon>

2
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
View File

@ -4,7 +4,7 @@
*ngFor="let fruit of fruits" *ngFor="let fruit of fruits"
[selectable]="selectable" [selectable]="selectable"
[removable]="removable" [removable]="removable"
(remove)="remove(fruit)"> (removed)="remove(fruit)">
{{fruit.name}} {{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip> </mat-chip>