Merge pull request #32213 from nextcloud/fix/theming-layout

Improve theming layout

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);
 	}