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

8-diagrams · Apr 2, 2022 · f846382 · f846382
1 parent 08c46fd
commit f846382
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -6,11 +6,11 @@
         @dragover.prevent="chatDragOver(true, $event)"
         @dragleave.prevent="chatDragOver(false, $event)">
         <slot name="head">
-            <div class="dialog-nav">
+            <div class="dialog-nav" :class="{completed:$A.dialogCompleted(dialogData)}">
                 <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>
+                        <i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task">&#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>

diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
@@ -37,12 +37,13 @@
                                 top: dialog.top_at,
                                 active: dialog.id == dialogId,
                                 operate: dialog.id == topOperateItem.id && topOperateVisible,
+                                completed: $A.dialogCompleted(dialog)
                             }"
                             @click="openDialog(dialog, true)"
                             @contextmenu.prevent.stop="handleRightClick($event, dialog)">
                             <template v-if="dialog.type=='group'">
                                 <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" />
                             </template>
                             <div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="42"/></div>

diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -26,6 +26,25 @@
             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 {
             flex-shrink: 0;
             margin-right: 12px;
@@ -52,21 +71,6 @@
                     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;
-                    }
-                }
             }
         }
 

diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
@@ -113,20 +113,6 @@
                                     background-color: #9B96DF;
                                     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 {
                                 flex: 1;
@@ -212,6 +198,25 @@
                                     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 {