niggl/srumboard_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Color switcher

Browse Source
This commit is contained in:
Nicolai Ort 2020-06-30 12:55:54 +02:00
parent 078392db44
commit 5ceee645b9
2 changed files with 72 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/app.component.html
View File

@ -1 +1,37 @@
<router-outlet></router-outlet>
<router-outlet></router-outlet>
<div class=" fixed-plugin">
<div class=" show-dropdown" ngbDropdown>
<a data-toggle="dropdown" ngbDropdownToggle>
<i class="fa fa-cog fa-2x"></i>
</a>
<ul ngbDropdownMenu>
<li class=" header-title">Sidebar Background</li>
<li class=" adjustments-line">
<a class=" switch-trigger background-color" href="javascript:void(0)">
<div class=" badge-colors text-center">
<span
class=" badge filter badge-danger"
[ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
>
</span>
<span
class=" badge filter badge-primary"
[ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
>
</span>
<span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
<span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
</span>
</div>
<div class=" clearfix"></div>
</a>
</li>
<li class=" adjustments-line text-center color-change">
<span class=" color-label"> LIGHT MODE </span>
<span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
<span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
<span class=" color-label"> DARK MODE </span>
</li>
</ul>
</div>
</div>

36
src/app/app.component.ts
View File

@ -5,4 +5,38 @@ import { Component } from '@angular/core';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
export class AppComponent {
changeSidebarColor(color){
var sidebar = document.getElementsByClassName('sidebar')[0];
var mainPanel = document.getElementsByClassName('main-panel')[0];
this.sidebarColor = color;
if(sidebar != undefined){
sidebar.setAttribute('data',color);
}
if(mainPanel != undefined){
mainPanel.setAttribute('data',color);
}
}
changeDashboardColor(color){
var body = document.getElementsByTagName('body')[0];
if (body && color === 'white-content') {
body.classList.add(color);
}
else if(body.classList.contains('white-content')) {
body.classList.remove('white-content');
}
}
// function that adds color white/transparent to the navbar on resize (this is for the collapse)
updateColor = () => {
var navbar = document.getElementsByClassName('navbar')[0];
if (window.innerWidth < 993 && !this.isCollapsed) {
navbar.classList.add('bg-white');
navbar.classList.remove('navbar-transparent');
} else {
navbar.classList.remove('bg-white');
navbar.classList.add('navbar-transparent');
}
};
}