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

Keys pipe, some workin on the mail app..

Browse Source
This commit is contained in:
mustafahlvc 2017-07-16 16:12:40 +03:00
parent ac870a9613
commit 4563931090
8 changed files with 143 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -19,7 +19,7 @@ import { UIPageLayoutsModule } from './main/ui/page-layouts/page-layouts.module'
import { FuseLayoutModule } from './core/components/layout/layout.module';
import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { AngularFireModule } from 'angularfire2';
import { environment } from "environments/environment";
import { environment } from 'environments/environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { MailListComponent } from './main/apps/mail/mail-list/mail-list.component';
import { MailDetailsComponent } from './main/apps/mail/mail-details/mail-details.component';

7
src/app/core/modules/shared.module.ts
View File

@ -8,11 +8,13 @@ import {
FuseMdSidenavTogglerDirective
} from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
import {KeysPipe} from '../pipes/keys';
@NgModule({
declarations: [
FuseMdSidenavHelperDirective,
FuseMdSidenavTogglerDirective
FuseMdSidenavTogglerDirective,
KeysPipe
],
imports : [
FlexLayoutModule,
@ -28,7 +30,8 @@ import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
FormsModule,
FuseMdSidenavHelperDirective,
FuseMdSidenavTogglerDirective,
PerfectScrollbarModule
PerfectScrollbarModule,
KeysPipe
]
})

15
src/app/core/pipes/keys.ts Normal file
View File

@ -0,0 +1,15 @@
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
transform(value: any, args: string[]): any
{
let keys: any[] = [];
for ( let key in value )
{
keys.push({key: key, value: value[key]});
}
return keys;
}
}

41
src/app/main/apps/mail/mail.component.html
View File

@ -9,21 +9,7 @@
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header">
<span>Sidenav header</span>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
Sidenav
</div>
<!-- / SIDENAV CONTENT -->
<fuse-mail-main-sidenav></fuse-mail-main-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
@ -31,8 +17,22 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<h2>Left sidenav with content scroll</h2>
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<md-icon>menu</md-icon>
</button>
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
<md-icon>search</md-icon>
<input fxFlex type="text" placeholder="Search for an e-mail or contact">
</div>
</div>
</div>
<!-- / CONTENT HEADER -->
@ -41,11 +41,6 @@
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-left-sidenav"
fxHide.gt-md>
<md-icon>menu</md-icon>
</button>
<span>Content toolbar</span>
</div>
@ -69,4 +64,4 @@
</md-sidenav-container>
</div>
</div>

38
src/app/main/apps/mail/mail.component.scss
View File

@ -1,5 +1,43 @@
@import "src/app/core/scss/fuse";
:host, #mail {
width: 100%;
height: 100%;
.center {
.header {
padding: 0 !important;
.search-wrapper {
@include mat-elevation(7);
.sidenav-toggle {
margin: 0;
width: 56px;
height: 56px;
background: #FFF;
border-radius: 0;
border-right: 1px solid rgba(0, 0, 0, .12);
}
.search {
width: 100%;
height: 56px;
line-height: 56px;
padding: 18px;
background: #FFFFFF;
input {
height: 56px;
padding-left: 16px;
color: rgba(0, 0, 0, 0.54);
border: none;
outline: none;
}
}
}
}
}
}

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

@ -1,3 +1,38 @@
<!-- SIDENAV HEADER -->
<div class="header" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon">mail</md-icon>
<span class="logo-text">Mailbox</span>
</div>
<div class="account" fxLayout="column">
<div class="title">John Doe</div>
<md-select class="account-selection" placeholder="Mail Selection"
floatPlaceholder="never"
[ngModel]="selectedAccount">
<md-option *ngFor="let account of (accounts | keys)" [value]="account.key">
{{account.value}}
</md-option>
</md-select>
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
Sidenav
</div>
<!-- / SIDENAV CONTENT -->
<!-- SIDENAV HEADER -->
<div class="header" layout="column" layout-align="space-between start">
</div>
<!-- / SIDENAV HEADER -->
<p>
main sidenav
main sidenav
</p>

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

@ -0,0 +1,21 @@
:host {
.header {
.logo {
.logo-icon {
margin: 0 16px 0 0;
}
.logo-text {
font-size: 24px;
}
}
.account {
width: 100%;
.account-selection {
}
}
}
}

9
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts
View File

@ -7,8 +7,17 @@ import {Component, OnInit} from '@angular/core';
})
export class MainSidenavComponent implements OnInit
{
accounts: object;
selectedAccount: string;
constructor()
{
// Data
this.accounts = {
'creapond' : 'johndoe@creapond.com',
'withinpixels': 'johndoe@withinpixels.com'
};
this.selectedAccount = 'creapond';
}
ngOnInit()