github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 20:20:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #2539 from dataease/pr@dev@refactor_theme-change

Browse Source 
refactor:优化主题色切换颜色适配
This commit is contained in:
王嘉豪 2022-06-30 18:44:07 +08:00 committed by GitHub
commit 479894b4cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/canvas/custom-component/DeFrame.vue
View File

@ -95,7 +95,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.3);
font-size: 12px;
color: #9ea6b2;
}

2
frontend/src/components/canvas/custom-component/DeStreamMedia.vue
View File

@ -141,7 +141,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background-color: beige;
background-color: rgba(245, 245, 220, 0.3);
font-size: 12px;
color: #000000;
}

2
frontend/src/components/canvas/custom-component/DeVideo.vue
View File

@ -139,7 +139,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.3);
font-size: 12px;
color: #9ea6b2;
}

15
frontend/src/components/canvas/utils/style.js
View File

@ -1,5 +1,6 @@
import { sin, cos } from '@/components/canvas/utils/translate'
import store from '@/store'
import { colorReverse } from '@/components/canvas/utils/utils'
export const LIGHT_THEME_COLOR_MAIN = '#000000'
export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
@ -257,6 +258,10 @@ export const THEME_ATTR_TRANS_MAIN = {
}
}
export const THEME_ATTR_TRANS_SLAVE1_BACKGROUND = {
'tooltip': ['backgroundColor']
}
// 移动端特殊属性
export const mobileSpecialProps = {
'lineWidth': 3, // 线宽固定值
@ -325,10 +330,12 @@ export function adaptCurTheme(customStyle, customAttr) {
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, LIGHT_THEME_COMPONENT_BACKGROUND)
} else {
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND)
}
customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
@ -347,6 +354,14 @@ export function adaptCurThemeCommonStyle(component) {
for (const styleKey in filterStyle) {
component.style[styleKey] = filterStyle[styleKey]
}
} else {
if (component.style.color) {
if (store.state.canvasStyleData.panel.themeColor === 'light') {
component.style.color = LIGHT_THEME_COLOR_MAIN
} else {
component.style.color = DARK_THEME_COLOR_MAIN
}
}
}
return component
}

8
frontend/src/components/canvas/utils/utils.js
View File

@ -1,5 +1,5 @@
import {
BASE_MOBILE_STYLE, COMMON_BACKGROUND, COMMON_BACKGROUND_NONE,
BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
HYPERLINKS
} from '@/components/canvas/custom-component/component-list'
@ -204,3 +204,9 @@ export function dataURLToBlob(dataurl) { // ie 图片转格式
}
return new Blob([u8arr], { type: mime })
}
export function colorReverse(OldColorValue) {
OldColorValue = '0x' + OldColorValue.replace(/#/g, '')
const str = '000000' + (0xFFFFFF - OldColorValue).toString(16)
return '#' + str.substring(str.length - 6, str.length)
}

11
frontend/src/views/panel/edit/index.vue
View File

@ -1353,17 +1353,6 @@ export default {
height: 600px;
}
.info-class {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
font-size: 12px;
color: #9ea6b2;
}
::-webkit-scrollbar {
width: 2px !important;
height: 2px !important;