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

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

@ -316,4 +316,13 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
isAuthRouteActivated() { isAuthRouteActivated() {
return this.router.url.indexOf('/auth') > -1; 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';
}
} }