Skip to content

Commit

Permalink
perf: 优化聊天窗口显示头像
Browse files Browse the repository at this point in the history
  • Loading branch information
@kuaifan
kuaifan committed Mar 31, 2022
1 parent 3c8642f commit 8eca06f
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 90 deletions.
39 changes: 25 additions & 14 deletions resources/assets/js/pages/manage/components/DialogWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,34 @@
@dragover.prevent="chatDragOver(true, $event)"
@dragleave.prevent="chatDragOver(false, $event)">
<slot name="head">
<div class="dialog-title" :class="{completed:$A.dialogCompleted(dialogData)}">
<div class="main-title">
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
<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>
<h2>{{dialogData.name}}</h2>
<em v-if="peopleNum > 0">({{peopleNum}})</em>
<label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
<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>
<template v-if="dialogData.type === 'group'">
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
<div class="dialog-title">
<div class="main-title">
<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 v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
</div>
</template>
<template v-if="dialogData.type === 'group'">
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
</div>
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
</div>
</template>
</div>
</div>
</slot>
<ScrollerY
Expand Down
6 changes: 4 additions & 2 deletions resources/assets/js/pages/manage/components/ProjectDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@
</li>
</ul>
</div>
<div class="dialog-title">
<h2>{{$L('群聊')}}</h2>
<div class="dialog-nav">
<div class="dialog-title">
<h2>{{$L('群聊')}}</h2>
</div>
</div>
</div>
<div slot="inputBefore" class="dialog-back" @click="onInputBack">
Expand Down
173 changes: 104 additions & 69 deletions resources/assets/sass/pages/components/dialog-wrapper.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@
background-color: #ffffff;
z-index: 1;

.dialog-title {
.dialog-nav {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 30px;
align-items: center;
padding: 0 22px;
height: 68px;
position: relative;

Expand All @@ -27,88 +26,124 @@
background-color: #f4f5f5;
}

&.completed {
&: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;
.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 {
&: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;
}
}
}
}

.main-title {
.dialog-title {
flex: 1;
width: 0;
display: flex;
align-items: center;
line-height: 22px;
max-width: 100%;
flex-direction: column;
justify-content: center;

.ivu-tag {
flex-shrink: 0;
margin: 0 6px 0 0;
padding: 0 5px;
.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-tag-success {
padding: 0 6px;
}
}
}

.ivu-icon {
font-size: 18px;
margin-right: 6px;
.ivu-icon {
font-size: 18px;
margin-right: 6px;

&.completed {
color: $primary-color;
&.completed {
color: $primary-color;
}
}
}

> h2 {
font-size: 17px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
> 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;
}
> 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
.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;
.sub-title {
flex-shrink: 0;
font-size: 12px;
line-height: 20px;
padding-top: 2px;
color: #aaaaaa;

&.pointer {
cursor: pointer;
&.pointer {
cursor: pointer;

&:hover {
color: #888888;
&:hover {
color: #888888;
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions resources/assets/sass/pages/components/project-dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
}
}
}
.dialog-title {
.dialog-nav {
padding: 0 20px;
}
.dialog-footer {
Expand All @@ -82,7 +82,7 @@
margin-top: 16px;
padding: 0 12px;
}
.dialog-title {
.dialog-nav {
padding: 0 12px;
height: 58px;
}
Expand Down
10 changes: 7 additions & 3 deletions resources/assets/sass/pages/page-messenger.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
position: absolute;
bottom: 0;
right: 12px;
font-size: 32px;
font-size: 28px;
color: #19be6b;
opacity: .2;
z-index: 1;
Expand Down Expand Up @@ -376,9 +376,13 @@
}
.messenger-msg {
.dialog-wrapper {
.dialog-title {
.dialog-nav {
height: 54px;
align-items: center;
justify-content: center;
.dialog-title {
flex: 0;
width: auto;
}
}
.dialog-footer {
position: relative;
Expand Down

0 comments on commit 8eca06f

Please sign in to comment.