ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

Fix edit theme dialog layout again (#2192)

Browse Source 
* 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>
This commit is contained in:
3gf8jv4dv
2024-12-21 23:52:15 +08:00
committed by GitHub
co-authored by lyswhut
parent db8ad1e8eb
commit 4a174c0084
4 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/Setting/components/SettingBasic.vue
+2 -2
View File
@@ -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
+9 -11
View File
@@ -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;
src/renderer/views/Setting/components/ThemeSelectorModal.vue
+2 -2
View File
@@ -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;