表示ちょっと直した

traPtitech · Nov 11, 2023 · 7e45092 · 7e45092
1 parent 0e6030d
commit 7e45092
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/src/components/Modal/Common/ModalHeader.vue b/src/components/Modal/Common/ModalHeader.vue
@@ -3,11 +3,16 @@
     <modal-return-button v-if="returnButton" :class="$style.returnButton" />
     <div :class="$style.content">
       <h1 :class="$style.title">
-        <a-icon v-if="iconName" :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
-          title
-        }}
+        <a-icon
+          v-if="iconName"
+          :class="$style.icon"
+          :name="iconName"
+          :mdi="iconMdi"
+        />{{ title }}
       </h1>
-      <h2 :class="$style.subtitle"><slot name="subtitle" /></h2>
+      <h2 :class="$style.subtitle" :data-has-icon="$boolAttr(!iconName)">
+        <slot name="subtitle" />
+      </h2>
     </div>
   </div>
 </template>
@@ -69,6 +74,10 @@ withDefaults(
     weight: 500;
     size: 0.875rem;
   }
+
+  &[data-has-icon] {
+    padding-left: 0;
+  }
 }
 .icon {
   margin-right: 16px;

diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -133,6 +133,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   gap: 16px;
 }
 .leftContainer {
+  min-width: 136px;
   width: 136px;
   height: 136px;
   margin: 8px 0;

diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -186,6 +186,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   gap: 16px;
 }
 .leftContainer {
+  min-width: 136px;
   width: 136px;
   height: 136px;
   margin: 8px 0;
@@ -204,8 +205,8 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
 
 .note {
   @include color-ui-secondary;
-  margin-left: 12px;
   margin-bottom: 12px;
+  font-size: 12px;
 }
 .buttonContainer {
   display: flex;

diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
@@ -12,12 +12,9 @@
           @{{ stamp.creatorId }}
         </p>
       </div>
-      <icon-button
-        icon-name="dots-horizontal"
-        icon-mdi
-        :class="$style.dotsButon"
-        @click="onDotsClick"
-      />
+      <button :class="$style.dotsButton" @click="onDotsClick">
+        <a-icon name="dots-horizontal" mdi />
+      </button>
     </div>
     <stamp-context-menu
       v-if="contextMenuPosition"
@@ -31,10 +28,10 @@
 <script lang="ts" setup>
 import type { Stamp } from '@traptitech/traq'
 import { computed } from 'vue'
-import IconButton from '/@/components/UI/IconButton.vue'
 import { buildFilePath } from '/@/lib/apis'
 import useContextMenu from '/@/composables/useContextMenu'
 import StampContextMenu from './StampContextMenu.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -88,9 +85,13 @@ const onDotsClick = (e: MouseEvent) => {
   text-overflow: ellipsis;
 }
 
-.dotsButon {
+.dotsButton {
   @include color-ui-tertiary;
   padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+
   &:hover {
     @include color-ui-secondary;
     @include background-secondary;