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

(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,
'hasAttachments': false,
'labels' : [
3,
4
1,
3
],
'folder' : 0
},

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

@ -10,11 +10,14 @@
<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"
[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 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 {
padding-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.actions {
@ -25,10 +25,18 @@
}
.label {
display: inline-block;
font-size: 11px;
padding: 0 5px;
margin: 8px 6px 0 0;
border-radius: 2px;
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%;
}
}
}

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

@ -22,14 +22,15 @@
<div class="message text-truncate" *ngIf="mail?.message">
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
<div class="labels">
<div class="label" *ngFor="let labelId of mail.labels"
[ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}}
</div>
</div>
</div>
<div class="labels" fxLayout="row" fxLayoutWrap>
<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-title">{{labels | getById:labelId:'title'}}</div>
</div>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="space-between end">

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

@ -18,10 +18,10 @@
}
.message {
}
.labels {
background: #FFFFFF;
}
.labels {
background: #FFFFFF;
}
}
}
@ -33,9 +33,10 @@
.message {
.labels {
background: #FFF8E1;
}
}
.labels {
background: #FFF8E1;
}
}
}
@ -46,10 +47,9 @@
.info {
.message {
.labels {
background: #E3F2FD;
}
}
.labels {
background: #E3F2FD;
}
}
}
@ -58,6 +58,7 @@
overflow: hidden;
width: 0;
margin: 0 16px;
position: relative;
.name {
font-size: 15px;
@ -80,23 +81,27 @@
.message {
position: relative;
color: rgba(0, 0, 0, 0.54);
}
.labels {
position: absolute;
background: #FAFAFA;
top: 0;
right: 0;
padding-left: 6px;
.labels {
position: absolute;
background: #FAFAFA;
bottom: 0;
right: 0;
padding-left: 6px;
.label {
display: inline-block;
font-size: 11px;
padding: 0 5px;
margin-right: 6px;
.label {
font-size: 11px;
border-radius: 2px;
margin: 0 4px 0 0;
padding: 3px 8px;
background-color: rgba(0, 0, 0, 0.08);
&:first-child {
margin-left: 0;
}
.label-color {
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>
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
<div class="tag" *ngFor="let tagId of todo.tags"
[ngStyle]="{background: tags | getById:tagId:'color'}">{{tags | getById:tagId:'title'}}
<div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
<div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
<div class="tag-label">{{tags | getById:tagId:'title'}}</div>
</div>
</div>

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

@ -25,8 +25,17 @@
.tag {
font-size: 11px;
padding: 0 5px;
margin: 8px 6px 0 0;
border-radius: 2px;
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 {

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

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