From 4a174c0084cfb5c0bb33072379e5f608db461e08 Mon Sep 17 00:00:00 2001
From: 3gf8jv4dv <3gf8jv4dv@gmail.com>
Date: Sat, 21 Dec 2024 23:52:15 +0800
Subject: [PATCH] Fix edit theme dialog layout again (#2192)

* Fix edit theme dialog layout again

Ensures that the layout looks better and doesn't get out of place in the
smallest windows and largest fonts, as well as in both English and
Chinese environments.

* update

* update

* fix

---------

Co-authored-by: lyswhut <lyswhut@qq.com>
---
 src/lang/en-us.json                           | 12 +++++------
 .../views/Setting/components/SettingBasic.vue |  4 ++--
 .../components/ThemeEditModal/index.vue       | 20 +++++++++----------
 .../Setting/components/ThemeSelectorModal.vue |  4 ++--
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index 07f625cd..ae1bf573 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -377,6 +377,9 @@
   "setting__desktop_lyric_font": "Lyric Font",
   "setting__desktop_lyric_font_default": "Default",
   "setting__desktop_lyric_font_weight": "Bold Font",
+  "setting__desktop_lyric_font_weight_extended": "Translated & romanized lyrics",
+  "setting__desktop_lyric_font_weight_font": "Verbatim lyrics",
+  "setting__desktop_lyric_font_weight_line": "Progressive lyrics",
   "setting__desktop_lyric_fullscreen_hide": "Hide lyric window when in fullscreen",
   "setting__desktop_lyric_hover_hide": "Decrease lyric window transparency when the mouse moves into the lyric window",
   "setting__desktop_lyric_hover_hide_tip": "This feature has platform compatibility issues.",
@@ -408,8 +411,8 @@
   "setting__download_enable": "Enable Download",
   "setting__download_lyric": "Lyric Download",
   "setting__download_lyric_format": "Encoding Format of Downloaded Lyric Files",
-  "setting__download_lyric_format_tip": "Try to select GBK format when Chinese garbled characters appear on some devices.",
   "setting__download_lyric_format_gbk": "GBK",
+  "setting__download_lyric_format_tip": "Try to select GBK format when Chinese garbled characters appear on some devices.",
   "setting__download_lyric_format_utf8": "UTF-8",
   "setting__download_lyric_title": "Select whether to download the lyrics file",
   "setting__download_max_num": "Number of Simultaneous Downloads",
@@ -548,9 +551,6 @@
   "setting__search_focus_search_box": "Automatically focus search box on startup",
   "setting__search_history": "Enable Search History",
   "setting__search_hot": "Enable Top Searches",
-  "setting__desktop_lyric_font_weight_extended": "Translated & romanized lyrics",
-  "setting__desktop_lyric_font_weight_font": "Verbatim lyrics",
-  "setting__desktop_lyric_font_weight_line": "Progressive lyrics",
   "setting__sync": "Data Sync",
   "setting__sync_client_address": "Current device address: {address}",
   "setting__sync_client_host": "Sync service address",
@@ -649,7 +649,7 @@
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
   "tag__lossless_24bit": "24bit",
-  "theme_add": "Add a theme",
+  "theme_add": "Add theme",
   "theme_auto": "Auto",
   "theme_auto_tip": "Right-click to open the light and dark theme options window",
   "theme_black": "Black",
@@ -680,7 +680,7 @@
   "theme_edit_modal__pick_color": "Choose color",
   "theme_edit_modal__pick_last_color": "Use previous color",
   "theme_edit_modal__pick_save": "Confirm",
-  "theme_edit_modal__preview": "Preview Theme",
+  "theme_edit_modal__preview": "Preview",
   "theme_edit_modal__primary": "Theme Color",
   "theme_edit_modal__remove": "Remove",
   "theme_edit_modal__remove_tip": "Do you really want to remove this theme?",
diff --git a/src/renderer/views/Setting/components/SettingBasic.vue b/src/renderer/views/Setting/components/SettingBasic.vue
index 846cb18e..05884ed9 100644
--- a/src/renderer/views/Setting/components/SettingBasic.vue
+++ b/src/renderer/views/Setting/components/SettingBasic.vue
@@ -361,11 +361,11 @@ export default {
     align-items: center;
     cursor: pointer;
     // color: var(--color-primary);
-    margin-right: 30px;
+    margin-right: 8px;
     transition: .3s ease;
     transition-property: color, opacity;
     margin-bottom: 18px;
-    width: 56px;
+    width: 86px;
 
     &:hover {
       opacity: .7;
diff --git a/src/renderer/views/Setting/components/ThemeEditModal/index.vue b/src/renderer/views/Setting/components/ThemeEditModal/index.vue
index ebbf3c1c..2202c1ac 100644
--- a/src/renderer/views/Setting/components/ThemeEditModal/index.vue
+++ b/src/renderer/views/Setting/components/ThemeEditModal/index.vue
@@ -100,17 +100,16 @@
           </div>
         </div>
       </div>
-      <!-- <div :class="$style.note">
-        <p>{{ $t('theme_selector_modal__title_tip') }}</p>
-      </div> -->
       <div :class="$style.footer">
-        <div :class="$style.subContent">
+        <div :class="$style.subContent" style="flex-wrap: wrap;">
           <base-input v-model="themeName" :class="$style.input" :placeholder="$t('theme_selector_modal__theme_name')" />
-          <base-checkbox id="theme_edit_modal__dark" v-model="isDark" :class="$style.checkbox" :label="$t('theme_edit_modal__dark')" @change="handleDark" />
-          <base-checkbox id="theme_edit_modal__dark_font" v-model="isDarkFont" :class="$style.checkbox" :label="$t('theme_edit_modal__dark_font')" @change="handleDarkFont" />
-          <base-checkbox id="theme_edit_modal__preview" v-model="preview" :class="$style.checkbox" :label="$t('theme_edit_modal__preview')" @change="handlePreview" />
+          <div :class="$style.subContent" style="flex-wrap: wrap;">
+            <base-checkbox id="theme_edit_modal__dark" v-model="isDark" :class="$style.checkbox" :label="$t('theme_edit_modal__dark')" @change="handleDark" />
+            <base-checkbox id="theme_edit_modal__dark_font" v-model="isDarkFont" :class="$style.checkbox" :label="$t('theme_edit_modal__dark_font')" @change="handleDarkFont" />
+            <base-checkbox id="theme_edit_modal__preview" v-model="preview" :class="$style.checkbox" :label="$t('theme_edit_modal__preview')" @change="handlePreview" />
+          </div>
         </div>
-        <div :class="$style.subContent">
+        <div :class="$style.subContent" style="flex: none;">
           <base-btn v-if="themeId" :class="$style.btn" @click="handleRemove">{{ $t('theme_edit_modal__remove') }}</base-btn>
           <base-btn v-if="themeId" :class="$style.btn" @click="handleSaveNew">{{ $t('theme_edit_modal__save_new') }}</base-btn>
           <!-- <base-btn :class="$style.btn" @click="handleCancel">{{ $t('btn_cancel') }}</base-btn> -->
@@ -595,7 +594,7 @@ export default {
 }
 .item {
   padding: 15px 20px 0;
-  width: 60px;
+  width: 74px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
@@ -621,7 +620,6 @@ export default {
 .label {
   padding-top: 10px;
   text-align: center;
-  line-height: 1.1;
 }
 
 .bg {
@@ -769,7 +767,7 @@ export default {
 .footer {
   padding: 15px;
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
diff --git a/src/renderer/views/Setting/components/ThemeSelectorModal.vue b/src/renderer/views/Setting/components/ThemeSelectorModal.vue
index c647c986..02d6d60c 100644
--- a/src/renderer/views/Setting/components/ThemeSelectorModal.vue
+++ b/src/renderer/views/Setting/components/ThemeSelectorModal.vue
@@ -170,10 +170,10 @@ export default {
     align-items: center;
     cursor: pointer;
     // color: var(--color-primary);
-    margin-right: 30px;
+    margin-right: 4px;
     transition: color .3s ease;
     margin-bottom: 15px;
-    width: 56px;
+    width: 86px;
 
     &:last-child {
       margin-right: 0;