Merge pull request #4137 from traPtitech/saiten/issue3773

メニューを開くボタンをトグルにする
traPtitech · Jan 3, 2024 · 7133947 · 7133947
2 parents e5d3cff + 454fa36
commit 7133947
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 34 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"

diff --git a/src/components/Main/NavigationBar/NavigationContent/ActivityElement.vue b/src/components/Main/NavigationBar/NavigationContent/ActivityElement.vue
@@ -1,11 +1,10 @@
 <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>

diff --git a/src/components/UI/ClickOutside.ts b/src/components/UI/ClickOutside.ts
@@ -84,7 +84,10 @@ export default defineComponent({
         return
       }
 
-      emit('clickOutside', e)
+      setTimeout(() => {
+        emit('clickOutside', e)
+      }, 0)
+
       if (props.stop) {
         e.stopPropagation()
       }

diff --git a/src/components/UI/MessagePanel/MessagePanel.vue b/src/components/UI/MessagePanel/MessagePanel.vue
@@ -22,22 +22,27 @@
         @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>
 
@@ -58,6 +63,7 @@ const props = withDefaults(
     message: Message | ActivityTimelineMessage
     lineClampContent?: boolean
     showContextMenuButton?: boolean
+    to: string
   }>(),
   {
     titleType: 'channel' as const,
@@ -98,7 +104,6 @@ const onClickContextMenuButton = (e: MouseEvent) => {
   @include background-primary;
   border-radius: 4px;
   padding: 8px 16px;
-  cursor: pointer;
 }
 .header {
   display: flex;