overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme

Browse Source
This commit is contained in:
insanity 2018-04-16 15:45:47 +09:00
parent bb28c0bbf8
commit 1409533337
3 changed files with 70 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/commons/component/layout/menu/app.menu.component.ts
View File

@ -39,11 +39,4 @@ export class AppMenuComponent implements OnInit {
];
}
changeTheme(theme) {
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');
themeLink.href = 'assets/theme/theme-' + theme + '.css';
layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
}
}

81
src/app/commons/component/layout/topbar/app.topbar.component.html
View File

@ -17,8 +17,7 @@
</a>
<ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
<li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()"
[ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
<li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()" [ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
<a href="#" (click)="app.onTopbarItemClick($event,profile)">
<img class="profile-image" src="assets/layout/images/avatar.png" />
@ -58,28 +57,71 @@
<span class="topbar-item-name">Settings</span>
</a>
<ul class="ultima-menu animated fadeInDown">
<li role="menuitem">
<a href="#">
<a href="#" (click)="app.changeTheme('indigo')">
<i class="material-icons">palette</i>
<span>Change Theme</span>
<span>indigo</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">favorite_border</i>
<span>Favorites</span>
<a href="#" (click)="app.changeTheme('brown')">
<i class="material-icons">palette</i>
<span>brown</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">lock</i>
<span>Lock Screen</span>
<a href="#" (click)="app.changeTheme('blue')">
<i class="material-icons">palette</i>
<span>blue</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">wallpaper</i>
<span>Wallpaper</span>
<a href="#" (click)="app.changeTheme('blue-grey')">
<i class="material-icons">palette</i>
<span>blue-grey</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('dark-blue')">
<i class="material-icons">palette</i>
<span>dark-blue</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('dark-green')">
<i class="material-icons">palette</i>
<span>dark-green</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('purple-cyan')">
<i class="material-icons">palette</i>
<span>purple-cyan</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('purple-cyan')">
<i class="material-icons">palette</i>
<span>purple-cyan</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('teal')">
<i class="material-icons">palette</i>
<span>teal</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('cyan')">
<i class="material-icons">palette</i>
<span>cyan</span>
</a>
</li>
<li role="menuitem">
<a href="#" (click)="app.changeTheme('grey')">
<i class="material-icons">palette</i>
<span>grey</span>
</a>
</li>
</ul>
@ -93,31 +135,31 @@
<ul class="ultima-menu animated fadeInDown">
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/layout/images/avatar1.png" width="35"/>
<img src="assets/layout/images/avatar1.png" width="35" />
<span>Give me a call</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/layout/images/avatar2.png" width="35"/>
<img src="assets/layout/images/avatar2.png" width="35" />
<span>Sales reports attached</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/layout/images/avatar3.png" width="35"/>
<img src="assets/layout/images/avatar3.png" width="35" />
<span>About your invoice</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/layout/images/avatar2.png" width="35"/>
<img src="assets/layout/images/avatar2.png" width="35" />
<span>Meeting today at 10pm</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/layout/images/avatar4.png" width="35"/>
<img src="assets/layout/images/avatar4.png" width="35" />
<span>Out of office</span>
</a>
</li>
@ -156,8 +198,7 @@
</li>
</ul>
</li>
<li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}"
(click)="app.onTopbarItemClick($event,search)">
<li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}" (click)="app.onTopbarItemClick($event,search)">
<span class="md-inputfield">
<input type="text" pInputText>
<label>Search</label>

9
src/app/pages/pages.component.ts
View File

@ -316,4 +316,13 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
isAuthRouteActivated() {
return this.router.url.indexOf('/auth') > -1;
}
changeTheme(theme) {
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');
themeLink.href = 'assets/theme/theme-' + theme + '.css';
layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
}
}