ショートカットキー割り当てダイアログのリデザイン (VOICEVOX#2348)

Co-authored-by: Hiroshiba <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/Base/BaseButton.vue

@@ -31,7 +31,7 @@ defineEmits<{
 
 .button {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   text-wrap: nowrap;
   height: vars.$size-control;

src/components/Base/BaseIconButton.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { TooltipProvider } from "radix-vue";
+import BaseIconButton from "./BaseIconButton.vue";
+
+const meta: Meta<typeof BaseIconButton> = {
+  component: BaseIconButton,
+  render: (args) => ({
+    components: { BaseIconButton, TooltipProvider },
+    setup() {
+      return { args };
+    },
+    template: `
+    <TooltipProvider>
+      <BaseIconButton v-bind="args" />
+    </TooltipProvider>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseIconButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    icon: "settings",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled",
+    icon: "settings",
+    disabled: true,
+  },
+};

src/components/Base/BaseIconButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <BaseTooltip :label>
+    <button
+      class="button"
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    >
+      <!-- 暫定でq-iconを使用 -->
+      <QIcon v-if="icon" :name="icon" size="sm" />
+    </button>
+  </BaseTooltip>
+</template>
+
+<script setup lang="ts">
+import BaseTooltip from "./BaseTooltip.vue";
+
+defineProps<{
+  icon: string;
+  label: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.button {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: vars.$size-control;
+  width: vars.$size-control;
+  border-radius: vars.$radius-1;
+  color: colors.$display;
+  background-color: colors.$clear;
+  cursor: pointer;
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:disabled {
+    // Quasar側のopacity: 0.6 !important;を上書きするためimportantを付与
+    opacity: 0.4 !important;
+  }
+}
+</style>

src/components/Base/BaseScrollArea.vue

@@ -52,6 +52,7 @@ import {
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
+  z-index: vars.$z-index-scrollbar;
 }
 
 .ScrollAreaScrollbar[data-orientation="vertical"] {

src/components/Dialog/HotkeyRecordingDialog.vue

@@ -44,7 +44,7 @@
         />
         <QBtn
           padding="xs md"
-          label="ショートカットキーを未設定にする"
+          label="ショートカットキーを未割り当てにする"
           unelevated
           color="surface"
           textColor="display"