From 9541d21c489d4d4e713c958b4b02d9f9933f1761 Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 8 Jul 2019 22:25:25 +0200 Subject: [PATCH] layout missing options --- js/demo.js | 42 +++++++++++++++++++++++---- pages/_data/menu.yml | 2 +- pages/{layout.html => customize.html} | 12 ++++++-- pages/layout-header-dark.html | 1 - pages/layout-header-sticky.html | 1 - pages/layout-navbar-folded.html | 1 - pages/layout-navbar-left.html | 1 - pages/layout-navbar-right.html | 1 - pages/layout-navbar-top.html | 1 - pages/layout-navbar-white.html | 1 - scss/layout/_navbar.scss | 2 +- 11 files changed, 48 insertions(+), 17 deletions(-) rename pages/{layout.html => customize.html} (79%) diff --git a/js/demo.js b/js/demo.js index 70de37d0..223b64ee 100644 --- a/js/demo.js +++ b/js/demo.js @@ -30,11 +30,13 @@ class TablerDemo { getConfig = function () { return { colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light', - sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'light', - headerColor: (localStorage.getItem('tablerHeaderColor')) ? localStorage.getItem('tablerHeaderColor') : 'light', navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side', + headerColor: (localStorage.getItem('tablerHeaderColor')) ? localStorage.getItem('tablerHeaderColor') : 'light', + headerFixed: (localStorage.getItem('tablerHeaderFixed')) ? localStorage.getItem('tablerHeaderFixed') : 'default', + sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'dark', sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default', - sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left' + sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left', + sidebarFixed: (localStorage.getItem('tablerSidebarFixed')) ? localStorage.getItem('tablerSidebarFixed') : 'fixed', }; }; @@ -55,10 +57,12 @@ class TablerDemo { this.toggleColorScheme(form.querySelector('[name="color-scheme"]:checked').value); this.toggleNavPosition(form.querySelector('[name="nav-position"]:checked').value); - this.toggleSidebarPosition(form.querySelector('[name="sidebar-position"]:checked').value); + this.toggleHeaderColor(form.querySelector('[name="header-color"]:checked').value); + this.toggleHeaderFixed(form.querySelector('[name="header-fixed"]:checked').value); this.toggleSidebarSize(form.querySelector('[name="sidebar-size"]:checked').value); this.toggleSidebarColor(form.querySelector('[name="sidebar-color"]:checked').value); - this.toggleHeaderColor(form.querySelector('[name="header-color"]:checked').value); + this.toggleSidebarPosition(form.querySelector('[name="sidebar-position"]:checked').value); + this.toggleSidebarFixed(form.querySelector('[name="sidebar-fixed"]:checked').value); }; initFormControls = function() { @@ -66,10 +70,12 @@ class TablerDemo { this.toggleColorScheme(config.colorScheme); this.toggleNavPosition(config.navPosition); + this.toggleHeaderColor(config.headerColor); + this.toggleHeaderFixed(config.headerFixed); this.toggleSidebarPosition(config.sidebarPosition); this.toggleSidebarSize(config.sidebarSize); this.toggleSidebarColor(config.sidebarColor); - this.toggleHeaderColor(config.headerColor); + this.toggleSidebarFixed(config.sidebarFixed); }; setFormValue = function(name, value,) { @@ -142,6 +148,18 @@ class TablerDemo { }); }; + toggleSidebarFixed(fixed) { + return this.setConfig('sidebarFixed', fixed, ['fixed', 'default'], () => { + if (fixed === 'fixed') { + document.querySelector('.js-sidebar').classList.add('navbar-fixed'); + } else { + document.querySelector('.js-sidebar').classList.remove('navbar-fixed'); + } + + this.setFormValue('sidebar-fixed', fixed); + }); + }; + toggleHeaderColor(color) { return this.setConfig('headerColor', color, ['dark', 'light'], () => { if (color === 'dark') { @@ -153,6 +171,18 @@ class TablerDemo { this.setFormValue('header-color', color); }); }; + + toggleHeaderFixed(fixed) { + return this.setConfig('headerFixed', fixed, ['fixed', 'default'], () => { + if (fixed === 'fixed') { + document.querySelector('.js-header').classList.add('navbar-fixed'); + } else { + document.querySelector('.js-header').classList.remove('navbar-fixed'); + } + + this.setFormValue('header-fixed', fixed); + }); + }; } /* diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index 9db2dd9c..eb1eb2dd 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -62,7 +62,7 @@ changelog: label: v1.0 customize: - url: # + url: customize.html title: Customize icon: sliders diff --git a/pages/layout.html b/pages/customize.html similarity index 79% rename from pages/layout.html rename to pages/customize.html index f23efd3f..6a4eff9b 100644 --- a/pages/layout.html +++ b/pages/customize.html @@ -18,6 +18,14 @@ title: Layout manager {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %} +
+ + {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %} +
+
+ + {% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %} +
{% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %} @@ -31,8 +39,8 @@ title: Layout manager {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
- - {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %} + + {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
diff --git a/pages/layout-header-dark.html b/pages/layout-header-dark.html index b08bdeb8..66ec4a66 100644 --- a/pages/layout-header-dark.html +++ b/pages/layout-header-dark.html @@ -4,4 +4,3 @@ header-dark: true page-title: Dashboard --- -{% include_cached layout/homepage.html %} diff --git a/pages/layout-header-sticky.html b/pages/layout-header-sticky.html index 760b717c..0c6b5a40 100644 --- a/pages/layout-header-sticky.html +++ b/pages/layout-header-sticky.html @@ -5,4 +5,3 @@ page-title: Dashboard header-sticky: true --- -{% include_cached layout/homepage.html %} diff --git a/pages/layout-navbar-folded.html b/pages/layout-navbar-folded.html index fec88778..49f8511f 100644 --- a/pages/layout-navbar-folded.html +++ b/pages/layout-navbar-folded.html @@ -7,4 +7,3 @@ sidenav-folded: true sidenav-dark: true --- -{% include_cached layout/homepage.html %} diff --git a/pages/layout-navbar-left.html b/pages/layout-navbar-left.html index b75d8734..3134a4f5 100644 --- a/pages/layout-navbar-left.html +++ b/pages/layout-navbar-left.html @@ -6,4 +6,3 @@ page-title: Dashboard sidenav-dark: true --- -{% include_cached layout/homepage.html %} diff --git a/pages/layout-navbar-right.html b/pages/layout-navbar-right.html index 7e1d67c4..bec9bd4b 100644 --- a/pages/layout-navbar-right.html +++ b/pages/layout-navbar-right.html @@ -6,4 +6,3 @@ page-title: Dashboard sidenav-dark: true --- -{% include_cached layout/homepage.html %} diff --git a/pages/layout-navbar-top.html b/pages/layout-navbar-top.html index db86fba5..dadcb0ca 100644 --- a/pages/layout-navbar-top.html +++ b/pages/layout-navbar-top.html @@ -3,4 +3,3 @@ title: Navbar top page-title: Dashboard --- -{% include_cached layout/homepage.html %} diff --git a/pages/layout-navbar-white.html b/pages/layout-navbar-white.html index 87f24723..3f3efb2b 100644 --- a/pages/layout-navbar-white.html +++ b/pages/layout-navbar-white.html @@ -5,4 +5,3 @@ nav-position: left page-title: Dashboard --- -{% include_cached layout/homepage.html %} diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index cb671f59..ab85e6e8 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -205,7 +205,7 @@ Sidebar /* Fixed navbar */ -.navbar-fixed { +.navbar-side { position: fixed; top: 0; bottom: 0; -- GitLab