コメント欄

traPtitech · Apr 26, 2024 · 18f898a · 18f898a
1 parent 97d9d35
commit 18f898a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 92 deletions.
diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
@@ -13,17 +13,16 @@ const { comment, isSending, submit } = useNewComment(request.value?.id ?? '')
 </script>
 
 <template>
-  <form class="mx-4 w-full">
-    <MarkdownTextarea v-model="comment" placeholder="コメント" />
-    <div class="mt-1">
+  <div class="w-full">
+    <MarkdownTextarea v-model="comment">
       <SimpleButton
-        class="ml-auto"
         :disabled="isSending"
         font-size="md"
         padding="sm"
-        @click.prevent="submit">
+        type="success"
+        @click="submit">
         コメントする
       </SimpleButton>
-    </div>
-  </form>
+    </MarkdownTextarea>
+  </div>
 </template>
diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
@@ -9,6 +9,7 @@ import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 
 import CommentLog from './CommentLog.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
+import NewComment from './NewComment.vue'
 
 type CommentWithType = RequestComment & { type: 'comment' }
 type StatusWithType = RequestStatusDetail & { type: 'statusChange' }

diff --git a/src/components/shared/InputTextarea.vue b/src/components/shared/InputTextarea.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 <template>
   <textarea
     ref="textareaRef"
-    class="bg-background min-h-32 rounded border border-gray-300 px-1"
+    class="bg-background min-h-32 rounded border border-gray-300 px-3 py-2"
     :placeholder="props.placeholder"
     :required="required"
     :value="props.modelValue"

diff --git a/src/components/shared/MarkdownTextarea.vue b/src/components/shared/MarkdownTextarea.vue
@@ -24,16 +24,15 @@ const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 const currentTab = ref<TabType>('input')
 const selectedTemplate = ref('')
 
-const templateOptions = computed(() => {
-  return (
+const templateOptions = computed(
+  () =>
     props.templates?.map(template => {
       return {
         key: template.name,
         value: template.name
       }
     }) ?? []
-  )
-})
+)
 
 function setTemplate(template: string) {
   const foundTemplate = props.templates?.find(t => t.name === template)
@@ -48,43 +47,53 @@ function changeCurrentTab(tab: TabType) {
 </script>
 
 <template>
-  <div>
-    <div class="flex gap-2">
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'input' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('input')">
-        入力
-      </button>
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'preview' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('preview')">
-        プレビュー
-      </button>
+  <div class="flex flex-col rounded border border-gray-300">
+    <div
+      class="flex items-center justify-between rounded-t bg-gray-200 px-4 pt-3">
+      <div class="flex items-center">
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'input'
+              ? 'bg-white border-t border-x border-gray-300'
+              : 'bg-gray-200'
+          }`"
+          @click="changeCurrentTab('input')">
+          入力
+        </button>
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'preview'
+              ? 'bg-white border-t border-x border-gray-300'
+              : 'bg-gray-200'
+          }`"
+          @click="changeCurrentTab('preview')">
+          プレビュー
+        </button>
+      </div>
       <InputSelectSingle
         v-if="props.templates !== undefined"
         v-model="selectedTemplate"
-        class="m-1 ml-auto inline-block w-1/3"
+        class="inline-block"
         :options="templateOptions"
         placeholder="テンプレートを選択"
         @option:selected="setTemplate(selectedTemplate)">
       </InputSelectSingle>
     </div>
-    <div>
+    <div class="px-5 py-3">
       <InputTextarea
         v-if="currentTab === 'input'"
         :auto-focus="autoFocus"
-        class="min-h-40 w-full"
+        class="min-h-40 w-full bg-gray-200"
         :model-value="modelValue"
         :placeholder="placeholder"
         @update:model-value="emit('update:modelValue', $event)" />
       <MarkdownIt
         v-if="currentTab === 'preview'"
-        class="min-h-40 w-full overflow-y-scroll border border-gray-500 px-1"
+        class="min-h-40 w-full overflow-y-scroll rounded bg-gray-200 border border-gray-300 px-3 py-2"
         :text="modelValue" />
+      <div class="flex justify-end pt-3">
+        <slot />
+      </div>
     </div>
   </div>
 </template>