diff options
| author | John Molakvoæ <skjnldsv@protonmail.com> | 2022-04-28 18:01:33 +0300 |
|---|---|---|
| committer | John Molakvoæ <skjnldsv@protonmail.com> | 2022-04-30 20:16:16 +0300 |
| commit | 3ce5f51c2aff53d068a22b87faa4e8be40ee11cc (patch) | |
| tree | f1534f58b21ef82fac46d8e010fa532cd9a212ea /apps | |
| parent | e9432b00d206110b62cc82c5b713c28df8ed848b (diff) | |
Improve theming layout
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/theming/src/UserThemes.vue | 5 | ||||
| -rw-r--r-- | apps/theming/src/components/ItemPreview.vue | 26 |
2 files changed, 25 insertions, 6 deletions
diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue index f78e63484d6..5128e2c6c8d 100644 --- a/apps/theming/src/UserThemes.vue +++ b/apps/theming/src/UserThemes.vue @@ -12,6 +12,9 @@ :unique="themes.length === 1" type="theme" @change="changeTheme" /> + </div> + + <div class="theming__preview-list"> <ItemPreview v-for="theme in fonts" :key="theme.id" :selected="theme.enabled" @@ -150,8 +153,8 @@ export default { }, } </script> -<style lang="scss" scoped> +<style lang="scss" scoped> .theming { // Limit width of settings sections for readability p { diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue index e7c5866b662..fac25ac7ae7 100644 --- a/apps/theming/src/components/ItemPreview.vue +++ b/apps/theming/src/components/ItemPreview.vue @@ -1,6 +1,6 @@ <template> - <div class="theming__preview"> - <div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" /> + <div :class="'theming__preview--' + theme.id" class="theming__preview"> + <div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" @click="onToggle" /> <div class="theming__preview-description"> <h3>{{ theme.title }}</h3> <p>{{ theme.description }}</p> @@ -80,14 +80,25 @@ export default { }, }, }, + + methods: { + onToggle() { + if (this.switchType === 'radio') { + this.checked = true + return + } + + // Invert state + this.checked = !this.checked + }, + }, } </script> <style lang="scss" scoped> -// We make previews on 16/10 screens -$ratio: 16; - .theming__preview { + // We make previews on 16/10 screens --ratio: 16; + position: relative; display: flex; justify-content: flex-start; @@ -103,6 +114,7 @@ $ratio: 16; flex-shrink: 0; height: calc(10px * var(--ratio)); margin-right: var(--gap); + cursor: pointer; border-radius: var(--border-radius); background-repeat: no-repeat; background-position: top left; @@ -118,6 +130,10 @@ $ratio: 16; } } + &--default { + grid-column: span 2; + } + &-warning { color: var(--color-warning); } |