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

chat, todo & theme options tweaks

Browse Source
This commit is contained in:
Sercan Yemen 2017-09-22 12:11:21 +03:00
parent 5ace09f782
commit cb2b544526
5 changed files with 119 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/app/core/components/theme-options/theme-options.component.html
View File

@ -4,107 +4,95 @@
<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>
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
<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="right">Right</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group>
</md-list-item>
<h3 md-subheader>Toolbar:</h3> <h3>Navigation:</h3>
<md-list-item> <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (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="top">Top</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="left">Left</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="right">Right</md-radio-button>
</md-radio-group> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-list-item> </md-radio-group>
<h3 md-subheader>Footer:</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.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">Footer:</h3>
<md-list-item> <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (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="below">Below</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="above">Above</md-radio-button>
</md-radio-group> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-list-item> </md-radio-group>
<h3 class="mt-24">Layout Mode:</h3>
<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="fullwidth">Fullwidth</md-radio-button>
</md-radio-group>
<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-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<md-option value="none">
None
</md-option>
<md-option value="slideUp">
Slide up
</md-option>
<md-option value="slideDown">
Slide down
</md-option>
<md-option value="slideRight">
Slide right
</md-option>
<md-option value="slideLeft">
Slide left
</md-option>
<md-option value="fadeIn">
Fade in
</md-option>
</md-select>
<md-list-item> </div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Router Animation</h4>
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<md-option value="none">
None
</md-option>
<md-option value="slideUp">
Slide up
</md-option>
<md-option value="slideDown">
Slide down
</md-option>
<md-option value="slideRight">
Slide right
</md-option>
<md-option value="slideLeft">
Slide left
</md-option>
<md-option value="fadeIn">
Fade in
</md-option>
</md-select>
</div>
</md-list-item>
</md-list>
</div> </div>

28
src/app/core/components/theme-options/theme-options.component.scss
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 - 60px);
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;
} }

2
src/app/main/content/apps/chat/chat.component.scss
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;
} }

51
src/app/main/content/apps/todo/todo-details/todo-details.component.html
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">
@ -49,14 +54,16 @@
<form [formGroup]="todoForm" (submit)="addTodo()"> <form [formGroup]="todoForm" (submit)="addTodo()">
<md-input-container class="title mt-8" floatPlaceholder="never" fxFill> <md-input-container class="title mt-8" floatPlaceholder="never" fxFill>
<textarea mdInput <textarea mdInput
#titleInput #titleInput
name="title" name="title"
formControlName="title" formControlName="title"
placeholder="Title" placeholder="Title"
mdTextareaAutosize mdTextareaAutosize
required> mdAutosizeMinRows="1"
</textarea> mdAutosizeMaxRows="2"
required>
</textarea>
</md-input-container> </md-input-container>
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap> <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
@ -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"
</textarea> mdAutosizeMaxRows="6">
</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'"

72
src/app/main/content/apps/todo/todo-details/todo-details.component.scss
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;
} }
} }
} }