From 3a8d7e3617671eecbda1c592b053c21668519624 Mon Sep 17 00:00:00 2001 From: Brandon Fergerson Date: Sun, 1 May 2022 17:48:45 +0400 Subject: [PATCH 1/4] portal size --- src/layout/components/AppMain.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 98aab484..6b4c2b47 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -33,9 +33,9 @@ let portalStyle = reactive({}); if (query["portal"] === "true") { // eslint-disable-next-line no-undef portalStyle = reactive({ - "height": "100%", - "max-height": "375px", - "max-width": "800px", + height: "100%", + "max-height": "350px", + "max-width": "963px", }); } From e378a1a25117be28e19a86e5ca6ab22a84514104 Mon Sep 17 00:00:00 2001 From: Brandon Fergerson Date: Mon, 2 May 2022 13:46:38 +0400 Subject: [PATCH 2/4] increase scroll delay --- src/components/FullVue.vue | 2 +- src/views/dashboard/controls/Tab.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue index 4bbfac50..2b9cd329 100644 --- a/src/components/FullVue.vue +++ b/src/components/FullVue.vue @@ -86,7 +86,7 @@ export default defineComponent({ if (isScrolling.value) { setTimeout(() => { isScrolling.value = false; - }, 600); + }, 800); } } function scrollUp() { diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 56396450..c2abfefc 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -254,7 +254,7 @@ export default defineComponent({ if (isScrolling.value) { setTimeout(() => { isScrolling.value = false; - }, 600); + }, 800); } } watch( From 75e8b2c08ae50da13f996ea2df93b0bba81f171c Mon Sep 17 00:00:00 2001 From: Brandon Fergerson Date: Mon, 2 May 2022 13:47:27 +0400 Subject: [PATCH 3/4] scrollable tabs --- src/styles/jetbrains-dark.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss index 7e218b0d..bf7c21b7 100644 --- a/src/styles/jetbrains-dark.scss +++ b/src/styles/jetbrains-dark.scss @@ -281,6 +281,10 @@ } .tabs { + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + input { background: inherit !important; } From 212e706caab2ee95cf60f4cedb3966290de6f461 Mon Sep 17 00:00:00 2001 From: Brandon Fergerson Date: Mon, 2 May 2022 15:30:47 +0400 Subject: [PATCH 4/4] theming --- src/styles/jetbrains-dark.scss | 87 ++++++++++++++++--- src/views/dashboard/controls/Tab.vue | 2 +- src/views/dashboard/data.ts | 6 +- src/views/dashboard/graphs/Bar.vue | 2 +- src/views/dashboard/graphs/Line.vue | 2 +- src/views/dashboard/graphs/TopList.vue | 2 +- .../graphs/components/ColumnGraph.vue | 2 +- 7 files changed, 84 insertions(+), 19 deletions(-) diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss index bf7c21b7..a9ff9d40 100644 --- a/src/styles/jetbrains-dark.scss +++ b/src/styles/jetbrains-dark.scss @@ -1,5 +1,5 @@ :root { - --spp-white: #A9B7C6; + --spp-white: #808080; --spp-light-grey: #A9B7C6; --spp-grey: #A9B7C6; --spp-light-blue: #629755; @@ -66,6 +66,7 @@ .el-popper.is-light { background: var(--nice-black); + border: 1px solid var(--border-color) !important; } .micro-topo-chart .operations-list { @@ -213,11 +214,20 @@ .el-sub-menu__title { background-color: var(--spp-other-green) !important; + + &:hover { + background-color: var(--dashboard-tool-background) !important; + } +} + +.el-menu-item { + &:hover { + background-color: var(--dashboard-tool-background) !important; + } } .el-menu-item.is-active { - color: var(--spp-red) !important; - background-color: var(--menu-selected-color) !important; + background-color: var(--dashboard-tool-background) !important; } .bar-select { @@ -231,7 +241,7 @@ .nav-bar { background-color: var(--spp-darkest-green) !important; border-bottom: 1px solid var(--spp-darkest-green) !important; - color: var(--spp-white) !important; + color: var(--spp-light-grey) !important; } .nav-bar.dark { @@ -241,11 +251,15 @@ .tools { &:hover { - color: var(--spp-red) !important; + color: var(--spp-white) !important; } } .chart-card { + color: var(--spp-light-grey) !important; +} + +.unit { color: var(--spp-white) !important; } @@ -312,7 +326,7 @@ } .vue-grid-item.active { - border: 1px solid var(--spp-red) !important; + border: 1px solid var(--border-color) !important; } .vue-grid-layout { @@ -323,10 +337,6 @@ background: var(--spp-dark-green) !important; } -.vue-grid-item.active { - border: 1px solid var(--spp-red) !important; -} - .dashboard-tool { background: var(--dashboard-tool-background) !important; border-bottom: 1px solid var(--border-color) !important; @@ -366,7 +376,7 @@ } .link { - color: var(--spp-red) !important; + color: var(--spp-light-grey) !important; } .dark-dialog { @@ -416,3 +426,58 @@ a { .log-tips { color: red; } + +.el-progress-bar__outer { + background-color: var(--widget-background) !important; +} + +.menu-control { + color: var(--spp-white) !important; +} + +.el-notification { + background-color: var(--widget-background) !important; + border: 1px solid var(--border-color) !important; +} + +.el-notification__title { + color: var(--spp-white) !important; +} + +.el-notification__content { + color: var(--spp-light-grey) !important; +} + +.graph { + background-color: var(--widget-background) !important; + border: 1px solid var(--border-color) !important; +} + +.header, +.footer { + background-color: var(--table-header-color) !important; + border-top: 1px solid var(--border-color) !important; +} + +.el-collapse-item__header { + background-color: var(--spp-darkest-green) !important; + border: 1px solid var(--border-color) !important; +} + +.el-collapse-item__wrap { + background-color: var(--widget-background) !important; + border: 1px solid var(--border-color) !important; +} + +.el-collapse-item__content { + background-color: var(--dashboard-tool-background) !important; + border: 1px solid var(--border-color) !important; +} + +.attributes { + color: var(--spp-light-grey) !important; +} + +.scroll-handler__wrapper .scroll-to.active { + background-color: var(--border-color) !important; +} diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index c2abfefc..4b625e7b 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -424,7 +424,7 @@ export default defineComponent({ right: 0; top: 40vh; height: auto; - width: 20px; + width: 17px; .scroll-to { opacity: 0.5; width: 10px; diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index c6e4bc32..14942f47 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -253,14 +253,14 @@ export const QueryOrders = [ { label: "Duration", value: "BY_DURATION" }, ]; export const TextColors: { [key: string]: string } = { - green: "#67C23A", + green: "#629755", blue: "#409EFF", - red: "#F56C6C", + red: "#e1483b", grey: "#909399", white: "#fff", black: "#000", orange: "#E6A23C", - purple: "#bf99f8", + purple: "#9876AA", }; export const CalculationOpts = [ diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue index 7b943af9..24b62665 100644 --- a/src/views/dashboard/graphs/Bar.vue +++ b/src/views/dashboard/graphs/Bar.vue @@ -118,7 +118,7 @@ function getOption() { "#9876AA", "#CC7832", "#8A653B", - "#FF0000", + "#e1483b", "#FFC66D", ]; break; diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 93ac9d7d..60d90a8a 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -128,7 +128,7 @@ function getOption() { "#9876AA", "#CC7832", "#8A653B", - "#FF0000", + "#e1483b", "#FFC66D", ]; break; diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue index 8fe0f72f..fbf6c43e 100644 --- a/src/views/dashboard/graphs/TopList.vue +++ b/src/views/dashboard/graphs/TopList.vue @@ -35,7 +35,7 @@ limitations under the License. --> diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue index 7801f6e4..f7043126 100644 --- a/src/views/dashboard/graphs/components/ColumnGraph.vue +++ b/src/views/dashboard/graphs/components/ColumnGraph.vue @@ -46,7 +46,7 @@ limitations under the License. -->