Merge pull request #4051 from traPtitech/SSlime/quote-foldable

引用ブロックを折り畳めるように
traPtitech · Sep 15, 2023 · 3615f6e · 3615f6e
2 parents fb77812 + fb4863d
commit 3615f6e
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 6 deletions.
diff --git a/src/components/Main/MainView/MessageElement/MessageQuoteListItem.vue b/src/components/Main/MainView/MessageElement/MessageQuoteListItem.vue
@@ -11,7 +11,25 @@
       :user-id="message.userId"
     />
     <div :class="$style.messageContents">
-      <markdown-content :content="content" />
+      <div
+        :id="markdownId"
+        ref="contentRef"
+        :class="[$style.markdownContainer, oversized && $style.oversized]"
+        :data-expanded="!isFold"
+      >
+        <markdown-content :content="content" />
+      </div>
+      <fold-button
+        v-if="oversized"
+        :is-fold="isFold"
+        :class="$style.foldButton"
+        :aria-expanded="!isFold"
+        :aria-controls="markdownId"
+        background="none"
+        show-icon
+        small
+        @click="toggleFold"
+      />
     </div>
     <message-quote-list-item-footer :class="$style.footer" :message="message" />
   </div>
@@ -24,12 +42,16 @@
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import MessageQuoteListItemHeader from './MessageQuoteListItemHeader.vue'
 import MessageQuoteListItemFooter from './MessageQuoteListItemFooter.vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import type { MessageId, ChannelId, DMChannelId } from '/@/types/entity-ids'
 import { useMessagesView } from '/@/store/domain/messagesView'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useChannelsStore } from '/@/store/entities/channels'
 import MarkdownContent from '/@/components/UI/MarkdownContent.vue'
+import useToggle from '/@/composables/utils/useToggle'
+import FoldButton from '/@/components/UI/FoldButton.vue'
+import { randomString } from '/@/lib/basic/randomString'
+import useBoxSize from '/@/composables/dom/useBoxSize'
 
 const props = defineProps<{
   parentMessageChannelId: ChannelId | DMChannelId
@@ -52,6 +74,17 @@ const shouldShow = computed(
 const content = computed(
   () => renderedContentMap.value.get(props.messageId) ?? ''
 )
+
+const MAX_HEIGHT = 200
+
+const contentRef = ref<HTMLDivElement | null>(null)
+const { height } = useBoxSize(contentRef)
+const oversized = computed(
+  () => height.value !== undefined && height.value >= MAX_HEIGHT
+)
+
+const markdownId = randomString()
+const { value: isFold, toggle: toggleFold } = useToggle(true)
 </script>
 
 <style lang="scss" module>
@@ -98,12 +131,56 @@ const content = computed(
   padding-top: 4px;
   padding-left: 8px;
   min-width: 0;
+  position: relative;
 
   pre {
     white-space: pre-wrap;
   }
 }
 
+$message-max-height: 200px;
+$fold-button-height: 28px;
+$mask-image: linear-gradient(
+  black,
+  black calc(100% - $fold-button-height * 2),
+  rgba(0, 0, 0, 0.1) calc(100% - $fold-button-height),
+  transparent 100%
+);
+
+.markdownContainer {
+  &.oversized {
+    &[data-expanded='false'] {
+      max-height: $message-max-height;
+      overflow: hidden;
+      overflow: clip;
+      -webkit-mask-image: $mask-image;
+      mask-image: $mask-image;
+    }
+
+    &[data-expanded='true'] {
+      max-height: unset;
+      padding-bottom: $fold-button-height;
+    }
+  }
+}
+
+.foldButton {
+  @include color-text-primary;
+  cursor: pointer;
+  position: absolute;
+  left: 8px;
+  bottom: 0;
+
+  @media (any-hover: hover) {
+    &:hover {
+      @include background-tertiary;
+    }
+  }
+  &:focus-visible {
+    @include background-tertiary;
+  }
+}
+
 .footer {
   grid-area: footer;
   margin-top: 4px;

diff --git a/src/components/UI/FoldButton.vue b/src/components/UI/FoldButton.vue
@@ -1,5 +1,8 @@
 <template>
-  <button :class="$style.button" :data-background="background">
+  <button
+    :class="[$style.button, small && $style.small]"
+    :data-background="background"
+  >
     <a-icon
       v-if="showIcon"
       :name="isFold ? 'down' : 'up'"
@@ -15,18 +18,22 @@ import AIcon from '/@/components/UI/AIcon.vue'
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {
   showIcon?: boolean
-  background?: 'primary' | 'secondary' | 'tertiary'
+  background?: 'primary' | 'secondary' | 'tertiary' | 'none'
   isFold: boolean
+  small?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
   showIcon: false,
-  background: 'tertiary'
+  background: 'tertiary',
+  small: false
 })
 </script>
 
 <style lang="scss" module>
 .button {
+  @include color-text-primary;
+
   cursor: pointer;
 
   display: flex;
@@ -36,12 +43,15 @@ withDefaults(defineProps<Props>(), {
   font-weight: bold;
   border-radius: 4px;
   padding: 0 24px;
+  &.small {
+    padding: 0 8px;
+  }
+
   min-height: 24px;
   font-size: 12px;
   line-height: 1.5;
   width: fit-content;
 
-  color: $theme-text-primary-default;
   &[data-background='primary'] {
     background-color: $theme-ui-primary-default;
   }
@@ -55,5 +65,8 @@ withDefaults(defineProps<Props>(), {
   .icon {
     margin-left: -12px;
   }
+  &.small .icon {
+    margin-left: -4px;
+  }
 }
 </style>