Skip to content

Commit 2290af6

Browse files
hikalkanhikalkan
committed
Move skin change to the application.
1 parent 59bf5ff commit 2290af6

File tree

3 files changed

+48
-95
lines changed

3 files changed

+48
-95
lines changed

‎angular/src/app/layout/right-sidebar.component.html

Lines changed: 3 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,85 +6,9 @@
66
<div class="tab-content">
77
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
88
<ul class="demo-choose-skin">
9-
<li data-theme="red" class="active">
10-
<div class="red"></div>
11-
<span>Red</span>
12-
</li>
13-
<li data-theme="pink">
14-
<div class="pink"></div>
15-
<span>Pink</span>
16-
</li>
17-
<li data-theme="purple">
18-
<div class="purple"></div>
19-
<span>Purple</span>
20-
</li>
21-
<li data-theme="deep-purple">
22-
<div class="deep-purple"></div>
23-
<span>Deep Purple</span>
24-
</li>
25-
<li data-theme="indigo">
26-
<div class="indigo"></div>
27-
<span>Indigo</span>
28-
</li>
29-
<li data-theme="blue">
30-
<div class="blue"></div>
31-
<span>Blue</span>
32-
</li>
33-
<li data-theme="light-blue">
34-
<div class="light-blue"></div>
35-
<span>Light Blue</span>
36-
</li>
37-
<li data-theme="cyan">
38-
<div class="cyan"></div>
39-
<span>Cyan</span>
40-
</li>
41-
<li data-theme="teal">
42-
<div class="teal"></div>
43-
<span>Teal</span>
44-
</li>
45-
<li data-theme="green">
46-
<div class="green"></div>
47-
<span>Green</span>
48-
</li>
49-
<li data-theme="light-green">
50-
<div class="light-green"></div>
51-
<span>Light Green</span>
52-
</li>
53-
<li data-theme="lime">
54-
<div class="lime"></div>
55-
<span>Lime</span>
56-
</li>
57-
<li data-theme="yellow">
58-
<div class="yellow"></div>
59-
<span>Yellow</span>
60-
</li>
61-
<li data-theme="amber">
62-
<div class="amber"></div>
63-
<span>Amber</span>
64-
</li>
65-
<li data-theme="orange">
66-
<div class="orange"></div>
67-
<span>Orange</span>
68-
</li>
69-
<li data-theme="deep-orange">
70-
<div class="deep-orange"></div>
71-
<span>Deep Orange</span>
72-
</li>
73-
<li data-theme="brown">
74-
<div class="brown"></div>
75-
<span>Brown</span>
76-
</li>
77-
<li data-theme="grey">
78-
<div class="grey"></div>
79-
<span>Grey</span>
80-
</li>
81-
<li data-theme="blue-grey">
82-
<div class="blue-grey"></div>
83-
<span>Blue Grey</span>
84-
</li>
85-
<li data-theme="black">
86-
<div class="black"></div>
87-
<span>Black</span>
9+
<li *ngFor="let theme of themes" [ngClass]="{'active': selectedThemeCssClass == theme.cssClass}" (click)="setTheme(theme)">
10+
<div class="{{theme.cssClass}}"></div>
11+
<span>{{theme.name}}</span>
8812
</li>
8913
</ul>
9014
</div>

‎angular/src/app/layout/right-sidebar.component.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,61 @@
11
import { Component, Injector, ViewEncapsulation } from '@angular/core';
22
import { AppComponentBase } from '@shared/app-component-base';
33

4+
class UiThemeInfo {
5+
constructor(
6+
public name: string,
7+
public cssClass: string
8+
) {
9+
10+
}
11+
}
12+
413
@Component({
514
templateUrl: './right-sidebar.component.html',
615
selector: 'right-sidebar',
716
encapsulation: ViewEncapsulation.None
817
})
918
export class RightSideBarComponent extends AppComponentBase {
1019

20+
themes: UiThemeInfo[] = [
21+
new UiThemeInfo("Red", "red"),
22+
new UiThemeInfo("Pink", "pink"),
23+
new UiThemeInfo("Purple", "purple"),
24+
new UiThemeInfo("Deep Purple", "deep-purple"),
25+
new UiThemeInfo("Indigo", "indigo"),
26+
new UiThemeInfo("Blue", "blue"),
27+
new UiThemeInfo("Light Blue", "light-blue"),
28+
new UiThemeInfo("Cyan", "cyan"),
29+
new UiThemeInfo("Teal", "teal"),
30+
new UiThemeInfo("Green", "green"),
31+
new UiThemeInfo("Light Green", "light-green"),
32+
new UiThemeInfo("Lime", "lime"),
33+
new UiThemeInfo("Yellow", "yellow"),
34+
new UiThemeInfo("Amber", "amber"),
35+
new UiThemeInfo("Orange", "orange"),
36+
new UiThemeInfo("Deep Orange", "deep-orange"),
37+
new UiThemeInfo("Brown", "brown"),
38+
new UiThemeInfo("Grey", "grey"),
39+
new UiThemeInfo("Blue Grey", "blue-grey"),
40+
new UiThemeInfo("Black", "black")
41+
];
42+
43+
selectedThemeCssClass: string = "red";
44+
1145
constructor(
1246
injector: Injector
1347
) {
1448
super(injector);
1549
}
50+
51+
setTheme(theme: UiThemeInfo): void {
52+
const $body = $('body');
53+
54+
$('.right-sidebar .demo-choose-skin li').removeClass('active');
55+
$body.removeClass('theme-' + this.selectedThemeCssClass);
56+
$('.right-sidebar .demo-choose-skin li div.' + theme.cssClass).closest('li').addClass('active');
57+
$body.addClass('theme-' + theme.cssClass);
58+
59+
this.selectedThemeCssClass = theme.cssClass;
60+
}
1661
}

‎angular/src/bsb-theme/js/demo.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
$.AdminBSB.activateDemo = function() {
2-
skinChanger();
32
activateNotificationAndTasksScroll();
43

54
setSkinListHeightAndScroll();
@@ -10,21 +9,6 @@
109
});
1110
};
1211

13-
//Skin changer
14-
function skinChanger() {
15-
$('.right-sidebar .demo-choose-skin li').on('click', function () {
16-
var $body = $('body');
17-
var $this = $(this);
18-
19-
var existTheme = $('.right-sidebar .demo-choose-skin li.active').data('theme');
20-
$('.right-sidebar .demo-choose-skin li').removeClass('active');
21-
$body.removeClass('theme-' + existTheme);
22-
$this.addClass('active');
23-
24-
$body.addClass('theme-' + $this.data('theme'));
25-
});
26-
}
27-
2812
//Skin tab content set height and show scroll
2913
function setSkinListHeightAndScroll() {
3014
var height = $(window).height() - ($('.navbar').innerHeight() + $('.right-sidebar .nav-tabs').outerHeight());

0 commit comments

Comments
 (0)