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

calendar, mail and todo tweaks

Browse Source
This commit is contained in:
Sercan Yemen 2017-09-22 11:32:31 +03:00
parent 236cf1eb06
commit 678dde8c0e
8 changed files with 154 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/main/content/apps/calendar/calendar.component.scss
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 {

59
src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
View File

@ -1,52 +1,67 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" (click)="$event.stopPropagation();"></md-checkbox> <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
(click)="$event.stopPropagation();"></md-checkbox>
<div class="info" fxFlex FlexLayout="column"> <div class="info" fxFlex FlexLayout="column">
<div class="name" fxLayout="row" fxLayoutAlign="start center"> <div class="row-1" fxLayout="row" fxLayoutAlign="start center">
<div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/> <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
<div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div> <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span> <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
<md-icon *ngIf="mail.hasAttachments">attachment</md-icon> <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center">
<div class="time">{{mail.time}}</div>
<!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm>
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
<md-icon *ngIf="mail.starred">star</md-icon>
<md-icon *ngIf="!mail.starred">star_outline</md-icon>
</button>
<button md-button class="mat-icon-button" (click)="toggleImportant($event)"
aria-label="Toggle important">
<md-icon *ngIf="mail.important">label</md-icon>
<md-icon *ngIf="!mail.important">label_outline</md-icon>
</button>
</div>-->
</div>
</div>
<div class="row-2" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="start start">
<div class="subject text-truncate"> <div class="subject text-truncate">
{{mail.subject}} {{mail.subject}}
</div> </div>
<div class="message text-truncate" *ngIf="mail?.message"> <div class="message text-truncate" *ngIf="mail?.message">
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}} {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
</div> </div>
<div class="labels" fxLayout="row" fxLayoutWrap> <div class="labels" fxLayout="row" fxLayoutWrap fxHide fxShow.gt-sm>
<div class="label" *ngFor="let labelId of mail.labels" <div class="label" *ngFor="let labelId of mail.labels"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div> <div class="label-color"
[ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
<div class="label-title">{{labels | getById:labelId:'title'}}</div> <div class="label-title">{{labels | getById:labelId:'title'}}</div>
</div> </div>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="space-between end">
<div class="time">{{mail.time}}</div>
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
<md-icon *ngIf="mail.starred">star</md-icon>
<md-icon *ngIf="!mail.starred">star_outline</md-icon>
</button>
<button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
<md-icon *ngIf="mail.important">label</md-icon>
<md-icon *ngIf="!mail.important">label_outline</md-icon>
</button>
</div> </div>
</div> </div>
</div> </div>

59
src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
View File

@ -12,58 +12,63 @@
.info { .info {
.name, .name {
font-weight: 700;
}
.row-2 {
.subject { .subject {
font-weight: 700; font-weight: 700;
} }
.message {
}
.labels { .labels {
background: #FFFFFF; background: #FFFFFF;
} }
} }
} }
}
&.selected { &.selected {
background: #FFF8E1; background: #FFF8E1;
.info { .info {
.message { .row-2 {
}
.labels { .labels {
background: #FFF8E1; background: #FFF8E1;
} }
} }
} }
}
&.current-mail { &.current-mail {
background: #E3F2FD; background: #E3F2FD;
.info { .info {
.message { .row-2 {
}
.labels { .labels {
background: #E3F2FD; background: #E3F2FD;
} }
} }
} }
}
.info { .info {
overflow: hidden; overflow: hidden;
width: 0; width: 0;
margin: 0 16px; margin-left: 16px;
position: relative; position: relative;
.row-1 {
margin-bottom: 8px;
.name { .name {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
padding-bottom: 8px;
.avatar { .avatar {
min-width: 32px; min-width: 32px;
@ -74,8 +79,22 @@
} }
} }
.subject { .actions {
margin-left: 4px;
.mat-icon-button {
width: 32px;
height: 32px;
line-height: 1;
}
}
}
.row-2 {
.subject,
.message {
width: 100%;
} }
.message { .message {
@ -85,7 +104,7 @@
.labels { .labels {
position: absolute; position: absolute;
background: #FAFAFA; background: #FFFFFF;
bottom: 0; bottom: 0;
right: 0; right: 0;
padding-left: 6px; padding-left: 6px;
@ -106,19 +125,5 @@
} }
} }
} }
.time {
margin: 0 8px 6px 8px;
}
.actions {
.md-icon-button {
margin: 0;
padding: 0;
width: 32px;
height: 32px;
} }
} }
}

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

@ -42,7 +42,7 @@
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<div fxFlex="row" fxLayoutAlign="start center"> <div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails" <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></md-checkbox> [indeterminate]="isIndeterminate"></md-checkbox>

12
src/app/main/content/apps/mail/mail.component.scss
View File

@ -40,6 +40,10 @@
@include media-breakpoint(xs) { @include media-breakpoint(xs) {
fuse-mail-list {
border-right: none;
}
fuse-mail-list, fuse-mail-list,
fuse-mail-details { fuse-mail-details {
flex: 1 0 100%; flex: 1 0 100%;
@ -51,6 +55,14 @@
&.current-mail-selected { &.current-mail-selected {
.toolbar {
padding-left: 16px !important;
.mail-selection {
display: none !important;
}
}
.content { .content {
fuse-mail-list { fuse-mail-list {

6
src/app/main/content/apps/todo/todo-list/todo-list.component.scss
View File

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

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

@ -41,7 +41,8 @@
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<div fxFlex="row" fxLayoutAlign="start center">
<div class="todo-selection" fxFlex="row" fxLayoutAlign="start center">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos" <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
[indeterminate]="isIndeterminate"></md-checkbox> [indeterminate]="isIndeterminate"></md-checkbox>
@ -76,6 +77,7 @@
<md-icon>arrow_back</md-icon> <md-icon>arrow_back</md-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- / CONTENT TOOLBAR --> <!-- / CONTENT TOOLBAR -->

9
src/app/main/content/apps/todo/todo.component.scss
View File

@ -36,6 +36,7 @@
} }
.content-card { .content-card {
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
fuse-todo-list, fuse-todo-list,
@ -49,6 +50,14 @@
&.current-todo-selected { &.current-todo-selected {
.toolbar {
padding-left: 16px !important;
.todo-selection {
display: none !important;
}
}
.content { .content {
fuse-todo-list { fuse-todo-list {