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

Mail: Navigation styling

Browse Source
This commit is contained in:
mustafahlvc 2017-07-19 00:26:09 +03:00
parent c3cb5c8942
commit 2e4d040139
7 changed files with 125 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/navigation/navigation.component.html
View File

@ -1,4 +1,4 @@
<div id="main-navigation">
<div id="main-navigation" class="nav">
<ng-container *ngFor="let item of navigation">
<fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>

76
src/app/core/components/navigation/navigation.component.scss
View File

@ -4,91 +4,15 @@
margin: 0;
padding: 0;
.nav-subheader {
display: flex;
align-items: center;
height: 56px;
color: rgba(0, 0, 0, .54);
font-weight: 500;
padding-left: 24px;
white-space: nowrap;
}
.nav-item {
.nav-link {
text-decoration: none;
display: flex;
align-items: center;
height: 48px;
padding: 0 24px;
position: relative;
overflow: hidden;
background-color: map-get($background, raised-button);
color: map_get($foreground, text);
cursor: pointer;
user-select: none;
> span {
flex: 1;
white-space: nowrap;
}
&:hover {
background-color: map-get($background, hover);
}
.mat-ripple-element {
background-color: map-get($background, hover);
}
&.active {
background-color: mat-color($accent);
.mat-ripple-element {
background-color: mat-color($accent, default-contrast, 0.1);
}
&, .nav-link-icon {
color: mat-color($accent, default-contrast);
}
}
.nav-link-icon {
margin-right: 16px;
}
.nav-link-icon,
.collapse-arrow {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
color: map_get($mat-light-theme-foreground, icon);;
}
}
&.nav-collapse {
> .children {
> .nav-item {
> .nav-link {
padding-left: 56px;
}
> .children {
> .nav-item {
> .nav-link {
padding-left: 72px;
}
}
}
}
}
}
}
}

1
src/app/core/scss/core.scss
View File

@ -25,6 +25,7 @@
@import "partials/angular-material-fix";
@import "partials/typography";
@import "partials/page-layouts";
@import "partials/navigation";
// Plugins
@import "partials/plugins/plugins";

89
src/app/core/scss/partials/_navigation.scss Normal file
View File

@ -0,0 +1,89 @@
.nav {
.nav-subheader {
display: flex;
align-items: center;
height: 56px;
color: rgba(0, 0, 0, .54);
font-weight: 500;
padding-left: 24px;
white-space: nowrap;
}
.nav-item {
.nav-link {
text-decoration: none;
display: flex;
align-items: center;
height: 48px;
padding: 0 24px;
position: relative;
overflow: hidden;
cursor: pointer;
user-select: none;
color: rgba(0, 0, 0, .87);
> span {
flex: 1;
white-space: nowrap;
}
&:hover {
background-color: map-get($background, hover);
}
.mat-ripple-element {
background-color: map-get($background, hover);
}
&.active {
background-color: mat-color($accent);
.mat-ripple-element {
background-color: mat-color($accent, default-contrast, 0.1);
}
&, .nav-link-icon {
color: mat-color($accent, default-contrast);
}
}
.nav-link-icon {
margin-right: 16px;
}
.nav-link-icon,
.collapse-arrow {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
color: map_get($mat-light-theme-foreground, icon);;
}
}
&.nav-collapse {
> .children {
> .nav-item {
> .nav-link {
padding-left: 56px;
}
> .children {
> .nav-item {
> .nav-link {
padding-left: 72px;
}
}
}
}
}
}
}
}

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

@ -467,43 +467,43 @@ export class MailFakeDb
'id' : 0,
'handle': 'inbox',
'title' : 'Inbox',
'icon' : 'icon-inbox'
'icon' : 'inbox'
},
{
'id' : 1,
'handle': 'sent',
'title' : 'Sent',
'icon' : 'icon-send'
'icon' : 'send'
},
{
'id' : 2,
'handle': 'drafts',
'title' : 'Drafts',
'icon' : 'icon-email-open'
'icon' : 'email_open'
},
{
'id' : 3,
'handle': 'spam',
'title' : 'Spam',
'icon' : 'icon-alert-octagon'
'icon' : 'error'
},
{
'id' : 4,
'handle': 'trash',
'title' : 'Trash',
'icon' : 'icon-delete'
'icon' : 'delete'
},
{
'id' : 5,
'handle': 'starred',
'title' : 'Starred',
'icon' : 'icon-star'
'icon' : 'star'
},
{
'id' : 6,
'handle': 'important',
'title' : 'Important',
'icon' : 'icon-label'
'icon' : 'label'
}
];
@ -512,25 +512,25 @@ export class MailFakeDb
'id' : 0,
'handle': 'note',
'title' : 'Note',
'color' : 'md-green-600-bg'
'color' : '#7cb342'
},
{
'id' : 1,
'handle': 'paypal',
'title' : 'Paypal',
'color' : 'md-orange-800-bg'
'color' : '#d84315'
},
{
'id' : 2,
'handle': 'invoice',
'title' : 'Invoice',
'color' : 'md-blue-grey-500-bg'
'color' : '#607d8b'
},
{
'id' : 3,
'handle': 'amazon',
'title' : 'Amazon',
'color' : 'md-blue-500-bg'
'color' : '#03a9f4'
}
];
}

31
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -22,21 +22,26 @@
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
<md-list>
<div md-subheader>FOLDERS</div>
<md-list-item *ngFor="let folder of folders">
<a md-line [routerLink]="'/apps/mail/' + folder.handle">
{{ folder.title }}
</a>
</md-list-item>
<div class="nav">
<div md-subheader>LABELS</div>
<md-list-item *ngFor="let label of labels">
<a md-line [routerLink]="'/apps/mail/label/' + label.handle">
{{ label.title }}
<div class="nav-subheader">FOLDERS</div>
<div class="nav-item" *ngFor="let item of folders">
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/' + item.handle">
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
<span>{{item.title}}</span>
</a>
</md-list-item>
</md-list>
</div>
<div class="nav-subheader">LABELS</div>
<div class="nav-item" *ngFor="let item of labels">
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/label/' + item.handle">
<md-icon class="nav-link-icon" [ngStyle]="{'color':item.color}">label</md-icon>
<span>{{item.title}}</span>
</a>
</div>
</div>
</div>
<!-- / SIDENAV CONTENT -->

4
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss
View File

@ -18,4 +18,8 @@
}
}
}
.content {
padding: 0 !important;
}
}