Fix various theming bugs

Signed-off-by: Christopher Ng <chrng8@gmail.com>

5 files changed, 17 insertions, 32 deletions

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index da4495158f3..3e3b0afed16 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script>
-import { generateOcsUrl, imagePath } from '@nextcloud/router'
+import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
@@ -83,8 +83,6 @@ import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import BackgroundSettings from './components/BackgroundSettings.vue'
 import ItemPreview from './components/ItemPreview.vue'
 
-import { getBackgroundUrl } from '../src/helpers/getBackgroundUrl.js'
-
 const availableThemes = loadState('theming', 'themes', [])
 const enforceTheme = loadState('theming', 'enforceTheme', '')
 const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
@@ -111,24 +109,12 @@ export default {
 			enforceTheme,
 			shortcutsDisabled,
 			background,
+			backgroundVersion,
 			themingDefaultBackground,
 		}
 	},
 
 	computed: {
-		backgroundImage() {
-			return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
-		},
-		backgroundStyle() {
-			if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
-				|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
-				return null
-			}
-
-			return {
-				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
-			}
-		},
 		themes() {
 			return this.availableThemes.filter(theme => theme.type === 1)
 		},
@@ -183,7 +169,9 @@ export default {
 	methods: {
 		updateBackground(data) {
 			this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
+			this.backgroundVersion = data.version
 			this.updateGlobalStyles()
+			this.$emit('update:background')
 		},
 		updateGlobalStyles() {
 			// Override primary-invert-if-bright and color-primary-text if background is set
@@ -199,17 +187,6 @@ export default {
 				// document.body.removeAttribute('data-theme-light')
 				// document.body.setAttribute('data-theme-dark', 'true')
 			}
-
-			const themeElements = [document.documentElement, document.querySelector('#header'), document.querySelector('body')]
-			for (const element of themeElements) {
-				if (this.background === 'default') {
-					element.style.setProperty('--image-main-background', `url('${imagePath('core', 'app-background.jpg')}')`)
-				} else if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
-					element.style.setProperty('--image-main-background', undefined)
-				} else {
-					element.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
-				}
-			}
 		},
 		changeTheme({ enabled, id }) {
 			// Reset selected and select new one
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index 3de68d5abed..359723bcf49 100644
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -38,7 +38,7 @@
 			{{ t('theming', 'Default image') }}
 		</button>
 		<button class="background color"
-			:class="{ active: background === 'custom' }"
+			:class="{ active: background.startsWith('#') }"
 			tabindex="0"
 			@click="pickColor">
 			{{ t('theming', 'Plain background') }}
diff --git a/apps/theming/src/helpers/getBackgroundUrl.js b/apps/theming/src/helpers/getBackgroundUrl.js
index 2e0088f6d30..88a3ab57291 100644
--- a/apps/theming/src/helpers/getBackgroundUrl.js
+++ b/apps/theming/src/helpers/getBackgroundUrl.js
@@ -22,8 +22,6 @@
  *
  */
 
-// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/getBackgroundUrl.js`
-
 import { generateUrl } from '@nextcloud/router'
 import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'
 
diff --git a/apps/theming/src/helpers/prefixWithBaseUrl.js b/apps/theming/src/helpers/prefixWithBaseUrl.js
index 07e4986593c..d2f42c93549 100644
--- a/apps/theming/src/helpers/prefixWithBaseUrl.js
+++ b/apps/theming/src/helpers/prefixWithBaseUrl.js
@@ -20,8 +20,6 @@
  *
  */
 
-// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/prefixWithBaseUrl.js`
-
 import { generateFilePath } from '@nextcloud/router'
 
 export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url
diff --git a/apps/theming/src/settings.js b/apps/theming/src/settings.js
index 45a75e53ea5..9b846117947 100644
--- a/apps/theming/src/settings.js
+++ b/apps/theming/src/settings.js
@@ -30,3 +30,15 @@ Vue.prototype.t = t
 const View = Vue.extend(App)
 const theming = new View()
 theming.$mount('#theming')
+
+theming.$on('update:background', () => {
+	// Refresh server-side generated theming CSS
+	[...document.head.querySelectorAll('link.theme')].forEach(theme => {
+		const url = new URL(theme.href)
+		url.searchParams.set('v', Date.now())
+		const newTheme = theme.cloneNode()
+		newTheme.href = url.toString()
+		newTheme.onload = () => theme.remove()
+		document.head.append(newTheme)
+	})
+})