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

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 {
background: whitesmoke;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
background: #455A64;
box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
padding: 0;
display: flex;
flex-direction: column;
@ -44,11 +44,11 @@
transition: box-shadow 300ms ease;
&:first-of-type {
margin-top: 24px;
margin-top: 16px;
}
&:last-of-type {
margin-bottom: 24px;
margin-bottom: 16px;
}
&: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">
<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="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}}"/>
<div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
<md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
</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">
{{mail.subject}}
</div>
<div class="message text-truncate" *ngIf="mail?.message">
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
</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"
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>
</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>

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

@ -12,58 +12,63 @@
.info {
.name,
.name {
font-weight: 700;
}
.row-2 {
.subject {
font-weight: 700;
}
.message {
}
.labels {
background: #FFFFFF;
}
}
}
}
&.selected {
background: #FFF8E1;
.info {
.message {
}
.row-2 {
.labels {
background: #FFF8E1;
}
}
}
}
&.current-mail {
background: #E3F2FD;
.info {
.message {
}
.row-2 {
.labels {
background: #E3F2FD;
}
}
}
}
.info {
overflow: hidden;
width: 0;
margin: 0 16px;
margin-left: 16px;
position: relative;
.row-1 {
margin-bottom: 8px;
.name {
font-size: 15px;
font-weight: 500;
padding-bottom: 8px;
.avatar {
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 {
@ -85,7 +104,7 @@
.labels {
position: absolute;
background: #FAFAFA;
background: #FFFFFF;
bottom: 0;
right: 0;
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 -->
<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"
[indeterminate]="isIndeterminate"></md-checkbox>

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

@ -40,6 +40,10 @@
@include media-breakpoint(xs) {
fuse-mail-list {
border-right: none;
}
fuse-mail-list,
fuse-mail-details {
flex: 1 0 100%;
@ -51,6 +55,14 @@
&.current-mail-selected {
.toolbar {
padding-left: 16px !important;
.mail-selection {
display: none !important;
}
}
.content {
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;
position: relative;
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 -->
<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"
[indeterminate]="isIndeterminate"></md-checkbox>
@ -76,6 +77,7 @@
<md-icon>arrow_back</md-icon>
</button>
</div>
</div>
<!-- / CONTENT TOOLBAR -->

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

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