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; margin-right: 0.5em;
} }
.extra-content {
display: flex;
flex-grow: 1;
}
} }
} }

View file

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

View file

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

View file

@ -268,13 +268,6 @@
} }
} }
.apply-container {
justify-content: center;
position: absolute;
bottom: 8px;
right: 5px;
}
.radius-item, .radius-item,
.color-item { .color-item {
min-width: 20em; min-width: 20em;
@ -334,16 +327,25 @@
padding: 20px; padding: 20px;
} }
.apply-container {
.btn {
min-height: 28px;
min-width: 10em;
padding: 0 2em;
}
}
.btn { .btn {
margin-left: .25em; margin-left: .25em;
margin-right: .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,21 +1016,26 @@
</tab-switcher> </tab-switcher>
</keep-alive> </keep-alive>
<div class="apply-container"> <portal
<button v-if="isActive"
class="btn button-default submit" to="unscrolled-content"
:disabled="!themeValid" >
@click="setCustomTheme" <div class="apply-container">
> <button
{{ $t('general.apply') }} class="btn button-default submit"
</button> :disabled="!themeValid"
<button @click="setCustomTheme"
class="btn button-default" >
@click="clearAll" {{ $t('general.apply') }}
> </button>
{{ $t('settings.style.switcher.reset') }} <button
</button> class="btn button-default"
</div> @click="clearAll"
>
{{ $t('settings.style.switcher.reset') }}
</button>
</div>
</portal>
</div> </div>
</template> </template>

View file

@ -47,6 +47,12 @@ export default Vue.component('tab-switcher', {
return this.active 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 () { settingsModalVisible () {
return this.settingsModalState === 'visible' return this.settingsModalState === 'visible'
}, },