From 0a3c98ec42ae0779f69596bc449dc5e7431358b8 Mon Sep 17 00:00:00 2001 From: Alexander Zhukov Date: Thu, 20 Apr 2017 13:28:56 +0300 Subject: [PATCH] fix(sidebar): fix #997 --- .angular-cli.json | 9 +- src/app/app.component.scss | 123 +++++++++++ src/app/app.component.spec.ts | 42 ---- src/app/app.component.ts | 3 +- src/app/app.scss | 2 - .../theme/components/baSidebar/baSidebar.scss | 203 ++++-------------- src/app/theme/initial.scss | 4 - src/app/theme/theme.scss | 27 +-- 8 files changed, 186 insertions(+), 227 deletions(-) delete mode 100644 src/app/app.component.spec.ts delete mode 100644 src/app/app.scss delete mode 100644 src/app/theme/initial.scss diff --git a/.angular-cli.json b/.angular-cli.json index 151c380dd6..aca32db776 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,22 +19,23 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "../node_modules/normalize.css/normalize.css", - "../node_modules/bootstrap/scss/bootstrap.scss", "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss", + "../node_modules/normalize.css/normalize.css", "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/ionicons/scss/ionicons.scss", + "../node_modules/bootstrap/scss/bootstrap.scss", "../node_modules/leaflet/dist/leaflet.css", "../node_modules/chartist/dist/chartist.css", "../node_modules/fullcalendar/dist/fullcalendar.css", - "app/theme/initial.scss", "app/theme/theme.scss", "styles.scss" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", + "../node_modules/easy-pie-chart/dist/jquery.easypiechart.js", + "../node_modules/jquery-slimscroll/jquery.slimscroll.js", "../node_modules/tether/dist/js/tether.js", - "../node_modules/easy-pie-chart/dist/jquery.easypiechart.js" + "../node_modules/bootstrap/dist/js/bootstrap.js" ], "environmentSource": "environments/environment.ts", "environments": { diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29bb2..7bea11fa36 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,123 @@ +@import './theme/sass/conf/conf'; +@import './theme/components/baSidebar/baSidebar'; + +:host /deep/ { + @mixin layout-collapsed() { + .al-main { + margin-left: 50px; + } + .al-footer { + padding-left: 83px; + } + } + + @mixin sidebar-collapsed() { + .al-sidebar { + width: 52px; + + .fa-angle-down, .fa-angle-up { + opacity: 0; + } + + .al-sidebar-sublist { + position: absolute; + top: -1px; + left: 52px; + @include bg-translucent-dark(0.8); + width: 0; + display: block; + overflow: hidden; + transition: width 0.5s ease; + &.slide-right { + width: 135px; + } + &::before { + display: none; + } + li { + &::before { + display: none; + } + a { + padding-left: 18px; + padding-right: 18px; + min-width: 130px; + white-space: nowrap; + } + } + } + + .sidebar-hover-elem, .sidebar-select-elem { + left: 48px; + } + } + } + + @mixin sidebar-overlap() { + .al-sidebar { + width: $sidebar-width; + @include bg-translucent-dark(0.75); + transition: width 0.5s ease; + + .fa-angle-down, .fa-angle-up { + opacity: 1; + } + + .al-sidebar-sublist { + @include default-sublist(); + top: auto; + left: auto; + background: none; + width: auto; + overflow: visible; + transition: none; + } + + .sidebar-hover-elem, .sidebar-select-elem { + left: $sidebar-width - 4; + transition: left 0.5s ease; + } + } + } + + @mixin sidebar-hidden() { + .al-sidebar { + width: 0; + } + .sidebar-hover-elem, .sidebar-select-elem { + display: none; + } + } + + @media (min-width: 1200px) { + .menu-collapsed { + @include layout-collapsed(); + } + } + + @media (max-width: 1200px) and (min-width: $resXS) { + @include layout-collapsed(); + } + + @media (min-width: $resXS + 1) { + .menu-collapsed { + @include sidebar-collapsed(); + } + } + + @media (max-width: 1200px) { + @include sidebar-overlap(); + } + + @media (max-width: $resXS) { + .menu-collapsed { + @include sidebar-hidden(); + } + .al-main { + margin-left: 0; + } + .al-footer { + padding-left: 0; + } + } +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index ce49430112..0000000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { - inject, - async, - TestBed, - ComponentFixture -} from '@angular/core/testing'; - -// Load the implementations that should be tested -import { App } from './app.component'; -import { GlobalState } from './global.state'; -import { BaImageLoaderService, BaThemeSpinner } from './theme/services'; -import { BaThemeConfigProvider } from './theme/theme.configProvider'; -import { BaThemeConfig } from './theme/theme.config'; - -describe(`App`, () => { - let comp: App; - let fixture: ComponentFixture; - - // async beforeEach - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ App ], - schemas: [NO_ERRORS_SCHEMA], - providers: [GlobalState, BaImageLoaderService, BaThemeSpinner, BaThemeConfigProvider, BaThemeConfig] - }) - .compileComponents(); // compile template and css - })); - - // synchronous beforeEach - beforeEach(() => { - fixture = TestBed.createComponent(App); - comp = fixture.componentInstance; - - fixture.detectChanges(); // trigger initial data binding - }); - - it(`should be readly initialized`, () => { - expect(fixture).toBeDefined(); - expect(comp).toBeDefined(); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 89673dce72..1349d24215 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -12,8 +12,9 @@ import { layoutPaths } from './theme/theme.constants'; */ @Component({ selector: 'app', + styleUrls: ['./app.component.scss'], template: ` -
+
diff --git a/src/app/app.scss b/src/app/app.scss deleted file mode 100644 index 4edfcd5a8b..0000000000 --- a/src/app/app.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "~normalize.css"; -@import "theme/theme"; diff --git a/src/app/theme/components/baSidebar/baSidebar.scss b/src/app/theme/components/baSidebar/baSidebar.scss index b042835f55..701842e4a0 100644 --- a/src/app/theme/components/baSidebar/baSidebar.scss +++ b/src/app/theme/components/baSidebar/baSidebar.scss @@ -1,11 +1,48 @@ @import '../../sass/conf/conf'; $sidebar-scroll-width: 4px; -$angle-left: "\f100"; -$angle-right: "\f101"; +$angle-left: '\f100'; +$angle-right: '\f101'; + +@mixin default-sublist() { + padding: 0; + list-style: none; + position: relative; + display: none; + &.expanded { + display: block; + } + > ba-menu-item > li { + display: block; + float: none; + padding: 0; + border-bottom: none; + position: relative; + a { + display: block; + text-shadow: none; + font-size: 13px; + text-decoration: none; + color: $sidebar-text; + padding-left: 52px; + height: auto; + line-height: 29px; + &:hover { + color: $primary; + } + } + &.selected:not(.with-sub-menu) > a { + border: none; + background-color: $primary; + &:hover { + color: $sidebar-text; + } + } -:host /deep/{ + } +} +:host /deep/ { .al-sidebar { width: $sidebar-width; top: $top-height; @@ -114,59 +151,11 @@ $angle-right: "\f101"; } .slimScrollBar, .slimScrollRail { - border-radius: 0px !important; + border-radius: 0 !important; width: $sidebar-scroll-width !important; left: $sidebar-width - $sidebar-scroll-width; } - @mixin layout-collapsed() { - .al-main { - margin-left: 50px; - } - - .al-footer { - padding-left: 83px - } - } - - @mixin default-sublist() { - padding: 0; - list-style: none; - position: relative; - display: none; - &.expanded { - display: block; - } - > ba-menu-item > li { - display: block; - float: none; - padding: 0; - border-bottom: none; - position: relative; - a { - display: block; - text-shadow: none; - font-size: 13px; - text-decoration: none; - color: $sidebar-text; - padding-left: 52px; - height: auto; - line-height: 29px; - &:hover { - color: $primary; - } - } - &.selected:not(.with-sub-menu) > a { - border: none; - background-color: $primary; - &:hover { - color: $sidebar-text; - } - } - - } - } - .al-sidebar-sublist { @include default-sublist(); } @@ -188,119 +177,9 @@ $angle-right: "\f101"; top: 94px; } - @mixin sidebar-collapsed() { - .al-sidebar { - width: 52px; - - .fa-angle-down, .fa-angle-up { - opacity: 0; - } - - .al-sidebar-sublist { - position: absolute; - top: -1px; - left: 52px; - @include bg-translucent-dark(0.8); - width: 0; - display: block; - overflow: hidden; - transition: width 0.5s ease; - &.slide-right { - width: 135px; - } - &:before { - display: none; - } - li { - &:before { - display: none; - } - a { - padding-left: 18px; - padding-right: 18px; - min-width: 130px; - white-space: nowrap; - } - } - } - - .sidebar-hover-elem, .sidebar-select-elem { - left: 48px; - } - } - } - - @mixin sidebar-hidden() { - .al-sidebar { - width: 0; - } - .sidebar-hover-elem, .sidebar-select-elem { - display: none; - } - } - - @mixin sidebar-overlap() { - .al-sidebar { - width: $sidebar-width; - @include bg-translucent-dark(0.75); - transition: width 0.5s ease; - - .fa-angle-down, .fa-angle-up { - opacity: 1; - } - - .al-sidebar-sublist { - @include default-sublist(); - top: auto; - left: auto; - background: none; - width: auto; - overflow: visible; - transition: none; - } - - .sidebar-hover-elem, .sidebar-select-elem { - left: $sidebar-width - 4; - transition: left 0.5s ease; - } - } - } - .menu-collapsed { .slimScrollBar, .slimScrollRail { display: none !important; } } - - @media (min-width: 1200px) { - .menu-collapsed { - @include layout-collapsed(); - } - } - - @media (min-width: $resXS + 1) { - .menu-collapsed { - @include sidebar-collapsed(); - } - } - - @media (max-width: 1200px) and (min-width: $resXS) { - @include layout-collapsed(); - } - - @media (max-width: 1200px) { - @include sidebar-overlap(); - } - - @media (max-width: $resXS) { - .menu-collapsed { - @include sidebar-hidden(); - } - .al-main { - margin-left: 0; - } - .al-footer { - padding-left: 0; - } - } } diff --git a/src/app/theme/initial.scss b/src/app/theme/initial.scss deleted file mode 100644 index 7c93928d6e..0000000000 --- a/src/app/theme/initial.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'sass/conf/conf'; -@import 'sass/preloader'; -@import 'sass/ionicons'; -@import 'sass/fonts'; diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss index cc92f4cd12..c0cefb1c4f 100644 --- a/src/app/theme/theme.scss +++ b/src/app/theme/theme.scss @@ -1,12 +1,15 @@ -@import "sass/conf/conf"; -@import "sass/bootstrap-overrides/overrides"; -@import "~animate.css/animate"; -@import "sass/typography"; -@import "sass/buttons"; -@import "sass/icons"; -@import "sass/layout"; -@import "sass/socicon"; -@import "sass/table"; -@import "sass/form"; -@import "sass/treeView"; -@import "sass/modal"; +@import 'sass/conf/conf'; +@import 'sass/bootstrap-overrides/overrides'; +@import '~animate.css/animate'; +@import 'sass/typography'; +@import 'sass/buttons'; +@import 'sass/icons'; +@import 'sass/layout'; +@import 'sass/socicon'; +@import 'sass/table'; +@import 'sass/form'; +@import 'sass/treeView'; +@import 'sass/modal'; +@import 'sass/preloader'; +@import 'sass/ionicons'; +@import 'sass/fonts';