center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor:组件调色板优化

Browse Source
This commit is contained in:
wangjiahao 2021-11-15 11:53:42 +08:00
parent 22e204a0b7
commit 71438db6e1
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -108,7 +108,7 @@
<i class="icon iconfont icon-zimua" @click="goColor" />
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
</div>
</div>
<div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@ -117,7 +117,7 @@
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
</div>
</div>
@ -127,7 +127,7 @@
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" :predefine="predefineColors" size="mini" @change="styleChange" />
</div>
</div>
@ -157,6 +157,7 @@ import { mapState } from 'vuex'
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
import DateFormat from '@/components/canvas/components/Editor/DateFormat'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
components: { Hyperlinks, DateFormat, VideoLinks },
@ -172,6 +173,7 @@ export default {
},
data() {
return {
predefineColors: COLOR_PANEL,
showMain: true,
innerOpacity: 0,
textAlignOptions: [
@ -431,4 +433,8 @@ export default {
padding: 5px!important;
width: 30px!important;
}
::v-deep .el-color-dropdown__link-btn {
display: inline!important;
}
</style>

4
frontend/src/views/chart/chart/chart.js
View File

@ -864,6 +864,6 @@ export const COLOR_PANEL = [
'#1e90ff',
'#c71585',
'#999999',
'#00008b',
'#000000'
'#000000',
'#FFFFFF'
]

7
frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
View File

@ -12,7 +12,7 @@
<el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
</el-col>
<el-col :span="18">
<el-color-picker v-model="panel.color" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType"/>
<el-color-picker v-model="panel.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
@ -50,6 +50,7 @@
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'BackgroundSelector',
@ -59,7 +60,9 @@ export default {
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
panel: null
panel: null,
predefineColors: COLOR_PANEL
}
},
computed: mapState([