Skip to content

Commit

Permalink
feat(settings): redesign setting sidebar (#1982)
Browse files Browse the repository at this point in the history
  • Loading branch information
V-Ahmetvaliev authored and denStrigo committed Jan 9, 2019
1 parent 47d232b commit a73662f
Show file tree
Hide file tree
Showing 12 changed files with 210 additions and 29 deletions.
1 change: 0 additions & 1 deletion src/app/@theme/components/header/header.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
size="medium"
[class.right]="position === 'normal'"
[class.left]="position === 'inverse'">
<nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
<nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
Expand Down
10 changes: 5 additions & 5 deletions src/app/@theme/components/header/header.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
}
}

.toggle-layout /deep/ a {
.toggle-settings /deep/ a {
display: block;
text-decoration: none;
line-height: 1;
Expand Down Expand Up @@ -155,15 +155,15 @@

@include media-breakpoint-down(md) {

nb-action:not(.toggle-layout) {
nb-action:not(.toggle-settings) {
border: none;
}

.control-item {
display: none;
}

.toggle-layout {
.toggle-settings {
padding: 0;
}

Expand Down Expand Up @@ -191,15 +191,15 @@
}
}

.toggle-layout {
.toggle-settings {
display: none;
}

ngx-theme-switcher {
display: none;
}

nb-action:not(.toggle-layout) {
nb-action:not(.toggle-settings) {
padding: 0;
}
}
Expand Down
1 change: 1 addition & 0 deletions src/app/@theme/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ export * from './theme-switcher/theme-switcher.component';
export * from './switcher/switcher.component';
export * from './layout-direction-switcher/layout-direction-switcher.component';
export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
export * from './toggle-settings-button/toggle-settings-button.component';
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,45 @@

@include nb-install-component() {
h6 {
margin-bottom: 0.5rem;
margin-bottom: 0.875rem;
text-align: center;
font-weight: bold;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
}

.settings-row {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: center;
align-items: center;
flex-wrap: wrap;

width: 90%;
margin: 0 0 1rem;
width: 100%;
margin: 0 0 2.575rem;

a {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 4.15rem;
height: 4.15rem;
border-radius: nb-theme(radius);
background-color: nb-theme(color-white);
border: 2px solid transparent;
margin: 0.875rem;
text-decoration: none;
font-size: 2.25rem;

color: nb-theme(color-fg);

&.selected {
color: nb-theme(color-success);
border-color: nb-theme(color-success);
}

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

.switcher {
margin-bottom: 1rem;
font-size: 1.524rem;
width: 12rem;

/deep/ ngx-switcher {
.switch-label span {
font-size: 1em;
font-weight: normal;
&.first, &.second {
font-size: 1rem;
}
}

.switch {
Expand All @@ -56,8 +76,8 @@
}

input:checked + .slider::before {
@include nb-ltr(transform, translateX(1.5rem)!important);
@include nb-rtl(transform, translateX(-1.5rem)!important);
@include nb-ltr(transform, translateX(1.5em)!important);
@include nb-rtl(transform, translateX(-1.5em)!important);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,10 @@ import { StateService } from '../../../@core/utils';
<i [attr.class]="sidebar.icon"></i>
</a>
</div>
<div class="switcher">
<ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
<div class="settings-row">
<div class="switcher">
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
</div>
</div>
`,
})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
.toggle-settings {
position: fixed;
top: 50%;
height: 8.575rem;
width: 8.575rem;
border: none;
transition: transform 0.3s ease, background-image 0.3s ease;
transform: translate(0, -50%);
z-index: 998;

@include nb-ltr() {
border-top-left-radius: nb-theme(radius);
border-bottom-left-radius: nb-theme(radius);
right: 0;

&.sidebarEnd {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
right: auto;
border-top-right-radius: nb-theme(radius);
border-bottom-right-radius: nb-theme(radius);
left: 0;
}
}

@include nb-rtl() {
border-top-right-radius: nb-theme(radius);
border-bottom-right-radius: nb-theme(radius);
left: 0;

&.sidebarEnd {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
left: auto;
border-top-left-radius: nb-theme(radius);
border-bottom-left-radius: nb-theme(radius);
right: 0;
}
}

&.expanded {
@include nb-ltr(transform, translate(-19rem, -50%));
@include nb-rtl(transform, translate(19rem, -50%));

&.sidebarEnd {
@include nb-rtl(transform, translate(-19rem, -50%));
@include nb-ltr(transform, translate(19rem, -50%));
}
}

@include nb-for-theme(cosmic) {
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%);

&.expanded {
background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
}
}

@include nb-for-theme(default) {
border: 1px solid #d5dbe0;
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
background-color: #ffffff;
}

@include nb-for-theme(corporate) {
border: 1px solid #d5dbe0;
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
color: nb-theme(color-danger);
background-color: #ffffff;
}

i {
font-size: 6rem;
color: #ffffff;

@include nb-for-theme(default) {
color: nb-theme(color-danger);
}

@include nb-for-theme(corporate) {
color: nb-theme(color-warning);
}
}
}

@include media-breakpoint-down(sm) {
.toggle-settings {
display: none;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component } from '@angular/core';
import { NbSidebarService } from '@nebular/theme';
import { StateService } from '../../../@core/utils';

@Component({
selector: 'ngx-toggle-settings-button',
styleUrls: ['./toggle-settings-button.component.scss'],
template: `
<button class="toggle-settings"
(click)="toggleSettings()"
[class.expanded]="expanded"
[class.sidebarEnd]="sidebarEnd">
<i class="nb-gear"></i>
</button>
`,
})
export class ToggleSettingsButtonComponent {

sidebarEnd = false;
expanded = false;

constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
this.stateService.onSidebarState()
.subscribe(({id}) => {
this.sidebarEnd = id === 'end';
});
}

toggleSettings() {
this.sidebarService.toggle(false, 'settings-sidebar');
this.expanded = !this.expanded;
}
}
42 changes: 30 additions & 12 deletions src/app/@theme/layouts/sample/sample.layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@
}

nb-sidebar.settings-sidebar {
$sidebar-width: 7.5rem;
$sidebar-width: 19rem;

transition: width 0.3s ease;
transition: transform 0.3s ease;
width: $sidebar-width;
overflow: hidden;
@include nb-ltr(transform, translateX(100%));
@include nb-rtl(transform, translateX(-100%));
&.start {
@include nb-ltr(transform, translateX(-100%));
@include nb-rtl(transform, translateX(100%));
}

&.collapsed {
width: 0;

/deep/ .main-container {
width: 0;
&.expanded, &.expanded.start {
transform: translateX(0);
}

.scrollable {
width: $sidebar-width;
padding: 1.25rem;
}
}
/deep/ .scrollable {
width: $sidebar-width;
padding: 3.4rem 0.25rem;
}

/deep/ .main-container {
Expand Down Expand Up @@ -106,6 +108,22 @@
}

/deep/ nb-menu {
& > .menu-items {
& > .menu-item:first-child {
.menu-title {
&::after {
content: 'new';
color: nb-theme(color-white);
margin-left: 1rem;
background: nb-theme(color-danger);
padding: 0 0.5rem;
border-radius: nb-theme(radius);
font-size: nb-theme(font-size-sm);
}
}
}
}

.nb-e-commerce {
font-size: 2rem;
}
Expand Down
3 changes: 2 additions & 1 deletion src/app/@theme/layouts/sample/sample.layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
NbThemeService,
} from '@nebular/theme';

import { StateService } from '../../../@core/utils/state.service';
import { StateService } from '../../../@core/utils';

// TODO: move layouts into the framework
@Component({
Expand Down Expand Up @@ -57,6 +57,7 @@ import { StateService } from '../../../@core/utils/state.service';
<ngx-theme-settings></ngx-theme-settings>
</nb-sidebar>
</nb-layout>
<ngx-toggle-settings-button></ngx-toggle-settings-button>
`,
})
export class SampleLayoutComponent implements OnDestroy {
Expand Down
2 changes: 2 additions & 0 deletions src/app/@theme/theme.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import {
ThemeSwitcherComponent,
TinyMCEComponent,
ThemeSwitcherListComponent,
ToggleSettingsButtonComponent,
} from './components';
import {
CapitalizePipe,
Expand Down Expand Up @@ -121,6 +122,7 @@ const COMPONENTS = [
SampleLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
ToggleSettingsButtonComponent,
];

const ENTRY_COMPONENTS = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@
}
}

/deep/ .leaflet-top, /deep/ .leaflet-bottom {
z-index: 997;
}

/deep/ .leaflet-bar {
box-shadow: none;
}
Expand Down
4 changes: 4 additions & 0 deletions src/app/pages/maps/leaflet/leaflet.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
padding: 0;
}

/deep/ .leaflet-top, /deep/ .leaflet-bottom {
z-index: 997;
}

/deep/ .leaflet-container {
width: 100%;
height: nb-theme(card-height-large);
Expand Down

0 comments on commit a73662f

Please sign in to comment.