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

feat(frontend):文本过长，显示优化以及tooltip

Browse Source
This commit is contained in:
junjie 2021-06-04 17:16:50 +08:00
parent 03f43fde95
commit 133e883786
5 changed files with 71 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/views/chart/group/Group.vue
View File

@ -51,7 +51,7 @@
<!-- />-->
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)">
<span v-if="data.type ==='group'" @click.stop>
@ -114,8 +114,8 @@
<!--scene-->
<el-col v-if="sceneMode">
<el-row class="title-css">
<span class="title-text">
<el-row class="title-css scene-title">
<span class="title-text scene-title-name" :title="currGroup.name">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
@ -153,7 +153,7 @@
<span slot-scope="{ node, data }" class="custom-tree-node-list">
<span style="display: flex;flex: 1;width: 0;">
<span><svg-icon :icon-class="data.type" /></span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)">
<span style="margin-left: 12px;" @click.stop>
@ -680,4 +680,16 @@ export default {
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.scene-title{
width: 100%;
display: flex;
}
.scene-title-name{
width: 100%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

13
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -38,7 +38,7 @@
@start="start1"
>
<transition-group>
<span v-for="item in dimension" :key="item.id" class="item">
<span v-for="item in dimension" :key="item.id" class="item" :title="item.name">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
@ -59,7 +59,7 @@
@start="start1"
>
<transition-group>
<span v-for="item in quota" :key="item.id" class="item">
<span v-for="item in quota" :key="item.id" class="item" :title="item.name">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
@ -941,7 +941,10 @@ export default {
background-color: white;
display: block;
word-break: break-all;
white-space: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item-on-move {
@ -952,6 +955,10 @@ export default {
color: #606266;
/*background-color: rgba(35,46,64,.05);*/
background-color: white;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item + .item {

10
frontend/src/views/dataset/common/DatasetCustomField.vue
View File

@ -1,7 +1,7 @@
<template>
<el-col>
<el-row style="height: 25px;">
<span>{{ table.name }}</span>
<span class="table-name">{{ table.name }}</span>
</el-row>
<el-divider />
<el-checkbox v-model="checkAll" :disabled="!(fields.length > 0)" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('dataset.check_all') }}</el-checkbox>
@ -105,4 +105,12 @@ export default {
.el-divider--horizontal {
margin: 12px 0
}
.table-name{
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
</style>

20
frontend/src/views/dataset/common/DatasetGroupSelector.vue
View File

@ -42,7 +42,7 @@
<!-- />-->
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
</span>
</el-tree>
@ -52,8 +52,8 @@
<!--scene-->
<el-col v-if="sceneMode" v-loading="dsLoading">
<el-row class="title-css">
<span class="title-text">
<el-row class="title-css scene-title">
<span class="title-text scene-title-name" :title="currGroup.name">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
@ -94,7 +94,7 @@
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
</span>
</el-tree>
@ -383,4 +383,16 @@ export default {
.title-text {
line-height: 26px;
}
.scene-title{
width: 100%;
display: flex;
}
.scene-title-name{
width: 100%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

28
frontend/src/views/dataset/group/Group.vue
View File

@ -51,7 +51,7 @@
<!-- />-->
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)">
<span v-if="data.type ==='group'" @click.stop>
@ -73,7 +73,7 @@
</el-dropdown-menu>
</el-dropdown>
</span>
<span style="margin-left: 12px;" @click.stop >
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
@ -82,7 +82,7 @@
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
{{ $t('dataset.rename') }}
</el-dropdown-item>
@ -117,8 +117,8 @@
<!--scene-->
<el-col v-if="sceneMode">
<el-row class="title-css">
<span class="title-text">
<el-row class="title-css scene-title">
<span class="title-text scene-title-name" :title="currGroup.name">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
@ -191,10 +191,10 @@
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)">
<span style="margin-left: 12px;" @click.stop >
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
@ -203,7 +203,7 @@
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
{{ $t('dataset.rename') }}
</el-dropdown-item>
@ -621,4 +621,16 @@ export default {
.title-text {
line-height: 26px;
}
.scene-title{
width: 100%;
display: flex;
}
.scene-title-name{
width: 100%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>