Merge remote-tracking branch 'origin/master'

This commit is contained in:
mustafahlvc 2017-09-22 16:18:24 +03:00
commit 21c96c76da
50 changed files with 210 additions and 311 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.0.6", "version": "1.1.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.0.6", "version": "1.1.0",
"license": "", "license": "",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",

View File

@ -4,85 +4,74 @@
<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div> <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16"> <div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
<button md-icon-button class="close-button" (click)="closeBar()"> <button md-icon-button class="close-button" (click)="closeBar()">
<md-icon>close</md-icon> <md-icon>close</md-icon>
</button> </button>
<md-list> <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
<h3 md-subheader>Navigation:</h3>
<md-list-item> <h3>Navigation:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()" <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button> <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button> <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button> <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item>
<h3 md-subheader>Toolbar:</h3> <h3 class="mt-24">Toolbar:</h3>
<md-list-item> <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button> <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button> <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item>
<h3 md-subheader>Footer:</h3> <h3 class="mt-24">Footer:</h3>
<md-list-item> <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button> <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button> <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item>
<h3 md-subheader>Layout Mode:</h3> <h3 class="mt-24">Layout Mode:</h3>
<md-list-item> <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button> <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button> <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item>
<md-divider></md-divider> <md-divider></md-divider>
<h3 md-subheader>Colors:</h3> <h3>Colors:</h3>
<div class="colors">
<md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Toolbar Color</h4> <h4 class="mr-8">Toolbar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker> (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div> </div>
</md-list-item>
<md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Navigation Bar Color</h4> <h4 class="mr-8">Navigation Bar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker> (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div> </div>
</md-list-item>
<md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Footer Color</h4> <h4 class="mr-8">Footer Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker> (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div> </div>
</md-list-item>
</div>
<md-divider></md-divider> <md-divider></md-divider>
<h3 md-subheader>Animation:</h3> <h3>Router Animation:</h3>
<md-list-item>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Router Animation</h4>
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation"> <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<md-option value="none"> <md-option value="none">
None None
@ -103,8 +92,7 @@
Fade in Fade in
</md-option> </md-option>
</md-select> </md-select>
</div>
</md-list-item>
</md-list> </div>
</div> </div>

View File

@ -26,11 +26,14 @@
width: 360px; width: 360px;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
z-index: 999; z-index: 999;
max-width: 80vw; max-height: calc(100vh - 200px);
max-height: calc(100vh - 180px); padding: 24px;
overflow: auto; overflow: auto;
@include media-breakpoint-down('xs') { @include media-breakpoint-down('xs') {
top: -120px;
max-height: calc(100vh - 100px);
width: 90vw;
} }
.close-button { .close-button {
@ -38,6 +41,23 @@
top: 8px; top: 8px;
right: 8px; right: 8px;
} }
h3 {
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.mat-divider{
display: block !important;
width: 100%;
margin: 24px 0 16px 0;
}
.colors {
display: block !important;
width: 100%;
}
} }
.theme-options-panel-overlay { .theme-options-panel-overlay {
@ -50,6 +70,10 @@
bottom: 0; bottom: 0;
z-index: 998; z-index: 998;
@include media-breakpoint-down('sm') {
background: rgba(0, 0, 0, 0.37);
}
&.hidden { &.hidden {
display: none; display: none;
} }

View File

@ -273,6 +273,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
// Fullwidth // Fullwidth
&.fullwidth {
overflow: auto;
}
&.fullwidth, &.fullwidth,
&.inner-sidenav { &.inner-sidenav {
min-height: 100%; min-height: 100%;
@ -445,7 +449,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.simple { &.simple {
&.fullwidth { &.fullwidth {
overflow: visible;
> .content { > .content {
flex: 1 0 auto; flex: 1 0 auto;

View File

@ -26,8 +26,8 @@
} }
.cal-open-day-events { .cal-open-day-events {
background: whitesmoke; background: #455A64;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13); box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -44,11 +44,11 @@
transition: box-shadow 300ms ease; transition: box-shadow 300ms ease;
&:first-of-type { &:first-of-type {
margin-top: 24px; margin-top: 16px;
} }
&:last-of-type { &:last-of-type {
margin-bottom: 24px; margin-bottom: 16px;
} }
&:hover { &:hover {

View File

@ -66,7 +66,7 @@
</md-form-field> </md-form-field>
<md-input-container class="no-errors-spacer" fxFlex md-no-float> <md-input-container class="no-errors-spacer" fxFlex md-no-float>
<input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time"> <input mdInput placeholder="Start Time">
</md-input-container> </md-input-container>
</div> </div>
@ -80,7 +80,7 @@
</md-form-field> </md-form-field>
<md-input-container class="no-errors-spacer" fxFlex md-no-float> <md-input-container class="no-errors-spacer" fxFlex md-no-float>
<input mdInput ng-model="calendarEvent.endTime" placeholder="End Time"> <input mdInput placeholder="End Time">
</md-input-container> </md-input-container>
</div> </div>

View File

@ -28,7 +28,7 @@
> .mat-sidenav-content, > .mat-sidenav-content,
> .mat-drawer-content { > .mat-drawer-content {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 1 auto;
min-height: 100%; min-height: 100%;
height: auto; height: auto;
} }

View File

@ -151,7 +151,6 @@
</div> </div>
<button md-button class="contact" <button md-button class="contact"
ng-show="chatSearch"
*ngFor="let contact of contacts| filter: searchText" *ngFor="let contact of contacts| filter: searchText"
(click)="getChat(contact.id)" (click)="getChat(contact.id)"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">

View File

@ -43,7 +43,7 @@
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side" <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md"> fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-sm">
<fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav> <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>

View File

@ -1,13 +1,13 @@
<div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24"> <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24">
<div class="close-button-wrapper" fxFlex="220px" (click)="deselectAll()"> <div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()">
<button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center"> <button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center">
<md-icon class="mr-8">arrow_back</md-icon> <md-icon class="mr-8">arrow_back</md-icon>
<span class="text-uppercase">Back</span> <span class="text-uppercase">Back</span>
</button> </button>
</div> </div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutAlign.gt-sm="space-between center">
<div> <div>
<span class="selected-contacts-count"> <span class="selected-contacts-count">

View File

@ -11,7 +11,7 @@
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
@include media-breakpoint(gt-md) { @include media-breakpoint(gt-sm) {
padding: 24px 4px 24px 24px; padding: 24px 4px 24px 24px;
} }
@ -21,7 +21,7 @@
flex: 0 1 auto; flex: 0 1 auto;
padding: 0; padding: 0;
@include media-breakpoint(gt-md) { @include media-breakpoint(gt-sm) {
@include mat-elevation(4); @include mat-elevation(4);
} }

View File

@ -79,7 +79,8 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -121,7 +122,8 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -163,7 +165,8 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -204,7 +207,8 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>

View File

@ -21,7 +21,7 @@
type="email"> type="email">
</md-input-container> </md-input-container>
<md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}"> <md-input-container>
<input mdInput name="to" <input mdInput name="to"
placeholder="To" placeholder="To"
formControlName="to" formControlName="to"

View File

@ -85,7 +85,7 @@
</div> </div>
<button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button" <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
ng-click="$mdOpenMenu($event)"> (click)="$event.stopPropagation()">
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>

View File

@ -386,7 +386,6 @@
<div class="section-content"> <div class="section-content">
<form name="cardCommentForm" <form name="cardCommentForm"
#newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)" #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate> class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
<div fxLayout="row"> <div fxLayout="row">

View File

@ -5,6 +5,7 @@
#boards { #boards {
width: 100%; width: 100%;
overflow: auto;
.board-list { .board-list {
padding: 32px 0; padding: 32px 0;

View File

@ -1,16 +1,21 @@
<div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box</md-icon> <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
<span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a todo</span> [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
</md-icon>
<span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
a todo
</span>
</div> </div>
<div *ngIf="todo"> <div *ngIf="todo">
<div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center"> <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
<button md-button class="mat-icon-button toggle-complete-button" (click)="toggleCompleted($event)" <button md-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
aria-label="Toggle completed" fxFlex="0 1 auto"> aria-label="Toggle completed" fxFlex="0 1 auto">
<md-icon *ngIf="todo.completed">check_box</md-icon> <md-icon *ngIf="todo.completed">check_box</md-icon>
<md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon> <md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon>
<span>Mark as Done</span>
</button> </button>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
@ -55,6 +60,8 @@
formControlName="title" formControlName="title"
placeholder="Title" placeholder="Title"
mdTextareaAutosize mdTextareaAutosize
mdAutosizeMinRows="1"
mdAutosizeMaxRows="2"
required> required>
</textarea> </textarea>
</md-input-container> </md-input-container>
@ -68,9 +75,9 @@
</div> </div>
</div> </div>
<div fxFlexFill fxLayout="row"> <div class="dates" fxFlexFill fxLayout="column" fxLayout.gt-xs="row">
<md-form-field class="mr-24" fxFlex> <md-form-field class="mr-sm-24" fxFlex>
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date"> <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle> <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
<md-datepicker #startDatePicker></md-datepicker> <md-datepicker #startDatePicker></md-datepicker>
@ -85,14 +92,16 @@
</div> </div>
<md-input-container class="" fxFill> <md-input-container class="" fxFill>
<textarea mdInput <textarea mdInput #notes
name="notes" name="notes"
formControlName="notes" formControlName="notes"
placeholder="Notes" placeholder="Notes"
md-maxlength="500" maxlength="500"
mdTextareaAutosize mdTextareaAutosize
mdAutosizeMinRows="6"> mdAutosizeMinRows="1"
mdAutosizeMaxRows="6">
</textarea> </textarea>
<md-hint align="end">{{notes.value.length}} / 500</md-hint>
</md-input-container> </md-input-container>
<button *ngIf="formType === 'new'" <button *ngIf="formType === 'new'"

View File

@ -8,6 +8,8 @@
padding: 24px; padding: 24px;
.todo-header { .todo-header {
padding-bottom: 24px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.actions { .actions {
@ -38,74 +40,10 @@
} }
} }
.to { .dates {
color: rgba(0, 0, 0, 0.54);
.to-text { .mat-form-field {
margin-right: 4px; width: auto !important;
text-transform: lowercase;
}
}
.info {
padding-bottom: 16px;
.avatar {
margin-right: 16px;
background-color: mat-color($accent);
}
.name {
margin-right: 8px;
font-weight: 500;
}
.toggle-details {
user-select: none;
text-decoration: underline;
padding-top: 16px;
cursor: pointer;
font-weight: 500;
}
.details {
padding-top: 8px;
.title {
font-weight: 500;
margin-right: 6px;
}
.detail {
color: rgba(0, 0, 0, 0.54);
}
}
}
}
.todo-attachments {
padding: 24px 0;
border-top: 1px solid rgba(0, 0, 0, 0.12);
.title {
margin-bottom: 16px;
font-weight: 500;
}
.attachment {
.preview {
width: 100px;
margin: 0 16px 8px 0;
}
.link {
margin-bottom: 2px;
}
.size {
font-size: 11px;
} }
} }
} }

View File

@ -1,18 +1,16 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="handle mr-16" ngxDragHandle (click)="$event.stopPropagation()" fxFlex="0 1 auto" fxHide.xs> <md-icon class="handle mr-16" ngxDragHandle fxFlex="0 1 auto" fxHide.xs>
drag_handle drag_handle
</md-icon> </md-icon>
<md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
(click)="$event.stopPropagation()" class="mr-16" fxFlex="0 1 auto">
class="mr-16"
fxFlex="0 1 auto">
</md-checkbox> </md-checkbox>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<div class="info" fxFlex FlexLayout="column"> <div class="info" fxFlex fxFlexLayout="column">
<div class="title"> <div class="title">
{{todo.title}} {{todo.title}}
@ -25,9 +23,7 @@
<div class="tags" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap> <div class="tags" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
<div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags"> <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
<div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div> <div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
<div class="tag-label">{{tags | getById:tagId:'title'}}</div> <div class="tag-label">{{tags | getById:tagId:'title'}}</div>
</div> </div>
@ -37,20 +33,20 @@
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important" <button md-button class="mat-icon-button" (click)="toggleImportant($event)"
fxHide.xs> aria-label="Toggle important" fxHide.xs>
<md-icon *ngIf="todo.important">error</md-icon> <md-icon *ngIf="todo.important">error</md-icon>
<md-icon *ngIf="!todo.important">error_outline</md-icon> <md-icon *ngIf="!todo.important">error_outline</md-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star" <button md-button class="mat-icon-button" (click)="toggleStar($event)"
fxHide.xs> aria-label="Toggle star" fxHide.xs>
<md-icon *ngIf="todo.starred">star</md-icon> <md-icon *ngIf="todo.starred">star</md-icon>
<md-icon *ngIf="!todo.starred">star_outline</md-icon> <md-icon *ngIf="!todo.starred">star_outline</md-icon>
</button> </button>
<button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button" <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
ng-click="$mdOpenMenu($event)" fxHide.xs> (click)="$event.stopPropagation();" fxHide.xs>
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>

View File

@ -78,40 +78,34 @@ export class FuseTodoListItemComponent implements OnInit, OnDestroy
/** /**
* Toggle star * Toggle star
* @param event
*/ */
toggleStar(event) toggleStar(event)
{ {
event.stopPropagation(); event.stopPropagation();
this.todo.toggleStar(); this.todo.toggleStar();
this.todoService.updateTodo(this.todo); this.todoService.updateTodo(this.todo);
} }
/** /**
* Toggle Important * Toggle Important
* @param event
*/ */
toggleImportant(event) toggleImportant(event)
{ {
event.stopPropagation(); event.stopPropagation();
this.todo.toggleImportant(); this.todo.toggleImportant();
this.todoService.updateTodo(this.todo); this.todoService.updateTodo(this.todo);
} }
/** /**
* Toggle Completed * Toggle Completed
* @param event
*/ */
toggleCompleted(event) toggleCompleted(event)
{ {
event.stopPropagation(); event.stopPropagation();
this.todo.toggleCompleted(); this.todo.toggleCompleted();
this.todoService.updateTodo(this.todo); this.todoService.updateTodo(this.todo);
} }
} }

View File

@ -5,4 +5,5 @@
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
padding: 0; padding: 0;
border-right: 1px solid rgba(0, 0, 0, .12);
} }

View File

@ -39,6 +39,10 @@
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
fuse-todo-list {
border-right: 0;
}
fuse-todo-list, fuse-todo-list,
fuse-todo-details { fuse-todo-details {
flex: 1 0 100%; flex: 1 0 100%;

View File

@ -381,8 +381,6 @@ export class TodoService implements Resolve<any>
this.getTodos().then(todos => { this.getTodos().then(todos => {
this.setCurrentTodo(todo.id);
resolve(todos); resolve(todos);
}, reject); }, reject);

View File

@ -45,7 +45,7 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
ng-click="flipWidget()" aria-label="Flip widget"> aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -86,7 +86,7 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
ng-click="flipWidget()" aria-label="Flip widget"> aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>

View File

@ -5,7 +5,7 @@
<div id="forgot-password-form"> <div id="forgot-password-form">
<div class="logo"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">RECOVER YOUR PASSWORD</div> <div class="title">RECOVER YOUR PASSWORD</div>

View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

View File

@ -1,8 +1,9 @@
<div id="login" fxLayout="row" fxLayoutAlign="start"> <div id="login" fxLayout="row" fxLayoutAlign="start">
<div id="login-intro" fxFlex fxHide fxShow.gt-xs> <div id="login-intro" fxFlex fxHide fxShow.gt-xs>
<div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}"> <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}"> <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
@ -13,6 +14,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
</div> </div>
</div> </div>
<div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}"> <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">

View File

@ -17,15 +17,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin-bottom: 32px; margin-bottom: 32px;
color: #FFFFFF;
border-radius: 2px;
text-align: center;
background: mat-color($accent);
} }
.title { .title {

View File

@ -3,8 +3,9 @@
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> <div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo md-accent-bg">
<span>F</span> <div class="logo">
<img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">LOGIN TO YOUR ACCOUNT</div> <div class="title">LOGIN TO YOUR ACCOUNT</div>
@ -62,6 +63,9 @@
<span class="text">Don't have an account?</span> <span class="text">Don't have an account?</span>
<a class="link" [routerLink]="'/pages/auth/register'">Create an account</a> <a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

View File

@ -1,8 +1,9 @@
<div id="register" fxLayout="row" fxLayoutAlign="start"> <div id="register" fxLayout="row" fxLayoutAlign="start">
<div id="register-intro" fxFlex fxHide fxShow.gt-xs> <div id="register-intro" fxFlex fxHide fxShow.gt-xs>
<div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}"> <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}"> <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
@ -13,6 +14,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
</div> </div>
</div> </div>
<div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}"> <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">

View File

@ -17,15 +17,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin-bottom: 32px; margin-bottom: 32px;
color: #FFFFFF;
border-radius: 2px;
text-align: center;
background: mat-color($accent);
} }
.title { .title {

View File

@ -3,8 +3,9 @@
<div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> <div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo md-accent-bg">
<span>F</span> <div class="logo">
<img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">CREATE AN ACCOUNT</div> <div class="title">CREATE AN ACCOUNT</div>
@ -60,6 +61,9 @@
<span class="text">Already have an account?</span> <span class="text">Already have an account?</span>
<a class="link" [routerLink]="'/pages/auth/login'">Login</a> <a class="link" [routerLink]="'/pages/auth/login'">Login</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

View File

@ -6,7 +6,7 @@
<div id="reset-password-form"> <div id="reset-password-form">
<div class="logo"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">RESET YOUR PASSWORD</div> <div class="title">RESET YOUR PASSWORD</div>

View File

@ -31,14 +31,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

View File

@ -6,8 +6,8 @@
<div class="top"> <div class="top">
<div class="logo md-accent-bg"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">Hey! Thank you for checking out our app.</div> <div class="title">Hey! Thank you for checking out our app.</div>

View File

@ -37,14 +37,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: #FFFFFF;
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

View File

@ -30,8 +30,8 @@
</div> </div>
<div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center"> <div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center">
<div class="logo" fxLayout="row" fxLayoutAlign="center center"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="info"> <div class="info">
@ -124,8 +124,8 @@
<div class="footer"> <div class="footer">
<div class="note">Please pay within 15 days. Thank you for your business.</div> <div class="note">Please pay within 15 days. Thank you for your business.</div>
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="row" fxLayoutAlign="start start">
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center"> <div class="logo">
<div>F</div> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="small-note"> <div class="small-note">
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque

View File

@ -68,8 +68,7 @@
.logo { .logo {
width: 96px; width: 96px;
height: 96px; padding: 0 8px;
font-size: 72px;
border-right: 1px solid rgba(255, 255, 255, 0.7); border-right: 1px solid rgba(255, 255, 255, 0.7);
} }
@ -186,12 +185,7 @@
.logo { .logo {
width: 32px; width: 32px;
min-width: 32px; min-width: 32px;
height: 32px;
font-size: 17px;
font-weight: 500;
margin-right: 24px; margin-right: 24px;
border-radius: 2px;
overflow: hidden;
} }
.small-note { .small-note {
@ -341,7 +335,6 @@
} }
.logo { .logo {
font-size: 14pt;
margin-right: 8pt; margin-right: 8pt;
} }

View File

@ -10,8 +10,9 @@
<div class="ids" fxLayout="column"> <div class="ids" fxLayout="column">
<div fxLayout="row" class="seller" fxLayoutAlign="start center"> <div fxLayout="row" class="seller" fxLayoutAlign="start center">
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
<div>F</div> <div class="logo">
<img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="divider"></div> <div class="divider"></div>
@ -145,8 +146,8 @@
<div class="footer"> <div class="footer">
<div class="note">Please pay within 15 days. Thank you for your business.</div> <div class="note">Please pay within 15 days. Thank you for your business.</div>
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="row" fxLayoutAlign="start start">
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center"> <div class="logo">
<div>F</div> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="small-note"> <div class="small-note">
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque

View File

@ -35,8 +35,6 @@
.logo { .logo {
width: 156px; width: 156px;
height: 156px;
font-size: 115px;
} }
} }
@ -154,12 +152,7 @@
.logo { .logo {
width: 32px; width: 32px;
min-width: 32px; min-width: 32px;
height: 32px;
font-size: 17px;
font-weight: 500;
margin-right: 24px; margin-right: 24px;
border-radius: 2px;
overflow: hidden;
} }
.small-note { .small-note {
@ -205,8 +198,6 @@
.logo { .logo {
width: 60pt; width: 60pt;
height: 60pt;
font-size: 40pt;
} }
} }

View File

@ -5,7 +5,7 @@
<div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> <div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo"> <div class="logo">
<span>F</span> <img src="assets/images/logos/fuse.svg">
</div> </div>
<div class="title">Closed for scheduled maintenance!</div> <div class="title">Closed for scheduled maintenance!</div>

View File

@ -18,7 +18,7 @@
#maintenance-form { #maintenance-form {
max-width: 384px; max-width: 384px;
padding: 32px; padding: 48px;
background: #FFFFFF; background: #FFFFFF;
text-align: center; text-align: center;
@include mat-elevation(7); @include mat-elevation(7);
@ -30,14 +30,7 @@
.logo { .logo {
width: 128px; width: 128px;
height: 128px;
line-height: 128px;
font-size: 86px;
font-weight: 500;
margin: 32px auto; margin: 32px auto;
color: rgba(255, 255, 255, 1);
border-radius: 2px;
background: mat-color($accent);
} }
.title { .title {

View File

@ -1,7 +1,6 @@
<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap> <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2" <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
fxFlexOrder.gt-sm="1"
*fuseIfOnDom [@animateStagger]="{value:'50'}"> *fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="profile-box add-post" <div class="profile-box add-post"
@ -135,8 +134,7 @@
</div> </div>
</div> </div>
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1" <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
fxFlexOrder.gt-sm="2">
<div class="profile-box latest-activity" fxLayout="column" <div class="profile-box latest-activity" fxLayout="column"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">

View File

@ -219,7 +219,7 @@
padding-left: 32px; padding-left: 32px;
@include media-breakpoint-down('sm') { @include media-breakpoint-down('sm') {
padding: 0; padding: 32px 0 0 0;
} }
.latest-activity { .latest-activity {

View File

@ -3,6 +3,7 @@
.content { .content {
form { form {
width: 100%;
max-width: 800px !important; max-width: 800px !important;
} }

View File

@ -1,6 +1,6 @@
<md-list class="date"> <md-list class="date" cdk-focus-region-start>
<h3 md-subheader> <h3 md-subheader cdk-focus-init>
<span>Today</span> <span>Today</span>
</h3> </h3>
@ -16,7 +16,7 @@
</div> </div>
</md-list> </md-list>
<md-divider></md-divider> <md-divider cdk-focus-region-end></md-divider>
<md-list> <md-list>
<h3 md-subheader> <h3 md-subheader>
@ -50,19 +50,22 @@
</h3> </h3>
<md-list-item> <md-list-item>
<md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" labelPosition="before"> <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
labelPosition="before">
<h3>Notifications</h3> <h3>Notifications</h3>
</md-slide-toggle> </md-slide-toggle>
</md-list-item> </md-list-item>
<md-list-item> <md-list-item>
<md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" labelPosition="before"> <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
labelPosition="before">
<h3>Cloud Sync</h3> <h3>Cloud Sync</h3>
</md-slide-toggle> </md-slide-toggle>
</md-list-item> </md-list-item>
<md-list-item> <md-list-item>
<md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" labelPosition="before"> <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
labelPosition="before">
<h3>Retro Thrusters</h3> <h3>Retro Thrusters</h3>
</md-slide-toggle> </md-slide-toggle>
</md-list-item> </md-list-item>

View File

@ -10,7 +10,7 @@
<meta name="description" content="Material design admin template with pre-built apps and pages"> <meta name="description" content="Material design admin template with pre-built apps and pages">
<meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material"> <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material">
<meta name="author" content="Withinpixels"> <meta name="author" content="Withinpixels">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">