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

(Todo App)(Mail App) tag/label restyling

Browse Source
This commit is contained in:
mustafahlvc 2017-08-14 12:26:50 +03:00
parent 587b1f5661
commit 7cfbf4d8df
8 changed files with 72 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/fuse-fake-db/mail.ts
View File

@ -119,8 +119,8 @@ export class MailFakeDb
'important' : false, 'important' : false,
'hasAttachments': false, 'hasAttachments': false,
'labels' : [ 'labels' : [
3, 1,
4 3
], ],
'folder' : 0 'folder' : 0
}, },

7
src/app/main/content/apps/mail/mail-details/mail-details.component.html
View File

@ -10,11 +10,14 @@
<div> <div>
<div class="subject" flex>{{mail.subject}}</div> <div class="subject" flex>{{mail.subject}}</div>
<div class="labels"> <div class="labels" fxLayout="row" fxLayoutWrap>
<div class="label" *ngFor="let labelId of mail.labels" <div class="label" *ngFor="let labelId of mail.labels"
[ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}} fxLayout="row" fxLayoutAlign="start center">
<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>
</div> </div>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">

16
src/app/main/content/apps/mail/mail-details/mail-details.component.scss
View File

@ -12,7 +12,7 @@
} }
.mail-header { .mail-header {
padding-bottom: 24px; padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.actions { .actions {
@ -25,10 +25,18 @@
} }
.label { .label {
display: inline-block;
font-size: 11px; font-size: 11px;
padding: 0 5px; border-radius: 2px;
margin: 8px 6px 0 0; margin: 4px 4px 4px 0;
padding: 3px 8px;
background-color: rgba(0, 0, 0, 0.08);
.label-color {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
}
} }
} }

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

@ -22,16 +22,17 @@
<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 class="labels"> <div class="labels" fxLayout="row" fxLayoutWrap>
<div class="label" *ngFor="let labelId of mail.labels" <div class="label" *ngFor="let labelId of mail.labels"
[ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}} fxLayout="row" fxLayoutAlign="start center">
<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>
</div> </div>
</div>
<div fxLayout="column" fxLayoutAlign="space-between end"> <div fxLayout="column" fxLayoutAlign="space-between end">
<div class="time">{{mail.time}}</div> <div class="time">{{mail.time}}</div>

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

@ -18,13 +18,13 @@
} }
.message { .message {
}
.labels { .labels {
background: #FFFFFF; background: #FFFFFF;
} }
} }
} }
}
&.selected { &.selected {
background: #FFF8E1; background: #FFF8E1;
@ -33,12 +33,13 @@
.message { .message {
}
.labels { .labels {
background: #FFF8E1; background: #FFF8E1;
} }
} }
} }
}
&.current-mail { &.current-mail {
background: #E3F2FD; background: #E3F2FD;
@ -46,18 +47,18 @@
.info { .info {
.message { .message {
}
.labels { .labels {
background: #E3F2FD; background: #E3F2FD;
} }
} }
} }
}
.info { .info {
overflow: hidden; overflow: hidden;
width: 0; width: 0;
margin: 0 16px; margin: 0 16px;
position: relative;
.name { .name {
font-size: 15px; font-size: 15px;
@ -80,23 +81,27 @@
.message { .message {
position: relative; position: relative;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
}
.labels { .labels {
position: absolute; position: absolute;
background: #FAFAFA; background: #FAFAFA;
top: 0; bottom: 0;
right: 0; right: 0;
padding-left: 6px; padding-left: 6px;
.label { .label {
display: inline-block;
font-size: 11px; font-size: 11px;
padding: 0 5px; border-radius: 2px;
margin-right: 6px; margin: 0 4px 0 0;
padding: 3px 8px;
background-color: rgba(0, 0, 0, 0.08);
&:first-child { .label-color {
margin-left: 0; width: 8px;
} height: 8px;
margin-right: 8px;
border-radius: 50%;
} }
} }
} }

7
src/app/main/content/apps/todo/todo-details/todo-details.component.html
View File

@ -60,8 +60,11 @@
</md-input-container> </md-input-container>
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap> <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
<div class="tag" *ngFor="let tagId of todo.tags" <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
[ngStyle]="{background: tags | getById:tagId:'color'}">{{tags | getById:tagId:'title'}}
<div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
<div class="tag-label">{{tags | getById:tagId:'title'}}</div>
</div> </div>
</div> </div>

13
src/app/main/content/apps/todo/todo-details/todo-details.component.scss
View File

@ -25,8 +25,17 @@
.tag { .tag {
font-size: 11px; font-size: 11px;
padding: 0 5px; border-radius: 2px;
margin: 8px 6px 0 0; margin: 8px 4px 0 0;
padding: 3px 8px;
background-color: rgba(0, 0, 0, 0.08);
.tag-color {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
}
} }
.to { .to {

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

@ -31,9 +31,9 @@
} }
.tags { .tags {
font-size: 12px;
.tag { .tag {
font-size: 11px;
border-radius: 2px; border-radius: 2px;
margin: 8px 4px 0 0; margin: 8px 4px 0 0;
padding: 3px 8px; padding: 3px 8px;