mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-07 13:18:16 +00:00
perf: 优化聊天窗口显示头像
This commit is contained in:
kuaifan
parent
3c8642f30f
commit
8eca06fd5f
@ -6,23 +6,34 @@
|
|||||||
@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="main-title">
|
<div class="dialog-avatar">
|
||||||
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
|
<template v-if="dialogData.type=='group'">
|
||||||
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
|
<i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project"></i>
|
||||||
|
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task" :class="{completed:$A.dialogCompleted(dialogData)}"></i>
|
||||||
|
<Icon v-else class="icon-avatar" type="ios-people" />
|
||||||
</template>
|
</template>
|
||||||
<h2>{{dialogData.name}}</h2>
|
<div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div>
|
||||||
<em v-if="peopleNum > 0">({{peopleNum}})</em>
|
<Icon v-else class="icon-avatar" type="md-person" />
|
||||||
<label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
|
|
||||||
</div>
|
</div>
|
||||||
<template v-if="dialogData.type === 'group'">
|
<div class="dialog-title">
|
||||||
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
|
<div class="main-title">
|
||||||
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
|
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
|
||||||
|
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
|
||||||
|
</template>
|
||||||
|
<h2>{{dialogData.name}}</h2>
|
||||||
|
<em v-if="peopleNum > 0">({{peopleNum}})</em>
|
||||||
|
<label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
|
<template v-if="dialogData.type === 'group'">
|
||||||
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
|
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
|
||||||
</div>
|
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
|
||||||
</template>
|
</div>
|
||||||
|
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
|
||||||
|
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
<ScrollerY
|
<ScrollerY
|
||||||
|
|||||||
@ -15,8 +15,10 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-title">
|
<div class="dialog-nav">
|
||||||
<h2>{{$L('群聊')}}</h2>
|
<div class="dialog-title">
|
||||||
|
<h2>{{$L('群聊')}}</h2>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div slot="inputBefore" class="dialog-back" @click="onInputBack">
|
<div slot="inputBefore" class="dialog-back" @click="onInputBack">
|
||||||
|
|||||||
@ -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,88 +26,124 @@
|
|||||||
background-color: #f4f5f5;
|
background-color: #f4f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.completed {
|
.dialog-avatar {
|
||||||
&:after {
|
|
||||||
content: "\f373";
|
|
||||||
font-family: Ionicons, serif;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 24px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 52px;
|
|
||||||
color: #19be6b;
|
|
||||||
opacity: .2;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 22px;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
.ivu-tag {
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0 6px 0 0;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
&.ivu-tag-success {
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ivu-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-right: 6px;
|
|
||||||
|
|
||||||
&.completed {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> h2 {
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
> em {
|
|
||||||
flex-shrink: 0;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
padding-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-text {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-left: 10px;
|
|
||||||
background-color: #8BCF70;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 1px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-title {
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 12px;
|
margin-right: 12px;
|
||||||
line-height: 20px;
|
.user-avatar,
|
||||||
padding-top: 2px;
|
.icon-avatar {
|
||||||
color: #aaaaaa;
|
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 {
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.pointer {
|
.dialog-title {
|
||||||
cursor: pointer;
|
flex: 1;
|
||||||
|
width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&:hover {
|
.main-title {
|
||||||
color: #888888;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 22px;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
.ivu-tag {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0 6px 0 0;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
|
&.ivu-tag-success {
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 6px;
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
> em {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-text {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background-color: #8BCF70;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding-top: 2px;
|
||||||
|
color: #aaaaaa;
|
||||||
|
|
||||||
|
&.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
10
resources/assets/sass/pages/page-messenger.scss
vendored
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user