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

@@ -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?",

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;

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')" />
+          <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 :class="$style.subContent">
+        </div>
+        <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;

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;