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

Merge pull request #11639 from dataease/pr@dev-v2_st

Browse Source 
fix(数据集): icon调整
This commit is contained in:
dataeaseShu 2024-08-19 16:31:50 +08:00 committed by GitHub
commit 3ad55ac01a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 81 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/core-frontend/src/assets/svg/icon_adjustment_outlined.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.5C3.72386 3.5 3.5 3.72386 3.5 4V20C3.5 20.2762 3.72385 20.5 4 20.5H20C20.2762 20.5 20.5 20.2762 20.5 20V4C20.5 3.72385 20.2762 3.5 20 3.5H4ZM1.5 4C1.5 2.61929 2.61929 1.5 4 1.5H20C21.3807 1.5 22.5 2.6193 22.5 4V20C22.5 21.3807 21.3807 22.5 20 22.5H4C2.6193 22.5 1.5 21.3807 1.5 20V4Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4142 6L6 19.4142L4.58578 18L18 4.58578L19.4142 6Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 7H11V9H5V7Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 15.5H18.5V17.5H12.5V15.5Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 5V11H7V5H9Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 761 B

2
core/core-frontend/src/components/icon-custom/src/Icon.vue
View File

@ -3,6 +3,7 @@ import { computed } from 'vue'
import { propTypes } from '@/utils/propTypes'
import _401 from '@/assets/svg/401.svg'
import icon_adjustment_outlined from '@/assets/svg/icon_adjustment_outlined.svg'
import icon_file_font_colorful from '@/assets/svg/icon_file-font_colorful.svg'
import relation_arrow_icon from '@/assets/svg/relation_arrow_icon.svg'
import icon_data_visualization from '@/assets/svg/icon_data-visualization.svg'
@ -680,6 +681,7 @@ import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'
import icon_font from '@/assets/svg/icon_font.svg'
const iconMap = {
'401': _401,
icon_adjustment_outlined,
icon_file_font_colorful,
relation_arrow_icon,
icon_data_visualization,

107
core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
View File

@ -446,22 +446,22 @@ initFunction()
</div>
<div v-else class="class-na">{{ t('dataset.na') }}</div>
</div>
<div class="quota-btn_de">
<span>{{ t('chart.quota') }}</span>
<el-tooltip
effect="dark"
:content="disableCaParams ? '仅支持添加一个计算参数。' : '添加计算参数'"
placement="top"
>
<el-icon class="hover-icon_quota" @click="addParmasToQuota">
<Icon
:class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
name="icon_adjustment_outlined"
></Icon>
</el-icon>
</el-tooltip>
</div>
<div class="field-height">
<div style="display: flex; align-items: center; justify-content: space-between">
<span>{{ t('chart.quota') }}</span>
<el-tooltip
effect="dark"
:content="disableCaParams ? '仅支持添加一个计算参数。' : '添加计算参数'"
placement="top"
>
<el-icon class="hover-icon_quota" @click="addParmasToQuota">
<Icon
:class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
name="calculate"
></Icon>
</el-icon>
</el-tooltip>
</div>
<div v-if="state.quotaData.length" class="field-list">
<span
v-for="item in state.quotaData"
@ -471,7 +471,7 @@ initFunction()
@click="insertFieldToCodeMirror('[' + item.name + ']')"
>
<el-icon v-if="!item.groupType">
<Icon name="calculate"></Icon>
<Icon name="icon_adjustment_outlined"></Icon>
</el-icon>
<el-icon v-else>
<Icon
@ -670,6 +670,62 @@ initFunction()
border-radius: 4px;
}
}
.hover-icon_quota {
cursor: pointer;
border-radius: 4px;
font-size: 16px;
position: relative;
&[aria-expanded='true'] {
&::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background: rgba(31, 35, 41, 0.1);
border-radius: 4px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
}
&:hover {
&::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background: rgba(31, 35, 41, 0.1);
border-radius: 4px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
}
&:active {
&::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background: rgba(31, 35, 41, 0.2);
border-radius: 4px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
}
}
.quota-btn_de {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: -12px;
color: #1f2329;
}
.field-height {
height: calc(50% - 41px);
margin-top: 12px;
@ -678,25 +734,6 @@ initFunction()
color: #1f2329;
}
.hover-icon_quota {
cursor: pointer;
height: 20px !important;
width: 20px !important;
border-radius: 4px;
&[aria-expanded='true'] {
background: rgba(31, 35, 41, 0.1);
}
&:hover {
background: rgba(31, 35, 41, 0.1);
}
&:active {
background: rgba(31, 35, 41, 0.2);
}
}
.not-allow {
cursor: not-allowed;
color: #bbbfc4 !important;