github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-19 14:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 消息已完成图标布局优化

Browse Source
This commit is contained in:
kuaifan 2022-04-02 08:45:04 +08:00
parent 08c46fd66e
commit f8463823d9
4 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -6,11 +6,11 @@
@dragover.prevent="chatDragOver(true, $event)" @dragover.prevent="chatDragOver(true, $event)"
@dragleave.prevent="chatDragOver(false, $event)"> @dragleave.prevent="chatDragOver(false, $event)">
<slot name="head"> <slot name="head">
<div class="dialog-nav"> <div class="dialog-nav" :class="{completed:$A.dialogCompleted(dialogData)}">
<div class="dialog-avatar"> <div class="dialog-avatar">
<template v-if="dialogData.type=='group'"> <template v-if="dialogData.type=='group'">
<i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i> <i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task" :class="{completed:$A.dialogCompleted(dialogData)}">&#xe6f4;</i> <i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
<Icon v-else class="icon-avatar" type="ios-people" /> <Icon v-else class="icon-avatar" type="ios-people" />
</template> </template>
<div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div> <div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div>

3
resources/assets/js/pages/manage/messenger.vue
View File

@ -37,12 +37,13 @@
top: dialog.top_at, top: dialog.top_at,
active: dialog.id == dialogId, active: dialog.id == dialogId,
operate: dialog.id == topOperateItem.id && topOperateVisible, operate: dialog.id == topOperateItem.id && topOperateVisible,
completed: $A.dialogCompleted(dialog)
}" }"
@click="openDialog(dialog, true)" @click="openDialog(dialog, true)"
@contextmenu.prevent.stop="handleRightClick($event, dialog)"> @contextmenu.prevent.stop="handleRightClick($event, dialog)">
<template v-if="dialog.type=='group'"> <template v-if="dialog.type=='group'">
<i v-if="dialog.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i> <i v-if="dialog.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
<i v-else-if="dialog.group_type=='task'" class="taskfont icon-avatar task" :class="{completed:$A.dialogCompleted(dialog)}">&#xe6f4;</i> <i v-else-if="dialog.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
<Icon v-else class="icon-avatar" type="ios-people" /> <Icon v-else class="icon-avatar" type="ios-people" />
</template> </template>
<div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="42"/></div> <div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="42"/></div>

34
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -26,6 +26,25 @@
background-color: #f4f5f5; background-color: #f4f5f5;
} }
&.completed {
&:after {
content: "\f373";
font-family: Ionicons, serif;
pointer-events: none;
position: absolute;
top: 50%;
right: 22px;
transform: translateY(-50%);
font-size: 40px;
color: #19be6b;
opacity: .2;
z-index: 1;
}
.dialog-title {
padding-right: 52px;
}
}
.dialog-avatar { .dialog-avatar {
flex-shrink: 0; flex-shrink: 0;
margin-right: 12px; margin-right: 12px;
@ -52,21 +71,6 @@
background-color: #9B96DF; background-color: #9B96DF;
font-size: 24px; font-size: 24px;
} }
&.completed {
&:after {
content: "\f373";
font-family: Ionicons, serif;
pointer-events: none;
position: absolute;
top: 50%;
right: 22px;
transform: translateY(-50%);
font-size: 40px;
color: #19be6b;
opacity: .2;
z-index: 1;
}
}
} }
} }

33
resources/assets/sass/pages/page-messenger.scss vendored
View File

@ -113,20 +113,6 @@
background-color: #9B96DF; background-color: #9B96DF;
font-size: 24px; font-size: 24px;
} }
&.completed {
&:after {
content: "\f373";
font-family: Ionicons, serif;
pointer-events: none;
position: absolute;
bottom: 0;
right: 12px;
font-size: 28px;
color: #19be6b;
opacity: .2;
z-index: 1;
}
}
} }
.dialog-box { .dialog-box {
flex: 1; flex: 1;
@ -212,6 +198,25 @@
margin: 0; margin: 0;
} }
} }
&.completed {
&:after {
content: "\f373";
font-family: Ionicons, serif;
pointer-events: none;
position: absolute;
bottom: 0;
right: 12px;
font-size: 28px;
color: #19be6b;
opacity: .2;
z-index: 1;
}
.dialog-box {
.dialog-text {
padding-right: 36px;
}
}
}
} }
} }
&.contacts { &.contacts {