Fix overlapping buttons in Theme settings

This commit is contained in:
Tusooa Zhu 2022-03-24 18:01:20 -04:00
parent aa0b2e0723
commit e58422889b
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 57 additions and 30 deletions

View file

@ -54,5 +54,10 @@
>* {
margin-right: 0.5em;
}
.extra-content {
display: flex;
flex-grow: 1;
}
}
}

View file

@ -112,6 +112,10 @@
<Checkbox v-model="expertLevel">
{{ $t("settings.expert_mode") }}
</Checkbox>
<portal-target
class="extra-content"
name="unscrolled-content"
/>
</div>
</div>
</Modal>

View file

@ -378,6 +378,11 @@ export default {
// To separate from other random JSON files and possible future source formats
_pleroma_theme_version: 2, theme, source
}
},
isActive () {
const tabSwitcher = this.$parent
console.log(this.$parent)
return tabSwitcher ? tabSwitcher.isActive('theme') : false
}
},
components: {

View file

@ -268,13 +268,6 @@
}
}
.apply-container {
justify-content: center;
position: absolute;
bottom: 8px;
right: 5px;
}
.radius-item,
.color-item {
min-width: 20em;
@ -334,16 +327,25 @@
padding: 20px;
}
.apply-container {
.btn {
min-height: 28px;
min-width: 10em;
padding: 0 2em;
}
}
.btn {
margin-left: .25em;
margin-right: .25em;
}
}
.extra-content {
.apply-container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-grow: 1;
.btn {
flex-grow: 1;
min-height: 28px;
min-width: 0;
max-width: 10em;
padding: 0;
}
}
}

View file

@ -1016,6 +1016,10 @@
</tab-switcher>
</keep-alive>
<portal
v-if="isActive"
to="unscrolled-content"
>
<div class="apply-container">
<button
class="btn button-default submit"
@ -1031,6 +1035,7 @@
{{ $t('settings.style.switcher.reset') }}
</button>
</div>
</portal>
</div>
</template>

View file

@ -47,6 +47,12 @@ export default Vue.component('tab-switcher', {
return this.active
}
},
isActive () {
return tabName => {
const isWanted = slot => slot.data && slot.data.attrs['data-tab-name'] === tabName
return this.$slots.default.findIndex(isWanted) === this.activeIndex
}
},
settingsModalVisible () {
return this.settingsModalState === 'visible'
},