Dynamically generate background image url

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

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 0354c3ce91540143f8e9d8c0021da4f88715c74c..66e4b96c583c34a316c3fbb4bd2c65f98ffca0a0 100644 (file)
--- a/apps/dashboard/src/App.vue
+++ b/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');
                }
        }
 

diff --git a/apps/dashboard/src/main.js b/apps/dashboard/src/main.js
index 17619cc22bf6ecc9f4957ceaa859c1ab0533fd13..93fb55e2d528bfa130b6704bb331e3d40eacf4c5 100644 (file)
--- a/apps/dashboard/src/main.js
+++ b/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)
 

diff --git a/apps/dashboard/src/mixins/isMobile.js b/apps/dashboard/src/mixins/isMobile.js
new file mode 100644 (file)
index 0000000..cc66af5
--- /dev/null
+++ b/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
+               },
+       },
+}