From b49f814faa08be51d4008f4b367a797cf95002a7 Mon Sep 17 00:00:00 2001
From: Julius Härtl <jus@bitgrid.net>
Date: Fri, 14 Aug 2020 16:22:22 +0200
Subject: Implement background reset and proper shipped setting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 .../src/components/BackgroundSettings.vue          | 64 ++++++++++++++++------
 1 file changed, 47 insertions(+), 17 deletions(-)

(limited to 'apps/dashboard/src/components/BackgroundSettings.vue')

diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 7645d8fb832..ad7898f8abe 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -22,18 +22,25 @@
 
 <template>
 	<div class="background-selector">
-		<div v-if="loading">Loading</div>
-		<div v-for="background in shippedBackgrounds"
-			:key="background"
-			class="background"
-			@click="setUrl(background)">
-			<img :src="background">
+		<div class="background default"
+			:class="{ 'icon-loading': loading === 'default' }"
+			@click="setDefault()">
+			<div class="background--preview">
+				Default
+			</div>
 		</div>
 		<div class="background" @click="pickFile">
 			<a>
 				{{ t('dashboard', 'Pick an image from your files') }}
 			</a>
 		</div>
+		<div v-for="background in shippedBackgrounds"
+			:key="background.name"
+			class="background"
+			:class="{ 'icon-loading': loading === background.name }"
+			@click="setShipped(background.name)">
+			<div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
+		</div>
 	</div>
 </template>
 
@@ -41,10 +48,23 @@
 import axios from '@nextcloud/axios'
 import { generateUrl, generateFilePath } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
+import isMobile from '../mixins/isMobile'
 
 const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
 const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
 
+const getBackgroundUrl = (background, time = 0) => {
+	if (background === 'default') {
+		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')
+	} else if (background === 'custom') {
+		return generateUrl('/apps/dashboard/background') + '?v=' + time
+	}
+	return prefixWithBaseUrl(background)
+}
+
 export default {
 	name: 'BackgroundSettings',
 	data() {
@@ -56,36 +76,43 @@ export default {
 	computed: {
 		shippedBackgrounds() {
 			return shippedBackgroundList.map((item) => {
-				return prefixWithBaseUrl(item)
+				return {
+					name: item,
+					url: prefixWithBaseUrl(item),
+				}
 			})
 		},
 	},
 	methods: {
-		async update() {
+		async update(state) {
 			const date = Date.now()
-			this.backgroundImage = generateUrl('/apps/dashboard/background') + '?v=' + date
+			this.backgroundImage = getBackgroundUrl(state, date)
 			const image = new Image()
 			image.onload = () => {
-				this.$emit('updateBackground', date)
+				this.$emit('updateBackground', state)
 				this.loading = false
 			}
 			image.src = this.backgroundImage
 		},
-		setDefault() {
+		async setDefault() {
 			console.debug('SetDefault')
-			this.update()
+			await axios.post(generateUrl('/apps/dashboard/background'))
+			this.update('default')
+		},
+		async setShipped(shipped) {
+			this.loading = shipped
+			await axios.post(generateUrl('/apps/dashboard/background'), { shipped })
+			this.update(shipped)
 		},
 		async setUrl(url) {
 			this.loading = true
-			console.debug('SetUrl ' + url)
 			await axios.post(generateUrl('/apps/dashboard/background'), { url })
-			this.update()
+			this.update('custom')
 		},
 		async setFile(path) {
 			this.loading = true
-			console.debug('SetFile ' + path)
 			await axios.post(generateUrl('/apps/dashboard/background'), { path })
-			this.update()
+			this.update('custom')
 		},
 		pickFile() {
 			window.OC.dialogs.filepicker(t('dashboard', 'Insert from {productName}', { productName: OC.theme.name }), (path, type) => {
@@ -114,8 +141,11 @@ export default {
 				background-image: var(--color-background-dark);
 			}
 
-			& img {
+			&--preview {
 				width: 140px;
+				height: 90px;
+				background-size: cover;
+				background-position: center center;
 			}
 
 			&:hover {
-- 
cgit v1.2.3