perf: 优化菜单颜色选择

This commit is contained in:
Pang 2023-08-13 08:19:39 +08:00
parent 1bb400b7dc
commit 6af0922542
8 changed files with 36 additions and 19 deletions

View File

@ -131,7 +131,7 @@
</EDropdownItem>
<EDropdownItem v-for="(c, k) in $store.state.columnColorList" :key="k" :divided="k==0" :command="c">
<div class="item">
<i class="taskfont" :style="{color:c.color}" v-html="c.color == column.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
<i class="taskfont" :style="{color:c.color||'#ddd'}" v-html="c.color == column.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
</div>
</EDropdownItem>
</EDropdownMenu>

View File

@ -54,7 +54,7 @@
<template v-if="colorShow">
<EDropdownItem v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" :command="c">
<div class="item">
<i class="taskfont" :style="{color:c.color||'#f9f9f9'}" v-html="c.color == task.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
<i class="taskfont" :style="{color:c.primary||'#ddd'}" v-html="c.color == (task.color||'') ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
</div>
</EDropdownItem>
</template>

View File

@ -150,17 +150,28 @@
<div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
<DropdownMenu slot="list" class="messenger-dialog-operation">
<DropdownItem @click.native="handleTopClick">
{{ $L(operateItem.top_at ? '取消置顶' : '置顶') }}
<div class="item">
{{ $L(operateItem.top_at ? '取消置顶' : '置顶') }}
<i class="taskfont" v-html="operateItem.top_at ? '&#xe7e3;' : '&#xe7e6;'"></i>
</div>
</DropdownItem>
<DropdownItem @click.native="handleReadClick">
{{ $L($A.getDialogUnread(operateItem, true) > 0 ? '标记已读' : '标记未读') }}
<div class="item">
{{ $L($A.getDialogUnread(operateItem, true) > 0 ? '标记已读' : '标记未读') }}
<i class="taskfont" v-html="$A.getDialogUnread(operateItem, true) > 0 ? '&#xe7e8;' : '&#xe7e9;'"></i>
</div>
</DropdownItem>
<DropdownItem @click.native="handleSilenceClick" :disabled="silenceDisabled(operateItem)">
{{ $L(operateItem.silence ? '允许消息通知' : '消息免打扰') }}
<div class="item">
{{ $L(operateItem.silence ? '允许消息通知' : '消息免打扰') }}
<i class="taskfont" v-html="operateItem.silence ? '&#xe7eb;' : '&#xe7d7;'"></i>
</div>
</DropdownItem>
<DropdownItem @click.native="handleColorClick(c.color)" v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" v-if="k<6" >
<div class="item">
<i class="taskfont" :style="{color:c.color||'#f9f9f9'}" v-html="c.color == operateItem.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
{{$L(c.name)}}
<i class="taskfont color" :style="{color:c.primary||'#ddd'}" v-html="c.color == (operateItem.color||'') ? '&#xe61d;' : '&#xe61c;'"></i>
</div>
</DropdownItem>
</DropdownMenu>

View File

@ -147,7 +147,7 @@ export default {
// 列表背景色
columnColorList: [
{name: '默认', color: ''},
{name: '灰色', color: '#444444'},
{name: '灰色', color: '#999999'},
{name: '棕色', color: '#947364'},
{name: '橘色', color: '#faaa6c'},
{name: '黄色', color: '#f2d86d'},
@ -160,13 +160,13 @@ export default {
// 任务背景色
taskColorList: [
{name: '默认', color: ''},
{name: '黄色', color: '#fffae6'},
{name: '蓝色', color: '#e5f5ff'},
{name: '绿色', color: '#ecffe5'},
{name: '粉色', color: '#ffeaee'},
{name: '紫色', color: '#f6ecff'},
{name: '灰色', color: '#f3f3f3'},
{name: '默认', color: '', primary: ''},
{name: '黄色', color: '#fffae6', primary: '#f2d86d'},
{name: '蓝色', color: '#e5f5ff', primary: '#51abea'},
{name: '绿色', color: '#ecffe5', primary: '#73b45c'},
{name: '粉色', color: '#ffeaee', primary: '#ff819c'},
{name: '紫色', color: '#f6ecff', primary: '#b583e3'},
{name: '灰色', color: '#f3f3f3', primary: '#999999'},
],
// 主题皮肤

View File

@ -592,9 +592,16 @@
}
.messenger-dialog-operation {
.ivu-dropdown-item-divided {
&:before {
transform: scaleY(0.5);
}
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
> i {
flex-shrink: 0;
@ -602,12 +609,11 @@
height: 18px;
line-height: 18px;
font-size: 18px;
margin-right: 8px;
padding: 0;
color: #bbbbbb;
margin-left: 16px;
opacity: 0.7;
&.ivu-icon {
font-size: 16px;
&.color {
opacity: 1;
}
}
}