zero/blossom
1
0
Fork 0
mirror of https://github.com/blossom-editor/blossom synced 2024-11-17 22:48:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化文档列表名称显示

Browse Source
This commit is contained in:
xiaozzzi 2023-11-04 22:04:56 +08:00
parent 67ad2ce4d8
commit 25a3c85171
3 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue
View File

@ -11,9 +11,11 @@
<svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
</svg>
<div class="name-wrapper">
{{ props.trees.n }}
</div>
<el-tooltip :content="props.trees.n" placement="top" :show-after="1000" :hide-after="0" :transition="'none'" :offset="2" :persistent="false">
<div class="name-wrapper" :style="nameWrapperStyle">
{{ props.trees.n }}
</div>
</el-tooltip>
<bl-tag v-if="props.trees.o === 1 && props.trees.ty != 3" style="margin-top: 5px" :bg-color="'#7AC20C'" :icon="'bl-cloud-line'"></bl-tag>
<bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">{{ tag.content }}</bl-tag>
</div>
@ -40,6 +42,12 @@ const levelColor = computed(() => {
return computedDocTitleColor(props.level)
})
const nameWrapperStyle = computed(() => {
return {
maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
}
})
/**
* 计算标签, 并返回便签对象集合
*/
@ -78,8 +86,8 @@ $icon-size: 17px;
.doc-title {
@include flex(row, flex-start, flex-start);
max-width: calc(100% - 15px);
min-width: calc(100% - 15px);
// max-width: calc(100% - 15px);
// min-width: calc(100% - 15px);
width: 100%;
padding-bottom: 1px;
position: relative;
@ -105,14 +113,14 @@ $icon-size: 17px;
.name-wrapper {
@include ellipsis();
max-width: calc(100% - 25px);
}
}
.sort {
position: absolute;
right: -15px;
right: 0px;
top: 2px;
z-index: 10;
}
}

21
blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue
View File

@ -11,9 +11,12 @@
<svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
</svg>
<div class="name-wrapper">
{{ props.trees.n }}
</div>
<el-tooltip :content="props.trees.n" placement="top" :show-after="1000" :hide-after="0" :transition="'none'" :offset="2" :persistent="false">
<div class="name-wrapper" :style="nameWrapperStyle">
{{ props.trees.n }}
</div>
</el-tooltip>
<!-- 如果专题是公开的, 则单独显示公开标签 -->
<bl-tag v-if="props.trees.o === 1 && isSubjectDoc" style="margin-top: 5px" :bg-color="'#7AC20C'" :icon="'bl-cloud-line'"></bl-tag>
<bl-tag v-for="tag in tags" :bg-color="tag.bgColor" style="margin-top: 5px" :icon="tag.icon">{{ tag.content }}</bl-tag>
@ -41,6 +44,12 @@ const levelColor = computed(() => {
return computedDocTitleColor(props.level)
})
const nameWrapperStyle = computed(() => {
return {
maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
}
})
/**
* 计算标签, 并返回便签对象集合
*/
@ -69,8 +78,8 @@ $icon-size: 17px;
.doc-title {
@include flex(row, flex-start, flex-start);
max-width: calc(100% - 15px);
min-width: calc(100% - 15px);
// max-width: calc(100% - 15px);
// min-width: calc(100% - 15px);
width: 100%;
padding-bottom: 1px;
position: relative;
@ -97,7 +106,7 @@ $icon-size: 17px;
.name-wrapper {
@include ellipsis();
max-width: calc(100% - 25px);
// max-width: calc(100% - 25px);
}
}

29
blossom-web/src/views/article/DocTitle.vue
View File

@ -8,9 +8,11 @@
<svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
</svg>
<div class="name-wrapper">
{{ props.trees.n }}
</div>
<el-tooltip :content="props.trees.n" placement="top" :show-after="1000" :hide-after="0" :transition="'none'" :offset="2" :persistent="false">
<div class="name-wrapper" :style="nameWrapperStyle">
{{ props.trees.n }}
</div>
</el-tooltip>
<bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">{{ tag.content }}</bl-tag>
</div>
</div>
@ -28,6 +30,12 @@ const props = defineProps({
trees: { type: Object as PropType<DocTree>, default: {} }
})
const nameWrapperStyle = computed(() => {
return {
maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
}
})
/**
* 计算标签, 并返回便签对象集合
*/
@ -62,8 +70,6 @@ $icon-size: 17px;
.doc-title {
@include flex(row, flex-start, flex-start);
max-width: calc(100% - 15px);
min-width: calc(100% - 15px);
width: 100%;
padding-bottom: 1px;
position: relative;
@ -88,15 +94,8 @@ $icon-size: 17px;
.name-wrapper {
@include ellipsis();
max-width: calc(100% - 25px);
}
}
.sort {
position: absolute;
right: -15px;
top: 2px;
}
}
// 专题样式, 包括边框和文字样式
@ -133,7 +132,6 @@ $icon-size: 17px;
.doc-name {
@include flex(row, flex-start, flex-start);
color: var(--el-color-primary);
align-content: flex-start;
flex-wrap: wrap;
width: 100%;
@ -155,10 +153,5 @@ $icon-size: 17px;
min-width: calc(100% - 25px);
}
}
.sort {
position: absolute;
right: -15px;
}
}
</style>