perf: 优化文件操作菜单样式

This commit is contained in:
kuaifan 2022-06-19 11:04:02 +08:00
parent ba65c21a0b
commit 7c885cad5b
2 changed files with 39 additions and 1 deletions

View File

@ -79,6 +79,7 @@
:class="{ :class="{
shear: shearIds.includes(item.id), shear: shearIds.includes(item.id),
highlight: selectIds.includes(item.id), highlight: selectIds.includes(item.id),
operation: contextMenuVisible && item.id === contextMenuItem.id,
}" }"
:data-id="item.id" :data-id="item.id"
v-longpress="handleLongpress" v-longpress="handleLongpress"
@ -151,7 +152,10 @@
transfer> transfer>
<DropdownMenu slot="list"> <DropdownMenu slot="list">
<template v-if="contextMenuItem.id"> <template v-if="contextMenuItem.id">
<DropdownItem @click.native="handleContextClick('open')">{{$L('打开')}}</DropdownItem> <DropdownItem @click.native="handleContextClick('open')" class="item-open">
{{$L('打开')}}
<div class="open-name">{{contextMenuItem.name}}</div>
</DropdownItem>
<DropdownItem @click.native="handleContextClick('select')">{{$L(selectIds.includes(contextMenuItem.id) ? '取消选择' : '选择')}}</DropdownItem> <DropdownItem @click.native="handleContextClick('select')">{{$L(selectIds.includes(contextMenuItem.id) ? '取消选择' : '选择')}}</DropdownItem>
<Dropdown placement="right-start" transfer> <Dropdown placement="right-start" transfer>

View File

@ -446,6 +446,7 @@
&.highlight { &.highlight {
background-color: #f4f5f7; background-color: #f4f5f7;
} }
&.operation,
&:hover { &:hover {
background-color: #f4f5f7; background-color: #f4f5f7;
.file-menu, .file-menu,
@ -594,6 +595,19 @@
margin-right: 8px; margin-right: 8px;
} }
} }
.ivu-dropdown-menu {
.item-open {
display: flex;
align-items: center;
.open-name {
padding-left: 4px;
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
} }
.page-file-share-form { .page-file-share-form {
@ -609,11 +623,13 @@
} }
} }
} }
.page-file-share-title { .page-file-share-title {
margin-top: -8px; margin-top: -8px;
margin-bottom: 14px; margin-bottom: 14px;
padding: 0 2px; padding: 0 2px;
} }
.page-file-share-list { .page-file-share-list {
max-height: 500px; max-height: 500px;
margin-bottom: 26px; margin-bottom: 26px;
@ -678,6 +694,14 @@
.file-menu { .file-menu {
display: none; display: none;
} }
&:hover {
background-color: transparent;
}
&.operation {
&:hover {
background-color: #f4f5f7;
}
}
} }
} }
} }
@ -690,4 +714,14 @@
bottom: 86px bottom: 86px
} }
} }
.page-file-dropdown-menu {
.ivu-dropdown-menu {
.ivu-dropdown-item {
&:hover {
background: transparent;
}
}
}
}
} }