dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #536 from dataease/pr@v1.1@refactor_颜色选择器更换为原生组件

Browse Source 
refactor: 颜色选择器更换为原生组件
This commit is contained in:
XiaJunjie2020 2021-08-05 11:07:00 +08:00 committed by GitHub
commit 37aa3b93b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
View File

@ -9,7 +9,7 @@
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.color')" class="form-item">
<colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
<el-color-picker v-model="colorForm.color" style="cursor: pointer;z-index: 1004;" @change="changeBackgroundStyle" />
</el-form-item>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />

2
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -34,7 +34,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />
<el-color-picker v-model="legendForm.textStyle.color" style="cursor: pointer;z-index: 999;" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">

8
frontend/src/views/chart/components/component-style/SplitSelector.vue
View File

@ -12,7 +12,7 @@
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.name.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
@ -23,13 +23,13 @@
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLabel.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
@ -40,7 +40,7 @@
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item">
<colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>

2
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -28,7 +28,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />
<el-color-picker v-model="titleForm.color" style="cursor: pointer;z-index: 999;" @change="changeTitleStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">

6
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -22,7 +22,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@ -35,7 +35,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
@ -54,7 +54,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" style="cursor: pointer;z-index: 1004;" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />

6
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -22,7 +22,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@ -35,7 +35,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@ -54,7 +54,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" style="cursor: pointer;z-index: 1004;" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />

10
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -21,21 +21,21 @@
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
<colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
<el-color-picker v-model="colorForm.dimensionColor" style="cursor: pointer;z-index: 1003;" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
<colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
<el-color-picker v-model="colorForm.quotaColor" style="cursor: pointer;z-index: 1004;" @change="changeColorCase" />
</el-form-item>
</div>
<div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableHeaderBgColor" style="cursor: pointer;z-index: 1002;" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
<colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableItemBgColor" style="cursor: pointer;z-index: 1003;" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableFontColor" style="cursor: pointer;z-index: 1004;" @change="changeColorCase" />
</el-form-item>
<!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->

4
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -21,7 +21,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" style="cursor: pointer;z-index: 999;" @change="changeLabelAttr" />
</el-form-item>
<el-form-item :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@ -54,7 +54,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" style="cursor: pointer;z-index: 999;" @change="changeLabelAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">

2
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -24,7 +24,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
<el-color-picker v-model="tooltipForm.textStyle.color" style="cursor: pointer;z-index: 999;" @change="changeTooltipAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">

2
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">
<colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
<el-color-picker v-model="panel.color" style="cursor: pointer;z-index: 1004;" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">