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

Merge pull request #10010 from dataease/pr@dev-v2@chart-editor-style-padding

Browse Source 
style(仪表板): 图表配置项与滚动条间距优化
This commit is contained in:
jianneng-fit2cloud 2024-05-31 17:15:06 +08:00 committed by GitHub
commit 9c46f1da26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue
View File

@ -69,7 +69,7 @@ const switchValue = computed({
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 8px;
padding-right: 10px;
flex-grow: 1;
:deep(.ed-switch.is-checked .ed-switch__core > .ed-switch__action) {
left: calc(100% - 12px);

54
core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue
View File

@ -142,7 +142,6 @@ onMounted(() => {
:label="t('chart.split_line')"
class="form-item"
:class="'form-item-' + themes"
style="padding-right: 4px"
>
<el-color-picker
v-model="state.quadrantForm.lineStyle.stroke"
@ -189,12 +188,7 @@ onMounted(() => {
</el-form-item>
</div>
<div style="display: flex">
<el-form-item
class="form-item"
label="X 轴恒线"
:class="'form-item-' + themes"
style="padding-left: 4px"
>
<el-form-item class="form-item" label="X 轴恒线" :class="'form-item-' + themes">
<el-input-number
controls-position="right"
style="width: 100%"
@ -225,7 +219,7 @@ onMounted(() => {
</el-form-item>
</div>
</template>
<el-tabs v-model="tabActive" class="quadrant-tab-header" :class="{ dark: themes === 'dark' }">
<el-tabs v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }">
<el-tab-pane
:name="index + 1"
v-for="(l, index) in state.quadrantForm.labels"
@ -239,7 +233,6 @@ onMounted(() => {
<el-form-item
class="form-item"
:class="'form-item-' + themes"
style="padding-right: 4px"
:label="t('chart.backgroundColor')"
>
<el-color-picker
@ -290,7 +283,6 @@ onMounted(() => {
<el-form-item
class="form-item"
:class="'form-item-' + themes"
style="padding-right: 4px"
:label="t('chart.chart_style')"
>
<el-color-picker
@ -384,48 +376,6 @@ onMounted(() => {
border-color: rgba(235, 235, 235, 0.15);
}
}
.quadrant-tab-header {
--ed-tabs-header-height: 34px;
--custom-tab-color: #646a73;
:deep(.ed-tabs__nav-wrap::after) {
background-color: unset;
}
&.dark {
--custom-tab-color: #a6a6a6;
}
height: 100%;
:deep(.ed-tabs__header) {
border-top: solid 1px @side-outline-border-color;
}
:deep(.ed-tabs__item) {
font-weight: 400;
font-size: 12px;
padding: 0 12px !important;
margin-right: 0 !important;
color: var(--custom-tab-color);
}
:deep(.is-active) {
font-weight: 500;
color: var(--ed-color-primary, #3370ff);
}
:deep(.ed-tabs__nav-scroll) {
padding-left: 0 !important;
}
:deep(.ed-tabs__header) {
margin: 0 !important;
}
:deep(.ed-tabs__content) {
height: calc(100% - 33px);
overflow-y: auto;
overflow-x: hidden;
}
}
.padding-tab {
padding: 0;
height: 100%;

4
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -3166,7 +3166,7 @@ span {
display: flex;
transition: 0.5s;
.padding-lr {
padding: 0 8px;
padding: 0 10px;
&.no-top-border {
border-top: none !important;
@ -3217,7 +3217,7 @@ span {
}
:deep(.ed-collapse-item__content) {
padding: 16px 8px 0;
padding: 16px 10px 0;
border: none;
:deep(.ed-checkbox) {
height: 20px;