Merge pull request #4222 from traPtitech/feat/setting_browser

設定のブラウザタブのデザインの更新
traPtitech · Jan 30, 2024 · 6647db2 · 6647db2
2 parents 824045e + e2ba159
commit 6647db2
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 199 deletions.
diff --git a/src/components/Settings/BrowserTab/CitationNotification.vue b/src/components/Settings/BrowserTab/CitationNotification.vue
@@ -1,18 +1,14 @@
 <template>
-  <div>
-    <div :class="$style.eco">
-      <h3 :class="$style.header">引用通知</h3>
-      <a-toggle
-        :model-value="value"
-        :class="$style.toggle"
-        @update:model-value="toggleSetting"
-      />
-    </div>
-    <div :class="$style.content">
+  <div :class="$style.container">
+    <div :class="$style.description">
+      <h3>引用通知</h3>
       <p>
         引用されたときに通知をするかの設定です。この設定はすべての端末で共有されます。
       </p>
     </div>
+    <div>
+      <a-toggle :model-value="value" @update:model-value="toggleSetting" />
+    </div>
   </div>
 </template>
 
@@ -42,21 +38,16 @@ const toggleSetting = async () => {
 </script>
 
 <style lang="scss" module>
-.header {
-  margin-bottom: 8px;
-}
-.content {
-  margin-left: 12px;
-}
-.eco {
+.container {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
-  h3 {
-    margin: 0;
-  }
-  .toggle {
-    margin-left: 12px;
-  }
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 </style>
diff --git a/src/components/Settings/BrowserTab/EcoMode.vue b/src/components/Settings/BrowserTab/EcoMode.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>
-    <div :class="$style.eco">
-      <h3 :class="$style.header">省エネモード</h3>
-      <a-toggle v-model="value" :class="$style.toggle" />
-    </div>
-    <div :class="$style.content">
+  <div :class="$style.container">
+    <div :class="$style.description">
+      <h3>省エネモード</h3>
       <p>
         省エネモードがONの場合、スタンプエフェクトのアニメーションを表示しません
       </p>
     </div>
+    <div>
+      <a-toggle v-model="value" />
+    </div>
   </div>
 </template>
 
@@ -28,21 +28,16 @@ const value = useModelValueSyncer(props, emit)
 </script>
 
 <style lang="scss" module>
-.header {
-  margin-bottom: 8px;
-}
-.content {
-  margin-left: 12px;
-}
-.eco {
+.container {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
-  h3 {
-    margin: 0;
-  }
-  .toggle {
-    margin-left: 12px;
-  }
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 </style>
diff --git a/src/components/Settings/BrowserTab/ModifierKeys.vue b/src/components/Settings/BrowserTab/ModifierKeys.vue
@@ -0,0 +1,75 @@
+<template>
+  <div :class="$style.container">
+    <h3>修飾キーとして利用するキー</h3>
+    <div :class="$style.checkbox" :data-is-checked="shift">
+      <form-checkbox v-model="shift" :label="getModifierKeyName('shift')" />
+    </div>
+    <div :class="$style.checkbox" :data-is-checked="alt">
+      <form-checkbox v-model="alt" :label="getModifierKeyName('alt')" />
+    </div>
+    <div :class="$style.checkbox" :data-is-checked="ctrl">
+      <form-checkbox v-model="ctrl" :label="getModifierKeyName('ctrl')" />
+    </div>
+    <div :class="$style.checkbox" :data-is-checked="macCtrl">
+      <form-checkbox
+        v-if="macFlag"
+        v-model="macCtrl"
+        :label="getModifierKeyName('macCtrl')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SendKeys } from '/@/store/app/browserSettings'
+import { isMac } from '/@/lib/dom/browser'
+import { useModelObjectSyncer } from '/@/composables/useModelSyncer'
+import FormCheckbox from '/@/components/UI/FormCheckbox.vue'
+
+const props = defineProps<{
+  modifierKey: SendKeys
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modifierKey', _val: SendKeys): void
+}>()
+
+const windowsModifierKeyTable: Record<keyof SendKeys, string> = {
+  alt: 'Alt',
+  ctrl: 'Ctrl',
+  shift: 'Shift',
+  macCtrl: ''
+}
+const macModifierKeyTable: Record<keyof SendKeys, string> = {
+  alt: '⌥(Option)',
+  ctrl: '⌘(Command)',
+  shift: 'Shift',
+  macCtrl: 'Ctrl'
+}
+
+const { shift, alt, ctrl, macCtrl } = useModelObjectSyncer(
+  props,
+  emit,
+  'modifierKey'
+)
+
+const macFlag = isMac()
+const getModifierKeyName = (key: keyof SendKeys) => {
+  return macFlag ? macModifierKeyTable[key] : windowsModifierKeyTable[key]
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.checkbox {
+  font-weight: bold;
+  &[data-is-checked='false'] {
+    opacity: 0.5;
+  }
+}
+</style>
diff --git a/src/components/Settings/BrowserTab/NotificationState.vue b/src/components/Settings/BrowserTab/NotificationState.vue
@@ -1,27 +1,26 @@
 <template>
-  <div>
-    <h3 :class="$style.header">この端末/ブラウザでの通知: {{ status }}</h3>
-    <div :class="$style.content">
-      <form-button
-        v-if="permission === 'default'"
-        label="設定"
-        @click="requestPermission"
-      />
-      <p v-else>ブラウザや端末の設定から変更できます</p>
+  <div :class="$style.container">
+    <div :class="$style.description">
+      <h3>この端末/ブラウザでの通知</h3>
+      <div>
+        <form-button
+          v-if="permission === 'default'"
+          label="設定"
+          @click="requestPermission"
+        />
+        <p v-else>ブラウザや端末の設定から変更できます</p>
+      </div>
+    </div>
+    <div>
+      <a-toggle :model-value="permission === 'granted'" disabled />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { requestNotificationPermission } from '/@/lib/notification/requestPermission'
-
-const statusTable: Record<NotificationPermission | '', string> = {
-  default: '未設定（通知は来ません）',
-  granted: '許可',
-  denied: '拒否',
-  '': '不明'
-}
+import AToggle from '/@/components/UI/AToggle.vue'
 
 const useNotificationPermission = () => {
   const permission = ref<NotificationPermission>()
@@ -33,8 +32,6 @@ const useNotificationPermission = () => {
     permission.value = await requestNotificationPermission()
   }
 
-  const status = computed(() => statusTable[permission.value ?? ''])
-
   return { permission, requestPermission, status }
 }
 </script>
@@ -46,10 +43,16 @@ const { permission, status, requestPermission } = useNotificationPermission()
 </script>
 
 <style lang="scss" module>
-.header {
-  margin-bottom: 8px;
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
 }
-.content {
-  margin-left: 12px;
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 </style>
diff --git a/src/components/Settings/BrowserTab/OpenMode.vue b/src/components/Settings/BrowserTab/OpenMode.vue
@@ -1,34 +1,28 @@
 <template>
-  <div>
-    <h3 :class="$style.header">起動時チャンネル設定</h3>
-    <div :class="$style.content">
-      <div :class="$style.channel">
-        <form-radio
-          v-model="openModeValue"
-          label="最後に開いたチャンネル"
-          input-value="lastOpen"
-        />
-      </div>
-      <div :class="$style.channel">
-        <form-radio
-          v-model="openModeValue"
-          label="特定のチャンネル"
-          input-value="particular"
-        />
-        <form-selector
-          v-if="openMode === 'particular'"
-          v-model="openChannelNameValue"
-          :options="channelOptions"
-          :class="$style.selector"
-        />
-      </div>
+  <div :class="$style.container">
+    <div :class="$style.description">
+      <h3>起動時チャンネル設定</h3>
+      <p>
+        特定のチャンネルを指定します。OFFの場合は最後に開いたチャンネルが設定されます。
+      </p>
+      <form-selector
+        v-if="openMode === 'particular'"
+        v-model="openChannelNameValue"
+        :options="channelOptions"
+      />
+    </div>
+    <div>
+      <a-toggle
+        :model-value="openModeValue === 'particular'"
+        @update:model-value="toggleOpenMode"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import AToggle from '/@/components/UI/AToggle.vue'
 import FormSelector from '/@/components/UI/FormSelector.vue'
-import FormRadio from '/@/components/UI/FormRadio.vue'
 import type { OpenMode } from '/@/store/app/browserSettings'
 import useChannelPath from '/@/composables/useChannelPath'
 import useChannelOptions from '/@/composables/useChannelOptions'
@@ -54,25 +48,30 @@ const { channelIdToPathString } = useChannelPath()
 const openModeValue = useModelSyncer(props, emit, 'openMode')
 const openChannelNameValue = useModelSyncer(props, emit, 'openChannelName')
 
+const toggleOpenMode = () => {
+  if (openModeValue.value === 'lastOpen') {
+    openModeValue.value = 'particular'
+  } else {
+    openModeValue.value = 'lastOpen'
+  }
+}
+
 const { channelOptions } = useChannelOptions(undefined, channel =>
   channel ? channelIdToPathString(channel.id) : '(unknown)'
 )
 </script>
 
 <style lang="scss" module>
-.header {
-  margin-bottom: 8px;
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
 }
-.content {
-  margin-left: 12px;
-}
-.channel {
-  margin-bottom: 12px;
-}
-.selector {
-  margin: {
-    top: 4px;
-    left: 12px;
-  }
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 </style>