From deb69450262c279b9c3278891c3537ca783797b2 Mon Sep 17 00:00:00 2001 From: utchoang Date: Wed, 16 Sep 2020 10:26:32 +0700 Subject: [PATCH 1/6] add custom support for link hover color and loading color --- public/config.json | 2 ++ src/style/vars.less | 34 +++++++++++++++++++++++++++++----- theme.config.js | 2 ++ 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/public/config.json b/public/config.json index af7e84a44..fd92d07b6 100644 --- a/public/config.json +++ b/public/config.json @@ -13,6 +13,8 @@ "theme": { "@primary-color": "#1890ff", "@link-color": "#1890ff", + "@link-hover-color": "#40a9ff", + "@loading-color": "#1890ff", "@processing-color": "#1890ff", "@success-color": "#52c41a", "@warning-color": "#faad14", diff --git a/src/style/vars.less b/src/style/vars.less index 1e412b5cd..e60da90b6 100644 --- a/src/style/vars.less +++ b/src/style/vars.less @@ -15,8 +15,6 @@ // specific language governing permissions and limitations // under the License. -@import "~ant-design-vue/lib/style/themes/default.less"; - @logo-width: 256px; @logo-height: 64px; @banner-width: 450px; @@ -24,6 +22,23 @@ @error-width: 256px; @error-height: 256px; +@primary-color: #1890ff; +@link-color: @primary-color; +@link-hover-color: #40a9ff; +@processing-color: @primary-color; +@success-color: #52c41a; +@warning-color: #faad14; +@error-color: #f5222d; +@font-size-base: 14px; +@heading-color: rgba(0, 0, 0, 0.85); +@text-color: rgba(0, 0, 0, 0.65); +@text-color-secondary: rgba(0, 0, 0, 0.45); +@disabled-color: rgba(0, 0, 0, 0.25); +@border-color-base: #d9d9d9; +@border-radius-base: 4px; +@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); +@loading-color: @primary-color; + .ant-layout-sider-children .logo-image { width: @logo-width; height: @logo-height; @@ -49,9 +64,18 @@ a { color: @link-color; background-color: transparent; } + a:hover { - color: color(~`colorPalette("@{primary-color}", 5)`); + color: @link-hover-color; } -a:active { - color: color(~`colorPalette("@{primary-color}", 7)`); + +.ant-message-info .anticon, +.ant-message-loading .anticon { + color: @loading-color; +} + +#nprogress { + .bar { + background-color: @loading-color; + } } diff --git a/theme.config.js b/theme.config.js index 7dcdb2c5d..4d073a861 100644 --- a/theme.config.js +++ b/theme.config.js @@ -29,6 +29,8 @@ const options = { themeVariables: [ '@primary-color', '@link-color', + '@link-hover-color', + '@loading-color', '@success-color', '@warning-color', '@processing-color', From 424917281ee237a16e11180ddabe12e891789ba5 Mon Sep 17 00:00:00 2001 From: utchoang Date: Thu, 17 Sep 2020 13:01:38 +0700 Subject: [PATCH 2/6] add customize navigation text color --- public/config.json | 1 + src/style/vars.less | 53 ++++++++++++++++++++++++++++++++++++++++++--- theme.config.js | 1 + 3 files changed, 52 insertions(+), 3 deletions(-) diff --git a/public/config.json b/public/config.json index f1c6c2918..f4ad13b7a 100644 --- a/public/config.json +++ b/public/config.json @@ -13,6 +13,7 @@ "theme": { "@logo-background-color": "#ffffff", "@navigation-background-color": "#ffffff", + "@navigation-text-color": "rgba(0, 0, 0, 0.65)", "@primary-color": "#1890ff", "@link-color": "#1890ff", "@link-hover-color": "#40a9ff", diff --git a/src/style/vars.less b/src/style/vars.less index 7b68b3ca7..f943acb49 100644 --- a/src/style/vars.less +++ b/src/style/vars.less @@ -24,6 +24,7 @@ @logo-background-color: #ffffff; @navigation-background-color: #ffffff; +@navigation-text-color: rgba(0, 0, 0, 0.65); @primary-color: #1890ff; @link-color: @primary-color; @link-hover-color: #40a9ff; @@ -65,10 +66,10 @@ a { color: @link-color; background-color: transparent; -} -a:hover { - color: @link-hover-color; + &:hover { + color: @link-hover-color; + } } .ant-message-info .anticon, @@ -93,4 +94,50 @@ a:hover { .ant-menu-submenu-popup, .ant-menu-submenu > .ant-menu { background-color: @navigation-background-color; +} + +.ant-menu-item > a { + color: @navigation-text-color; +} + +.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover { + color: @primary-color; +} + +.ant-menu-vertical .ant-menu-item, +.ant-menu-vertical-left .ant-menu-item, +.ant-menu-vertical-right .ant-menu-item, +.ant-menu-inline .ant-menu-item, +.ant-menu-vertical .ant-menu-submenu-title, +.ant-menu-vertical-left .ant-menu-submenu-title, +.ant-menu-vertical-right .ant-menu-submenu-title, +.ant-menu-inline .ant-menu-submenu-title { + color: @navigation-text-color; +} + +.ant-menu-submenu-vertical ant-menu-submenu-selected, +.ant-menu-vertical .ant-menu-submenu-selected, +.ant-menu-vertical-left .ant-menu-submenu-selected, +.ant-menu-vertical-right .ant-menu-submenu-selected { + color: @primary-color; + + .ant-menu-submenu-title { + color: @primary-color; + } +} + +.kubernet-icon path { + color: @navigation-text-color; +} + +.ant-menu-item:hover, +.ant-menu-item-active, +.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, +.ant-menu-submenu-active, +.ant-menu-submenu-title:hover { + color: @primary-color; + + .custom-icon path { + color: @primary-color; + } } \ No newline at end of file diff --git a/theme.config.js b/theme.config.js index 92181237f..849d3a10b 100644 --- a/theme.config.js +++ b/theme.config.js @@ -29,6 +29,7 @@ const options = { themeVariables: [ '@logo-background-color', '@navigation-background-color', + '@navigation-text-color', '@primary-color', '@link-color', '@link-hover-color', From 1172213d76f70f8175235110fa0eaab1fc1a8463 Mon Sep 17 00:00:00 2001 From: utchoang Date: Fri, 18 Sep 2020 14:43:44 +0700 Subject: [PATCH 3/6] customize icon kubernetes color --- src/assets/icons/kubernetes.svg | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/assets/icons/kubernetes.svg b/src/assets/icons/kubernetes.svg index 14d88adab..764adf3fe 100644 --- a/src/assets/icons/kubernetes.svg +++ b/src/assets/icons/kubernetes.svg @@ -53,13 +53,14 @@ Date: Tue, 22 Sep 2020 07:59:36 +0700 Subject: [PATCH 4/6] add custom option (background/text) for link, menu --- docs/customize.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/customize.md b/docs/customize.md index 09a86a132..2d1fda4f1 100644 --- a/docs/customize.md +++ b/docs/customize.md @@ -47,7 +47,13 @@ Customize themes like colors, border color, etc. } ``` +- `@logo-background-color` changes the logo background color. +- `@navigation-background-color` changes the navigation menu background color. +- `@navigation-text-color` changes the navigation text color. - `@primary-color` change the major background color of the page (background button, icon hover, etc). +- `@link-color` changes the link color. +- `@link-hover-color` changes the link hover color. +- `@loading-color` changes the message loading color and page loading bar at the top page. - `@success-color` change success state color. - `@processing-color` change processing state color. Exp: progress status. - `@warning-color` change warning state color. From ced328757b56b83df00eef365db7e8c145c5ff9e Mon Sep 17 00:00:00 2001 From: utchoang Date: Wed, 23 Sep 2020 13:06:51 +0700 Subject: [PATCH 5/6] Merge branch 'master-upstream' into feature/fix-customize-theme --- src/utils/request.js | 6 ++---- src/views/AutogenView.vue | 9 ++++++++- src/views/compute/DeployVM.vue | 34 +++++++++++++++++----------------- src/views/iam/DomainView.vue | 9 ++++++++- 4 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/utils/request.js b/src/utils/request.js index 0abd0905c..ffc62eb7a 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -18,11 +18,11 @@ import Vue from 'vue' import axios from 'axios' import router from '@/router' -import store from '@/store' import { VueAxios } from './axios' import notification from 'ant-design-vue/es/notification' import { CURRENT_PROJECT } from '@/store/mutation-types' import i18n from '@/locales' +import store from '@/store' const service = axios.create({ timeout: 600000 @@ -46,9 +46,7 @@ const err = (error) => { key: 'http-401' }) store.dispatch('Logout').then(() => { - setTimeout(() => { - window.location.reload() - }, 1500) + router.go(0) }) } if (response.status === 404) { diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue index f7ea409af..6b2272e30 100644 --- a/src/views/AutogenView.vue +++ b/src/views/AutogenView.vue @@ -656,9 +656,16 @@ export default { return } + if ([401].includes(error.response.status)) { + store.dispatch('Logout').then(() => { + this.$router.push({ path: '/user/login', query: { redirect: this.$route.fullPath } }) + }) + return + } + this.$notifyError(error) - if ([401, 405].includes(error.response.status)) { + if ([405].includes(error.response.status)) { this.$router.push({ path: '/exception/403' }) } diff --git a/src/views/compute/DeployVM.vue b/src/views/compute/DeployVM.vue index 821a6c2f1..a4b42bfaa 100644 --- a/src/views/compute/DeployVM.vue +++ b/src/views/compute/DeployVM.vue @@ -1752,11 +1752,11 @@ export default { }, fetchTemplateNics (template) { var nics = [] - if (template && template.details && Object.keys(template.details).length > 0) { - var keys = Object.keys(template.details) - keys = keys.filter(key => key.startsWith('ACS-network-')) + if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) { + var keys = Object.keys(template.deployasisdetails) + keys = keys.filter(key => key.startsWith('network-')) for (var key of keys) { - var propertyMap = JSON.parse(template.details[key]) + var propertyMap = JSON.parse(template.deployasisdetails[key]) nics.push(propertyMap) } nics.sort(function (a, b) { @@ -1777,11 +1777,11 @@ export default { }, fetchTemplateProperties (template) { var properties = [] - if (template && template.details && Object.keys(template.details).length > 0) { - var keys = Object.keys(template.details) - keys = keys.filter(key => key.startsWith('ACS-property-')) + if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) { + var keys = Object.keys(template.deployasisdetails) + keys = keys.filter(key => key.startsWith('property-')) for (var key of keys) { - var propertyMap = JSON.parse(template.details[key]) + var propertyMap = JSON.parse(template.deployasisdetails[key]) properties.push(propertyMap) } properties.sort(function (a, b) { @@ -1792,11 +1792,11 @@ export default { }, fetchTemplateConfigurations (template) { var configurations = [] - if (template && template.details && Object.keys(template.details).length > 0) { - var keys = Object.keys(template.details) - keys = keys.filter(key => key.startsWith('ACS-configuration-')) + if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) { + var keys = Object.keys(template.deployasisdetails) + keys = keys.filter(key => key.startsWith('configuration-')) for (var key of keys) { - var configuration = JSON.parse(template.details[key]) + var configuration = JSON.parse(template.deployasisdetails[key]) configuration.name = configuration.label configuration.displaytext = configuration.label configuration.iscustomized = true @@ -1821,15 +1821,15 @@ export default { }, fetchTemplateLicenses (template) { var licenses = [] - if (template && template.details && Object.keys(template.details).length > 0) { - var keys = Object.keys(template.details) - const prefix = /ACS-eula-\d-/ - keys = keys.filter(key => key.startsWith('ACS-eula-')).sort() + if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) { + var keys = Object.keys(template.deployasisdetails) + const prefix = /eula-\d-/ + keys = keys.filter(key => key.startsWith('eula-')).sort() for (var key of keys) { var license = { id: this.escapePropertyKey(key.replace(' ', '-')), name: key.replace(prefix, ''), - text: template.details[key] + text: template.deployasisdetails[key] } licenses.push(license) } diff --git a/src/views/iam/DomainView.vue b/src/views/iam/DomainView.vue index bb4efadcb..287ca56d5 100644 --- a/src/views/iam/DomainView.vue +++ b/src/views/iam/DomainView.vue @@ -181,7 +181,14 @@ export default { duration: 0 }) - if ([401, 405].includes(error.response.status)) { + if ([401].includes(error.response.status)) { + store.dispatch('Logout').then(() => { + this.$router.push({ path: '/user/login', query: { redirect: this.$route.fullPath } }) + }) + return + } + + if ([405].includes(error.response.status)) { this.$router.push({ path: '/exception/403' }) } From 8d66bab7bc5991599b54f4d93a0ae598cf90e9b8 Mon Sep 17 00:00:00 2001 From: utchoang Date: Wed, 23 Sep 2020 14:01:47 +0700 Subject: [PATCH 6/6] fix custom background color for navigation when switch project --- src/style/vars.less | 56 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/src/style/vars.less b/src/style/vars.less index f943acb49..399afd6b9 100644 --- a/src/style/vars.less +++ b/src/style/vars.less @@ -83,8 +83,10 @@ a { } } +.sider .logo, .sider.light .logo { background-color: @logo-background-color; + box-shadow: 1px 1px 0px 0px #e8e8e8; } .ant-menu { @@ -92,11 +94,15 @@ a { } .ant-menu-submenu-popup, -.ant-menu-submenu > .ant-menu { +.ant-menu-submenu > .ant-menu, +.ant-menu-dark .ant-menu-inline.ant-menu-sub { background-color: @navigation-background-color; } -.ant-menu-item > a { +.ant-menu-item > a, +.ant-menu-dark .ant-menu-item, +.ant-menu-dark .ant-menu-item-group-title, +.ant-menu-dark .ant-menu-item > a { color: @navigation-text-color; } @@ -134,10 +140,54 @@ a { .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, -.ant-menu-submenu-title:hover { +.ant-menu-submenu-title:hover, +.ant-menu-dark .ant-menu-item:hover > a, +.ant-menu-dark .ant-menu-submenu-title:hover > a, +.ant-menu-dark .ant-menu-submenu-title:hover, +.ant-menu-dark .ant-menu-item:hover, +.ant-menu-dark .ant-menu-submenu-title:hover +{ color: @primary-color; .custom-icon path { color: @primary-color; } +} + +.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, +.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, +.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, +.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, +.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, +.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, +.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, +.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after { + background-color: @navigation-text-color; +} + +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before { + background-color: @primary-color; } \ No newline at end of file