mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(settings): redesign setting sidebar (#1982)
This commit is contained in:
Vladislav Ahmetvaliev
Denis Strigo
parent
47d232b606
commit
a73662f1d9
12 changed files with 210 additions and 29 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
&.expanded, &.expanded.start {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
|||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
<ngx-toggle-settings-button></ngx-toggle-settings-button>
|
||||
`,
|
||||
})
|
||||
export class SampleLayoutComponent implements OnDestroy {
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
/deep/ .leaflet-top, /deep/ .leaflet-bottom {
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
/deep/ .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue