diff options
author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2022-05-03 11:29:45 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-03 11:29:45 +0300 |
commit | fc826e98115b510313ddacbf6fef4ce8d041e373 (patch) | |
tree | 8989e40ef3f1fc4564b491aced115cc9897b5192 /apps/theming | |
parent | 0bceaee444c61a613c636e8bd3579c19764f0c66 (diff) | |
parent | 4e7989a83eafacbf4d12a714b0d27f66d1234640 (diff) |
Merge pull request #32213 from nextcloud/fix/theming-layout
Improve theming layout
Diffstat (limited to 'apps/theming')
-rw-r--r-- | apps/theming/lib/Themes/DarkTheme.php | 2 | ||||
-rw-r--r-- | apps/theming/src/UserThemes.vue | 5 | ||||
-rw-r--r-- | apps/theming/src/components/ItemPreview.vue | 26 |
3 files changed, 26 insertions, 7 deletions
diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index b2dc1dcea72..f5463d94fc4 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -45,7 +45,7 @@ class DarkTheme extends DefaultTheme implements ITheme { } public function getDescription(): string { - return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness. It is still under development, so please report any issues you may find.'); + return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); } public function getCSSVariables(): array { 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); } |