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>