From a73662f1d921ead889c857ec736a8f72612a9797 Mon Sep 17 00:00:00 2001 From: Vladislav Ahmetvaliev Date: Wed, 9 Jan 2019 17:11:47 +0300 Subject: [PATCH] feat(settings): redesign setting sidebar (#1982) --- .../components/header/header.component.html | 1 - .../components/header/header.component.scss | 10 +- src/app/@theme/components/index.ts | 1 + .../theme-settings.component.scss | 36 +++++-- .../theme-settings.component.ts | 6 +- .../toggle-settings-button.component.scss | 97 +++++++++++++++++++ .../toggle-settings-button.component.ts | 33 +++++++ .../@theme/layouts/sample/sample.layout.scss | 42 +++++--- .../@theme/layouts/sample/sample.layout.ts | 3 +- src/app/@theme/theme.module.ts | 2 + .../map/country-orders-map.component.scss | 4 + .../pages/maps/leaflet/leaflet.component.scss | 4 + 12 files changed, 210 insertions(+), 29 deletions(-) create mode 100644 src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss create mode 100644 src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index 8c51289d5a..1ab9eef13a 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -14,7 +14,6 @@ size="medium" [class.right]="position === 'normal'" [class.left]="position === 'inverse'"> - diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss index f498f00751..1c7a2c7256 100644 --- a/src/app/@theme/components/header/header.component.scss +++ b/src/app/@theme/components/header/header.component.scss @@ -94,7 +94,7 @@ } } - .toggle-layout /deep/ a { + .toggle-settings /deep/ a { display: block; text-decoration: none; line-height: 1; @@ -155,7 +155,7 @@ @include media-breakpoint-down(md) { - nb-action:not(.toggle-layout) { + nb-action:not(.toggle-settings) { border: none; } @@ -163,7 +163,7 @@ display: none; } - .toggle-layout { + .toggle-settings { padding: 0; } @@ -191,7 +191,7 @@ } } - .toggle-layout { + .toggle-settings { display: none; } @@ -199,7 +199,7 @@ display: none; } - nb-action:not(.toggle-layout) { + nb-action:not(.toggle-settings) { padding: 0; } } diff --git a/src/app/@theme/components/index.ts b/src/app/@theme/components/index.ts index 86b7f91e28..a3140c91a4 100644 --- a/src/app/@theme/components/index.ts +++ b/src/app/@theme/components/index.ts @@ -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'; diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.scss b/src/app/@theme/components/theme-settings/theme-settings.component.scss index b23be934b9..58301ba85d 100644 --- a/src/app/@theme/components/theme-settings/theme-settings.component.scss +++ b/src/app/@theme/components/theme-settings/theme-settings.component.scss @@ -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); } @@ -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 { @@ -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); } } diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.ts b/src/app/@theme/components/theme-settings/theme-settings.component.ts index 3c6dea0228..63230aa083 100644 --- a/src/app/@theme/components/theme-settings/theme-settings.component.ts +++ b/src/app/@theme/components/theme-settings/theme-settings.component.ts @@ -26,8 +26,10 @@ import { StateService } from '../../../@core/utils'; -
- +
+
+ +
`, }) diff --git a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss new file mode 100644 index 0000000000..a872c2c117 --- /dev/null +++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss @@ -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; + } + } +} diff --git a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts new file mode 100644 index 0000000000..b44909499f --- /dev/null +++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts @@ -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: ` + + `, +}) +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; + } +} diff --git a/src/app/@theme/layouts/sample/sample.layout.scss b/src/app/@theme/layouts/sample/sample.layout.scss index 0249988768..ac70a3e3b8 100644 --- a/src/app/@theme/layouts/sample/sample.layout.scss +++ b/src/app/@theme/layouts/sample/sample.layout.scss @@ -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 { @@ -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; } diff --git a/src/app/@theme/layouts/sample/sample.layout.ts b/src/app/@theme/layouts/sample/sample.layout.ts index 297fdec229..22a4275cf2 100644 --- a/src/app/@theme/layouts/sample/sample.layout.ts +++ b/src/app/@theme/layouts/sample/sample.layout.ts @@ -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({ @@ -57,6 +57,7 @@ import { StateService } from '../../../@core/utils/state.service'; + `, }) export class SampleLayoutComponent implements OnDestroy { diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 9cba96f3e2..4d967c9e8f 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -50,6 +50,7 @@ import { ThemeSwitcherComponent, TinyMCEComponent, ThemeSwitcherListComponent, + ToggleSettingsButtonComponent, } from './components'; import { CapitalizePipe, @@ -121,6 +122,7 @@ const COMPONENTS = [ SampleLayoutComponent, ThreeColumnsLayoutComponent, TwoColumnsLayoutComponent, + ToggleSettingsButtonComponent, ]; const ENTRY_COMPONENTS = [ diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss index 2dd905c81f..0361b33f63 100644 --- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss +++ b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss @@ -21,6 +21,10 @@ } } + /deep/ .leaflet-top, /deep/ .leaflet-bottom { + z-index: 997; + } + /deep/ .leaflet-bar { box-shadow: none; } diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss index 2d6a821698..5a46781ea2 100644 --- a/src/app/pages/maps/leaflet/leaflet.component.scss +++ b/src/app/pages/maps/leaflet/leaflet.component.scss @@ -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);