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>
<EDropdownItem v-for="(c, k) in $store.state.columnColorList" :key="k" :divided="k==0" :command="c"> <EDropdownItem v-for="(c, k) in $store.state.columnColorList" :key="k" :divided="k==0" :command="c">
<div class="item"> <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> </div>
</EDropdownItem> </EDropdownItem>
</EDropdownMenu> </EDropdownMenu>

View File

@ -54,7 +54,7 @@
<template v-if="colorShow"> <template v-if="colorShow">
<EDropdownItem v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" :command="c"> <EDropdownItem v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" :command="c">
<div class="item"> <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> </div>
</EDropdownItem> </EDropdownItem>
</template> </template>

View File

@ -150,17 +150,28 @@
<div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div> <div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
<DropdownMenu slot="list" class="messenger-dialog-operation"> <DropdownMenu slot="list" class="messenger-dialog-operation">
<DropdownItem @click.native="handleTopClick"> <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>
<DropdownItem @click.native="handleReadClick"> <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>
<DropdownItem @click.native="handleSilenceClick" :disabled="silenceDisabled(operateItem)"> <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>
<DropdownItem @click.native="handleColorClick(c.color)" v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" v-if="k<6" > <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"> <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> </div>
</DropdownItem> </DropdownItem>
</DropdownMenu> </DropdownMenu>

View File

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

View File

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