Merge branch 'master' into saiten/issue3773

traPtitech · Dec 28, 2023 · 4cb83f7 · 4cb83f7
2 parents 8c07bcf + e5d3cff
commit 4cb83f7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/components/Main/NavigationBar/NavigationContent/ActivityElement.vue b/src/components/Main/NavigationBar/NavigationContent/ActivityElement.vue
@@ -12,6 +12,7 @@ import type { ActivityTimelineMessage } from '@traptitech/traq'
 import { computed } from 'vue'
 import MessagePanel from '/@/components/UI/MessagePanel/MessagePanel.vue'
 import useChannelPath from '/@/composables/useChannelPath'
+import { constructMessagesPath } from '/@/router'
 
 const props = defineProps<{
   type: 'channel' | 'message'
@@ -23,5 +24,9 @@ const { channelIdToLink } = useChannelPath()
 const titleType = computed(() =>
   props.type === 'channel' ? 'channel' : 'user'
 )
-const channelLink = computed(() => channelIdToLink(props.message.channelId))
+const channelLink = computed(() =>
+  props.type === 'channel'
+    ? channelIdToLink(props.message.channelId)
+    : constructMessagesPath(props.message.id)
+)
 </script>
diff --git a/src/components/Modal/FileModal/FileModal.vue b/src/components/Modal/FileModal/FileModal.vue
@@ -1,6 +1,10 @@
 <template>
   <click-outside stop @click-outside="clearModal">
-    <div v-if="fileMeta" :class="$style.fileContainer">
+    <div
+      v-if="fileMeta"
+      :class="$style.fileContainer"
+      :data-fullsize="$boolAttr(isFullsizeModal)"
+    >
       <file-modal-image v-if="fileType === 'image'" :file-id="fileMeta.id" />
       <file-modal-video
         v-else-if="fileType === 'video'"
@@ -34,10 +38,20 @@ const fileIdState = reactive({
 })
 const { fileMeta, fileType } = useFileMeta(fileIdState)
 const { clearModal } = useModalStore()
+const isFullsizeModal = computed(
+  () => fileType.value === 'image' || fileType.value === 'video'
+)
 </script>
 
 <style module lang="scss">
 .fileContainer {
-  height: 100%;
+  height: auto;
+  &[data-fullsize] {
+    height: 100%;
+  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 </style>