feat(theming): Allow to configure primary color separate from background in admin settings

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 29 insertions, 39 deletions

diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index deb0a93a51a..166fdbc5f4b 100644
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -32,15 +32,32 @@
 				'background background__filepicker': true,
 				'background--active': backgroundImage === 'custom'
 			}"
-			:data-color-bright="invertTextColor(Theming.color)"
 			data-user-theming-background-custom
 			tabindex="0"
 			@click="pickFile">
 			{{ t('theming', 'Custom background') }}
-			<ImageEdit v-if="backgroundImage !== 'custom'" :size="26" />
+			<ImageEdit v-if="backgroundImage !== 'custom'" :size="20" />
 			<Check :size="44" />
 		</button>
 
+		<!-- Custom color picker -->
+		<NcColorPicker v-model="Theming.backgroundColor" @input="debouncePickColor">
+			<button :class="{
+					'icon-loading': loading === 'color',
+					'background background__color': true,
+					'background--active': backgroundImage === 'color'
+				}"
+				:data-color="Theming.backgroundColor"
+				:data-color-bright="invertTextColor(Theming.backgroundColor)"
+				:style="{ backgroundColor: Theming.backgroundColor, '--border-color': Theming.backgroundColor}"
+				data-user-theming-background-color
+				tabindex="0">
+				{{ t('theming', 'Plain background') /* TRANSLATORS: Background using a single color */ }}
+				<ColorPalette v-if="backgroundImage !== 'color'" :size="20" />
+				<Check :size="44" />
+			</button>
+		</NcColorPicker>
+
 		<!-- Default background -->
 		<button :aria-pressed="backgroundImage === 'default'"
 			:class="{
@@ -57,31 +74,6 @@
 			<Check :size="44" />
 		</button>
 
-		<!-- Custom color picker -->
-		<div class="background-color"
-			data-user-theming-background-color>
-			<NcColorPicker v-model="Theming.color"
-				@input="debouncePickColor">
-				<NcButton type="ternary">
-					{{ t('theming', 'Change color') }}
-				</NcButton>
-			</NcColorPicker>
-		</div>
-
-		<!-- Remove background -->
-		<button :aria-pressed="isBackgroundDisabled"
-			:class="{
-				'background background__delete': true,
-				'background--active': isBackgroundDisabled
-			}"
-			data-user-theming-background-clear
-			tabindex="0"
-			@click="removeBackground">
-			{{ t('theming', 'No background') }}
-			<Close v-if="!isBackgroundDisabled" :size="32" />
-			<Check :size="44" />
-		</button>
-
 		<!-- Background set selection -->
 		<button v-for="shippedBackground in shippedBackgrounds"
 			:key="shippedBackground.name"
@@ -93,7 +85,6 @@
 				'icon-loading': loading === shippedBackground.name,
 				'background--active': backgroundImage === shippedBackground.name
 			}"
-			:data-color-bright="shippedBackground.details.theming === 'dark'"
 			:data-user-theming-background-shipped="shippedBackground.name"
 			:style="{ backgroundImage: 'url(' + shippedBackground.preview + ')', '--border-color': shippedBackground.details.primary_color }"
 			tabindex="0"
@@ -112,12 +103,11 @@ import { Palette } from 'node-vibrant/lib/color.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Vibrant from 'node-vibrant'
 
 import Check from 'vue-material-design-icons/Check.vue'
-import Close from 'vue-material-design-icons/Close.vue'
 import ImageEdit from 'vue-material-design-icons/ImageEdit.vue'
+import ColorPalette from 'vue-material-design-icons/Palette.vue'
 
 const backgroundImage = loadState('theming', 'backgroundImage')
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
@@ -126,14 +116,14 @@ const defaultShippedBackground = loadState('theming', 'defaultShippedBackground'
 
 const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url
 
+console.warn(loadState('theming', 'data', {}))
 export default {
 	name: 'BackgroundSettings',
 
 	components: {
 		Check,
-		Close,
+		ColorPalette,
 		ImageEdit,
-		NcButton,
 		NcColorPicker,
 	},
 
@@ -175,11 +165,6 @@ export default {
 		isGlobalBackgroundDeleted() {
 			return themingDefaultBackground === 'backgroundColor'
 		},
-
-		isBackgroundDisabled() {
-			return this.backgroundImage === 'disabled'
-			|| !this.backgroundImage
-		},
 	},
 
 	methods: {
@@ -226,7 +211,7 @@ export default {
 		async update(data) {
 			// Update state
 			this.backgroundImage = data.backgroundImage
-			this.Theming.color = data.backgroundColor
+			this.Theming.backgroundColor = data.backgroundColor
 
 			// Notify parent and reload style
 			this.$emit('update:background')
@@ -359,14 +344,19 @@ export default {
 		height: 96px;
 		margin: 8px;
 		text-align: center;
+		word-wrap: break-word;
+		hyphens: auto;
 		border: 2px solid var(--color-main-background);
 		border-radius: var(--border-radius-large);
 		background-position: center center;
 		background-size: cover;
 
 		&__filepicker {
+			background-color: var(--color-main-text);
+			background-color: var(--color-background-dark);
+
 			&.background--active {
-				color: white;
+				color: var(--color-background-plain-text);
 				background-image: var(--image-background);
 			}
 		}