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

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

@ -4,85 +4,74 @@
<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()">
<md-icon>close</md-icon>
</button>
<md-list>
<h3 md-subheader>Navigation:</h3>
<md-list-item>
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
<h3>Navigation:</h3>
<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="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>
<md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
<h3 class="mt-24">Toolbar:</h3>
<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="above">Above</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>Footer:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
<h3 class="mt-24">Footer:</h3>
<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="above">Above</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>Layout Mode:</h3>
<md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
<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-list-item>
<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">
<h4 class="mr-8">Toolbar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</md-list-item>
<md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Navigation Bar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</md-list-item>
<md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mr-8">Footer Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div>
</md-list-item>
</div>
<md-divider></md-divider>
<h3 md-subheader>Animation:</h3>
<md-list-item>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Router Animation</h4>
<h3>Router Animation:</h3>
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<md-option value="none">
None
@ -103,8 +92,7 @@
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;
transform: translate3d(100%, 0, 0);
z-index: 999;
max-width: 80vw;
max-height: calc(100vh - 180px);
max-height: calc(100vh - 200px);
padding: 24px;
overflow: auto;
@include media-breakpoint-down('xs') {
top: -120px;
max-height: calc(100vh - 60px);
width: 90vw;
}
.close-button {
@ -38,6 +41,23 @@
top: 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 {
@ -50,6 +70,10 @@
bottom: 0;
z-index: 998;
@include media-breakpoint-down('sm') {
background: rgba(0, 0, 0, 0.37);
}
&.hidden {
display: none;
}

2
src/app/main/content/apps/chat/chat.component.scss
View File

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

25
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>
<md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom [@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>
<md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
[@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 *ngIf="todo">
<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">
<md-icon *ngIf="todo.completed">check_box</md-icon>
<md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon>
<span>Mark as Done</span>
</button>
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
@ -55,6 +60,8 @@
formControlName="title"
placeholder="Title"
mdTextareaAutosize
mdAutosizeMinRows="1"
mdAutosizeMaxRows="2"
required>
</textarea>
</md-input-container>
@ -68,9 +75,9 @@
</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">
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
<md-datepicker #startDatePicker></md-datepicker>
@ -85,14 +92,16 @@
</div>
<md-input-container class="" fxFill>
<textarea mdInput
<textarea mdInput #notes
name="notes"
formControlName="notes"
placeholder="Notes"
md-maxlength="500"
maxlength="500"
mdTextareaAutosize
mdAutosizeMinRows="6">
mdAutosizeMinRows="1"
mdAutosizeMaxRows="6">
</textarea>
<md-hint align="end">{{notes.value.length}} / 500</md-hint>
</md-input-container>
<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;
.todo-header {
padding-bottom: 24px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.actions {
@ -38,74 +40,10 @@
}
}
.to {
color: rgba(0, 0, 0, 0.54);
.dates {
.to-text {
margin-right: 4px;
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;
.mat-form-field {
width: auto !important;
}
}
}