Skip to content

Commit a73662f

Browse files
V-AhmetvalievdenStrigo
V-Ahmetvaliev
authored and
denStrigo
committed
feat(settings): redesign setting sidebar (#1982)
1 parent 47d232b commit a73662f

File tree

12 files changed

+210
-29
lines changed

12 files changed

+210
-29
lines changed

‎src/app/@theme/components/header/header.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
size="medium"
1515
[class.right]="position === 'normal'"
1616
[class.left]="position === 'inverse'">
17-
<nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
1817
<nb-action *nbIsGranted="['view', 'user']" >
1918
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
2019
</nb-action>

‎src/app/@theme/components/header/header.component.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
}
9595
}
9696

97-
.toggle-layout /deep/ a {
97+
.toggle-settings /deep/ a {
9898
display: block;
9999
text-decoration: none;
100100
line-height: 1;
@@ -155,15 +155,15 @@
155155

156156
@include media-breakpoint-down(md) {
157157

158-
nb-action:not(.toggle-layout) {
158+
nb-action:not(.toggle-settings) {
159159
border: none;
160160
}
161161

162162
.control-item {
163163
display: none;
164164
}
165165

166-
.toggle-layout {
166+
.toggle-settings {
167167
padding: 0;
168168
}
169169

@@ -191,15 +191,15 @@
191191
}
192192
}
193193

194-
.toggle-layout {
194+
.toggle-settings {
195195
display: none;
196196
}
197197

198198
ngx-theme-switcher {
199199
display: none;
200200
}
201201

202-
nb-action:not(.toggle-layout) {
202+
nb-action:not(.toggle-settings) {
203203
padding: 0;
204204
}
205205
}

‎src/app/@theme/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from './theme-switcher/theme-switcher.component';
77
export * from './switcher/switcher.component';
88
export * from './layout-direction-switcher/layout-direction-switcher.component';
99
export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
10+
export * from './toggle-settings-button/toggle-settings-button.component';

‎src/app/@theme/components/theme-settings/theme-settings.component.scss‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,45 @@
22

33
@include nb-install-component() {
44
h6 {
5-
margin-bottom: 0.5rem;
5+
margin-bottom: 0.875rem;
6+
text-align: center;
7+
font-weight: bold;
8+
text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
69
}
710

811
.settings-row {
912
display: flex;
1013
flex-direction: row;
11-
justify-content: space-between;
14+
justify-content: center;
1215
align-items: center;
1316
flex-wrap: wrap;
14-
15-
width: 90%;
16-
margin: 0 0 1rem;
17+
width: 100%;
18+
margin: 0 0 2.575rem;
1719

1820
a {
21+
display: flex;
22+
justify-content: center;
23+
align-content: center;
24+
align-items: center;
25+
width: 4.15rem;
26+
height: 4.15rem;
27+
border-radius: nb-theme(radius);
28+
background-color: nb-theme(color-white);
29+
border: 2px solid transparent;
30+
margin: 0.875rem;
1931
text-decoration: none;
2032
font-size: 2.25rem;
21-
2233
color: nb-theme(color-fg);
2334

2435
&.selected {
2536
color: nb-theme(color-success);
37+
border-color: nb-theme(color-success);
2638
}
2739

2840
@include nb-for-theme(cosmic) {
41+
box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
42+
background-color: #3e367e;
43+
border: 2px solid #3e367e;
2944
&.selected {
3045
color: nb-theme(link-color);
3146
}
@@ -39,11 +54,16 @@
3954

4055
.switcher {
4156
margin-bottom: 1rem;
57+
font-size: 1.524rem;
58+
width: 12rem;
4259

4360
/deep/ ngx-switcher {
4461
.switch-label span {
4562
font-size: 1em;
4663
font-weight: normal;
64+
&.first, &.second {
65+
font-size: 1rem;
66+
}
4767
}
4868

4969
.switch {
@@ -56,8 +76,8 @@
5676
}
5777

5878
input:checked + .slider::before {
59-
@include nb-ltr(transform, translateX(1.5rem)!important);
60-
@include nb-rtl(transform, translateX(-1.5rem)!important);
79+
@include nb-ltr(transform, translateX(1.5em)!important);
80+
@include nb-rtl(transform, translateX(-1.5em)!important);
6181
}
6282
}
6383

‎src/app/@theme/components/theme-settings/theme-settings.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ import { StateService } from '../../../@core/utils';
2626
<i [attr.class]="sidebar.icon"></i>
2727
</a>
2828
</div>
29-
<div class="switcher">
30-
<ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
29+
<div class="settings-row">
30+
<div class="switcher">
31+
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
32+
</div>
3133
</div>
3234
`,
3335
})

‎src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@import '../../styles/themes';
2+
@import '~bootstrap/scss/mixins/breakpoints';
3+
@import '~@nebular/theme/styles/global/breakpoints';
4+
5+
@include nb-install-component() {
6+
.toggle-settings {
7+
position: fixed;
8+
top: 50%;
9+
height: 8.575rem;
10+
width: 8.575rem;
11+
border: none;
12+
transition: transform 0.3s ease, background-image 0.3s ease;
13+
transform: translate(0, -50%);
14+
z-index: 998;
15+
16+
@include nb-ltr() {
17+
border-top-left-radius: nb-theme(radius);
18+
border-bottom-left-radius: nb-theme(radius);
19+
right: 0;
20+
21+
&.sidebarEnd {
22+
border-top-left-radius: 0;
23+
border-bottom-left-radius: 0;
24+
right: auto;
25+
border-top-right-radius: nb-theme(radius);
26+
border-bottom-right-radius: nb-theme(radius);
27+
left: 0;
28+
}
29+
}
30+
31+
@include nb-rtl() {
32+
border-top-right-radius: nb-theme(radius);
33+
border-bottom-right-radius: nb-theme(radius);
34+
left: 0;
35+
36+
&.sidebarEnd {
37+
border-top-right-radius: 0;
38+
border-bottom-right-radius: 0;
39+
left: auto;
40+
border-top-left-radius: nb-theme(radius);
41+
border-bottom-left-radius: nb-theme(radius);
42+
right: 0;
43+
}
44+
}
45+
46+
&.expanded {
47+
@include nb-ltr(transform, translate(-19rem, -50%));
48+
@include nb-rtl(transform, translate(19rem, -50%));
49+
50+
&.sidebarEnd {
51+
@include nb-rtl(transform, translate(-19rem, -50%));
52+
@include nb-ltr(transform, translate(19rem, -50%));
53+
}
54+
}
55+
56+
@include nb-for-theme(cosmic) {
57+
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
58+
background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%);
59+
60+
&.expanded {
61+
background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
62+
}
63+
}
64+
65+
@include nb-for-theme(default) {
66+
border: 1px solid #d5dbe0;
67+
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
68+
background-color: #ffffff;
69+
}
70+
71+
@include nb-for-theme(corporate) {
72+
border: 1px solid #d5dbe0;
73+
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
74+
color: nb-theme(color-danger);
75+
background-color: #ffffff;
76+
}
77+
78+
i {
79+
font-size: 6rem;
80+
color: #ffffff;
81+
82+
@include nb-for-theme(default) {
83+
color: nb-theme(color-danger);
84+
}
85+
86+
@include nb-for-theme(corporate) {
87+
color: nb-theme(color-warning);
88+
}
89+
}
90+
}
91+
92+
@include media-breakpoint-down(sm) {
93+
.toggle-settings {
94+
display: none;
95+
}
96+
}
97+
}

‎src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
import { NbSidebarService } from '@nebular/theme';
3+
import { StateService } from '../../../@core/utils';
4+
5+
@Component({
6+
selector: 'ngx-toggle-settings-button',
7+
styleUrls: ['./toggle-settings-button.component.scss'],
8+
template: `
9+
<button class="toggle-settings"
10+
(click)="toggleSettings()"
11+
[class.expanded]="expanded"
12+
[class.sidebarEnd]="sidebarEnd">
13+
<i class="nb-gear"></i>
14+
</button>
15+
`,
16+
})
17+
export class ToggleSettingsButtonComponent {
18+
19+
sidebarEnd = false;
20+
expanded = false;
21+
22+
constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
23+
this.stateService.onSidebarState()
24+
.subscribe(({id}) => {
25+
this.sidebarEnd = id === 'end';
26+
});
27+
}
28+
29+
toggleSettings() {
30+
this.sidebarService.toggle(false, 'settings-sidebar');
31+
this.expanded = !this.expanded;
32+
}
33+
}

‎src/app/@theme/layouts/sample/sample.layout.scss‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,25 @@
88
}
99

1010
nb-sidebar.settings-sidebar {
11-
$sidebar-width: 7.5rem;
11+
$sidebar-width: 19rem;
1212

13-
transition: width 0.3s ease;
13+
transition: transform 0.3s ease;
1414
width: $sidebar-width;
1515
overflow: hidden;
16+
@include nb-ltr(transform, translateX(100%));
17+
@include nb-rtl(transform, translateX(-100%));
18+
&.start {
19+
@include nb-ltr(transform, translateX(-100%));
20+
@include nb-rtl(transform, translateX(100%));
21+
}
1622

17-
&.collapsed {
18-
width: 0;
19-
20-
/deep/ .main-container {
21-
width: 0;
23+
&.expanded, &.expanded.start {
24+
transform: translateX(0);
25+
}
2226

23-
.scrollable {
24-
width: $sidebar-width;
25-
padding: 1.25rem;
26-
}
27-
}
27+
/deep/ .scrollable {
28+
width: $sidebar-width;
29+
padding: 3.4rem 0.25rem;
2830
}
2931

3032
/deep/ .main-container {
@@ -106,6 +108,22 @@
106108
}
107109

108110
/deep/ nb-menu {
111+
& > .menu-items {
112+
& > .menu-item:first-child {
113+
.menu-title {
114+
&::after {
115+
content: 'new';
116+
color: nb-theme(color-white);
117+
margin-left: 1rem;
118+
background: nb-theme(color-danger);
119+
padding: 0 0.5rem;
120+
border-radius: nb-theme(radius);
121+
font-size: nb-theme(font-size-sm);
122+
}
123+
}
124+
}
125+
}
126+
109127
.nb-e-commerce {
110128
font-size: 2rem;
111129
}

‎src/app/@theme/layouts/sample/sample.layout.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
NbThemeService,
1010
} from '@nebular/theme';
1111

12-
import { StateService } from '../../../@core/utils/state.service';
12+
import { StateService } from '../../../@core/utils';
1313

1414
// TODO: move layouts into the framework
1515
@Component({
@@ -57,6 +57,7 @@ import { StateService } from '../../../@core/utils/state.service';
5757
<ngx-theme-settings></ngx-theme-settings>
5858
</nb-sidebar>
5959
</nb-layout>
60+
<ngx-toggle-settings-button></ngx-toggle-settings-button>
6061
`,
6162
})
6263
export class SampleLayoutComponent implements OnDestroy {

‎src/app/@theme/theme.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import {
5050
ThemeSwitcherComponent,
5151
TinyMCEComponent,
5252
ThemeSwitcherListComponent,
53+
ToggleSettingsButtonComponent,
5354
} from './components';
5455
import {
5556
CapitalizePipe,
@@ -121,6 +122,7 @@ const COMPONENTS = [
121122
SampleLayoutComponent,
122123
ThreeColumnsLayoutComponent,
123124
TwoColumnsLayoutComponent,
125+
ToggleSettingsButtonComponent,
124126
];
125127

126128
const ENTRY_COMPONENTS = [

0 commit comments

Comments
 (0)