various ui improvements: floating-menu color, isCompact property in M…

…essageItem
nkonev · Oct 29, 2024 · 01ec100 · 01ec100
1 parent a5e18de
commit 01ec100
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/frontend/src/ChatView.vue b/frontend/src/ChatView.vue
@@ -30,7 +30,7 @@
                 </v-alert>
               </div>
 
-              <MessageList :canResend="chatStore.chatDto.canResend" :blog="chatStore.chatDto.blog"/>
+              <MessageList :canResend="chatStore.chatDto.canResend" :blog="chatStore.chatDto.blog" :isCompact="true"/>
 
               <v-btn v-if="chatStore.showScrollDown" variant="elevated" color="primary" icon="mdi-arrow-down-thick" :class="scrollDownClass()" @click="scrollDown()"></v-btn>
               <v-btn v-if="isMobile()" variant="elevated" color="primary" icon="mdi-plus" class="new-fab-b" @click="openNewMessageDialog()"></v-btn>

diff --git a/frontend/src/MessageItem.vue b/frontend/src/MessageItem.vue
@@ -7,11 +7,10 @@
         </div>
         <div class="message-item-with-buttons-wrapper">
             <v-container class="ma-0 pa-0 d-flex list-item-head">
-                <a :href="getOwnerLink(item)" class="nodecorated-link" @click.prevent.stop="onProfileClick(item)" :style="getLoginColoredStyle(item.owner, true)">{{getOwner(item.owner)}}</a>
-                <span class="with-space"> {{$vuetify.locale.t('$vuetify.time_at')}} </span>
-                <router-link v-if="!isInBlog" class="gray-link" :to="getMessageLink(item)" :title="$vuetify.locale.t('$vuetify.link')"><span class="mr-1">{{getDate(item)}}</span></router-link>
-                <span class="mr-1" v-else>{{getDate(item)}}</span>
-                <span v-if="!isMobile() && !isInBlog" class="ma-0 pa-0 message-quick-buttons">
+                <a :href="getOwnerLink(item)" class="nodecorated-link" @click.prevent.stop="onProfileClick(item)" :style="getLoginColoredStyle(item.owner, true)" :title="getDate(item)">{{getOwner(item.owner)}}</a>
+                <span class="with-space" v-if="!isCompact"> {{$vuetify.locale.t('$vuetify.time_at')}} </span>
+                <router-link v-if="!isCompact" class="gray-link" :to="getMessageLink(item)" :title="$vuetify.locale.t('$vuetify.link')"><span class="mr-1">{{getDate(item)}}</span></router-link>
+                <span v-if="!isMobile() && !isCompact" class="ma-0 pa-0 message-quick-buttons">
                     <v-icon class="mx-1" v-if="item.fileItemUuid" @click="onFilesClicked(item)" size="small" :title="$vuetify.locale.t('$vuetify.attached_message_files')">mdi-file-download</v-icon>
                     <v-icon class="mx-1" v-if="item.canDelete" color="red" @click="deleteMessage(item)" dark size="small" :title="$vuetify.locale.t('$vuetify.delete_btn')">mdi-delete</v-icon>
                     <v-icon class="mx-1" v-if="item.canEdit" color="primary" @click="editMessage(item)" dark size="small" :title="$vuetify.locale.t('$vuetify.edit')">mdi-lead-pencil</v-icon>
@@ -57,7 +56,7 @@
     import {chat_name, messageIdHashPrefix, profile, profile_name} from "@/router/routes"
 
     export default {
-        props: ['id', 'item', 'chatId', 'my', 'highlight', 'isInBlog'],
+        props: ['id', 'item', 'chatId', 'my', 'highlight', 'isCompact'],
         methods: {
             getLoginColoredStyle,
             hasLength,
@@ -68,7 +67,7 @@
                 return profile + "/" + item.owner?.id;
             },
             onProfileClick(item) {
-                if (this.isInBlog) {
+                if (this.isCompact) {
                     window.location.href = this.getOwnerLink(item);
                 } else {
                     const route = this.getOwnerRoute(item);
@@ -87,7 +86,7 @@
             // we cannot move it from front to back because there are messages-over-websocket
             // and itsn't clear did user read them or not
             sendRead(dto) {
-              if (!this.isInBlog) {
+              if (!this.isCompact) {
                 axios.put(`/api/chat/${this.chatId}/message/read/${dto.id}`)
               }
             },

diff --git a/frontend/src/MessageList.vue b/frontend/src/MessageList.vue
@@ -8,6 +8,7 @@
             :chatId="chatId"
             :my="meIsOwnerOfMessage(item)"
             :highlight="item.id == highlightItemId"
+            :isCompact="isCompact"
             @customcontextmenu.stop="onShowContextMenu($event, item)"
             @deleteMessage="deleteMessage"
             @editMessage="editMessage"
@@ -103,7 +104,7 @@
         hashMixin(),
         searchString(SEARCH_MODE_MESSAGES),
       ],
-      props: ['canResend', 'blog'],
+      props: ['canResend', 'blog', 'isCompact'],
       data() {
         return {
           markInstance: null,

diff --git a/frontend/src/store/chatStore.js b/frontend/src/store/chatStore.js
@@ -69,6 +69,7 @@ export const useChatStore = defineStore('chat', {
         oppositeUserLastLoginDateTime: null,
         correlationId: null,
         videoTokenId: null,
+        compactMessages: false,
     }
   },
   actions: {