Dynamically generate background image url

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/dashboard/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app-dashboard">
+	<div id="app-dashboard" :style="{ backgroundImage: `url(${backgroundImage})` }">
 		<h2>{{ greeting.text }}</h2>
 		<div class="statuses">
 			<div v-for="status in registeredStatus"
@@ -62,7 +62,8 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { Modal } from '@nextcloud/vue'
 import Draggable from 'vuedraggable'
 import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
+import { generateUrl, generateFilePath } from '@nextcloud/router'
+import isMobile from './mixins/isMobile'
 
 const panels = loadState('dashboard', 'panels')
 const firstRun = loadState('dashboard', 'firstRun')
@@ -73,6 +74,9 @@ export default {
 		Modal,
 		Draggable,
 	},
+	mixins: [
+		isMobile,
+	],
 	data() {
 		return {
 			timer: new Date(),
@@ -90,6 +94,13 @@ export default {
 		}
 	},
 	computed: {
+		backgroundImage() {
+			const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+			if (window.OCA.Accessibility.theme === 'dark') {
+				return !isMobile ? prefixWithBaseUrl('flickr-148302424@N05-36591009215.jpg?v=1') : prefixWithBaseUrl('flickr-148302424@N05-36591009215-mobile.jpg?v=1')
+			}
+			return !isMobile ? prefixWithBaseUrl('flickr-paszczak000-8715851521.jpg?v=1') : prefixWithBaseUrl('flickr-paszczak000-8715851521-mobile.jpg?v=1')
+		},
 		tooltip() {
 			if (!this.firstRun) {
 				return null
@@ -256,23 +267,10 @@ export default {
 
 		#body-user:not(.dark) & {
 			background-color: var(--color-primary);
-			background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521.jpg?v=1');
 		}
 
 		#body-user.dark & {
 			background-color: var(--color-main-background);
-			background-image: url('/nextcloud/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg?v=1');
-		}
-	}
-
-	@media only screen and (max-width: var(--breakpoint-mobile)) {
-		#body-user:not(.dark) #app-dashboard {
-			background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg?v=1');
-		}
-
-		#body-user.dark #app-dashboard {
-			background-color: var(--color-main-background);
-			background-image: url('/nextcloud/apps/dashboard/img/flickr-148302424@N05-36591009215-mobile.jpg?v=1');
 		}
 	}
 

apps/dashboard/src/main.js

@@ -2,6 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import { translate as t } from '@nextcloud/l10n'
 import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { getRequestToken } from '@nextcloud/auth'
+import { generateFilePath } from '@nextcloud/router'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
+// eslint-disable-next-line camelcase
+__webpack_public_path__ = generateFilePath('dashboard', '', 'js/')
 
 Vue.directive('Tooltip', VTooltip)
 

apps/dashboard/src/mixins/isMobile.js

@@ -0,0 +1,45 @@
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export default {
+	data() {
+		return {
+			isMobile: this._isMobile(),
+		}
+	},
+	beforeMount() {
+		window.addEventListener('resize', this._onResize)
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this._onResize)
+	},
+	methods: {
+		_onResize() {
+			// Update mobile mode
+			this.isMobile = this._isMobile()
+		},
+		_isMobile() {
+			// check if content width is under 768px
+			return document.documentElement.clientWidth < 768
+		},
+	},
+}