pinned message toggle

traPtitech · Dec 6, 2023 · bce41c4 · bce41c4
1 parent 0194a2d
commit bce41c4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 41 deletions.
diff --git a/src/components/Main/MainView/PrimaryViewSidebar/SidebarPinned/SidebarPinnedMessage.vue b/src/components/Main/MainView/PrimaryViewSidebar/SidebarPinned/SidebarPinnedMessage.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <router-link :to="constructMessagesPath(message.id)">
-      <message-panel
-        title-type="user"
-        hide-subtitle
-        line-clamp-content
-        :message="message"
-        show-context-menu-button
-        @click-context-menu-button="toggle"
-      />
-    </router-link>
+    <message-panel
+      title-type="user"
+      hide-subtitle
+      line-clamp-content
+      :message="message"
+      :to="constructMessagesPath(message.id)"
+      show-context-menu-button
+      @click-context-menu-button="toggle"
+    />
+
     <sidebar-pinned-message-context-menu
       v-if="position"
       :position="position"
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="ts" setup>
-import MessagePanel from '/@/components/UI/MessagePanel/MessagePanel.vue'
-import SidebarPinnedMessageContextMenu from './SidebarPinnedMessageContextMenu.vue'
-import { computed } from 'vue'
 import type { ActivityTimelineMessage, Message } from '@traptitech/traq'
-import { constructMessagesPath } from '/@/router'
+import { computed } from 'vue'
+import SidebarPinnedMessageContextMenu from './SidebarPinnedMessageContextMenu.vue'
+import MessagePanel from '/@/components/UI/MessagePanel/MessagePanel.vue'
 import useContextMenu from '/@/composables/useContextMenu'
+import { constructMessagesPath } from '/@/router'
 import { useChannelsStore } from '/@/store/entities/channels'
 
 const props = defineProps<{

diff --git a/src/components/Main/NavigationBar/NavigationContent/ActivityElement.vue b/src/components/Main/NavigationBar/NavigationContent/ActivityElement.vue
@@ -1,17 +1,15 @@
 <template>
-  <router-link :to="channelLink">
-    <message-panel
-      :message="message"
-      :title-type="titleType"
-      line-clamp-content
-    />
-  </router-link>
+  <message-panel
+    :message="message"
+    :title-type="titleType"
+    line-clamp-content
+    :to="channelLink"
+  />
 </template>
 
 <script lang="ts" setup>
-import MessagePanel from '/@/components/UI/MessagePanel/MessagePanel.vue'
-import { computed } from 'vue'
 import type { ActivityTimelineMessage } from '@traptitech/traq'
+import { computed } from 'vue'
 import useChannelPath from '/@/composables/useChannelPath'
 
 const props = defineProps<{

diff --git a/src/components/UI/MessagePanel/MessagePanel.vue b/src/components/UI/MessagePanel/MessagePanel.vue
@@ -22,32 +22,37 @@
         @click.prevent="onClickContextMenuButton"
       />
     </div>
-    <div :class="$style.separator" />
-    <div v-if="!hideSubtitle" :class="[$style.subTitleContainer, $style.item]">
-      <user-name v-if="titleType === 'channel'" :user="userState" />
-      <channel-name v-if="titleType === 'user'" :path="path" />
-      <a-icon
-        v-if="message.createdAt !== message.updatedAt"
-        :class="$style.editIcon"
-        :size="16"
-        name="pencil-outline"
-        mdi
+    <router-link :to="to">
+      <div :class="$style.separator" />
+      <div
+        v-if="!hideSubtitle"
+        :class="[$style.subTitleContainer, $style.item]"
+      >
+        <user-name v-if="titleType === 'channel'" :user="userState" />
+        <channel-name v-if="titleType === 'user'" :path="path" />
+        <a-icon
+          v-if="message.createdAt !== message.updatedAt"
+          :class="$style.editIcon"
+          :size="16"
+          name="pencil-outline"
+          mdi
+        />
+      </div>
+      <render-content
+        :content="message.content"
+        :line-clamp-content="lineClampContent"
       />
-    </div>
-    <render-content
-      :content="message.content"
-      :line-clamp-content="lineClampContent"
-    />
+    </router-link>
   </div>
 </template>
 
 <script lang="ts" setup>
-import UserName from './UserName.vue'
+import type { ActivityTimelineMessage, Message } from '@traptitech/traq'
+import { computed } from 'vue'
 import ChannelName from './ChannelName.vue'
 import RenderContent from './RenderContent.vue'
+import UserName from './UserName.vue'
 import AIcon from '/@/components/UI/AIcon.vue'
-import { computed } from 'vue'
-import type { ActivityTimelineMessage, Message } from '@traptitech/traq'
 import useChannelPath from '/@/composables/useChannelPath'
 import { useUsersStore } from '/@/store/entities/users'
 
@@ -58,6 +63,7 @@ const props = withDefaults(
     message: Message | ActivityTimelineMessage
     lineClampContent?: boolean
     showContextMenuButton?: boolean
+    to: string
   }>(),
   {
     titleType: 'channel' as const,