From 19c6c77746dbbd4df5c46b91d07d8f0102306540 Mon Sep 17 00:00:00 2001 From: Matthias Date: Mon, 28 Dec 2020 16:54:14 +0100 Subject: [PATCH 1/8] Improve styling, introduce FT dark style --- public/index.html | 4 +- src/components/BootswatchThemeSelect.vue | 12 +++++- src/styles/_styles_ovw.scss | 47 ++++++++++++++++++++++++ src/styles/main.scss | 6 +-- 4 files changed, 63 insertions(+), 6 deletions(-) diff --git a/public/index.html b/public/index.html index 7a90a450..76dad075 100644 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,11 @@ - + - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/BootswatchThemeSelect.vue index 6773c3f7..8b1fa2aa 100644 --- a/src/components/BootswatchThemeSelect.vue +++ b/src/components/BootswatchThemeSelect.vue @@ -40,6 +40,11 @@ export default { description: 'Plain bootstrap default theme', dark: false, }, + { + name: 'Bootstrap_dark', + description: 'Plain dark bootstrap default theme', + dark: true, + }, { name: 'Cerulean', description: 'A calm blue sky', @@ -161,9 +166,13 @@ export default { if (this.activeTheme === themeName) { return; } - if (themeName.toLowerCase() === 'bootstrap') { + if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') { const styles = document.getElementsByTagName('style'); const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch')); + document.documentElement.setAttribute( + 'data-theme', + themeName.toLowerCase() === 'bootstrap_dark' ? 'dark' : 'light', + ); // Reset all bootswatch styles bw.forEach((style, index) => { bw[index].disabled = true; @@ -172,6 +181,7 @@ export default { // Dynamic import for a different theme, to avoid loading ALL themes. import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => { console.log('theme', mod); + document.documentElement.removeAttribute('data-theme'); const styles = document.getElementsByTagName('style'); const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch')); bw.forEach((style, index) => { diff --git a/src/styles/_styles_ovw.scss b/src/styles/_styles_ovw.scss index 37931af2..5a035809 100644 --- a/src/styles/_styles_ovw.scss +++ b/src/styles/_styles_ovw.scss @@ -3,3 +3,50 @@ // html, body, #app{ // } + + +[data-theme="dark"] { + $bg-dark: #3c3c3c; + $bg-darker: darken($bg-dark, 5%); + $fg-color: #dedede; + background-color: darken($bg-dark, 5%) ; + color: #eee !important; + .card { + border: 0; + } + .card-body { + background: $bg-dark; + color: $fg-color; + } + .card-header { + background: lighten($bg-dark, 5%); + color: $fg-color; + } + .table { + color: $fg-color; + } + .list-group-item { + color: $fg-color; + background: $bg-dark; + } + // .custom-select { + // color: $fg-color; + // // background: $bg-dark; + // } + .nav-link.active { + color: $fg-color; + background: $bg-darker; + } + .modal-content { + color: $fg-color; + background: $bg-dark; + } + .form-control { + color: $fg-color; + background: $bg-dark; + } + textarea { + color: $fg-color; + background: $bg-dark; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 6038cf05..6808cf96 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,8 +1,8 @@ -@import '_bootstrap_variables_ovw.scss'; +@import 'bootstrap_variables_ovw'; -@import '~bootstrap/scss/bootstrap.scss'; -@import '~bootstrap-vue/src/index.scss'; +@import '~bootstrap/scss/bootstrap'; +@import '~bootstrap-vue/src/index'; @import 'variables'; @import 'styles_ovw'; From ea5e135a69e8605e85f18493d42c3fa5cf38644d Mon Sep 17 00:00:00 2001 From: Matthias Date: Mon, 28 Dec 2020 19:33:03 +0100 Subject: [PATCH 2/8] Simplify bootswatch_themeselect, transition colormove --- src/components/BootswatchThemeSelect.vue | 36 ++++++++++++++++++------ src/styles/_styles_ovw.scss | 18 ++++++++++-- 2 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/BootswatchThemeSelect.vue index 8b1fa2aa..57afe48a 100644 --- a/src/components/BootswatchThemeSelect.vue +++ b/src/components/BootswatchThemeSelect.vue @@ -1,6 +1,7 @@ - diff --git a/src/styles/_styles_ovw.scss b/src/styles/_styles_ovw.scss index 5a035809..e99ab45e 100644 --- a/src/styles/_styles_ovw.scss +++ b/src/styles/_styles_ovw.scss @@ -10,9 +10,13 @@ $bg-darker: darken($bg-dark, 5%); $fg-color: #dedede; background-color: darken($bg-dark, 5%) ; - color: #eee !important; + color: $fg-color !important; + body { + background: $bg-darker; + color: $fg-color; + } .card { - border: 0; + border-color: $bg-dark; } .card-body { background: $bg-dark; @@ -50,3 +54,13 @@ background: $bg-dark; } } + + +html.ft-theme-transition, +html.ft-theme-transition *, +html.ft-theme-transition *:before, +html.ft-theme-transition *:after { + transition:background 750ms linear, + border-color 750ms linear; + transition-delay: 0 !important; +} From e352dff2e37fb0e2f9c7e98ec79072d2769873e7 Mon Sep 17 00:00:00 2001 From: Matthias Date: Mon, 28 Dec 2020 20:34:54 +0100 Subject: [PATCH 3/8] Extract theme selection to shared js file introduce simple theme mode (only dark / light selections) --- src/components/BootswatchThemeSelect.vue | 158 +++----------------- src/components/charts/CumProfitChart.vue | 9 +- src/components/charts/DailyChart.vue | 6 +- src/components/charts/HourlyChart.vue | 10 +- src/components/layout/NavBar.vue | 1 + src/shared/themes.ts | 181 +++++++++++++++++++++++ src/store/index.ts | 22 +++ 7 files changed, 247 insertions(+), 140 deletions(-) create mode 100644 src/shared/themes.ts diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/BootswatchThemeSelect.vue index 57afe48a..10cdec63 100644 --- a/src/components/BootswatchThemeSelect.vue +++ b/src/components/BootswatchThemeSelect.vue @@ -8,13 +8,13 @@ right lazy > - + Loading Themes... { (bw[index] as any).disabled = true; }); - document.documentElement.classList.add('ft-theme-transition'); - window.setTimeout(() => { - document.documentElement.classList.remove('ft-theme-transition'); - }, 1000); + if (this.simple) { + // Only transition if simple mode is active + document.documentElement.classList.add('ft-theme-transition'); + window.setTimeout(() => { + document.documentElement.classList.remove('ft-theme-transition'); + }, 1000); + } } else { // Dynamic import for a different theme, to avoid loading ALL themes. import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => { @@ -219,7 +109,7 @@ export default Vue.extend({ }); } // Save the theme as localstorage - window.localStorage.theme = themeName; + this.setCurrentTheme(themeName); this.activeTheme = themeName; }, fetchApi() { @@ -227,17 +117,17 @@ export default Vue.extend({ // Not used, but useful for updating the static array of themes if bootswatch dependency is outdated. axios .get('https://bootswatch.com/api/4.json') - .then((res) => { - const { themes } = res.data; - this.themes = themes; + // .then((res) => { - // Use this code in the browser console and copy and paste the filteredThemes into this.themes - // console.log(themes); - // const filteredThemes = []; - // themes.forEach((item) => - // filteredThemes.push({ name: item.name, description: item.description }), - // ); - }) + // const { themes } = res.data; + // this.themes = themes; + // Use this code in the browser console and copy and paste the filteredThemes into this.themes + // console.log(themes); + // const filteredThemes = []; + // themes.forEach((item) => + // filteredThemes.push({ name: item.name, description: item.description }), + // ); + // }) .catch((error) => { console.error(error); }); diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue index cab0b8af..52bdc12d 100644 --- a/src/components/charts/CumProfitChart.vue +++ b/src/components/charts/CumProfitChart.vue @@ -1,9 +1,10 @@