Skip to content

Commit 269171a

Browse files
shoudaosshoudaos
committed
added theme helper component
1 parent 1a36b39 commit 269171a

File tree

11 files changed

+251
-6
lines changed

11 files changed

+251
-6
lines changed

‎src/app/app.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ declare let jQuery: any;
66
export class AppConfig {
77
config = {
88
name: 'sing',
9-
title: 'Sing Dashboard App with Angular 7.0 support by Flatlogic',
9+
title: 'Sing Dashboard App with Angular 8.0 support by Flatlogic',
1010
version: '4.0.0',
1111
/**
1212
* Whether to print and alert some log information

‎src/app/layout/helper/helper.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component, HostBinding} from '@angular/core';
2+
3+
@Component({
4+
selector: 'theme-helper',
5+
templateUrl: './helper.template.html',
6+
styleUrls: ['./helper.style.scss']
7+
})
8+
export class HelperComponent {
9+
@HostBinding('class.theme-helper') themeHelperClass = true;
10+
@HostBinding('class.theme-helper-opened') isOpened = false;
11+
12+
toggle() {
13+
this.isOpened = !this.isOpened;
14+
}
15+
}

‎src/app/layout/helper/helper.style.scss

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@import '../../styles/helpers';
2+
3+
.abc-radio-secondary input[type="radio"]:not(:checked) + label::before {
4+
background-color: #798892;
5+
}
6+
7+
.abc-radio-warning input[type="radio"]:not(:checked) + label::before {
8+
background-color: theme-color('warning');
9+
}
10+
11+
.theme-switcher {
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
16+
.theme {
17+
position: relative;
18+
19+
&,
20+
& > label {
21+
width: 100%;
22+
height: max-content;
23+
}
24+
25+
& > input {
26+
position: absolute;
27+
width: 0;
28+
height: 0;
29+
padding: 0;
30+
margin: 0;
31+
pointer-events: none;
32+
opacity: 0;
33+
}
34+
35+
& > label {
36+
margin: 0;
37+
border: 1px solid $input-border-color;
38+
padding: 3px;
39+
border-radius: $border-radius;
40+
transition: background-color .2s ease-in-out;
41+
cursor: pointer;
42+
display: block;
43+
44+
&:hover {
45+
background-color: $gray-200;
46+
}
47+
}
48+
49+
& > input:checked + label {
50+
background-color: $gray-300;
51+
}
52+
53+
.theme-image {
54+
width: 100%;
55+
}
56+
}
57+
}
58+
59+
.theme-helper-btn {
60+
position: absolute;
61+
width: $sidebar-width-open / 4;
62+
transform: translateX(-76px);
63+
margin-top: -($widget-padding-vertical);
64+
cursor: pointer;
65+
z-index: 200;
66+
border-radius: 50% 0 0 50%;
67+
padding: $spacer * 0.8 $spacer / 2 $spacer * 0.8 $spacer;
68+
69+
&,
70+
&:not(.active) {
71+
box-shadow: $widget-shadow-designated !important;
72+
}
73+
74+
i {
75+
animation-duration: 6500ms;
76+
animation-iteration-count: infinite;
77+
animation-timing-function: linear;
78+
}
79+
80+
i:first-of-type {
81+
animation-name: spin;
82+
margin-right: -$spacer * 1.15;
83+
vertical-align: text-bottom;
84+
}
85+
86+
i:last-of-type {
87+
animation-name: spin-reverse;
88+
vertical-align: $font-size-sm;
89+
}
90+
}
91+
92+
.theme-helper-spinner {
93+
font-size: $font-size-lg * 1.4;
94+
line-height: initial;
95+
}
96+
97+
.theme-helper-header {
98+
padding-top: 0;
99+
100+
h6 {
101+
margin: auto;
102+
}
103+
}
104+
105+
.theme-helper-content {
106+
box-shadow: $widget-shadow-designated;
107+
border-radius: 0;
108+
}
109+
110+
.theme-helper-sharing {
111+
font-size: $font-size-lg;
112+
cursor: pointer;
113+
}
114+
115+
.glyphicon {
116+
vertical-align: top;
117+
}
118+
119+
@keyframes spin {
120+
0% {
121+
transform: rotate(0deg);
122+
}
123+
124+
50% {
125+
transform: rotate(360deg);
126+
}
127+
}
128+
129+
@keyframes spin-reverse {
130+
0% {
131+
transform: rotate(0deg);
132+
}
133+
134+
50% {
135+
transform: rotate(-360deg);
136+
}
137+
}

‎src/app/layout/helper/helper.template.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<widget class="theme-helper-content">
2+
<header class="theme-helper-header d-flex p-0">
3+
<button class="btn btn-warning theme-helper-btn" (click)="toggle()">
4+
<div class="theme-helper-spinner text-white">
5+
<i class="la la-cog"></i>
6+
<i class="la la-cog"></i>
7+
</div>
8+
</button>
9+
<h6 class="mb-3">Theme</h6>
10+
</header>
11+
<div class="theme-switcher">
12+
<div class="theme mb-3">
13+
<input [checked]="true" type="radio" id="css-light" value="option2" name="theme-variant" aria-label="Sing Light" readOnly/>
14+
<label for="css-light">
15+
<img class="theme-image" src="assets/img/theme-light.png" alt="light theme"/>
16+
</label>
17+
</div>
18+
<div class="theme">
19+
<input [checked]="false" type="radio" id="css-dark" value="option1" name="theme-variant" aria-label="Single Dark" readOnly/>
20+
<label for="css-dark">
21+
<img class="theme-image" src="assets/img/theme-dark.png" alt="dark theme"/>
22+
</label>
23+
</div>
24+
</div>
25+
<div class="mt-4">
26+
<a href="https://flatlogic.com/admin-dashboards/sing-app-react" target="_blank"
27+
class="btn btn-warning btn-rounded-f btn-block fs-mini"
28+
>
29+
<span class="text-white">Purchase</span>
30+
</a>
31+
<a
32+
href="http://demo.flatlogic.com/sing-app/documentation/" target="_blank"
33+
class="btn btn-rounded-f btn-secondary btn-block fs-mini"
34+
>
35+
Documentation
36+
</a>
37+
</div>
38+
<div class="d-flex justify-content-between mt-lg">
39+
<a
40+
href="https://flatlogic.com/contact" target="_blank"
41+
class="btn btn-outline-default btn-rounded-f fs-mini text-muted px-2"
42+
>
43+
<i class="glyphicon glyphicon-headphones mr-xs"></i>
44+
Support
45+
</a>
46+
<a
47+
href="https://github.com/flatlogic/sing-app" target="_blank"
48+
class="btn btn-outline-default btn-rounded-f fs-mini text-muted px-2"
49+
>
50+
<i class="fa fa-github mr-xs"></i>
51+
Github
52+
</a>
53+
</div>
54+
<div class="mt-lg d-flex flex-column align-items-center theme-helper__sharing">
55+
<span class="fs-sm">
56+
Thank you for sharing!
57+
</span>
58+
<div class="d-flex justify-content-center text-light mt-2">
59+
<a
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
href="https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-dashboard&via=flatlogic"
63+
>
64+
<i class="fa fa-twitter pr-1"></i>
65+
</a>
66+
<a
67+
href="https://www.facebook.com/search/top/?q=flatlogic%20llc"
68+
target="_blank"
69+
rel="noopener noreferrer"
70+
>
71+
<i class="fa fa-facebook pl-1"></i>
72+
</a>
73+
</div>
74+
</div>
75+
</widget>

‎src/app/layout/layout.module.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { NotificationsLoadDirective } from './notifications/notifications-load.d
1717
import { NotificationsComponent } from './notifications/notifications.component';
1818

1919
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
20+
import {HelperComponent} from './helper/helper.component';
21+
import {NewWidgetModule} from './new-widget/widget.module';
2022

2123
@NgModule({
2224
imports: [
@@ -25,7 +27,8 @@ import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
2527
BsDropdownModule.forRoot(),
2628
ROUTES,
2729
FormsModule,
28-
LoadingBarRouterModule
30+
LoadingBarRouterModule,
31+
NewWidgetModule
2932
],
3033
declarations: [
3134
LayoutComponent,
@@ -35,7 +38,8 @@ import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
3538
SearchPipe,
3639
NotificationsComponent,
3740
NotificationsLoadDirective,
38-
ChatMessageComponent
41+
ChatMessageComponent,
42+
HelperComponent
3943
]
4044
})
4145
export class LayoutModule {

‎src/app/layout/layout.template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<app-navbar (toggleSidebarEvent)="toggleSidebarListener($event)"
33
(toggleChatEvent)="toggleChatListener()" class="page-controls navbar navbar-dashboard"></app-navbar>
44
<app-chat-sidebar class="chat-sidebar"></app-chat-sidebar>
5-
5+
<theme-helper></theme-helper>
66
<div class="content-wrap" id="content-wrap">
77
<ngx-loading-bar></ngx-loading-bar>
88
<main id="content" class="content" role="main">

‎src/app/layout/navbar/navbar.template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h6 class="title">
8989
</span>
9090
Jess Smith
9191
</h6>
92-
<p class="text">Hi there! <br> This is a completely new version of Sing App <br> built with <strong class="text-danger">Angular 7.0 Final Release</strong> </p>
92+
<p class="text">Hi there! <br> This is a completely new version of Sing App <br> built with <strong class="text-danger">Angular 8.0 Final Release</strong> </p>
9393
</div>
9494
</div>
9595
</li>

‎src/app/pages/package/package.template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h3>Angular 2+ Version</h3>
5757
your expect your application to have a well-engineered structure and development workflow. If you are familiar
5858
with Java or .NET ecosystems Angular is definitely your choice.
5959
</p>
60-
<p>Our app is built on top of the latest <strong>Angular 7.0</strong> version and
60+
<p>Our app is built on top of the latest <strong>Angular 8.0</strong> version and
6161
uses <a href="https://webpack.js.org/">Webpack</a> Module Bundler and NPM as a package manager, so everything
6262
works out of the box! <br><br></p>
6363
<a class="btn btn-link btn-lg btn-block disabled" href="#">(You are here)</a>

‎src/app/styles/_base.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1149,3 +1149,17 @@ app, .app {
11491149
border-left: none;
11501150
}
11511151
}
1152+
1153+
.theme-helper {
1154+
width: $sidebar-width-open;
1155+
position: fixed;
1156+
right: -$sidebar-width-open;
1157+
top: $navbar-height * 1.5;
1158+
z-index: 100;
1159+
1160+
@include transition(right $sidebar-transition-time ease-in-out);
1161+
1162+
&.theme-helper-opened {
1163+
right: 0;
1164+
}
1165+
}

‎src/assets/img/theme-dark.png

112 KB
Loading

‎src/assets/img/theme-light.png

111 KB
Loading

0 commit comments

Comments
 (0)