From 247d598edb3ea7b3bdf195216045d9fde54a40ac Mon Sep 17 00:00:00 2001 From: NGPixel Date: Mon, 26 Jun 2017 17:47:01 -0400 Subject: [PATCH] feat: Color Themes - Header + Sidebar + Footer support --- client/js/pages/source-view.component.js | 4 +- client/scss/components/footer.scss | 7 ++++ client/scss/components/nav.scss | 42 +++++++++++++++++-- client/scss/components/sidebar.scss | 51 ++++++++++++++++++++++++ server/app/data.yml | 7 ++++ server/views/common/footer.pug | 2 +- server/views/common/header.pug | 2 +- server/views/layout.pug | 2 +- 8 files changed, 107 insertions(+), 10 deletions(-) diff --git a/client/js/pages/source-view.component.js b/client/js/pages/source-view.component.js index eda8f910..6cfb0cfa 100644 --- a/client/js/pages/source-view.component.js +++ b/client/js/pages/source-view.component.js @@ -1,7 +1,5 @@ 'use strict' -/* global siteRoot */ - export default { name: 'source-view', data() { @@ -9,7 +7,7 @@ export default { }, mounted() { let self = this - FuseBox.import(siteRoot + '/js/ace/ace.js', (ace) => { + FuseBox.import('/js/ace/ace.js', (ace) => { let scEditor = ace.edit('source-display') scEditor.setTheme('ace/theme/dawn') scEditor.getSession().setMode('ace/mode/markdown') diff --git a/client/scss/components/footer.scss b/client/scss/components/footer.scss index 0fcf7c3e..f4a86d9b 100644 --- a/client/scss/components/footer.scss +++ b/client/scss/components/footer.scss @@ -27,4 +27,11 @@ } + @each $color, $colorvalue in $material-colors { + &.is-#{$color} { + background-color: mc($color,'50'); + color: mc($color,'500'); + } + } + } diff --git a/client/scss/components/nav.scss b/client/scss/components/nav.scss index 87e8f17b..81698dfc 100644 --- a/client/scss/components/nav.scss +++ b/client/scss/components/nav.scss @@ -10,25 +10,37 @@ z-index: 2; color: #FFF; + /* THEME OVERRIDE - START */ + @each $color, $colorvalue in $material-colors { &.is-#{$color} { background-color: mc($color, '500'); box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2); + .nav-item a, a.nav-item { + color: mc($color, '50'); + + &:hover { + color: mc($color, '200'); + } + + } + + h1:hover { + color: mc($color, '100'); + } + .nav-item { .button { - border: 1px solid mc($color, '900'); background-color: mc($color, '800'); &.is-outlined { background-color: mc($color, '600'); - border-color: mc($color, '800'); color: mc($color, '100'); } &:hover { - border-color: mc($color, '900'); background-color: mc($color, '900'); } @@ -36,9 +48,31 @@ } + .control { + + input[type=text] { + background-color: mc($color, '800'); + border-color: mc($color, '400'); + color: mc($color, '50'); + + &:focus { + border-color: mc($color, '200'); + box-shadow: inset 0 0 5px 0 rgba(mc($color, '900'), 0.5); + } + + @include placeholder { + color: mc($color, '200'); + } + + } + + } + } } + /* THEME OVERRIDE - END */ + } .nav-left { @@ -117,7 +151,7 @@ } &:hover { - color: mc('indigo', '100'); + color: mc($primary, '100'); } } diff --git a/client/scss/components/sidebar.scss b/client/scss/components/sidebar.scss index 56439c84..084f16ff 100644 --- a/client/scss/components/sidebar.scss +++ b/client/scss/components/sidebar.scss @@ -135,3 +135,54 @@ } } + +/* THEME OVERRIDE - START */ + +@each $color, $colorvalue in $material-colors { + .is-alternate-#{$color} .sidebar { + background-color: mc($color, '900'); + color: mc($color, '50'); + + aside { + .sidebar-label { + color: mc($color, '300'); + background-color: mc($color, '800'); + } + .sidebar-menu { + li { + a { + color: mc($color, '50'); + + &.is-active { + border-left-color: mc($color, '500'); + color: mc($color, '300'); + + .is-small { + color: mc($color, '500'); + } + } + + &:hover { + color: mc($color, '400'); + } + + i { + color: mc($color, '300'); + } + } + > ul { + border-top-color: lighten(mc($color, '900'), 3%); + border-bottom-color: lighten(mc($color, '900'), 2%); + background-color: darken(mc($color, '900'), 2%); + + li a { + color: mc($color, '100'); + } + } + } + } + } + } +} + +/* THEME OVERRIDE - END */ diff --git a/server/app/data.yml b/server/app/data.yml index 8ee8dd9f..74fa4b79 100644 --- a/server/app/data.yml +++ b/server/app/data.yml @@ -57,6 +57,13 @@ defaults: papertrail: false rollbar: false sentry: false + theme: + primary: indigo + alt: blue-grey + footer: blue-grey + code: + dark: true + colorize: true langs: - id: en diff --git a/server/views/common/footer.pug b/server/views/common/footer.pug index a67e3616..a7f284d3 100644 --- a/server/views/common/footer.pug +++ b/server/views/common/footer.pug @@ -1,4 +1,4 @@ -footer.footer +footer.footer(class=['is-' + appconfig.theme.footer]) span = t('footer.poweredby') + ' ' a(href='https://github.com/Requarks/wiki') Wiki.js diff --git a/server/views/common/header.pug b/server/views/common/header.pug index c324a70d..dc7dacf7 100644 --- a/server/views/common/header.pug +++ b/server/views/common/header.pug @@ -1,6 +1,6 @@ #header-container - nav.nav#header + nav.nav#header(class=['is-' + appconfig.theme.primary]) .nav-left block rootNavLeft a.nav-item(href='/') diff --git a/server/views/layout.pug b/server/views/layout.pug index beb0c26b..4e0f0a9f 100644 --- a/server/views/layout.pug +++ b/server/views/layout.pug @@ -29,7 +29,7 @@ html block head body - #root.has-stickynav + #root.has-stickynav(class=['is-primary-' + appconfig.theme.primary, 'is-alternate-' + appconfig.theme.alt]) include ./common/header.pug alert main