Merge pull request #4153 from traPtitech/fix/command_pallete_query_su…

…ggestion_mobile_design
traPtitech · Oct 17, 2024 · 2965eee · 2965eee
2 parents ae4686d + 1593321
commit 2965eee
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/src/components/Main/CommandPalette/SearchSuggestion.vue b/src/components/Main/CommandPalette/SearchSuggestion.vue
@@ -34,8 +34,15 @@ import type { SuggestionItem } from './SearchSuggestionItem.vue'
 import SearchSuggestionQueryItem from './SearchSuggestionQueryItem.vue'
 import SearchSuggestionHistoryItem from './SearchSuggestionHistoryItem.vue'
 import SearchSuggestionItem from './SearchSuggestionItem.vue'
+import { useResponsiveStore } from '/@/store/ui/responsive'
 
-const querySuggestions = [
+const emit = defineEmits<{
+  (e: 'queryInsert'): void
+}>()
+
+const { isMobile } = useResponsiveStore()
+
+const querySuggestions = computed(() => [
   {
     insertQuery: 'in:',
     description: 'チャンネル名を指定',
@@ -54,18 +61,18 @@ const querySuggestions = [
   {
     insertQuery: 'before:',
     description: '特定の日時以前のメッセージ',
-    example: 'before:2020-01-23, before:2020-01-23T00:00'
+    example: `before:2020-01-23${
+      !isMobile.value ? ', before:2020-01-23T00:00' : ''
+    }`
   },
   {
     insertQuery: 'after:',
     description: '特定の日時以降のメッセージ',
-    example: 'after:2020-01-23, after:2020-01-23T00:00'
+    example: `after:2020-01-23${
+      !isMobile.value ? ', after:2020-01-23T00:00' : ''
+    }`
   }
-]
-
-const emit = defineEmits<{
-  (e: 'queryInsert'): void
-}>()
+])
 
 const { currentInput, searchHistories, settleQuery, removeSearchHistory } =
   useCommandPalette()

diff --git a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
@@ -1,16 +1,23 @@
 <template>
-  <div :class="$style.container" @click="onClick">
-    <span :class="$style.description">{{ description }}</span>
-    <span :class="$style.example">{{ example }}</span>
+  <div
+    :class="$style.container"
+    :data-is-mobile="$boolAttr(isMobile)"
+    @click="onClick"
+  >
+    <p :class="$style.description">{{ description }}</p>
+    <p :class="$style.example">{{ example }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useResponsiveStore } from '/@/store/ui/responsive'
 defineProps<{
   description: string
   example: string
 }>()
 
+const { isMobile } = useResponsiveStore()
+
 const emit = defineEmits<{
   (e: 'select'): void
 }>()
@@ -31,6 +38,14 @@ const onClick = () => {
   &:hover {
     @include background-secondary;
   }
+
+  &[data-is-mobile] {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
 }
 .description {
   @include size-body1;
@@ -39,5 +54,6 @@ const onClick = () => {
 .example {
   @include size-body2;
   @include color-ui-secondary;
+  margin-left: 12px;
 }
 </style>