From 8fa672edd1789917c86b7d740a29bac68c34022d Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Sat, 27 Jun 2020 14:32:34 -0700 Subject: [PATCH] Updates themes to use vars (#541) * Adds vars for themeing * Uses correct color vars * Adds more vars * Adds other variables * Use data attribute only * Adds animation and unifies color * Fixes tests * Fixes search * Adds docker ignore * Fixes search text * Fixes int tests * Fixes int tests again --- assets/App.vue | 24 ++---- assets/components/LogViewer.vue | 8 +- assets/components/MobileMenu.vue | 12 ++- assets/components/ScrollProgress.vue | 17 ++-- assets/components/ScrollableView.vue | 39 +++++++-- assets/components/Search.vue | 23 +++-- assets/components/SideMenu.vue | 40 +-------- assets/index.ejs | 5 +- assets/pages/Index.vue | 16 +--- assets/pages/Settings.vue | 45 ++++------ assets/pages/__snapshots__/Index.spec.js.snap | 2 +- assets/styles.scss | 81 +++++++++++++----- integration/.dockerignore | 1 + ...ge-renders-full-page-on-desktop-1-snap.png | Bin 27011 -> 27200 bytes ...home-page-renders-ipad-viewport-1-snap.png | Bin 45638 -> 46352 bytes ...me-page-renders-iphone-viewport-1-snap.png | Bin 60892 -> 62317 bytes 16 files changed, 153 insertions(+), 160 deletions(-) create mode 100644 integration/.dockerignore diff --git a/assets/App.vue b/assets/App.vue index 3eab8fc5..1dc1499a 100644 --- a/assets/App.vue +++ b/assets/App.vue @@ -83,7 +83,7 @@ export default { document.documentElement.classList.add("has-custom-scrollbars"); } if (this.hasLightTheme) { - document.documentElement.classList.add("has-light-theme"); + document.documentElement.setAttribute("data-theme", "light"); } this.menuWidth = this.settings.menuWidth; }, @@ -97,11 +97,11 @@ export default { }, hasLightTheme(newValue, oldValue) { if (newValue) { - document.documentElement.classList.add("has-light-theme"); + document.documentElement.setAttribute("data-theme", "light"); } else { - document.documentElement.classList.remove("has-light-theme"); + document.documentElement.removeAttribute("data-theme"); } - } + }, }, computed: { ...mapState(["activeContainers", "isMobile", "settings"]), @@ -132,9 +132,9 @@ export default { - diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue index 7c148754..23df6b01 100644 --- a/assets/components/LogViewer.vue +++ b/assets/components/LogViewer.vue @@ -92,8 +92,8 @@ export default { background-color: #262626; color: #258ccd; - html.has-light-theme & { - background-color: #F0F0F0; + [data-theme="light"] & { + background-color: #f0f0f0; color: #009900; padding-left: 5px; padding-right: 5px; @@ -110,8 +110,8 @@ li.event { ::v-deep mark { border-radius: 2px; - background-color: #ffdd57; - animation: pops 0.2s ease-out; + background-color: var(--secondary-color); + animation: pops 200ms ease-out; display: inline-block; } diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue index c1418d29..e58fc46e 100644 --- a/assets/components/MobileMenu.vue +++ b/assets/components/MobileMenu.vue @@ -2,7 +2,7 @@