github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-26 12:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化聊天窗口显示头像

Browse Source
This commit is contained in:
kuaifan 2022-03-31 22:26:47 +08:00
parent 3c8642f30f
commit 8eca06fd5f
5 changed files with 156 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,17 @@
@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-title" :class="{completed:$A.dialogCompleted(dialogData)}"> <div class="dialog-nav">
<div class="dialog-avatar">
<template v-if="dialogData.type=='group'">
<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>
<Icon v-else class="icon-avatar" type="ios-people" />
</template>
<div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div>
<Icon v-else class="icon-avatar" type="md-person" />
</div>
<div class="dialog-title">
<div class="main-title"> <div class="main-title">
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'"> <template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag> <Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
@ -24,6 +34,7 @@
</div> </div>
</template> </template>
</div> </div>
</div>
</slot> </slot>
<ScrollerY <ScrollerY
ref="scroller" ref="scroller"

2
resources/assets/js/pages/manage/components/ProjectDialog.vue
View File

@ -15,10 +15,12 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="dialog-nav">
<div class="dialog-title"> <div class="dialog-title">
<h2>{{$L('群聊')}}</h2> <h2>{{$L('群聊')}}</h2>
</div> </div>
</div> </div>
</div>
<div slot="inputBefore" class="dialog-back" @click="onInputBack"> <div slot="inputBefore" class="dialog-back" @click="onInputBack">
<Icon type="md-arrow-back" /> <Icon type="md-arrow-back" />
</div> </div>

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

@ -9,11 +9,10 @@
background-color: #ffffff; background-color: #ffffff;
z-index: 1; z-index: 1;
.dialog-title { .dialog-nav {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center; padding: 0 22px;
padding: 0 30px;
height: 68px; height: 68px;
position: relative; position: relative;
@ -27,6 +26,32 @@
background-color: #f4f5f5; background-color: #f4f5f5;
} }
.dialog-avatar {
flex-shrink: 0;
margin-right: 12px;
.user-avatar,
.icon-avatar {
width: 42px;
height: 42px;
margin: 2px;
flex-grow: 0;
flex-shrink: 0;
}
.icon-avatar {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 26px;
background-color: #61B2F9;
color: #ffffff;
&.project {
background-color: #6E99EB;
}
&.task {
background-color: #9B96DF;
font-size: 24px;
}
&.completed { &.completed {
&:after { &:after {
content: "\f373"; content: "\f373";
@ -34,14 +59,23 @@
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 24px; right: 22px;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 52px; font-size: 40px;
color: #19be6b; color: #19be6b;
opacity: .2; opacity: .2;
z-index: 1; z-index: 1;
} }
} }
}
}
.dialog-title {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
justify-content: center;
.main-title { .main-title {
display: flex; display: flex;
@ -113,6 +147,7 @@
} }
} }
} }
}
.dialog-scroller { .dialog-scroller {
position: relative; position: relative;

4
resources/assets/sass/pages/components/project-dialog.scss vendored
View File

@ -64,7 +64,7 @@
} }
} }
} }
.dialog-title { .dialog-nav {
padding: 0 20px; padding: 0 20px;
} }
.dialog-footer { .dialog-footer {
@ -82,7 +82,7 @@
margin-top: 16px; margin-top: 16px;
padding: 0 12px; padding: 0 12px;
} }
.dialog-title { .dialog-nav {
padding: 0 12px; padding: 0 12px;
height: 58px; height: 58px;
} }

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

@ -121,7 +121,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 12px; right: 12px;
font-size: 32px; font-size: 28px;
color: #19be6b; color: #19be6b;
opacity: .2; opacity: .2;
z-index: 1; z-index: 1;
@ -376,9 +376,13 @@
} }
.messenger-msg { .messenger-msg {
.dialog-wrapper { .dialog-wrapper {
.dialog-title { .dialog-nav {
height: 54px; height: 54px;
align-items: center; justify-content: center;
.dialog-title {
flex: 0;
width: auto;
}
} }
.dialog-footer { .dialog-footer {
position: relative; position: relative;