diff options
Diffstat (limited to 'apps/theming/src/components/ItemPreview.vue')
| -rw-r--r-- | apps/theming/src/components/ItemPreview.vue | 26 |
1 files changed, 21 insertions, 5 deletions
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); } |