You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by da...@apache.org on 2021/08/11 14:33:01 UTC
[cloudstack] branch 4.15 updated: UI: Dark mode toggle button on
Management Server (#5052)
This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch 4.15
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.15 by this push:
new 8680f7d UI: Dark mode toggle button on Management Server (#5052)
8680f7d is described below
commit 8680f7d9ad843689c9fb04305d6633f4fee37f5c
Author: Hoang Nguyen <ho...@unitech.vn>
AuthorDate: Wed Aug 11 21:32:46 2021 +0700
UI: Dark mode toggle button on Management Server (#5052)
* add button toggle dark mode
* switch components corresponding to dark mode
* restructure the style dark mode file
* fix collapse & login page
* fix test failed
* fix dark mode styles by refer antd pro
* fix disabled colors of button, input,... & refactor file dark mode styles
* add setting drawer and save it into local storage
* add an alert for save the setting
* add `cursor: pointer`
* hide drawer when init
* change id name of svg icon
* fix after merged 4.15
* edit active color menu item
* fix plaholder color, project chart color & reset setting
* fix event change color picker & error input focus color
* fix empty data color
---
ui/public/locales/en.json | 23 +
ui/src/App.vue | 7 +-
ui/src/assets/icons/dark.svg | 39 +
ui/src/assets/icons/light.svg | 40 +
ui/src/components/page/GlobalFooter.vue | 10 -
ui/src/components/page/GlobalLayout.vue | 41 +-
ui/src/components/view/DetailSettings.vue | 6 +-
ui/src/components/view/InfoCard.vue | 12 +-
ui/src/components/view/ListView.vue | 8 -
ui/src/components/view/SearchView.vue | 6 +-
ui/src/components/view/Setting.vue | 406 +++++++++
ui/src/components/view/SettingItem.vue | 185 +++++
ui/src/components/view/TreeView.vue | 2 -
ui/src/components/widgets/Drawer.vue | 170 ++++
ui/src/components/widgets/OsLogo.vue | 15 +-
ui/src/layouts/UserLayout.vue | 17 +-
ui/src/store/getters.js | 4 +-
ui/src/store/modules/user.js | 30 +-
ui/src/store/mutation-types.js | 2 +
ui/src/style/dark-mode.less | 904 +++++++++++++++++++++
ui/src/style/index.less | 1 +
ui/src/style/vars.less | 99 ++-
ui/src/views/AutogenView.vue | 2 +-
ui/src/views/auth/Login.vue | 6 +-
ui/src/views/compute/CreateKubernetesCluster.vue | 30 +-
ui/src/views/compute/CreateSnapshotWizard.vue | 8 +-
ui/src/views/compute/DeployVM.vue | 6 +-
ui/src/views/compute/DestroyVM.vue | 4 +-
ui/src/views/compute/EditVM.vue | 12 +-
ui/src/views/compute/ScaleKubernetesCluster.vue | 4 +-
ui/src/views/compute/StartVirtualMachine.vue | 8 +-
ui/src/views/compute/UpgradeKubernetesCluster.vue | 2 +-
.../views/compute/wizard/NetworkConfiguration.vue | 4 +-
ui/src/views/dashboard/UsageDashboardChart.vue | 2 +-
ui/src/views/iam/AddAccount.vue | 24 +-
ui/src/views/iam/AddLdapAccount.vue | 8 -
ui/src/views/iam/AddUser.vue | 20 +-
ui/src/views/iam/ChangeUserPassword.vue | 6 +-
ui/src/views/iam/CreateRole.vue | 10 +-
ui/src/views/iam/DomainActionForm.vue | 2 +-
ui/src/views/iam/EditUser.vue | 10 +-
ui/src/views/iam/ImportRole.vue | 10 +-
.../views/image/AddKubernetesSupportedVersion.vue | 14 +-
ui/src/views/infra/AddPrimaryStorage.vue | 34 +-
ui/src/views/infra/InfraSummary.vue | 10 +-
ui/src/views/infra/network/EditTrafficLabel.vue | 12 +-
ui/src/views/infra/routers/RouterHealthCheck.vue | 2 +-
ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue | 2 -
ui/src/views/network/CreateIsolatedNetworkForm.vue | 25 +-
ui/src/views/network/CreateL2NetworkForm.vue | 21 +-
ui/src/views/network/CreateSharedNetworkForm.vue | 47 +-
ui/src/views/network/CreateVlanIpRange.vue | 16 +-
ui/src/views/network/CreateVpc.vue | 14 +-
ui/src/views/network/CreateVpnCustomerGateway.vue | 20 +-
ui/src/views/network/PortForwarding.vue | 6 +-
ui/src/views/network/VpcTiersTab.vue | 2 +-
ui/src/views/offering/AddComputeOffering.vue | 64 +-
ui/src/views/offering/AddDiskOffering.vue | 38 +-
ui/src/views/offering/AddNetworkOffering.vue | 32 +-
ui/src/views/offering/AddVpcOffering.vue | 12 +-
ui/src/views/offering/ImportBackupOffering.vue | 10 +-
ui/src/views/project/AddAccountOrUserToProject.vue | 16 +-
ui/src/views/project/iam/ProjectRoleTab.vue | 2 +-
ui/src/views/storage/CreateVolume.vue | 8 +-
ui/src/views/storage/FormSchedule.vue | 9 +-
ui/src/views/storage/TakeSnapshot.vue | 9 +-
ui/src/views/storage/UploadLocalVolume.vue | 8 +-
67 files changed, 2292 insertions(+), 346 deletions(-)
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 146351f..2b991fd 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -595,6 +595,7 @@
"label.copy": "Copy",
"label.copy.clipboard": "Copy to clipboard",
"label.copy.text": "Copy Text",
+"label.copy.setting.success": "Copy success, Please replace theme setting in public/config.js",
"label.copyid": "Copy ID",
"label.copying.iso": "Copying ISO",
"label.corrections.saved": "Corrections saved",
@@ -646,6 +647,7 @@
"label.daily": "Daily",
"label.dashboard": "Dashboard",
"label.dashboard.endpoint": "Dashboard endpoint",
+"label.dark.mode": "Dark mode",
"label.data.disk": "Data Disk",
"label.data.disk.offering": "Data Disk Offering",
"label.date": "Date",
@@ -1788,6 +1790,7 @@
"label.reservedsystemnetmask": "Reserved system netmask",
"label.reservedsystemstartip": "Start Reserved system IP",
"label.reset": "Reset",
+"label.reset.to.default": "Reset to default",
"label.reset.ssh.key.pair": "Reset SSH Key Pair",
"label.reset.ssh.key.pair.on.vm": "Reset SSH Key Pair on VM",
"label.reset.vpn.connection": "Reset VPN connection",
@@ -1856,6 +1859,7 @@
"label.save.and.continue": "Save and continue",
"label.save.changes": "Save changes",
"label.save.new.rule": "Save new Rule",
+"label.save.setting": "Save setting",
"label.saving.processing": "Saving....",
"label.scale.vm": "Scale VM",
"label.scale.up.policy": "SCALE UP POLICY",
@@ -2102,9 +2106,28 @@
"label.templatetype": "Template Type",
"label.tftp.dir": "TFTP Directory",
"label.tftpdir": "Tftp root directory",
+"label.theme.alert": "The settings panel is only visible in the development environment, please save for the changes to take effect.",
+"label.theme.color": "Theme Color",
+"label.theme.cyan": "Cyan",
+"label.theme.dark": "Dark Style",
+"label.theme.daybreak.blue": "Daybreak Blue",
"label.theme.default": "Default Theme",
+"label.theme.dust.red": "Dust Red",
+"label.theme.geek.blue": "Geek Blue",
+"label.theme.golden.purple": "Golden Purple",
"label.theme.grey": "Custom - Grey",
+"label.theme.light": "Light Style",
"label.theme.lightblue": "Custom - Light Blue",
+"label.theme.navigation.bgColor": "Background Color",
+"label.theme.navigation.setting": "Navigation setting",
+"label.theme.navigation.txtColor": "Text Color",
+"label.theme.page.style.setting": "Page style setting",
+"label.theme.polar.green": "Polar Green",
+"label.theme.project": "Project Style",
+"label.theme.project.navigation.setting": "Project Navigation setting",
+"label.theme.sunset.orange": "Sunset Orange",
+"label.theme.volcano": "Volcano",
+"label.theme.white": "White",
"label.threshold": "Threshold",
"label.thursday": "Thursday",
"label.tier.details": "Tier details",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index fa75a8e..f7aa558 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -36,7 +36,12 @@ export default {
}
},
created () {
- window.less.modifyVars(this.$config.theme)
+ const userThemeSetting = this.$store.getters.themeSetting || {}
+ if (Object.keys(userThemeSetting).length === 0) {
+ window.less.modifyVars(this.$config.theme)
+ } else {
+ window.less.modifyVars(userThemeSetting)
+ }
console.log('config and theme applied')
}
}
diff --git a/ui/src/assets/icons/dark.svg b/ui/src/assets/icons/dark.svg
new file mode 100644
index 0000000..9190c1d
--- /dev/null
+++ b/ui/src/assets/icons/dark.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+ <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+ <feMerge>
+ <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+ <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+ <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+ </filter>
+ </defs>
+ <g id="darkModeIcon" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+ <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+ <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+ <mask id="mask-3" fill="white">
+ <use xlink:href="#path-2"></use>
+ </mask>
+ <g id="Rectangle-18">
+ <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+ <use fill="#303648" fill-rule="evenodd" xlink:href="#path-2"></use>
+ </g>
+ <rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+ <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/ui/src/assets/icons/light.svg b/ui/src/assets/icons/light.svg
new file mode 100644
index 0000000..fbb1000
--- /dev/null
+++ b/ui/src/assets/icons/light.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+ <title>Group 5</title>
+ <desc>Created with Sketch.</desc>
+ <defs>
+ <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+ <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+ <feMerge>
+ <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+ <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+ <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+ </filter>
+ </defs>
+ <g id="lightModeIcon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+ <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+ <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+ <mask id="mask-3" fill="white">
+ <use xlink:href="#path-2"></use>
+ </mask>
+ <g id="Rectangle-18">
+ <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+ <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+ </g>
+ <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
+ <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="-1" y="0" width="49" height="10"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/ui/src/components/page/GlobalFooter.vue b/ui/src/components/page/GlobalFooter.vue
index c19f825..070a32b 100644
--- a/ui/src/components/page/GlobalFooter.vue
+++ b/ui/src/components/page/GlobalFooter.vue
@@ -49,18 +49,8 @@ export default {
.line {
margin-bottom: 8px;
-
- a {
- color: rgba(0, 0, 0, .45);
-
- &:hover {
- color: rgba(0, 0, 0, .65);
- }
-
- }
}
.copyright {
- color: rgba(0, 0, 0, .45);
font-size: 14px;
}
}
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index 0ddf934..ebfd4c4 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -63,6 +63,17 @@
</a-drawer>
</template>
+ <template>
+ <drawer :visible="showSetting" placement="right">
+ <div slot="handler">
+ <a-button type="primary" size="large">
+ <a-icon :type="showSetting ? 'close' : 'setting'"/>
+ </a-button>
+ </div>
+ <setting slot="drawer" :visible="showSetting" />
+ </drawer>
+ </template>
+
<a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
<!-- layout header -->
<global-header
@@ -94,19 +105,24 @@ import GlobalFooter from '@/components/page/GlobalFooter'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js'
+import Drawer from '@/components/widgets/Drawer'
+import Setting from '@/components/view/Setting.vue'
export default {
name: 'GlobalLayout',
components: {
SideMenu,
GlobalHeader,
- GlobalFooter
+ GlobalFooter,
+ Drawer,
+ Setting
},
mixins: [mixin, mixinDevice],
data () {
return {
collapsed: false,
- menus: []
+ menus: [],
+ showSetting: false
}
},
computed: {
@@ -129,6 +145,18 @@ export default {
},
mainMenu (newMenu) {
this.menus = newMenu.find((item) => item.path === '/').children
+ },
+ '$store.getters.darkMode' (darkMode) {
+ if (darkMode) {
+ document.body.classList.add('dark-mode')
+ } else {
+ document.body.classList.remove('dark-mode')
+ }
+ }
+ },
+ provide: function () {
+ return {
+ parentToggleSetting: this.toggleSetting
}
},
created () {
@@ -136,6 +164,9 @@ export default {
this.collapsed = !this.sidebarOpened
},
mounted () {
+ if (this.$store.getters.darkMode) {
+ document.body.classList.add('dark-mode')
+ }
const userAgent = navigator.userAgent
if (userAgent.indexOf('Edge') > -1) {
this.$nextTick(() => {
@@ -146,6 +177,9 @@ export default {
})
}
},
+ beforeDestroy () {
+ document.body.classList.remove('dark')
+ },
methods: {
...mapActions(['setSidebar']),
toggle () {
@@ -166,6 +200,9 @@ export default {
if (!this.isDesktop()) {
this.collapsed = false
}
+ },
+ toggleSetting (showSetting) {
+ this.showSetting = showSetting
}
}
}
diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 2571bed..b4aaf68 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -44,7 +44,11 @@
:dataSource="Object.keys(detailOptions)"
:placeholder="$t('label.name')"
@change="e => onAddInputChange(e, 'newKey')" />
- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+ <a-input
+ class="tag-disabled-input"
+ style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+ placeholder="="
+ disabled />
<a-auto-complete
class="detail-input"
:filterOption="filterOption"
diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index e25eb39..5fd0fab 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -620,13 +620,21 @@
@keyup.enter="handleInputConfirm"
compact>
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+ <a-input
+ class="tag-disabled-input"
+ style="width: 30px; border-left: 0; pointer-events: none; text-align: center"
+ placeholder="="
+ disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
</a-input-group>
</div>
- <a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
+ <a-tag
+ @click="showInput"
+ class="btn-add-tag"
+ style="borderStyle: dashed;"
+ v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
<a-icon type="plus" /> {{ $t('label.new.tag') }}
</a-tag>
</div>
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 708b037..89dd6dc 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -598,14 +598,6 @@ export default {
/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
margin: 0;
}
-
-/deep/ .light-row {
- background-color: #fff;
-}
-
-/deep/ .dark-row {
- background-color: #f9f9f9;
-}
</style>
<style scoped lang="scss">
diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue
index cbc9344..21afc32 100644
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@@ -74,7 +74,11 @@
size="small"
compact>
<a-input ref="input" :value="inputKey" @change="e => inputKey = e.target.value" style="width: 50px; text-align: center" :placeholder="$t('label.key')" />
- <a-input style=" width: 20px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+ <a-input
+ class="tag-disabled-input"
+ style=" width: 20px; border-left: 0; pointer-events: none; text-align: center"
+ placeholder="="
+ disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<tooltip-button :tooltip="$t('label.clear')" icon="close" size="small" @click="inputKey = inputValue = ''" />
</a-input-group>
diff --git a/ui/src/components/view/Setting.vue b/ui/src/components/view/Setting.vue
new file mode 100644
index 0000000..6ad9709
--- /dev/null
+++ b/ui/src/components/view/Setting.vue
@@ -0,0 +1,406 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+ <div class="side-setting">
+ <setting-item :title="$t('label.theme.page.style.setting')" view-type="item">
+ <a-radio-group
+ class="setting-group"
+ name="themeGroup"
+ v-model="layoutMode"
+ @change="switchLayoutMode">
+ <setting-item
+ view-type="radio-group"
+ :items="pageStyles"
+ :checked="layoutMode"></setting-item>
+ </a-radio-group>
+ </setting-item>
+
+ <setting-item :title="$t('label.theme.color')" view-type="item" style="display: block;">
+ <a-radio-group
+ class="setting-group"
+ name="colorGroup"
+ :default-value="colorPick"
+ @change="switchColor">
+ <setting-item
+ view-type="radio-group"
+ :items="colors"
+ :checked="colorPick"></setting-item>
+ </a-radio-group>
+
+ <a-divider style="margin-top: 45px;" />
+ </setting-item>
+
+ <setting-item
+ v-if="!projectView"
+ :title="$t('label.theme.navigation.setting')"
+ view-type="item">
+
+ <a-list :split="false">
+ <a-list-item>
+ <div class="input-group">
+ <label>{{ $t('label.theme.navigation.bgColor') }}</label>
+ <div class="color-picker" :style="{ backgroundColor: navBgColorPick }">
+ <a-input
+ :disabled="layoutMode === 'dark'"
+ type="color"
+ v-model="navBgColorPick"
+ @blur="(e) => updateSetting('@navigation-background-color', e.target.value)" />
+ </div>
+ </div>
+ </a-list-item>
+ <a-list-item>
+ <div class="input-group">
+ <label>{{ $t('label.theme.navigation.txtColor') }}</label>
+ <div class="color-picker" :style="{ backgroundColor: navTextColorPick }">
+ <a-input
+ :disabled="layoutMode === 'dark'"
+ type="color"
+ v-model="navBgColorPick"
+ @blur="(e) => updateSetting('@navigation-text-color', e.target.value)" />
+ </div>
+ </div>
+ </a-list-item>
+ </a-list>
+ </setting-item>
+
+ <setting-item
+ v-if="projectView"
+ :title="$t('label.theme.project.navigation.setting')"
+ view-type="item">
+ <a-list :split="false">
+ <a-list-item>
+ <div class="input-group">
+ <label>{{ $t('label.theme.navigation.bgColor') }}</label>
+ <div class="color-picker" :style="{ backgroundColor: projectNavBgColorPick }">
+ <a-input
+ type="color"
+ v-model="projectNavBgColorPick"
+ @blur="(e) => updateSetting('@project-nav-background-color', e.target.value)" />
+ </div>
+ </div>
+ </a-list-item>
+ <a-list-item>
+ <div class="input-group">
+ <label>{{ $t('label.theme.navigation.txtColor') }}</label>
+ <div class="color-picker" :style="{ backgroundColor: projectNavTextColorPick }">
+ <a-input
+ type="color"
+ v-model="projectNavTextColorPick"
+ @blur="(e) => updateSetting('@project-nav-text-color', e.target.value)" />
+ </div>
+ </div>
+ </a-list-item>
+ </a-list>
+ </setting-item>
+
+ <div class="setting-action">
+ <a-divider style="margin: 15px 0;" />
+ <a-alert class="setting-action-alert" :message="$t('label.theme.alert')" type="warning" show-icon />
+ <a-button
+ class="setting-action-btn"
+ icon="copy"
+ @click="saveSetting">{{ $t('label.save.setting') }}</a-button>
+ <a-button
+ class="setting-action-btn"
+ icon="undo"
+ @click="resetSetting">{{ $t('label.reset.to.default') }}</a-button>
+ </div>
+ </div>
+</template>
+
+<script>
+import SettingItem from '@/components/view/SettingItem'
+
+export default {
+ name: 'Setting',
+ components: {
+ SettingItem
+ },
+ props: {
+ visible: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ layoutMode: 'light',
+ colorPick: this.$store.getters.themeSetting['@primary-color'] || this.$config.theme['@primary-color'],
+ navBgColorPick: this.$store.getters.themeSetting['@navigation-background-color'] || this.$config.theme['@navigation-background-color'],
+ navTextColorPick: this.$store.getters.themeSetting['@navigation-text-color'] || this.$config.theme['@navigation-text-color'],
+ projectNavBgColorPick: this.$store.getters.themeSetting['@project-nav-background-color'] || this.$config.theme['@project-nav-background-color'],
+ projectNavTextColorPick: this.$store.getters.themeSetting['@project-nav-text-color'] || this.$config.theme['@project-nav-text-color'],
+ uiSettings: {},
+ originalSetting: {}
+ }
+ },
+ computed: {
+ projectView () {
+ return Boolean(this.$store.getters.project && this.$store.getters.project.id)
+ },
+ pageStyles () {
+ const arrStyle = [
+ {
+ name: 'light',
+ type: 'image-checkbox',
+ component: () => import('@/assets/icons/light.svg?inline')
+ },
+ {
+ name: 'dark',
+ type: 'image-checkbox',
+ component: () => import('@/assets/icons/dark.svg?inline')
+ }
+ ]
+ return arrStyle
+ },
+ colors () {
+ return [
+ {
+ name: 'daybreak.blue',
+ type: 'color-checkbox',
+ color: '#1890ff'
+ },
+ {
+ name: 'dust.red',
+ type: 'color-checkbox',
+ color: '#f5222d'
+ },
+ {
+ name: 'volcano',
+ type: 'color-checkbox',
+ color: '#fa541c'
+ },
+ {
+ name: 'sunset.orange',
+ type: 'color-checkbox',
+ color: '#faad14'
+ },
+ {
+ name: 'cyan',
+ type: 'color-checkbox',
+ color: '#13c2c2'
+ },
+ {
+ name: 'polar.green',
+ type: 'color-checkbox',
+ color: '#52c41a'
+ },
+ {
+ name: 'geek.blue',
+ type: 'color-checkbox',
+ color: '#2f54eb'
+ },
+ {
+ name: 'golden.purple',
+ type: 'color-checkbox',
+ color: '#722ed1'
+ }
+ ]
+ }
+ },
+ inject: ['parentToggleSetting'],
+ watch: {
+ projectView () {
+ this.fetchData()
+ }
+ },
+ created () {
+ this.fetchData()
+ },
+ methods: {
+ fetchData () {
+ this.originalSetting = Object.assign({}, this.$config.theme)
+ this.layoutMode = 'light'
+ if (this.$store.getters.darkMode) {
+ this.layoutMode = 'dark'
+ }
+ this.uiSettings = this.$config.theme
+ },
+ switchLayoutMode () {
+ this.$store.dispatch('SetDarkMode', (this.layoutMode === 'dark'))
+ },
+ switchColor (e) {
+ this.colorPick = e.target.value
+ this.updateSetting('@primary-color', this.colorPick)
+ },
+ updateSetting (name, value) {
+ this.uiSettings[name] = value
+ if (['@navigation-background-color'].includes(name)) {
+ this.uiSettings['@logo-background-color'] = value
+ }
+ window.less.modifyVars(this.uiSettings)
+ },
+ onClose () {
+ this.parentToggleSetting(false)
+ },
+ saveSetting () {
+ const loading = this.$message.loading(this.$t('label.save.setting'), 0)
+ this.$store.dispatch('SetThemeSetting', this.uiSettings)
+ setTimeout(() => {
+ loading()
+ this.$message.success(this.$t('label.success'))
+ }, 1000)
+ },
+ resetSetting () {
+ this.layoutMode = 'light'
+ this.colorPick = this.originalSetting['@primary-color']
+ this.navBgColorPick = this.originalSetting['@navigation-background-color']
+ this.navTextColorPick = this.originalSetting['@navigation-text-color']
+ this.projectNavBgColorPick = this.originalSetting['@project-nav-background-color']
+ this.projectNavTextColorPick = this.originalSetting['@project-nav-text-color']
+
+ this.$store.dispatch('SetThemeSetting', {})
+ this.switchLayoutMode()
+
+ this.$config.theme = this.originalSetting
+ window.less.modifyVars(this.$config.theme)
+ this.$message.success(this.$t('label.success'))
+ },
+ formatConfig (obj, dep) {
+ dep = dep || 1
+ const LN = '\n'
+ const TAB = ' '
+ let indent = ''
+ for (let i = 0; i < dep; i++) {
+ indent += TAB
+ }
+ let isArray = false
+ let arrayLastIsObj = false
+ let str = ''
+ let prefix = '{'
+ let subfix = '}'
+
+ if (Array.isArray(obj)) {
+ isArray = true
+ prefix = '['
+ subfix = ']'
+ str = obj.map((item, index) => {
+ let format = ''
+ if (typeof item === 'function') {
+ //
+ } else if (typeof item === 'object') {
+ arrayLastIsObj = true
+ format = `${LN}${indent}${this.formatConfig(item, dep + 1)},`
+ } else if ((typeof item === 'number' && !isNaN(item)) || typeof item === 'boolean') {
+ format = `${item},`
+ } else if (typeof item === 'string') {
+ format = `'${item}',`
+ }
+ if (index === obj.length - 1) {
+ format = format.substring(0, format.length - 1)
+ } else {
+ arrayLastIsObj = false
+ }
+ return format
+ }).join('')
+ } else if (typeof obj !== 'function' && typeof obj === 'object') {
+ str = Object.keys(obj).map((key, index, keys) => {
+ const val = obj[key]
+ let format = ''
+ if (typeof val === 'function') {
+ //
+ } else if (typeof val === 'object') {
+ format = `${LN}${indent}${key}: ${this.formatConfig(val, dep + 1)},`
+ } else if ((typeof val === 'number' && !isNaN(val)) || typeof val === 'boolean') {
+ format = `${LN}${indent}${key}: ${val},`
+ } else if (typeof val === 'string') {
+ format = `${LN}${indent}${key}: '${val}',`
+ }
+ if (index === keys.length - 1) {
+ format = format.substring(0, format.length - 1)
+ }
+ return format
+ }).join('')
+ }
+ const len = TAB.length
+ if (indent.length >= len) {
+ indent = indent.substring(0, indent.length - len)
+ }
+ if (!isArray || arrayLastIsObj) {
+ subfix = LN + indent + subfix
+ }
+
+ return `${prefix}${str}${subfix}`
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.side-setting {
+ min-height: 100%;
+ font-size: 14px;
+ line-height: 1.5;
+ word-wrap: break-word;
+ position: relative;
+ padding: 20px 0;
+
+ .flex{
+ display: flex;
+ }
+ .select-item{
+ width: 80px;
+ }
+}
+
+.setting-group {
+ width: 100%;
+}
+
+.input-group {
+ display: inline-flex;
+ width: 100%;
+ position: relative;
+
+ .color-picker {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ overflow: hidden;
+ top: 0;
+ right: 0;
+ border: 1px solid;
+ cursor: pointer;
+
+ .ant-input {
+ opacity: 0;
+ height: 20px;
+ width: 20px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: pointer;
+ }
+ }
+}
+
+.setting-action {
+ width: 100%;
+ padding: 0 24px;
+
+ &-alert {
+ margin: 20px 0 8px;
+ word-break: break-word;
+ }
+
+ &-btn {
+ width: 100%;
+ margin-bottom: 5px;
+ }
+}
+</style>
diff --git a/ui/src/components/view/SettingItem.vue b/ui/src/components/view/SettingItem.vue
new file mode 100644
index 0000000..fa458d6
--- /dev/null
+++ b/ui/src/components/view/SettingItem.vue
@@ -0,0 +1,185 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+ <div>
+ <div class="setting-item" v-if="viewType === 'item'">
+ <h3 class="title">{{ title }}</h3>
+ <slot></slot>
+ </div>
+
+ <div class="setting-image-item" v-if="viewType === 'radio-group'">
+ <a-row :span="24" style="display: flex;">
+ <a-col v-for="(item) in items" :key="item.name" :style="colWidth">
+ <a-tooltip :title="$t(`label.theme.${item.name}`)" placement="top">
+ <div :class="['img-checkbox', item.disabled ? 'disabled' : '']" v-if="item.type==='image-checkbox'">
+ <component
+ :is="item.component"
+ :style="{
+ height: '56px',
+ width: '56px'
+ }"/>
+ <div :class="['check-item', item.name === checked ? 'check-item-checked' : '']">
+ <a-radio :value="item.name" :disabled="item.disabled"></a-radio>
+ <a-icon :class="['check-icon', item.name]" type="check" />
+ </div>
+ </div>
+
+ <div class="color-checkbox" v-else>
+ <div
+ :class="['check-color', item.color === checked ? 'check-color-checked' : '']"
+ :style="{ backgroundColor: item.color }">
+ <a-radio :value="item.color"></a-radio>
+ <a-icon class="check-icon" type="check" />
+ </div>
+ </div>
+ </a-tooltip>
+ </a-col>
+ </a-row>
+ </div>
+ </div>
+</template>
+
+<script>
+import AddNetscalerLoadBalancer from '@/views/infra/network/providers/AddNetscalerLoadBalancer.vue'
+
+export default {
+ components: { AddNetscalerLoadBalancer },
+ name: 'SettingItem',
+ props: {
+ viewType: {
+ type: String,
+ required: true
+ },
+ title: {
+ type: String,
+ default: ''
+ },
+ items: {
+ type: Array,
+ default: () => []
+ },
+ checked: {
+ type: String,
+ default: ''
+ }
+ },
+ computed: {
+ colWidth () {
+ if (this.items.length === 2) {
+ return { width: '70px' }
+ }
+
+ return { width: `${(100 / this.items.length)}%` }
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.setting-item{
+ margin-bottom: 24px;
+ padding: 0 24px;
+
+ .title {
+ line-height: 22px;
+ margin-bottom: 12px;
+ }
+}
+
+.img-checkbox {
+ margin-right: 16px;
+ position: relative;
+ border-radius: 4px;
+ cursor: pointer;
+ width: 55px;
+ height: 50px;
+
+ .check-item {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ padding-top: 25px;
+ padding-left: 20px;
+ height: 100%;
+ font-size: 14px;
+ font-weight: bold;
+
+ .ant-radio-wrapper {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+ }
+
+ .check-icon {
+ display: none;
+ }
+
+ &-checked {
+ .check-icon {
+ display: block;
+ }
+ }
+ }
+
+ &.disabled {
+ cursor: not-allowed;
+ opacity: 0.9;
+
+ .ant-radio-wrapper {
+ cursor: not-allowed;
+ }
+ }
+}
+
+.color-checkbox {
+ position: relative;
+ cursor: pointer;
+
+ .check-color {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+
+ .ant-radio-wrapper {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin: 0;
+ width: 20px;
+ height: 20px;
+ }
+
+ .check-icon {
+ display: none;
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ }
+
+ &-checked {
+ .check-icon {
+ display: block;
+ }
+ }
+ }
+}
+</style>
diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue
index 832f5b3..feb0ad6 100644
--- a/ui/src/components/view/TreeView.vue
+++ b/ui/src/components/view/TreeView.vue
@@ -594,8 +594,6 @@ export default {
}
/deep/.ant-tree-icon__customize {
- color: rgba(0, 0, 0, 0.45);
- background: #fff;
padding-right: 5px;
}
diff --git a/ui/src/components/widgets/Drawer.vue b/ui/src/components/widgets/Drawer.vue
new file mode 100644
index 0000000..8cfd59d
--- /dev/null
+++ b/ui/src/components/widgets/Drawer.vue
@@ -0,0 +1,170 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+ <div>
+ <div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
+ <div :class="['drawer', placement, visible ? 'open' : 'close']">
+ <div ref="drawer" class="content">
+ <slot name="drawer"></slot>
+ </div>
+
+ <div
+ :class="['handler-container', placement, visible ? 'open' : 'close']"
+ ref="handler"
+ @click="toggle">
+ <slot v-if="$slots.handler" name="handler"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Drawer',
+ data () {
+ return {
+ }
+ },
+ model: {
+ prop: 'visible',
+ event: 'change'
+ },
+ props: {
+ visible: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
+ placement: {
+ type: String,
+ required: false,
+ default: 'left'
+ },
+ showHandler: {
+ type: Boolean,
+ required: false,
+ default: true
+ }
+ },
+ inject: ['parentToggleSetting'],
+ methods: {
+ open () {
+ this.parentToggleSetting(true)
+ },
+ close () {
+ this.parentToggleSetting(false)
+ },
+ toggle () {
+ this.parentToggleSetting(!this.visible)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.mask {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ transition: all 0.5s;
+ z-index: 100;
+ background-color: #000000;
+ opacity: 0.2;
+
+ &.open{
+ display: inline-block;
+ }
+
+ &.close{
+ display: none;
+ }
+}
+
+.drawer{
+ position: fixed;
+ transition: all 0.5s;
+ height: 100vh;
+ z-index: 100;
+
+ &.left{
+ left: 0;
+
+ &.close{
+ transform: translateX(-100%);
+ }
+ }
+
+ &.right{
+ right: 0;
+
+ &.close{
+ transform: translateX(100%);
+ }
+ }
+}
+
+.content {
+ display: inline-block;
+ height: 100vh;
+ overflow-y: auto;
+ width: 300px;
+ background-color: #FFFFFF;
+}
+
+.handler-container {
+ position: absolute;
+ display: inline-block;
+ text-align: center;
+ transition: all 0.5s;
+ cursor: pointer;
+ top: calc(50% - 45px);
+ z-index: 100;
+
+ &.left{
+ right: -40px;
+
+ .handler{
+ border-radius: 0 5px 5px 0;
+ }
+
+ button {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ padding-left: 10px;
+ padding-right: 12px;
+ }
+ }
+
+ &.right{
+ left: -40px;
+
+ .handler {
+ border-radius: 5px 0 0 5px;
+ }
+
+ button {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ padding-left: 12px;
+ padding-right: 10px;
+ }
+ }
+}
+</style>
diff --git a/ui/src/components/widgets/OsLogo.vue b/ui/src/components/widgets/OsLogo.vue
index edbb3a4..a1de108 100644
--- a/ui/src/components/widgets/OsLogo.vue
+++ b/ui/src/components/widgets/OsLogo.vue
@@ -20,8 +20,19 @@
<template slot="title">
{{ name }}
</template>
- <font-awesome-icon :icon="['fab', logo]" :size="size" style="color: #666;" v-if="logo !== 'debian'" />
- <debian-icon v-else-if="logo === 'debian'" :style="{ height: size === '4x' ? '56px' : '16px', width: size === '4x' ? '56px' : '16px', marginBottom: '-4px' }" />
+ <font-awesome-icon
+ :icon="['fab', logo]"
+ :size="size"
+ :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#666' }]"
+ v-if="logo !== 'debian'" />
+ <debian-icon
+ v-else-if="logo === 'debian'"
+ :style="{
+ height: size === '4x' ? '56px' : '16px',
+ width: size === '4x' ? '56px' : '16px',
+ marginBottom: '-4px',
+ background: $store.getters.darkMode ? 'rgba(255, 255, 255, 0.65)' : ''
+ }" />
</a-tooltip>
</template>
diff --git a/ui/src/layouts/UserLayout.vue b/ui/src/layouts/UserLayout.vue
index f5bb5a4..e25bab4 100644
--- a/ui/src/layouts/UserLayout.vue
+++ b/ui/src/layouts/UserLayout.vue
@@ -35,8 +35,10 @@
</template>
<script>
+import Vue from 'vue'
import RouteView from '@/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
+import { DARK_MODE } from '@/store/mutation-types'
export default {
name: 'UserLayout',
@@ -45,11 +47,25 @@ export default {
data () {
return {}
},
+ watch: {
+ '$store.getters.darkMode' (darkMode) {
+ if (darkMode) {
+ document.body.classList.add('dark-mode')
+ } else {
+ document.body.classList.remove('dark-mode')
+ }
+ }
+ },
mounted () {
document.body.classList.add('userLayout')
+ const darkMode = Vue.ls.get(DARK_MODE, false)
+ if (this.$store.getters.darkMode || darkMode) {
+ document.body.classList.add('dark-mode')
+ }
},
beforeDestroy () {
document.body.classList.remove('userLayout')
+ document.body.classList.remove('dark-mode')
}
}
</script>
@@ -57,7 +73,6 @@ export default {
<style lang="less" scoped>
.user-layout {
height: 100%;
- background: #fff;
&-container {
padding: 3rem 0;
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index f694362..eda3d9a 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -37,7 +37,9 @@ const getters = {
timezoneoffset: state => state.user.timezoneoffset,
usebrowsertimezone: state => state.user.usebrowsertimezone,
server: state => state.app.server,
- domainStore: state => state.user.domainStore
+ domainStore: state => state.user.domainStore,
+ darkMode: state => state.user.darkMode,
+ themeSetting: state => state.user.themeSetting
}
export default getters
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index d2a5fd6..ce28448 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -33,7 +33,9 @@ import {
TIMEZONE_OFFSET,
USE_BROWSER_TIMEZONE,
HEADER_NOTICES,
- DOMAIN_STORE
+ DOMAIN_STORE,
+ DARK_MODE,
+ THEME_SETTING
} from '@/store/mutation-types'
const user = {
@@ -52,7 +54,9 @@ const user = {
zones: {},
timezoneoffset: 0.0,
usebrowsertimezone: false,
- domainStore: {}
+ domainStore: {},
+ darkMode: false,
+ themeSetting: {}
},
mutations: {
@@ -107,6 +111,14 @@ const user = {
SET_DOMAIN_STORE (state, domainStore) {
state.domainStore = domainStore
Vue.ls.set(DOMAIN_STORE, domainStore)
+ },
+ SET_DARK_MODE (state, darkMode) {
+ state.darkMode = darkMode
+ Vue.ls.set(DARK_MODE, darkMode)
+ },
+ SET_THEME_SETTING (state, setting) {
+ state.themeSetting = setting
+ Vue.ls.set(THEME_SETTING, setting)
}
},
@@ -132,6 +144,10 @@ const user = {
const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
commit('SET_USE_BROWSER_TIMEZONE', cachedUseBrowserTimezone)
+ const darkMode = Vue.ls.get(DARK_MODE, false)
+ commit('SET_DARK_MODE', darkMode)
+ const themeSetting = Vue.ls.get(THEME_SETTING, {})
+ commit('SET_THEME_SETTING', themeSetting)
commit('SET_APIS', {})
commit('SET_NAME', '')
@@ -160,9 +176,13 @@ const user = {
const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0)
const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
const domainStore = Vue.ls.get(DOMAIN_STORE, {})
+ const darkMode = Vue.ls.get(DARK_MODE, false)
+ const themeSetting = Vue.ls.get(THEME_SETTING, {})
const hasAuth = Object.keys(cachedApis).length > 0
commit('SET_DOMAIN_STORE', domainStore)
+ commit('SET_DARK_MODE', darkMode)
+ commit('SET_THEME_SETTING', themeSetting)
if (hasAuth) {
console.log('Login detected, using cached APIs')
commit('SET_ZONES', cachedZones)
@@ -347,6 +367,12 @@ const user = {
},
SetDomainStore ({ commit }, domainStore) {
commit('SET_DOMAIN_STORE', domainStore)
+ },
+ SetDarkMode ({ commit }, darkMode) {
+ commit('SET_DARK_MODE', darkMode)
+ },
+ SetThemeSetting ({ commit }, setting) {
+ commit('SET_THEME_SETTING', setting)
}
}
}
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
index 7adc857..8a2637a 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -34,6 +34,8 @@ export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
export const SERVER_MANAGER = 'SERVER_MANAGER'
export const DOMAIN_STORE = 'DOMAIN_STORE'
+export const DARK_MODE = 'DARK_MODE'
+export const THEME_SETTING = 'THEME_SETTING'
export const CONTENT_WIDTH_TYPE = {
Fluid: 'Fluid',
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
new file mode 100644
index 0000000..10534f7
--- /dev/null
+++ b/ui/src/style/dark-mode.less
@@ -0,0 +1,904 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+@dark-bgColor: #090c10;
+@dark-secondary-bgColor: #141414;
+@dark-text-color-1: rgba(255, 255, 255, 0.25);
+@dark-text-color-2: rgba(255, 255, 255, 0.45);
+@dark-text-color-3: rgba(255, 255, 255, 0.65);
+@dark-text-color-4: rgba(255, 255, 255, 0.85);
+@box-shadow-1: rgba(0, 0, 0, 0.32);
+@box-shadow-2: rgba(0, 0, 0, 0.20);
+@box-shadow-3: rgba(0, 0, 0, 0.12);
+@light-text-color: rgba(0, 0, 0, 0.65);
+@dark-border-color: #434343;
+@dropdown-bgColor: #1f1f1f;
+@dropdown-hover-bgColor: rgba(255, 255, 255, 0.08);
+@table-header-bgColor: #1d1d1d;
+@table-header-hover-bgColor: #303030;
+@table-body-hover-bgColor: #262626;
+@disabled-bgColor: #555;
+
+.dark-mode {
+ background: @dark-bgColor;
+
+ h1, h2, h3, h4, h5, h6 {
+ color: @dark-text-color-3;
+ }
+
+ .user-layout, .ant-layout {
+ background: @dark-bgColor;
+ }
+
+ .layout.ant-layout .header {
+ background: @dark-secondary-bgColor;
+ box-shadow: 0 1px 4px #090c10;
+ }
+
+ .layout.ant-layout .trigger,
+ .layout.ant-layout .header .user-menu .action,
+ .layout.ant-layout .top-nav-header-index .user-menu .action,
+ .ant-tabs {
+ color: @dark-text-color-3;
+ }
+
+ .ant-layout-footer {
+ background: @dark-secondary-bgColor;
+ color: @dark-text-color-3;
+
+ .footer {
+ .line {
+ a {
+ color: @dark-text-color-3;
+
+ &:hover {
+ color: @dark-text-color-4;
+ }
+ }
+ }
+
+ .copyright {
+ color: @dark-text-color-3;
+ }
+ }
+ }
+
+ .sider.light {
+ background: @dark-secondary-bgColor;
+
+ .logo {
+ background-color: @dark-secondary-bgColor;
+ box-shadow: 1px 1px 0px 0px @dark-border-color;
+ }
+
+ .ant-menu-light,
+ .ant-menu-submenu > .ant-menu {
+ background: @dark-secondary-bgColor;
+ }
+ }
+
+ .ant-menu-submenu-popup.ant-menu-light,
+ .ant-menu-light > .ant-menu {
+ background: @dark-secondary-bgColor;
+ }
+
+ .ant-menu {
+ &-vertical:not(.ant-menu-dark) {
+ .ant-menu-item,
+ .ant-menu-submenu-title:not(:hover),
+ .ant-menu-item:not(.ant-menu-item-selected, :hover) > a {
+ color: @dark-text-color-3;
+ }
+ }
+
+ &-inline:not(.ant-menu-dark, .ant-menu-sub) {
+ .ant-menu-item,
+ .ant-menu-item:not(.ant-menu-item-selected) > a:not(:hover),
+ .ant-menu-submenu-title:not(:hover) {
+ color: @dark-text-color-3;
+ }
+ }
+
+ &-submenu:not(.ant-menu-dark, .ant-menu-submenu-inline) {
+ .ant-menu-item:not(.ant-menu-item-selected, :hover) > a {
+ color: @dark-text-color-3;
+ }
+ }
+ }
+
+ .kubernet-icon path
+ {
+ color: @dark-text-color-3;
+ }
+
+ .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: @dark-text-color-3;
+ }
+
+ .ant-card {
+ background: @dark-secondary-bgColor;
+ color: @dark-text-color-3;
+
+ &-head, &-bottom, &-body {
+ color: @dark-text-color-3;
+ border-color: @dark-border-color;
+ }
+
+ .ant-progress-circle {
+ .ant-progress-text {
+ color: @dark-text-color-3;
+ }
+ }
+
+ &-bordered {
+ border-color: @dark-border-color;
+ }
+ }
+
+ .chart-card-footer {
+ border-color: @dark-border-color;
+ }
+
+ .vm-info-card .resource-detail-item__details a,
+ .vm-info-card .resource-detail-item a {
+ color: @dark-text-color-3;
+ }
+
+ .ant-breadcrumb {
+ a:not(:hover), &-separator {
+ color: @dark-text-color-3;
+ }
+
+ span:last-child, span:last-child a {
+ color: @dark-text-color-4;
+ }
+ }
+
+ .ant-btn {
+ &:not(.ant-btn-primary, .ant-btn-danger, :disabled) {
+ color: @dark-text-color-3;
+ background-color: transparent;
+ border-color: @dark-border-color;
+ }
+
+ &:disabled {
+ background-color: @disabled-bgColor;
+ color: @dark-text-color-3;
+ }
+
+ &-primary-disabled,
+ &-primary.disabled,
+ &-primary[disabled],
+ &-primary-disabled:hover,
+ &-primary.disabled:hover,
+ &-primary[disabled]:hover,
+ &-primary-disabled:focus,
+ &-primary.disabled:focus,
+ &-primary[disabled]:focus,
+ &-primary-disabled:active,
+ &-primary.disabled:active,
+ &-primary[disabled]:active,
+ &-primary-disabled.active,
+ &-primary.disabled.active,
+ &-primary[disabled].active {
+ color: @dark-text-color-3;
+ background-color: @disabled-bgColor;
+ }
+ }
+
+ .has-error .ant-input-affix-wrapper .ant-input,
+ .has-error .ant-input-affix-wrapper .ant-input:hover,
+ .has-error .ant-input,
+ .has-error .ant-input:hover {
+ background-color: transparent;
+ background-image: none;
+ }
+
+ .ant-badge-status-text {
+ color: @dark-text-color-3;
+ }
+
+ .ant-table {
+ color: @dark-text-color-3;
+
+ &-thead {
+ background-color: @table-header-bgColor;
+
+ tr th {
+ color: @dark-text-color-4;
+ background-color: @table-header-bgColor;
+ border-color: @dark-border-color;
+
+ .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
+ .ant-table-column-has-actions.ant-table-column-has-sorters:hover,
+ .ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon,
+ .ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter {
+ background-color: @table-header-hover-bgColor;
+ }
+ }
+
+ & > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
+ background-color: @table-header-hover-bgColor;
+ }
+
+ & > tr:hover.ant-table-row-selected > td,
+ & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+ & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+ background-color: transparent;
+ }
+ }
+
+ &-tbody {
+ & > tr > td {
+ border-color: @dark-border-color;
+ }
+
+ & > tr.ant-table-row-selected td,
+ & > tr:hover.ant-table-row-selected > td,
+ & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+ & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+ background-color: @table-body-hover-bgColor;
+ }
+
+ & > tr > th.ant-table-column-sort {
+ background-color: @dark-bgColor;
+ }
+ }
+
+ &-footer {
+ background-color: @dark-secondary-bgColor;
+ color: @dark-text-color-3;
+ border-color: @dark-border-color;
+
+ &::before {
+ background-color: @dark-border-color;
+ }
+ }
+
+ &-header {
+ background-color: @dark-secondary-bgColor;
+ }
+
+ &-small {
+ border-color: @dark-border-color;
+
+ & > .ant-table-content > .ant-table-body .ant-table-thead {
+ background-color: transparent;
+ }
+ }
+
+ tr.ant-table-expanded-row,
+ tr.ant-table-expanded-row:hover {
+ background-color: @dark-bgColor;
+ }
+
+ &-placeholder {
+ border-color: @dark-border-color;
+ background-color: @dark-secondary-bgColor;
+ }
+
+ &-row-expand-icon {
+ border-color: @dark-text-color-3;
+ color: @dark-text-color-3;
+ background-color: transparent;
+ }
+
+ &-filter-dropdown {
+ background-color: @dark-secondary-bgColor;
+
+ &-btns {
+ border-color: @dark-border-color;
+ }
+ }
+ }
+
+ .light-row, .dark-row {
+ background-color: @dark-secondary-bgColor;
+ }
+
+ .ant-pagination {
+ color: @dark-text-color-3;
+
+ &-prev, &-next, &-jump-prev, &-jump-next, &-prev a, &-next a {
+ color: @dark-text-color-3;
+ }
+
+ &-disabled a,
+ &-disabled:hover a,
+ &-disabled:focus a,
+ &-disabled .ant-pagination-item-link,
+ &-disabled:hover .ant-pagination-item-link,
+ &-disabled:focus .ant-pagination-item-link {
+ color: @dark-text-color-1;
+ }
+
+ &-item {
+ a:not(:hover) {
+ color: @dark-text-color-3;
+ }
+
+ &-active {
+ background-color: transparent;
+ }
+ }
+
+ &-options-quick-jumper input {
+ background-color: transparent;
+ background-image: none;
+ border-color: @dark-border-color;
+ color: @dark-text-color-3;
+ }
+ }
+
+ .ant-popover {
+ &-message {
+ color: @dark-text-color-3;
+ }
+
+ &-inner-content {
+ color: @dark-text-color-3;
+ background-color: @dark-secondary-bgColor;
+ border: 1px solid @dark-border-color;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+ }
+
+ &-placement {
+ &-bottom > .ant-popover-content > .ant-popover-arrow,
+ &-bottomLeft > .ant-popover-content > .ant-popover-arrow,
+ &-bottomRight > .ant-popover-content > .ant-popover-arrow {
+ border-top-color: @dark-border-color;
+ border-left-color: @dark-border-color;
+ }
+
+ &-top > .ant-popover-content > .ant-popover-arrow,
+ &-topLeft > .ant-popover-content > .ant-popover-arrow,
+ &-topRight > .ant-popover-content > .ant-popover-arrow {
+ border-right-color: @dark-border-color;
+ border-bottom-color: @dark-border-color;
+ }
+ }
+ }
+
+ .ant-list-item {
+ color: @dark-text-color-3;
+ border-color: @dark-border-color;
+
+ &-meta-title, &-meta-description {
+ color: @dark-text-color-3;
+ }
+ }
+
+ .ant-tag {
+ background-color: transparent;
+ background-image: none;
+ border-color: @dark-border-color;
+ color: @dark-text-color-3;
+
+ .anticon-close {
+ color: @dark-text-color-3;
+
+ &:hover {
+ color: @dark-text-color-4;
+ }
+ }
+ }
+
+ .ant-avatar {
+ background-color: transparent;
+ background-image: none;
+ border: 1px solid @dark-border-color;
+ color: @dark-text-color-3;
+ }
+
+ .ant-form {
+ color: @dark-text-color-3;
+
+ &-item-label > label {
+ color: @dark-text-color-3;
+ }
+ }
+
+ .ant-modal {
+ color: @dark-text-color-3;
+
+ &-content {
+ background-color: @dark-secondary-bgColor;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+ }
+
+ &-header {
+ background-color: @dark-secondary-bgColor;
+ border-color: @dark-border-color;
+ }
+
+ &-footer {
+ border-color: @dark-border-color;
+ }
+
+ &-confirm-body &-confirm-title,
+ &-title, &-close-x {
+ color: @dark-text-color-3;
+ }
+ }
+
+ .ant-input,
+ .ant-select-selection,
+ .ant-input-group-addon,
+ .ant-checkbox-inner,
+ .ant-radio-inner,
+ .ant-radio-button-wrapper,
+ .ant-input-number,
+ .ant-time-picker-input {
+ background-color: transparent;
+ color: @dark-text-color-3;
+
+ &:not(:hover, :focus) {
+ border-color: @dark-border-color;
+ }
+
+ &:disabled, &-disabled {
+ background-color: @disabled-bgColor;
+ }
+ }
+
+ .ant-select-disabled {
+ background-color: @disabled-bgColor;
+ }
+
+ .ant-checkbox-wrapper,
+ .ant-select-arrow {
+ color: @dark-text-color-3;
+ }
+
+ .ant-switch {
+ color: @light-text-color;
+ background-color: @dark-text-color-2;
+
+ &-checked {
+ background-color: #1890ff;
+ }
+
+ &-loading-icon, &:after {
+ background-color: @dark-secondary-bgColor;
+ }
+
+ &:disabled {
+ background-color: @disabled-bgColor;
+ }
+ }
+
+ .ant-select-dropdown {
+ background-color: @dropdown-bgColor;
+ color: @dark-text-color-3;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+
+ &-menu-item {
+ color: @dark-text-color-3;
+
+ &-selected {
+ background-color: @dropdown-hover-bgColor;
+ }
+ }
+
+ &-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
+ &-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+ background-color: @dropdown-hover-bgColor;
+ }
+ }
+
+ .ant-calendar {
+ background-color: @dropdown-bgColor;
+ border-color: @dark-border-color;
+
+ &-last-month-cell .ant-calendar-date,
+ &-last-month-cell .ant-calendar-date:hover,
+ &-next-month-btn-day .ant-calendar-date,
+ &-next-month-btn-day .ant-calendar-date:hover {
+ color: @dark-text-color-1;
+ }
+
+ &-picker-container, &-date {
+ color: @dark-text-color-3;
+ }
+
+ &-input-wrap {
+ border-color: @dark-border-color;
+ }
+
+ &-range {
+ .ant-calendar-input,
+ .ant-calendar-time-picker-input,
+ .ant-calendar-input:placeholder-shown,
+ .ant-calendar-time-picker-input:placeholder-shown {
+ background-color: transparent;
+ color: @dark-text-color-3;
+ }
+
+ &-middle, &-picker-separator {
+ color: @dark-text-color-3;
+ }
+
+ .ant-calendar-body,
+ .ant-calendar-decade-panel-body,
+ .ant-calendar-month-panel-body,
+ .ant-calendar-year-panel-body {
+ border-color: @dark-border-color;
+ }
+
+ .ant-calendar-in-range-cell > div {
+ color: #000;
+ }
+ }
+
+ &-header {
+ .ant-calendar-next-century-btn,
+ .ant-calendar-next-decade-btn,
+ .ant-calendar-next-month-btn,
+ .ant-calendar-next-year-btn,
+ .ant-calendar-prev-century-btn,
+ .ant-calendar-prev-decade-btn,
+ .ant-calendar-prev-month-btn,
+ .ant-calendar-prev-year-btn {
+ color: @dark-text-color-2;
+ }
+
+ .ant-calendar-prev-month-btn:after,
+ .ant-calendar-prev-month-btn:before,
+ .ant-calendar-next-month-btn::before,
+ .ant-calendar-next-month-btn::after {
+ border-color: @dark-text-color-2;
+ }
+
+ .ant-calendar-prev-month-btn:hover:after,
+ .ant-calendar-prev-month-btn:hover:before,
+ .ant-calendar-next-month-btn:hover::before,
+ .ant-calendar-next-month-btn:hover::after {
+ border-color: @dark-text-color-4;
+ }
+
+ .ant-calendar-century-select:not(:hover),
+ .ant-calendar-decade-select:not(:hover),
+ .ant-calendar-month-select:not(:hover),
+ .ant-calendar-year-select:not(:hover) {
+ color: @dark-text-color-3;
+ }
+
+
+ .ant-calendar-prev-century-btn::before,
+ .ant-calendar-prev-decade-btn::before,
+ .ant-calendar-prev-year-btn::before,
+ .ant-calendar-prev-century-btn::after,
+ .ant-calendar-prev-decade-btn::after,
+ .ant-calendar-prev-year-btn::after,
+ .ant-calendar-next-century-btn::before,
+ .ant-calendar-next-decade-btn::before,
+ .ant-calendar-next-year-btn::before,
+ .ant-calendar-next-century-btn::after,
+ .ant-calendar-next-decade-btn::after,
+ .ant-calendar-next-year-btn::after {
+ border-color: @dark-text-color-2;
+ }
+
+ .ant-calendar-prev-century-btn:hover::before,
+ .ant-calendar-prev-decade-btn:hover::before,
+ .ant-calendar-prev-year-btn:hover::before,
+ .ant-calendar-prev-century-btn:hover::after,
+ .ant-calendar-prev-decade-btn:hover::after,
+ .ant-calendar-prev-year-btn:hover::after {
+ border-color: @dark-text-color-4;
+ }
+ }
+
+ &-date:hover {
+ color: #000;
+ }
+
+ &-picker-clear {
+ color: @dark-text-color-2;
+ background: transparent;
+
+ &:hover {
+ color: @dark-text-color-4;
+ }
+ }
+ }
+
+ .ant-time {
+ &-picker-panel {
+ color: @dark-text-color-3;
+
+ &-inner {
+ background-color: @dropdown-bgColor;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+ }
+
+ &-input {
+ background-color: transparent;
+
+ &-wrap {
+ border-color: @dark-border-color;
+ }
+ }
+
+ &-select {
+ border-color: @dark-border-color;
+
+ li:hover,
+ li.ant-time-picker-panel-select-option-selected,
+ li.ant-time-picker-panel-select-option-selected:hover {
+ background-color: @dropdown-hover-bgColor;
+ }
+ }
+ }
+ }
+
+ .ant-dropdown-menu {
+ background-color: @dropdown-bgColor;
+ box-shadow:
+ 0 6px 16px -8px @box-shadow-1,
+ 0 9px 28px 0 @box-shadow-2,
+ 0 12px 48px 16px @box-shadow-3;
+
+ &-item:not(.ant-dropdown-menu-item-selected):hover,
+ &-submenu-title:not(.ant-dropdown-menu-item-selected):hover {
+ background-color: @dropdown-hover-bgColor;
+ }
+
+ &-item:not(.ant-dropdown-menu-item-selected),
+ &-submenu-title:not(.ant-dropdown-menu-item-selected),
+ &-item:not(.ant-dropdown-menu-item-selected) > a,
+ &-submenu-title:not(.ant-dropdown-menu-item-selected) > a {
+ color: @dark-text-color-3;
+ }
+ }
+
+ .user-layout .ant-input-affix-wrapper .ant-input-prefix,
+ .user-layout .ant-input-affix-wrapper .ant-input-suffix {
+ color: @dark-text-color-3;
+ }
+
+ .ant-input-affix-wrapper .ant-input-prefix,
+ .ant-input-affix-wrapper .ant-input-suffix,
+ .ant-input-password-icon {
+ color: @dark-text-color-3;
+ }
+
+ .ant-input-number-handler-wrap {
+ background-color: @dark-secondary-bgColor;
+ }
+
+ .ant-input-number-handler,
+ .ant-time-picker-icon,
+ .ant-time-picker-clear,
+ .ant-time-picker-icon .ant-time-picker-clock-icon,
+ .ant-time-picker-clear .ant-time-picker-clock-icon {
+ color: @dark-text-color-3;
+ }
+
+ .ant-steps-item-finish .ant-steps-item-icon {
+ background-color: transparent;
+ }
+
+ .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
+ .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
+ color: @dark-text-color-3;
+ }
+
+ .ant-steps-item-wait .ant-steps-item-icon {
+ background-color: transparent;
+ border-color: @dark-border-color;
+ }
+
+ .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after,
+ .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after {
+ background-color: @dark-border-color;
+ }
+
+ .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon,
+ .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
+ color: @dark-text-color-3;
+ }
+
+ .ant-form-item,
+ .ant-radio-wrapper {
+ color: @dark-text-color-3;
+ }
+
+ .ant-table-fixed-left table, .ant-table-fixed-right table,
+ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+ background-color: @dark-secondary-bgColor;
+ }
+
+ .ant-upload.ant-upload-drag {
+ background-color: transparent;
+ border-color: @dark-border-color;
+ }
+
+ .ant-upload.ant-upload-drag p.ant-upload-text {
+ color: @dark-text-color-3;
+ }
+
+ .ant-tree.ant-tree-show-line li span.ant-tree-switcher {
+ background-color: transparent;
+ color: @dark-text-color-3;
+ }
+
+ .ant-tree li .ant-tree-node-content-wrapper {
+ color: @dark-text-color-3;
+ }
+
+ .ant-tree-icon__customize {
+ color: @dark-text-color-3;
+ background-color: transparent;
+ }
+
+ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+ .ant-tree-icon__customize {
+ color: #000;
+ }
+
+ color: #000;
+ }
+
+ .ant-tree li .ant-tree-node-content-wrapper:hover {
+ .ant-tree-icon__customize {
+ color: #000;
+ }
+
+ .ant-tree-title {
+ color: #000;
+ }
+ }
+
+ .form-content, .zone-support {
+ background-color: @dark-bgColor;
+ border-color: @dark-border-color;
+ }
+
+ .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+ background-color: @dark-text-color-3;
+ }
+
+ .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
+ color: @dark-text-color-3;
+ }
+
+ .ant-select-selection__clear {
+ background-color: transparent;
+ color: @dark-text-color-3;
+
+ &:hover {
+ color: @dark-text-color-2;
+ }
+ }
+
+ .anticon {
+ &-info-circle {
+ color: @dark-text-color-3;
+ }
+ }
+
+ .ant-message-notice-content {
+ background-color: @dropdown-bgColor;
+ color: @dark-text-color-3;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+ }
+
+ .btn-add-tag {
+ background-color: transparent;
+ }
+
+ .tag-disabled-input.ant-input-disabled {
+ background-color: transparent;
+ }
+
+ .tagsTitle {
+ color: @dark-text-color-3;
+ }
+
+ .ant-notification {
+ color: @dark-text-color-3;
+
+ &-notice {
+ background-color: @dark-secondary-bgColor;
+ border: 1px solid @dark-border-color;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+
+ &-message {
+ color: @dark-text-color-4;
+ }
+
+ &-close {
+ color: @dark-text-color-3;
+
+ &:hover {
+ color: @dark-text-color-4;
+ }
+ }
+ }
+ }
+
+ .ant-collapse {
+ background-color: @dark-secondary-bgColor;
+
+ &--borderless {
+ background-color: @dark-secondary-bgColor;
+ }
+
+ & > .ant-collapse-item {
+ background-color: @dark-bgColor;
+
+ & > .ant-collapse-header {
+ color: @dark-text-color-3;
+ }
+
+ &-disabled > .ant-collapse-header,
+ &-disabled > .ant-collapse-header > .arrow {
+ color: @dark-text-color-1;
+ }
+ }
+ }
+
+ .drawer {
+ .content {
+ background-color: @dark-secondary-bgColor;
+ box-shadow:
+ 0 3px 6px -4px @box-shadow-1,
+ 0 6px 16px 0 @box-shadow-2,
+ 0 9px 28px 8px @box-shadow-3;
+ }
+ }
+
+ ::placeholder {
+ color: @dark-text-color-1;
+ }
+
+ .ant-card.usage-dashboard-chart-card.usage-chart-text {
+ h1, h2, h3, h4, h5, h6 {
+ color: initial;
+ }
+ }
+
+ .ant-empty-normal {
+ color: @dark-text-color-3;
+ }
+}
\ No newline at end of file
diff --git a/ui/src/style/index.less b/ui/src/style/index.less
index 0cb6be4..38b4c6b 100644
--- a/ui/src/style/index.less
+++ b/ui/src/style/index.less
@@ -37,3 +37,4 @@
@import "frame/top-menu";
@import "objects/table";
+@import "dark-mode";
diff --git a/ui/src/style/vars.less b/ui/src/style/vars.less
index 7ee2161..0456685 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -90,6 +90,10 @@ a {
box-shadow: 1px 1px 0px 0px #e8e8e8;
}
+.sider.dark .logo {
+ background-color: @project-nav-background-color;
+}
+
.sider.light {
background: @navigation-background-color;
@@ -149,10 +153,6 @@ a {
.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,
@@ -245,4 +245,93 @@ a {
.ant-pagination-options {
display: inline-block;
}
-}
\ No newline at end of file
+}
+
+.user-layout {
+ background: #ffffff;
+
+ .ant-input-affix-wrapper .ant-input-prefix,
+ .ant-input-affix-wrapper .ant-input-suffix {
+ color: rgba(0,0,0,.25);
+ }
+}
+
+.footer {
+ .line {
+ a {
+ color: rgba(0, 0, 0, .45);
+
+ &:hover {
+ color: rgba(0, 0, 0, .65);
+ }
+ }
+ }
+
+ .copyright {
+ color: rgba(0, 0, 0, .45);
+ }
+}
+
+.ant-tree-icon__customize {
+ color: rgba(0, 0, 0, 0.45);
+ background: #fff;
+}
+
+.form-content {
+ background-color: #fafafa;
+}
+
+.zone-support {
+ background: #fafafa;
+}
+
+.anticon {
+ &-info-circle {
+ color: rgba(0,0,0,.45);
+ }
+}
+
+.light-row {
+ background-color: #fff;
+}
+
+.dark-row {
+ background-color: #f9f9f9;
+}
+
+.tag-disabled-input, .btn-add-tag {
+ background-color: #fff;
+}
+
+.tagsTitle {
+ color: rgba(0, 0, 0, 0.85);
+}
+
+.ant-btn.filter-button:hover,
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover,
+.ant-dropdown-menu-item > a:hover,
+.ant-dropdown-menu-submenu-title > a:hover {
+ color: @primary-color;
+}
+
+.drawer {
+ .img-checkbox {
+ .check-icon.light {
+ color: #000;
+ }
+ .check-icon.dark {
+ color: #ffffff;
+ }
+ }
+
+ .color-checkbox {
+ .check-icon {
+ color: #ffffff;
+ }
+ }
+
+ .input-group .color-picker {
+ border-color: @primary-color;
+ }
+}
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index a1fb569..5f408c7 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -162,7 +162,7 @@
<span slot="label">
{{ $t('label.' + field.name) }}
<a-tooltip :title="field.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
diff --git a/ui/src/views/auth/Login.vue b/ui/src/views/auth/Login.vue
index db5ff67..de2240f 100644
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@@ -63,7 +63,7 @@
{rules: [{ required: true, message: $t('message.error.username') }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
]"
>
- <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+ <a-icon slot="prefix" type="user" />
</a-input>
</a-form-item>
@@ -78,7 +78,7 @@
{rules: [{ required: true, message: $t('message.error.password') }], validateTrigger: 'blur'}
]"
>
- <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+ <a-icon slot="prefix" type="lock" />
</a-input-password>
</a-form-item>
@@ -92,7 +92,7 @@
{rules: [{ required: false, message: $t('message.error.domain') }], validateTrigger: 'change'}
]"
>
- <a-icon slot="prefix" type="block" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+ <a-icon slot="prefix" type="block" />
</a-input>
</a-form-item>
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index f30357c..88b58ab 100644
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.description') }}
<a-tooltip :title="apiParams.description.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -78,7 +78,7 @@
<span slot="label">
{{ $t('label.kubernetesversionid') }}
<a-tooltip :title="apiParams.kubernetesversionid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -103,7 +103,7 @@
<span slot="label">
{{ $t('label.serviceofferingid') }}
<a-tooltip :title="apiParams.serviceofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -127,7 +127,7 @@
<span slot="label">
{{ $t('label.noderootdisksize') }}
<a-tooltip :title="apiParams.noderootdisksize.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -147,7 +147,7 @@
<span slot="label">
{{ $t('label.networkid') }}
<a-tooltip :title="apiParams.networkid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -172,7 +172,7 @@
<span slot="label">
{{ $t('label.masternodes') }}
<a-tooltip :title="apiParams.masternodes.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -195,7 +195,7 @@
<span slot="label">
{{ $t('label.externalloadbalanceripaddress') }}
<a-tooltip :title="apiParams.externalloadbalanceripaddress.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -206,7 +206,7 @@
<span slot="label">
{{ $t('label.cks.cluster.size') }}
<a-tooltip :title="apiParams.size.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -229,7 +229,7 @@
<span slot="label">
{{ $t('label.keypair') }}
<a-tooltip :title="apiParams.keypair.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -256,7 +256,7 @@
<span slot="label">
{{ $t('label.username') }}
<a-tooltip :title="apiParams.dockerregistryusername.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -269,7 +269,7 @@
<span slot="label">
{{ $t('label.password') }}
<a-tooltip :title="apiParams.dockerregistrypassword.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -282,7 +282,7 @@
<span slot="label">
{{ $t('label.url') }}
<a-tooltip :title="apiParams.dockerregistryurl.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -295,7 +295,7 @@
<span slot="label">
{{ $t('label.email') }}
<a-tooltip :title="apiParams.dockerregistryemail.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
index a91ff0b..55c724b 100644
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -26,7 +26,7 @@
<span slot="label" :title="apiParams.volumeid.description">
{{ $t('label.volumeid') }}
<a-tooltip>
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -49,7 +49,7 @@
<span slot="label" :title="apiParams.name.description">
{{ $t('label.name') }}
<a-tooltip>
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -60,7 +60,7 @@
<span slot="label" :title="apiParams.quiescevm.description">
{{ $t('label.quiescevm') }}
<a-tooltip>
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['quiescevm', { initialValue: false }]"/>
@@ -69,7 +69,7 @@
<span slot="label" :title="apiParams.asyncbackup.description">
{{ $t('label.asyncbackup') }}
<a-tooltip>
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['asyncbackup', { initialValue: false }]"/>
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 7893047..b1c24cc 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -166,7 +166,7 @@
<span slot="label">
{{ $t('label.configuration') }}
<a-tooltip :title="$t('message.ovf.configurations')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -298,7 +298,7 @@
<span slot="label">
{{ nic.elementName + ' - ' + nic.name }}
<a-tooltip :title="nic.networkDescription">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -390,7 +390,7 @@
<span slot="label" style="text-transform: capitalize">
{{ property.label }}
<a-tooltip :title="property.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
index e66fd5f..435c646 100644
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@@ -27,7 +27,7 @@
<span slot="label">
{{ $t('label.expunge') }}
<a-tooltip placement="bottom" :title="apiParams.expunge.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['expunge']" :auto-focus="true" />
@@ -37,7 +37,7 @@
<span slot="label">
{{ $t('label.delete.volumes') }}
<a-tooltip placement="bottom" :title="apiParams.volumeids.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/compute/EditVM.vue b/ui/src/views/compute/EditVM.vue
index c97e7e5..8c6f205 100644
--- a/ui/src/views/compute/EditVM.vue
+++ b/ui/src/views/compute/EditVM.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -37,7 +37,7 @@
<span slot="label">
{{ $t('label.displayname') }}
<a-tooltip :title="apiParams.displayname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -47,7 +47,7 @@
<span slot="label">
{{ $t('label.ostypeid') }}
<a-tooltip :title="apiParams.ostypeid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -67,7 +67,7 @@
<span slot="label">
{{ $t('label.isdynamicallyscalable') }}
<a-tooltip :title="apiParams.isdynamicallyscalable.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
@@ -78,7 +78,7 @@
<span slot="label">
{{ $t('label.haenable') }}
<a-tooltip :title="apiParams.haenable.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
@@ -89,7 +89,7 @@
<span slot="label">
{{ $t('label.group') }}
<a-tooltip :title="apiParams.group.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-auto-complete
diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
index f07424b..6dad3a2 100644
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -30,7 +30,7 @@
<span slot="label">
{{ $t('label.cks.cluster.size') }}
<a-tooltip :title="apiParams.size.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -52,7 +52,7 @@
<span slot="label">
{{ $t('label.serviceofferingid') }}
<a-tooltip :title="apiParams.serviceofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index 256e0dd..1c23cd2 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -31,7 +31,7 @@
<span slot="label">
{{ $t('label.podid') }}
<a-tooltip :title="apiParams.podid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.clusterid') }}
<a-tooltip :title="apiParams.clusterid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -77,7 +77,7 @@
<span slot="label">
{{ $t('label.hostid') }}
<a-tooltip :title="apiParams.hostid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -101,7 +101,7 @@
<span slot="label">
{{ $t('label.bootintosetup') }}
<a-tooltip :title="apiParams.bootintosetup.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
index d8a7de0..2467baa 100644
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -30,7 +30,7 @@
<span slot="label">
{{ $t('label.kubernetesversionid') }}
<a-tooltip :title="apiParams.kubernetesversionid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/compute/wizard/NetworkConfiguration.vue b/ui/src/views/compute/wizard/NetworkConfiguration.vue
index e6b4517..5fb4331 100644
--- a/ui/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/ui/src/views/compute/wizard/NetworkConfiguration.vue
@@ -44,7 +44,7 @@
:placeholder="record.cidr"
@change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)">
<a-tooltip v-if="record.type !== 'L2'" slot="suffix" :title="getIpRangeDescription(record)">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</a-input>
</a-form-item>
@@ -61,7 +61,7 @@
}]"
@change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)">
<a-tooltip slot="suffix" :title="$t('label.macaddress.example')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</a-input>
</a-form-item>
diff --git a/ui/src/views/dashboard/UsageDashboardChart.vue b/ui/src/views/dashboard/UsageDashboardChart.vue
index 1430d2d..be46d1b 100644
--- a/ui/src/views/dashboard/UsageDashboardChart.vue
+++ b/ui/src/views/dashboard/UsageDashboardChart.vue
@@ -24,7 +24,7 @@
v-for="stat in stats"
:key="stat.type">
<a-card
- class="usage-dashboard-chart-card"
+ :class="['usage-dashboard-chart-card', stat.bgcolor ? 'usage-chart-text' : '']"
:bordered="false"
:loading="loading"
:style="stat.bgcolor ? { 'background-color': stat.bgcolor } : {}">
diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
index 1b61f2d..e466450 100644
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@@ -23,7 +23,7 @@
<span slot="label">
{{ $t('label.role') }}
<a-tooltip :title="apiParams.roleid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -42,7 +42,7 @@
<span slot="label">
{{ $t('label.username') }}
<a-tooltip :title="apiParams.username.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -57,7 +57,7 @@
<span slot="label">
{{ $t('label.password') }}
<a-tooltip :title="apiParams.password.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -72,7 +72,7 @@
<span slot="label">
{{ $t('label.confirmpassword') }}
<a-tooltip :title="apiParams.password.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -90,7 +90,7 @@
<span slot="label">
{{ $t('label.email') }}
<a-tooltip :title="apiParams.email.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -105,7 +105,7 @@
<span slot="label">
{{ $t('label.firstname') }}
<a-tooltip :title="apiParams.firstname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -120,7 +120,7 @@
<span slot="label">
{{ $t('label.lastname') }}
<a-tooltip :title="apiParams.lastname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -135,7 +135,7 @@
<span slot="label">
{{ $t('label.domain') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -153,7 +153,7 @@
<span slot="label">
{{ $t('label.account') }}
<a-tooltip :title="apiParams.account.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['account']" :placeholder="apiParams.account.description" />
@@ -162,7 +162,7 @@
<span slot="label">
{{ $t('label.timezone') }}
<a-tooltip :title="apiParams.timezone.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -179,7 +179,7 @@
<span slot="label">
{{ $t('label.networkdomain') }}
<a-tooltip :title="apiParams.networkdomain.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -194,7 +194,7 @@
<span slot="label">
{{ $t('label.samlentity') }}
<a-tooltip :title="apiParams.entityid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/iam/AddLdapAccount.vue b/ui/src/views/iam/AddLdapAccount.vue
index 2190443..b7bf89e 100644
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@@ -476,12 +476,4 @@ export default {
}
}
-/deep/ .light-row {
- background-color: #fff;
-}
-
-/deep/ .dark-row {
- background-color: #f9f9f9;
-}
-
</style>
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index e9ac516..f9eded8 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -23,7 +23,7 @@
<span slot="label">
{{ $t('label.username') }}
<a-tooltip :title="apiParams.username.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -39,7 +39,7 @@
<span slot="label">
{{ $t('label.password') }}
<a-tooltip :title="apiParams.password.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.confirmpassword') }}
<a-tooltip :title="apiParams.password.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -72,7 +72,7 @@
<span slot="label">
{{ $t('label.email') }}
<a-tooltip :title="apiParams.email.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -87,7 +87,7 @@
<span slot="label">
{{ $t('label.firstname') }}
<a-tooltip :title="apiParams.firstname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -102,7 +102,7 @@
<span slot="label">
{{ $t('label.lastname') }}
<a-tooltip :title="apiParams.lastname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -117,7 +117,7 @@
<span slot="label">
{{ $t('label.domain') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -133,7 +133,7 @@
<span slot="label">
{{ $t('label.account') }}
<a-tooltip :title="apiParams.account.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -151,7 +151,7 @@
<span slot="label">
{{ $t('label.timezone') }}
<a-tooltip :title="apiParams.timezone.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -171,7 +171,7 @@
<span slot="label">
{{ $t('label.samlentity') }}
<a-tooltip :title="apiParams.entityid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/iam/ChangeUserPassword.vue b/ui/src/views/iam/ChangeUserPassword.vue
index 3570cd5..6ed4497 100644
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.currentpassword') }}
<a-tooltip :title="apiParams.currentpassword.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.new.password') }}
<a-tooltip :title="apiParams.password.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.confirmpassword') }}
<a-tooltip :title="apiParams.password.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input-password
diff --git a/ui/src/views/iam/CreateRole.vue b/ui/src/views/iam/CreateRole.vue
index 89e41e3..b7dfe1f 100644
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -41,7 +41,7 @@
<span slot="label">
{{ $t('label.description') }}
<a-tooltip :title="apiParams.description.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.based.on') }}
<a-tooltip :title="$t('label.based.on.role.id.or.type')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -75,7 +75,7 @@
<span slot="label">
{{ $t('label.type') }}
<a-tooltip :title="apiParams.type.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -93,7 +93,7 @@
<span slot="label">
{{ $t('label.role') }}
<a-tooltip :title="apiParams.roleid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index 8ffd2ee..3726dfa 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -49,7 +49,7 @@
<span slot="label">
{{ $t('label.' + field.name) }}
<a-tooltip :title="field.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
diff --git a/ui/src/views/iam/EditUser.vue b/ui/src/views/iam/EditUser.vue
index 3a3bbf2..567a869 100644
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@@ -23,7 +23,7 @@
<span slot="label">
{{ $t('label.username') }}
<a-tooltip :title="apiParams.username.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -37,7 +37,7 @@
<span slot="label">
{{ $t('label.email') }}
<a-tooltip :title="apiParams.email.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -52,7 +52,7 @@
<span slot="label">
{{ $t('label.firstname') }}
<a-tooltip :title="apiParams.firstname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -67,7 +67,7 @@
<span slot="label">
{{ $t('label.lastname') }}
<a-tooltip :title="apiParams.lastname.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -82,7 +82,7 @@
<span slot="label">
{{ $t('label.timezone') }}
<a-tooltip :title="apiParams.timezone.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/iam/ImportRole.vue b/ui/src/views/iam/ImportRole.vue
index 931671d..24388c3 100644
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.rules.file') }}
<a-tooltip :title="$t('label.rules.file.to.import')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-upload-dragger
@@ -55,7 +55,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -70,7 +70,7 @@
<span slot="label">
{{ $t('label.description') }}
<a-tooltip :title="apiParams.description.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -82,7 +82,7 @@
<span slot="label">
{{ $t('label.type') }}
<a-tooltip :title="apiParams.type.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -100,7 +100,7 @@
<span slot="label">
{{ $t('label.forced') }}
<a-tooltip :title="apiParams.forced.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
diff --git a/ui/src/views/image/AddKubernetesSupportedVersion.vue b/ui/src/views/image/AddKubernetesSupportedVersion.vue
index d335515..2998bca 100644
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.semanticversion') }}
<a-tooltip :title="apiParams.semanticversion.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -86,7 +86,7 @@
<span slot="label">
{{ $t('label.url') }}
<a-tooltip :title="apiParams.url.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -99,7 +99,7 @@
<span slot="label">
{{ $t('label.checksum') }}
<a-tooltip :title="apiParams.checksum.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -112,7 +112,7 @@
<span slot="label">
{{ $t('label.mincpunumber') }}
<a-tooltip :title="apiParams.mincpunumber.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -134,7 +134,7 @@
<span slot="label">
{{ $t('label.minmemory') }}
<a-tooltip :title="apiParams.minmemory.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
diff --git a/ui/src/views/infra/AddPrimaryStorage.vue b/ui/src/views/infra/AddPrimaryStorage.vue
index c923bb4..9885d1f 100644
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@@ -23,7 +23,7 @@
<span slot="label">
{{ $t('label.scope') }}
<a-tooltip :title="apiParams.scope.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -39,7 +39,7 @@
<span slot="label">
{{ $t('label.hypervisor') }}
<a-tooltip :title="apiParams.hypervisor.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -55,7 +55,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -71,7 +71,7 @@
<span slot="label">
{{ $t('label.podid') }}
<a-tooltip :title="apiParams.podid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -86,7 +86,7 @@
<span slot="label">
{{ $t('label.clusterid') }}
<a-tooltip :title="apiParams.clusterid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -113,7 +113,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['name', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
@@ -122,7 +122,7 @@
<span slot="label">
{{ $t('label.protocol') }}
<a-tooltip :title="$t('message.protocol.description')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -140,7 +140,7 @@
<span slot="label">
{{ $t('label.server') }}
<a-tooltip :title="$t('message.server.description')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
@@ -151,7 +151,7 @@
<span slot="label">
{{ $t('label.path') }}
<a-tooltip :title="$t('message.path.description')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
@@ -181,7 +181,7 @@
<span slot="label">
{{ $t('label.vcenterdatacenter') }}
<a-tooltip :title="$t('message.datacenter.description')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
@@ -190,7 +190,7 @@
<span slot="label">
{{ $t('label.vcenterdatastore') }}
<a-tooltip :title="$t('message.datastore.description')">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
@@ -200,7 +200,7 @@
<span slot="label">
{{ $t('label.providername') }}
<a-tooltip :title="apiParams.provider.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -216,7 +216,7 @@
<span slot="label">
{{ $t('label.ismanaged') }}
<a-tooltip :title="apiParams.managed.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-checkbox-group v-decorator="['managed']" >
@@ -227,7 +227,7 @@
<span slot="label">
{{ $t('label.capacitybytes') }}
<a-tooltip :title="apiParams.capacitybytes.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['capacityBytes']" />
@@ -236,7 +236,7 @@
<span slot="label">
{{ $t('label.capacityiops') }}
<a-tooltip :title="apiParams.capacityiops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['capacityIops']" />
@@ -245,7 +245,7 @@
<span slot="label">
{{ $t('label.url') }}
<a-tooltip :title="apiParams.url.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input v-decorator="['url']" />
@@ -278,7 +278,7 @@
<span slot="label">
{{ $t('label.storagetags') }}
<a-tooltip :title="apiParams.tags.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 444669e..7b326a2 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.root.certificate') }}
<a-tooltip placement="bottom" :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-textarea
@@ -78,7 +78,7 @@
<span slot="label">
{{ $t('label.intermediate.certificate') + ` ${index + 1} ` }}
<a-tooltip placement="bottom" :title="apiParams.id.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-textarea
@@ -105,7 +105,7 @@
<span slot="label">
{{ $t('label.server.certificate') }}
<a-tooltip placement="bottom" :title="apiParams.certificate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-textarea
@@ -124,7 +124,7 @@
<span slot="label">
{{ $t('label.pkcs.private.certificate') }}
<a-tooltip placement="bottom" :title="apiParams.privatekey.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-textarea
@@ -143,7 +143,7 @@
<span slot="label">
{{ $t('label.domain.suffix') }}
<a-tooltip placement="bottom" :title="apiParams.domainsuffix.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index 5cd3fb9..6d95da4 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -23,7 +23,7 @@
<span slot="label">
{{ $t('label.traffictype') }}
<a-tooltip :title="apiParams.id.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -43,7 +43,7 @@
<span slot="label">
{{ $t('label.kvmnetworklabel') }}
<a-tooltip :title="apiParams.kvmnetworklabel.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -56,7 +56,7 @@
<span slot="label">
{{ $t('label.vmwarenetworklabel') }}
<a-tooltip :title="apiParams.vmwarenetworklabel.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -69,7 +69,7 @@
<span slot="label">
{{ $t('label.xennetworklabel') }}
<a-tooltip :title="apiParams.xennetworklabel.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -82,7 +82,7 @@
<span slot="label">
{{ $t('label.hypervnetworklabel') }}
<a-tooltip :title="apiParams.hypervnetworklabel.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -95,7 +95,7 @@
<span slot="label">
{{ $t('label.ovm3networklabel') }}
<a-tooltip :title="apiParams.ovm3networklabel.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
diff --git a/ui/src/views/infra/routers/RouterHealthCheck.vue b/ui/src/views/infra/routers/RouterHealthCheck.vue
index 897ca7e..25985e8 100644
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@@ -58,7 +58,7 @@
<span slot="label">
{{ $t('label.perform.fresh.checks') }}
<a-tooltip :title="apiParams.performfreshchecks.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
diff --git a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
index 72b4a60..f304315 100644
--- a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
@@ -139,7 +139,6 @@ export default {
.form-content {
border: 1px dashed #e9e9e9;
border-radius: 6px;
- background-color: #fafafa;
min-height: 200px;
text-align: center;
vertical-align: center;
@@ -161,7 +160,6 @@ export default {
.zone-support {
text-align: justify;
- background: #fafafa;
}
}
</style>
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 8bda053..f29c766 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -27,7 +27,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -41,7 +41,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -83,7 +83,7 @@
<span slot="label">
{{ $t('label.domain') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -105,7 +105,7 @@
<span slot="label">
{{ $t('label.networkofferingid') }}
<a-tooltip :title="apiParams.networkofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -134,7 +134,7 @@
<span slot="label">
{{ $t('label.vlan') }}
<a-tooltip :title="apiParams.vlan.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -147,7 +147,7 @@
<span slot="label">
{{ $t('label.vpcid') }}
<a-tooltip :title="apiParams.vpcid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -176,7 +176,7 @@
<span slot="label">
{{ $t('label.externalid') }}
<a-tooltip :title="apiParams.externalid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -187,7 +187,7 @@
<span slot="label">
{{ $t('label.gateway') }}
<a-tooltip :title="apiParams.gateway.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -198,7 +198,7 @@
<span slot="label">
{{ $t('label.netmask') }}
<a-tooltip :title="apiParams.netmask.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -209,7 +209,7 @@
<span slot="label">
{{ $t('label.networkdomain') }}
<a-tooltip :title="apiParams.networkdomain.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -220,7 +220,7 @@
<span slot="label">
{{ $t('label.account') }}
<a-tooltip :title="apiParams.account.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -538,7 +538,6 @@ export default {
.tagsTitle {
font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 45860e8..0479e4b 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -27,7 +27,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -41,7 +41,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -83,7 +83,7 @@
<span slot="label">
{{ $t('label.domain') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -105,7 +105,7 @@
<span slot="label">
{{ $t('label.networkofferingid') }}
<a-tooltip :title="apiParams.networkofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -134,7 +134,7 @@
<span slot="label">
{{ $t('label.vlan') }}
<a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -147,7 +147,7 @@
<span slot="label">
{{ $t('label.bypassvlanoverlapcheck') }}
<a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
@@ -156,7 +156,7 @@
<span slot="label">
{{ $t('label.isolatedpvlantype') }}
<a-tooltip :title="apiParams.isolatedpvlantype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -183,7 +183,7 @@
<span slot="label">
{{ $t('label.isolatedpvlanid') }}
<a-tooltip :title="apiParams.isolatedpvlan.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -194,7 +194,7 @@
<span slot="label">
{{ $t('label.account') }}
<a-tooltip :title="apiParams.account.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -480,7 +480,6 @@ export default {
.tagsTitle {
font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue b/ui/src/views/network/CreateSharedNetworkForm.vue
index b45c251..424e000 100644
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@@ -27,7 +27,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -41,7 +41,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -83,7 +83,7 @@
<span slot="label">
{{ $t('label.physicalnetworkid') }}
<a-tooltip :title="apiParams.physicalnetworkid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -105,7 +105,7 @@
<span slot="label">
{{ $t('label.vlan') }}
<a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -118,7 +118,7 @@
<span slot="label">
{{ $t('label.bypassvlanoverlapcheck') }}
<a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['bypassvlanoverlapcheck']" />
@@ -127,7 +127,7 @@
<span slot="label">
{{ $t('label.isolatedpvlantype') }}
<a-tooltip :title="apiParams.isolatedpvlantype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -154,7 +154,7 @@
<span slot="label">
{{ $t('label.isolatedpvlanid') }}
<a-tooltip :title="apiParams.isolatedpvlan.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -186,7 +186,7 @@
<span slot="label">
{{ $t('label.domain') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -215,7 +215,7 @@
<span slot="label">
{{ $t('label.subdomainaccess') }}
<a-tooltip :title="apiParams.subdomainaccess.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['subdomainaccess']" />
@@ -224,7 +224,7 @@
<span slot="label">
{{ $t('label.account') }}
<a-tooltip :title="apiParams.account.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -235,7 +235,7 @@
<span slot="label">
{{ $t('label.projectid') }}
<a-tooltip :title="apiParams.projectid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -264,7 +264,7 @@
<span slot="label">
{{ $t('label.networkofferingid') }}
<a-tooltip :title="apiParams.networkofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -293,7 +293,7 @@
<span slot="label">
{{ $t('label.ip4gateway') }}
<a-tooltip :title="apiParams.gateway.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -304,7 +304,7 @@
<span slot="label">
{{ $t('label.ip4netmask') }}
<a-tooltip :title="apiParams.netmask.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -315,7 +315,7 @@
<span slot="label">
{{ $t('label.startipv4') }}
<a-tooltip :title="apiParams.startip.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -326,7 +326,7 @@
<span slot="label">
{{ $t('label.endipv4') }}
<a-tooltip :title="apiParams.endip.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -337,7 +337,7 @@
<span slot="label">
{{ $t('label.ip6gateway') }}
<a-tooltip :title="apiParams.ip6gateway.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -348,7 +348,7 @@
<span slot="label">
{{ $t('label.ip6cidr') }}
<a-tooltip :title="apiParams.ip6cidr.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -359,7 +359,7 @@
<span slot="label">
{{ $t('label.startipv6') }}
<a-tooltip :title="apiParams.startipv6.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -370,7 +370,7 @@
<span slot="label">
{{ $t('label.endipv6') }}
<a-tooltip :title="apiParams.endipv6.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -381,7 +381,7 @@
<span slot="label">
{{ $t('label.networkdomain') }}
<a-tooltip :title="apiParams.networkdomain.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -392,7 +392,7 @@
<span slot="label">
{{ $t('label.hideipaddressusage') }}
<a-tooltip :title="apiParams.hideipaddressusage.description" v-if="'hideipaddressusage' in apiParams">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['hideipaddressusage']" />
@@ -869,7 +869,6 @@ export default {
.tagsTitle {
font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
diff --git a/ui/src/views/network/CreateVlanIpRange.vue b/ui/src/views/network/CreateVlanIpRange.vue
index 99c0edc..a5c2c18 100644
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@@ -38,7 +38,7 @@
<span slot="label">
{{ $t('label.gateway') }}
<a-tooltip :title="apiParams.gateway.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -52,7 +52,7 @@
<span slot="label">
{{ $t('label.netmask') }}
<a-tooltip :title="apiParams.netmask.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -67,7 +67,7 @@
<span slot="label">
{{ $t('label.startipv4') }}
<a-tooltip :title="apiParams.startip.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -89,7 +89,7 @@
<span slot="label">
{{ $t('label.endipv4') }}
<a-tooltip :title="apiParams.endip.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -111,7 +111,7 @@
<span slot="label">
{{ $t('label.ip6cidr') }}
<a-tooltip :title="apiParams.ip6cidr.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -122,7 +122,7 @@
<span slot="label">
{{ $t('label.ip6gateway') }}
<a-tooltip :title="apiParams.ip6gateway.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -135,7 +135,7 @@
<span slot="label">
{{ $t('label.startipv6') }}
<a-tooltip :title="apiParams.startipv6.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -156,7 +156,7 @@
<span slot="label">
{{ $t('label.endipv6') }}
<a-tooltip :title="apiParams.endipv6.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index 499dfd2..fdeef4b 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -24,7 +24,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -38,7 +38,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -51,7 +51,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -70,7 +70,7 @@
<span slot="label">
{{ $t('label.cidr') }}
<a-tooltip :title="apiParams.cidr.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -83,7 +83,7 @@
<span slot="label">
{{ $t('label.networkdomain') }}
<a-tooltip :title="apiParams.networkdomain.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -94,7 +94,7 @@
<span slot="label">
{{ $t('label.vpcofferingid') }}
<a-tooltip :title="apiParams.vpcofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -111,7 +111,7 @@
<span slot="label">
{{ $t('label.start') }}
<a-tooltip :title="apiParams.start.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['start', {initialValue: true}]" defaultChecked />
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index ff1662e..3c6f470 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -21,7 +21,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -38,7 +38,7 @@
<span slot="label">
{{ $t('label.gateway') }}
<a-tooltip :title="apiParams.gateway.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -54,7 +54,7 @@
<span slot="label">
{{ $t('label.cidrlist') }}
<a-tooltip :title="apiParams.cidrlist.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -70,7 +70,7 @@
<span slot="label">
{{ $t('label.ipsecpsk') }}
<a-tooltip :title="apiParams.ipsecpsk.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -112,7 +112,7 @@
<span slot="label">
{{ $t('label.ikeversion') }}
<a-tooltip :title="apiParams.ikeversion.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -195,7 +195,7 @@
<span slot="label">
{{ $t('label.ikelifetime') }}
<a-tooltip :title="apiParams.ikelifetime.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -211,7 +211,7 @@
<span slot="label">
{{ $t('label.esplifetime') }}
<a-tooltip :title="apiParams.esplifetime.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -227,7 +227,7 @@
<span slot="label">
{{ $t('label.dpd') }}
<a-tooltip :title="apiParams.dpd.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
@@ -242,7 +242,7 @@
<span slot="label">
{{ $t('label.splitconnections') }}
<a-tooltip :title="apiParams.splitconnections.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
@@ -257,7 +257,7 @@
<span slot="label">
{{ $t('label.forceencap') }}
<a-tooltip :title="apiParams.forceencap.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 14afb77..44f24ed 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -30,7 +30,8 @@
<a-input
placeholder="-"
disabled
- style="width: 30px; border-left: 0; border-right: 0; pointer-events: none; backgroundColor: #fff; text-align:
+ class="tag-disabled-input"
+ style="width: 30px; border-left: 0; border-right: 0; pointer-events: none; text-align:
center; margin-right: 0;"></a-input>
<a-input
v-model="newRule.privateendport"
@@ -48,7 +49,8 @@
<a-input
placeholder="-"
disabled
- style="width: 30px; border-left: 0; border-right: 0; pointer-events: none; backgroundColor: #fff;
+ class="tag-disabled-input"
+ style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;
text-align: center; margin-right: 0;"></a-input>
<a-input
v-model="newRule.publicendport"
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index 4770517..f64bd0d 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -371,7 +371,7 @@ export default {
scopedSlots: { customRender: 'ip' }
}
],
- customStyle: 'margin-bottom: -10px; border-bottom-style: none',
+ customStyle: 'margin-bottom: 0; border: none',
page: 1,
pageSize: 10,
itemCounts: {
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index b1e2c1d..c037d7f 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.systemvmtype') }}
<a-tooltip :title="apiParams.systemvmtype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -75,7 +75,7 @@
<span slot="label">
{{ $t('label.storagetype') }}
<a-tooltip :title="apiParams.storagetype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -96,7 +96,7 @@
<span slot="label">
{{ $t('label.provisioningtype') }}
<a-tooltip :title="apiParams.provisioningtype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -120,7 +120,7 @@
<span slot="label">
{{ $t('label.cachemode') }}
<a-tooltip :title="apiParams.cachemode.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -162,7 +162,7 @@
<span slot="label">
{{ $t('label.cpunumber') }}
<a-tooltip :title="apiParams.cpunumber.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -184,7 +184,7 @@
<span slot="label">
{{ $t('label.cpuspeed') }}
<a-tooltip :title="apiParams.cpuspeed.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -206,7 +206,7 @@
<span slot="label">
{{ $t('label.mincpunumber') }}
<a-tooltip :title="apiParams.mincpunumber.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -228,7 +228,7 @@
<span slot="label">
{{ $t('label.maxcpunumber') }}
<a-tooltip :title="apiParams.maxcpunumber.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -250,7 +250,7 @@
<span slot="label">
{{ $t('label.memory.mb') }}
<a-tooltip :title="apiParams.memory.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -272,7 +272,7 @@
<span slot="label">
{{ $t('label.minmemory') }}
<a-tooltip :title="apiParams.minmemory.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -294,7 +294,7 @@
<span slot="label">
{{ $t('label.maxmemory') }}
<a-tooltip :title="apiParams.maxmemory.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -316,7 +316,7 @@
<span slot="label">
{{ $t('label.networkrate') }}
<a-tooltip :title="apiParams.networkrate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -338,7 +338,7 @@
<span slot="label">
{{ $t('label.root.disk.size') }}
<a-tooltip :title="apiParams.rootdisksize.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -378,7 +378,7 @@
<span slot="label">
{{ $t('label.diskbytesreadrate') }}
<a-tooltip :title="apiParams.bytesreadrate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -398,7 +398,7 @@
<span slot="label">
{{ $t('label.diskbyteswriterate') }}
<a-tooltip :title="apiParams.byteswriterate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -418,7 +418,7 @@
<span slot="label">
{{ $t('label.diskiopsreadrate') }}
<a-tooltip :title="apiParams.iopsreadrate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -438,7 +438,7 @@
<span slot="label">
{{ $t('label.diskiopswriterate') }}
<a-tooltip :title="apiParams.iopswriterate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -458,7 +458,7 @@
<span slot="label">
{{ $t('label.iscustomizeddiskiops') }}
<a-tooltip :title="apiParams.customizediops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['iscustomizeddiskiops', {initialValue: this.isCustomizedDiskIops}]" :defaultChecked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
@@ -467,7 +467,7 @@
<span slot="label">
{{ $t('label.diskiopsmin') }}
<a-tooltip :title="apiParams.miniops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -487,7 +487,7 @@
<span slot="label">
{{ $t('label.diskiopsmax') }}
<a-tooltip :title="apiParams.maxiops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -507,7 +507,7 @@
<span slot="label">
{{ $t('label.hypervisorsnapshotreserve') }}
<a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -527,7 +527,7 @@
<span slot="label">
{{ $t('label.offerha') }}
<a-tooltip :title="apiParams.offerha.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['offerha', {initialValue: false}]" />
@@ -536,7 +536,7 @@
<span slot="label">
{{ $t('label.hosttags') }}
<a-tooltip :title="apiParams.hosttags.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -547,7 +547,7 @@
<span slot="label">
{{ $t('label.storagetags') }}
<a-tooltip :title="apiParams.tags.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -570,7 +570,7 @@
<span slot="label">
{{ $t('label.limitcpuuse') }}
<a-tooltip :title="apiParams.limitcpuuse.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
@@ -579,7 +579,7 @@
<span slot="label">
{{ $t('label.isvolatile') }}
<a-tooltip :title="apiParams.isvolatile.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['isvolatile', {initialValue: false}]" />
@@ -588,7 +588,7 @@
<span slot="label">
{{ $t('label.deploymentplanner') }}
<a-tooltip :title="apiParams.deploymentplanner.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -659,7 +659,7 @@
<span slot="label">
{{ $t('label.domain') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -688,7 +688,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -723,7 +723,7 @@
<span slot="label">
{{ $t('label.vmware.storage.policy') }}
<a-tooltip :title="apiParams.storagetype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index 61c3bbe..b1abccd 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.storagetype') }}
<a-tooltip :title="apiParams.storagetype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -74,7 +74,7 @@
<span slot="label">
{{ $t('label.provisioningtype') }}
<a-tooltip :title="apiParams.provisioningtype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -98,7 +98,7 @@
<span slot="label">
{{ $t('label.customdisksize') }}
<a-tooltip :title="apiParams.customized.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['customdisksize', { initialValue: this.isCustomDiskSize }]" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
@@ -107,7 +107,7 @@
<span slot="label">
{{ $t('label.disksize') }}
<a-tooltip :title="apiParams.disksize.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -148,7 +148,7 @@
<span slot="label">
{{ $t('label.diskbytesreadrate') }}
<a-tooltip :title="apiParams.bytesreadrate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -168,7 +168,7 @@
<span slot="label">
{{ $t('label.diskbyteswriterate') }}
<a-tooltip :title="apiParams.byteswriterate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -188,7 +188,7 @@
<span slot="label">
{{ $t('label.diskiopsreadrate') }}
<a-tooltip :title="apiParams.iopsreadrate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -208,7 +208,7 @@
<span slot="label">
{{ $t('label.diskiopswriterate') }}
<a-tooltip :title="apiParams.iopswriterate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -228,7 +228,7 @@
<span slot="label">
{{ $t('label.iscustomizeddiskiops') }}
<a-tooltip :title="apiParams.customizediops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
@@ -237,7 +237,7 @@
<span slot="label">
{{ $t('label.diskiopsmin') }}
<a-tooltip :title="apiParams.miniops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -257,7 +257,7 @@
<span slot="label">
{{ $t('label.diskiopsmax') }}
<a-tooltip :title="apiParams.maxiops.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -277,7 +277,7 @@
<span slot="label">
{{ $t('label.hypervisorsnapshotreserve') }}
<a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -297,7 +297,7 @@
<span slot="label">
{{ $t('label.writecachetype') }}
<a-tooltip :title="apiParams.cachemode.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -321,7 +321,7 @@
<span slot="label">
{{ $t('label.storagetags') }}
<a-tooltip :title="apiParams.tags.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -347,7 +347,7 @@
<span slot="label">
{{ $t('label.domainid') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -376,7 +376,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -411,7 +411,7 @@
<span slot="label">
{{ $t('label.vmware.storage.policy') }}
<a-tooltip :title="apiParams.storagetype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 9c244d6..d99f57c 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.networkrate') }}
<a-tooltip :title="apiParams.networkrate.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -73,7 +73,7 @@
<span slot="label">
{{ $t('label.guestiptype') }}
<a-tooltip :title="apiParams.guestiptype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -97,7 +97,7 @@
<span slot="label">
{{ $t('label.ispersistent') }}
<a-tooltip :title="apiParams.ispersistent.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['ispersistent', {initialValue: false}]" />
@@ -106,7 +106,7 @@
<span slot="label">
{{ $t('label.specifyvlan') }}
<a-tooltip :title="apiParams.specifyvlan.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
@@ -115,7 +115,7 @@
<span slot="label">
{{ $t('label.vpc') }}
<a-tooltip :title="apiParams.forvpc.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
@@ -195,7 +195,7 @@
<span slot="label">
{{ $t('label.supportedservices') }}
<a-tooltip :title="apiParams.supportedservices.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<div class="supported-services-container" scroll-to="last-child">
@@ -217,7 +217,7 @@
<span slot="label">
{{ $t('label.serviceofferingid') }}
<a-tooltip :title="apiParams.serviceofferingid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -326,7 +326,7 @@
<span slot="label">
{{ $t('label.conservemode') }}
<a-tooltip :title="apiParams.conservemode.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
@@ -335,7 +335,7 @@
<span slot="label">
{{ $t('label.tags') }}
<a-tooltip :title="apiParams.tags.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -346,7 +346,7 @@
<span slot="label">
{{ $t('label.availability') }}
<a-tooltip :title="apiParams.availability.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -366,7 +366,7 @@
<span slot="label">
{{ $t('label.egressdefaultpolicy') }}
<a-tooltip :title="apiParams.egressdefaultpolicy.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-radio-group
@@ -389,7 +389,7 @@
<span slot="label">
{{ $t('label.domainid') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -418,7 +418,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -452,7 +452,7 @@
<span slot="label">
{{ $t('label.enable.network.offering') }}
<a-tooltip :title="apiParams.enable.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['enable', {initialValue: false}]" />
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index 9b3f10e..810dbf3 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -40,7 +40,7 @@
<span slot="label">
{{ $t('label.displaytext') }}
<a-tooltip :title="apiParams.displaytext.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -53,7 +53,7 @@
<span slot="label">
{{ $t('label.supportedservices') }}
<a-tooltip :title="apiParams.supportedservices.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<div class="supported-services-container" scroll-to="last-child">
@@ -87,7 +87,7 @@
<span slot="label">
{{ $t('label.domainid') }}
<a-tooltip :title="apiParams.domainid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -116,7 +116,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -150,7 +150,7 @@
<span slot="label">
{{ $t('label.enable.vpc.offering') }}
<a-tooltip :title="apiParams.enable.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch v-decorator="['enable', {initialValue: false}]" />
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 1127c56..6851bb9 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -25,7 +25,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -38,7 +38,7 @@
<span slot="label">
{{ $t('label.description') }}
<a-tooltip :title="apiParams.description.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -50,7 +50,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -70,7 +70,7 @@
<span slot="label">
{{ $t('label.externalid') }}
<a-tooltip :title="apiParams.externalid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -88,7 +88,7 @@
<span slot="label">
{{ $t('label.allowuserdrivenbackups') }}
<a-tooltip :title="apiParams.allowuserdrivenbackups.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-switch
diff --git a/ui/src/views/project/AddAccountOrUserToProject.vue b/ui/src/views/project/AddAccountOrUserToProject.vue
index 2dafe48..c1d221b 100644
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@@ -26,7 +26,7 @@
<span slot="label">
{{ $t('label.account') }}
<a-tooltip :title="apiParams.addAccountToProject.account.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -38,7 +38,7 @@
<span slot="label">
{{ $t('label.email') }}
<a-tooltip :title="apiParams.addAccountToProject.email.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -49,7 +49,7 @@
<span slot="label">
{{ $t('label.project.role') }}
<a-tooltip :title="apiParams.addAccountToProject.projectroleid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -67,7 +67,7 @@
<span slot="label">
{{ $t('label.roletype') }}
<a-tooltip :title="apiParams.addAccountToProject.roletype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -96,7 +96,7 @@
<span slot="label">
{{ $t('label.user') }}
<a-tooltip :title="apiParams.addUserToProject.username.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -108,7 +108,7 @@
<span slot="label">
{{ $t('label.email') }}
<a-tooltip :title="apiParams.addUserToProject.email.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -119,7 +119,7 @@
<span slot="label">
{{ $t('label.project.role') }}
<a-tooltip :title="apiParams.addUserToProject.roletype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -137,7 +137,7 @@
<span slot="label">
{{ $t('label.roletype') }}
<a-tooltip :title="apiParams.addUserToProject.roletype.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
diff --git a/ui/src/views/project/iam/ProjectRoleTab.vue b/ui/src/views/project/iam/ProjectRoleTab.vue
index e1cdbd8..938b70e 100644
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@@ -143,7 +143,7 @@ export default {
editModalVisible: false,
selectedRole: null,
projectPermisssions: [],
- customStyle: 'margin-bottom: -10px; border-bottom-style: none'
+ customStyle: 'margin-bottom: 0; border: none'
}
},
beforeCreate () {
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index bbb7855..e1e1839 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -22,7 +22,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -36,7 +36,7 @@
<span slot="label">
{{ $t('label.zoneid') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -57,7 +57,7 @@
<span slot="label">
{{ $t('label.diskoffering') }}
<a-tooltip :title="apiParams.diskofferingid.description || 'Disk Offering'">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -80,7 +80,7 @@
<span slot="label">
{{ $t('label.sizegb') }}
<a-tooltip :title="apiParams.size.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index bc10f69..1628ed0 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -161,13 +161,17 @@
@keyup.enter="handleInputConfirm"
compact>
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+ <a-input
+ class="tag-disabled-input"
+ style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+ placeholder="="
+ disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
</a-input-group>
</div>
- <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+ <a-tag v-else @click="showInput" class="btn-add-tag" style="borderStyle: dashed;">
<a-icon type="plus" /> {{ $t('label.new.tag') }}
</a-tag>
</div>
@@ -422,7 +426,6 @@ export default {
.tagsTitle {
font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
diff --git a/ui/src/views/storage/TakeSnapshot.vue b/ui/src/views/storage/TakeSnapshot.vue
index f8d49b6..410a676 100644
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@@ -62,13 +62,17 @@
@keyup.enter="handleInputConfirm"
compact>
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+ <a-input
+ class="tag-disabled-input"
+ style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+ placeholder="="
+ disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
</a-input-group>
</div>
- <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+ <a-tag v-else @click="showInput" class="btn-add-tag" style="borderStyle: dashed;">
<a-icon type="plus" /> {{ $t('label.new.tag') }}
</a-tag>
</div>
@@ -251,7 +255,6 @@ export default {
.tagsTitle {
font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 49961e8..06ff390 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -48,7 +48,7 @@
<span slot="label">
{{ $t('label.name') }}
<a-tooltip :title="apiParams.name.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input
@@ -62,7 +62,7 @@
<span slot="label">
{{ $t('label.zone') }}
<a-tooltip :title="apiParams.zoneid.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -84,7 +84,7 @@
<span slot="label">
{{ $t('label.format') }}
<a-tooltip :title="apiParams.format.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-select
@@ -106,7 +106,7 @@
<span slot="label">
{{ $t('label.volumechecksum') }}
<a-tooltip :title="apiParams.checksum.description">
- <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+ <a-icon type="info-circle" />
</a-tooltip>
</span>
<a-input