From 3ce5f51c2aff53d068a22b87faa4e8be40ee11cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@protonmail.com>
Date: Thu, 28 Apr 2022 17:01:33 +0200
Subject: Improve theming layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 apps/theming/src/UserThemes.vue             |  5 ++++-
 apps/theming/src/components/ItemPreview.vue | 26 +++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

(limited to 'apps')

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);
 	}
-- 
cgit v1.2.3