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

Merge pull request #3841 from dataease/pr@dev@feat_table_scroll_bar_color

Browse Source 
Pr@dev@feat table scroll bar color
This commit is contained in:
xuwei-fit2cloud 2022-11-23 18:11:48 +08:00 committed by GitHub
commit 0e737a2e5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 103 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lang/en.js
View File

@ -1338,6 +1338,7 @@ export default {
table_align_left: 'Left',
table_align_center: 'Center',
table_align_right: 'Right',
table_scroll_bar_color: 'Scroll Bar Color',
draw_back: 'Draw Back',
senior: 'Senior',
senior_cfg: 'Senior Config',

1
frontend/src/lang/tw.js
View File

@ -1338,6 +1338,7 @@ export default {
table_align_left: '左對齊',
table_align_center: '居中',
table_align_right: '右對齊',
table_scroll_bar_color: '滾動條顏色',
draw_back: '收回',
senior: '高級',
senior_cfg: '高級設置',

1
frontend/src/lang/zh.js
View File

@ -1337,6 +1337,7 @@ export default {
table_align_left: '左对齐',
table_align_center: '居中',
table_align_right: '右对齐',
table_scroll_bar_color: '滚动条颜色',
draw_back: '收回',
senior: '高级',
senior_cfg: '高级设置',

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

@ -29,7 +29,9 @@ export const DEFAULT_COLOR_CASE = {
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#303133',
gradient: false,
areaBaseColor: '#FFFFFF'
areaBaseColor: '#FFFFFF',
tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
}
export const DEFAULT_COLOR_CASE_DARK = {
@ -45,7 +47,9 @@ export const DEFAULT_COLOR_CASE_DARK = {
tableBorderColor: '#CCCCCC',
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#EBEEF5',
areaBaseColor: '5470C6'
areaBaseColor: '5470C6',
tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)'
}
export const DEFAULT_SIZE = {
barDefault: true,

11
frontend/src/views/chart/chart/common/common_table.js
View File

@ -1,4 +1,4 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { hexColorToRGBA, resetRgbOpacity } from '@/views/chart/chart/util'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
export function getCustomTheme(chart) {
@ -7,6 +7,8 @@ export function getCustomTheme(chart) {
const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
const headerAlign = DEFAULT_SIZE.tableHeaderAlign
const itemAlign = DEFAULT_SIZE.tableItemAlign
const scrollBarColor = DEFAULT_COLOR_CASE.tableScrollBarColor
const scrollBarHoverColor = DEFAULT_COLOR_CASE.tableScrollBarHoverColor
const theme = {
background: {
@ -105,6 +107,10 @@ export function getCustomTheme(chart) {
fontSize: DEFAULT_SIZE.tableItemFontSize,
textAlign: headerAlign
}
},
scrollBar: {
thumbColor: scrollBarColor,
thumbHoverColor: scrollBarHoverColor
}
}
@ -156,6 +162,9 @@ export function getCustomTheme(chart) {
theme.dataCell.bolderText.fill = c.tableFontColor
theme.dataCell.text.fill = c.tableFontColor
theme.dataCell.measureText.fill = c.tableFontColor
theme.scrollBar.thumbColor = c.tableScrollBarColor
theme.scrollBar.thumbHoverColor = resetRgbOpacity(c.tableScrollBarColor, 1.5)
}
// size
if (customAttr.size) {

43
frontend/src/views/chart/chart/util.js
View File

@ -1,5 +1,6 @@
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { equalsAny, includesAny } from '@/utils/StringUtils'
import _ from 'lodash'
export function hexColorToRGBA(hex, alpha) {
const rgb = [] // 定义rgb数组
@ -49,6 +50,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@ -95,6 +97,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@ -144,6 +147,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@ -1769,6 +1773,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableScrollBarColor',
'alpha'
],
'size-selector': [
@ -1808,6 +1813,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableScrollBarColor',
'alpha'
],
'size-selector': [
@ -3411,15 +3417,18 @@ function handleSetZeroMultiDimension(chart, data) {
let insertCount = 0
dimensionInfoMap.forEach((dimensionInfo, field) => {
if (dimensionInfo.set.size < subDimensionSet.size) {
const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item))
toBeFillDimension.forEach(dimension => {
data.splice(dimensionInfo.index + insertCount, 0, {
field,
value: 0,
category: dimension
})
let subInsertIndex = 0
subDimensionSet.forEach(dimension => {
if (!dimensionInfo.set.has(dimension)) {
data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, {
field,
value: 0,
category: dimension
})
}
subInsertIndex++
})
insertCount += toBeFillDimension.size
insertCount += subDimensionSet.size - dimensionInfo.set.size
}
})
}
@ -3440,3 +3449,21 @@ function handleIgnoreData(chart, data) {
}
}
}
export function resetRgbOpacity(sourceColor, times) {
if (sourceColor?.startsWith('rgb')) {
const numbers = sourceColor.match(/(\d(\.\d+)?)+/g)
if (numbers?.length === 4) {
const opacity = parseFloat(numbers[3])
if (_.isNumber(opacity)) {
let resultOpacity = (opacity * times).toFixed(2)
if (resultOpacity > 1) {
resultOpacity = 1
}
const colorArr = numbers.slice(0, 3).concat(resultOpacity)
return `rgba(${colorArr.join(',')})`
}
}
}
return sourceColor
}

15
frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -248,6 +248,20 @@
@change="changeColorCase('tableBorderColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableScrollBarColor')"
:label="$t('chart.table_scroll_bar_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableScrollBarColor"
class="color-picker-style"
:predefine="predefineColors"
color-format="rgb"
show-alpha
@change="changeColorCase('tableScrollBarColor')"
/>
</el-form-item>
</div>
<el-form-item
@ -477,6 +491,7 @@ export default {
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
this.initCustomColor()
}

25
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -13,7 +13,7 @@
<ux-grid
ref="plxTable"
size="mini"
style="width: 100%;"
:style="tableStyle"
:height="height"
:checkbox-config="{highlight: true}"
:width-resize="true"
@ -79,7 +79,7 @@
<script>
import { hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus'
import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
export default {
@ -154,7 +154,9 @@ export default {
scrollTimer: null,
scrollTop: 0,
showIndex: false,
indexLabel: '序号'
indexLabel: '序号',
scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor,
scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor
}
},
computed: {
@ -176,6 +178,12 @@ export default {
borderRadius: this.borderRadius
}
},
tableStyle() {
return {
width: '100%',
'--scroll-bar-color': this.scrollBarColor
}
},
...mapState([
'previewCanvasScale'
])
@ -309,6 +317,7 @@ export default {
this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
this.table_item_class.color = customAttr.color.tableFontColor
this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
}
if (customAttr.size) {
this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
@ -498,7 +507,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.table-class ::v-deep .body--wrapper {
background: rgba(1, 1, 1, 0);
}
@ -548,4 +557,12 @@ export default {
.page-style ::v-deep li {
background: transparent !important;
}
.table-class{
::-webkit-scrollbar-thumb {
background: var(--scroll-bar-color);
}
}
.table-class{
scrollbar-color: var(--scroll-bar-color) transparent;
}
</style>

13
frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue
View File

@ -190,6 +190,19 @@
@change="changeColorCase('tableBorderColor')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.table_scroll_bar_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableScrollBarColor"
class="color-picker-style"
:predefine="predefineColors"
color-format="rgb"
show-alpha
@change="changeColorCase('tableScrollBarColor')"
/>
</el-form-item>
</div>
</el-form>
</el-col>