upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 25

Dynamically generate background image url

Browse source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2020-08-11 07:54:34 +02:00
parent 6a4d416e36
commit 81ba90a0fe
No known key found for this signature in database
GPG key ID: 4C614C6ED2CDE6DF
3 changed files with 65 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
apps/dashboard/src/App.vue
View file

@ -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');
}
}

7
apps/dashboard/src/main.js
View file

@ -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)

45
apps/dashboard/src/mixins/isMobile.js Normal file
View file

@ -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
},
},
}