]> source.dussan.org Git - nextcloud-server.git/commitdiff
Allow to set a custom background
authorJulius Härtl <jus@bitgrid.net>
Wed, 12 Aug 2020 08:02:33 +0000 (10:02 +0200)
committerJulius Härtl <jus@bitgrid.net>
Wed, 19 Aug 2020 15:07:26 +0000 (17:07 +0200)
Signed-off-by: Julius Härtl <jus@bitgrid.net>
apps/dashboard/appinfo/routes.php
apps/dashboard/lib/Controller/DashboardController.php
apps/dashboard/lib/Controller/LayoutApiController.php [new file with mode: 0644]
apps/dashboard/lib/Service/BackgroundService.php [new file with mode: 0644]
apps/dashboard/src/App.vue
apps/dashboard/src/components/BackgroundSettings.vue [new file with mode: 0644]

index 4edca1a3ec56d966a5bc6d61ced61fc5bbf01b28..704311bddf5228d981b90426526fa48667a8c08a 100644 (file)
@@ -28,5 +28,7 @@ return [
        'routes' => [
                ['name' => 'dashboard#index', 'url' => '/', 'verb' => 'GET'],
                ['name' => 'dashboard#updateLayout', 'url' => '/layout', 'verb' => 'POST'],
+               ['name' => 'dashboard#getBackground', 'url' => '/background', 'verb' => 'GET'],
+               ['name' => 'dashboard#setBackground', 'url' => '/background', 'verb' => 'POST'],
        ]
 ];
index 305759fa6e8e5b7a00af8b4e92fdc9f005ecb09d..f6fea2aaf452edb82cc42b2ffd9e8145a1113ac7 100644 (file)
@@ -26,9 +26,12 @@ declare(strict_types=1);
 
 namespace OCA\Dashboard\Controller;
 
+use OCA\Dashboard\Service\BackgroundService;
 use OCA\Files\Event\LoadSidebar;
 use OCA\Viewer\Event\LoadViewer;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\FileDisplayResponse;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\Dashboard\IManager;
@@ -51,6 +54,10 @@ class DashboardController extends Controller {
        private $config;
        /** @var string */
        private $userId;
+       /**
+        * @var BackgroundService
+        */
+       private $backgroundService;
 
        public function __construct(
                string $appName,
@@ -59,6 +66,7 @@ class DashboardController extends Controller {
                IEventDispatcher $eventDispatcher,
                IManager $dashboardManager,
                IConfig $config,
+               BackgroundService $backgroundService,
                $userId
        ) {
                parent::__construct($appName, $request);
@@ -67,6 +75,7 @@ class DashboardController extends Controller {
                $this->eventDispatcher = $eventDispatcher;
                $this->dashboardManager = $dashboardManager;
                $this->config = $config;
+               $this->backgroundService = $backgroundService;
                $this->userId = $userId;
        }
 
@@ -95,6 +104,7 @@ class DashboardController extends Controller {
                $this->inititalStateService->provideInitialState('dashboard', 'panels', $widgets);
                $this->inititalStateService->provideInitialState('dashboard', 'layout', $userLayout);
                $this->inititalStateService->provideInitialState('dashboard', 'firstRun', $this->config->getUserValue($this->userId, 'dashboard', 'firstRun', '1') === '1');
+               $this->inititalStateService->provideInitialState('dashboard', 'shippedBackgrounds', BackgroundService::SHIPPED_BACKGROUNDS);
                $this->config->setUserValue($this->userId, 'dashboard', 'firstRun', '0');
 
                return new TemplateResponse('dashboard', 'index');
@@ -109,4 +119,30 @@ class DashboardController extends Controller {
                $this->config->setUserValue($this->userId, 'dashboard', 'layout', $layout);
                return new JSONResponse(['layout' => $layout]);
        }
+
+       /**
+        * @NoAdminRequired
+        */
+       public function setBackground($path = null, $url = null): JSONResponse {
+               // FIXME: store current version of the background and return the result
+               // FIXME: handle shipped backgrounds  avoid file duplication
+               // FIXME: allow to reset to default ones
+               if ($path !== null) {
+                       $this->backgroundService->setFileBackground($path);
+               }
+               if ($url !== null) {
+                       $this->backgroundService->setUrlBackground($url);
+               }
+               return new JSONResponse([]);
+       }
+
+       /**
+        * @NoAdminRequired
+        * @NoCSRFRequired
+        */
+       public function getBackground(): FileDisplayResponse {
+               $file = $this->backgroundService->getBackground();
+               $response = new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $file->getMimeType()]);
+               return $response;
+       }
 }
diff --git a/apps/dashboard/lib/Controller/LayoutApiController.php b/apps/dashboard/lib/Controller/LayoutApiController.php
new file mode 100644 (file)
index 0000000..31b7965
--- /dev/null
@@ -0,0 +1,63 @@
+<?php
+/**
+ * @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/>.
+ *
+ */
+
+declare(strict_types=1);
+
+
+namespace OCA\Dashboard\Controller;
+
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\AppFramework\OCSController;
+use OCP\IConfig;
+use OCP\IRequest;
+
+class LayoutApiController extends OCSController {
+
+       /** @var IConfig */
+       private $config;
+       /** @var string */
+       private $userId;
+
+       public function __construct(
+               string $appName,
+               IRequest $request,
+               IConfig $config,
+               $userId
+       ) {
+               parent::__construct($appName, $request);
+
+               $this->config = $config;
+               $this->userId = $userId;
+       }
+
+       /**
+        * @NoAdminRequired
+        *
+        * @param string $layout
+        * @return JSONResponse
+        */
+       public function create(string $layout): JSONResponse {
+               $this->config->setUserValue($this->userId, 'dashboard', 'layout', $layout);
+               return new JSONResponse(['layout' => $layout]);
+       }
+}
diff --git a/apps/dashboard/lib/Service/BackgroundService.php b/apps/dashboard/lib/Service/BackgroundService.php
new file mode 100644 (file)
index 0000000..1247690
--- /dev/null
@@ -0,0 +1,99 @@
+<?php
+/**
+ * @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/>.
+ *
+ */
+
+declare(strict_types=1);
+
+
+namespace OCA\Dashboard\Service;
+
+
+use OCP\Files\File;
+use OCP\Files\IAppData;
+use OCP\Files\IRootFolder;
+use OCP\Files\NotFoundException;
+use OCP\Files\SimpleFS\ISimpleFile;
+
+class BackgroundService {
+
+       const SHIPPED_BACKGROUNDS = [
+               'anatoly-mikhaltsov-butterfly-wing-scale-5k.jpg',
+               'bernie-cetonia-aurata-take-off-composition-8k.jpg',
+               'eduardo-neves-pedra-azul-5k.jpg',
+               'europeanspaceagency-baltic-blooms-6k.jpg',
+               'europeanspaceagency-barents-bloom-2k.jpg',
+               'europeanspaceagency-colourful-queensland-6k.jpg',
+               'europeanspaceagency-namib-desert-6k.jpg',
+               'europeanspaceagency-peruvian-andes-6k.jpg',
+               'flickr-148302424@N05-36591009215.jpg',
+               'flickr-andymag-26451722126.jpg',
+               'flickr-angietrenz-24259359268.jpg',
+               'flickr-coconut-cove-mixed-2k.jpg',
+               'flickr-dejankrsmanovic-42971456774.jpg',
+               'flickr-paszczak000-8715851521.jpg',
+               'flickr-xomeox-sewage-3k.jpg',
+               'flickr-zalexandra-7948897538.jpg',
+               'hannes-fritz-flippity-floppity-4k.jpg',
+               'hannes-fritz-parkour-4k.jpg',
+               'hannes-fritz-roulette-4k.jpg',
+               'hannes-fritz-sea-spray-6k.jpg',
+               'insa-wulf-radial-4k.jpg',
+               'microcosmos-lab-microcrystals-5k.jpg',
+               'nasa-goddard-antarctica-melts-6k.jpg',
+               'nasa-goddard-iceberg-greenland-4k.jpg',
+               'pexels-snapwire-forest-4k-cc0.jpg',
+               'yana-sichikova-sergey-ovachev-stone-flower-2k.jpg',
+       ];
+
+       public function __construct(IRootFolder $rootFolder, IAppData $appData, $userId) {
+               $this->userFolder = $rootFolder->getUserFolder($userId);
+               try {
+                       $this->dashboardUserFolder = $appData->getFolder($userId);
+               } catch (NotFoundException $e) {
+                       $this->dashboardUserFolder = $appData->newFolder($userId);
+               }
+       }
+
+       public function setFileBackground($path) {
+               $file = $this->userFolder->get($path);
+               $newFile = $this->dashboardUserFolder->newFile('background.jpg', $file->fopen('r'));
+       }
+
+       public function setUrlBackground($url) {
+               if (substr($url, 0, 1) === '/') {
+                       $url = \OC::$server->getURLGenerator()->getAbsoluteURL($url);
+               }
+
+               $client = \OC::$server->getHTTPClientService()->newClient();
+               $response = $client->get($url);
+               $content = $response->getBody();
+               $newFile = $this->dashboardUserFolder->newFile('background.jpg', $content);
+       }
+
+       /**
+        * @throws NotFoundException
+        */
+       public function getBackground(): ISimpleFile {
+               return $this->dashboardUserFolder->getFile('background.jpg');
+       }
+
+}
index 9831f761e1a3d5e717687ca5fd10cb77dc04df2a..807a0e6f61ed54563d0710ab993f1875fefc858d 100644 (file)
@@ -53,6 +53,9 @@
 
                                <a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
 
+                               <h3>{{ t('dashboard', 'Change the background image') }}</h3>
+                               <BackgroundSettings @updateBackground="updateBackground" />
+
                                <h3>{{ t('dashboard', 'Credits') }}</h3>
                                <p>{{ t('dashboard', 'Photos') }}: <a href="https://www.flickr.com/photos/paszczak000/8715851521/" target="_blank" rel="noopener">Clouds (Kamil Porembiński)</a>, <a href="https://www.flickr.com/photos/148302424@N05/36591009215/" target="_blank" rel="noopener">Un beau soir dété (Tanguy Domenge)</a>.</p>
                        </div>
@@ -69,15 +72,19 @@ import Draggable from 'vuedraggable'
 import axios from '@nextcloud/axios'
 import { generateUrl, generateFilePath } from '@nextcloud/router'
 import isMobile from './mixins/isMobile'
+import BackgroundSettings from './components/BackgroundSettings'
 
 const panels = loadState('dashboard', 'panels')
 const firstRun = loadState('dashboard', 'firstRun')
 
+const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+
 export default {
        name: 'App',
        components: {
                Modal,
                Draggable,
+               BackgroundSettings,
        },
        mixins: [
                isMobile,
@@ -96,11 +103,14 @@ export default {
                        modal: false,
                        appStoreUrl: generateUrl('/settings/apps/dashboard'),
                        statuses: {},
+                       backgroundTime: Date.now(),
+                       defaultBackground: window.OCA.Accessibility.theme === 'dark' ? prefixWithBaseUrl('flickr-148302424@N05-36591009215.jpg?v=1') : prefixWithBaseUrl('flickr-paszczak000-8715851521.jpg?v=1'),
                }
        },
        computed: {
                backgroundImage() {
-                       const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+                       // FIXME: make this dependent if the default is set or not
+                       return generateUrl('/apps/dashboard/background') + '?v=' + this.backgroundTime
                        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')
                        }
@@ -244,6 +254,9 @@ export default {
                                this.firstRun = false
                        }, 1000)
                },
+               updateBackground(date) {
+                       this.backgroundTime = date
+               },
        },
 }
 </script>
@@ -411,6 +424,8 @@ export default {
        .modal__content {
                width: 30vw;
                margin: 20px;
+               max-height: 70vh;
+               overflow: auto;
                ol {
                        display: flex;
                        flex-direction: column;
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
new file mode 100644 (file)
index 0000000..7645d8f
--- /dev/null
@@ -0,0 +1,127 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<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>
+               <div class="background" @click="pickFile">
+                       <a>
+                               {{ t('dashboard', 'Pick an image from your files') }}
+                       </a>
+               </div>
+       </div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl, generateFilePath } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+
+const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
+
+export default {
+       name: 'BackgroundSettings',
+       data() {
+               return {
+                       backgroundImage: generateUrl('/apps/dashboard/background') + '?v=' + Date.now(),
+                       loading: false,
+               }
+       },
+       computed: {
+               shippedBackgrounds() {
+                       return shippedBackgroundList.map((item) => {
+                               return prefixWithBaseUrl(item)
+                       })
+               },
+       },
+       methods: {
+               async update() {
+                       const date = Date.now()
+                       this.backgroundImage = generateUrl('/apps/dashboard/background') + '?v=' + date
+                       const image = new Image()
+                       image.onload = () => {
+                               this.$emit('updateBackground', date)
+                               this.loading = false
+                       }
+                       image.src = this.backgroundImage
+               },
+               setDefault() {
+                       console.debug('SetDefault')
+                       this.update()
+               },
+               async setUrl(url) {
+                       this.loading = true
+                       console.debug('SetUrl ' + url)
+                       await axios.post(generateUrl('/apps/dashboard/background'), { url })
+                       this.update()
+               },
+               async setFile(path) {
+                       this.loading = true
+                       console.debug('SetFile ' + path)
+                       await axios.post(generateUrl('/apps/dashboard/background'), { path })
+                       this.update()
+               },
+               pickFile() {
+                       window.OC.dialogs.filepicker(t('dashboard', 'Insert from {productName}', { productName: OC.theme.name }), (path, type) => {
+                               if (type === OC.dialogs.FILEPICKER_TYPE_CHOOSE) {
+                                       this.setFile(path)
+                               }
+                       }, false, ['image/png', 'image/gif', 'image/jpeg', 'image/svg'], true, OC.dialogs.FILEPICKER_TYPE_CHOOSE)
+               },
+       },
+}
+</script>
+
+<style scoped lang="scss">
+
+       .background-selector {
+               display: flex;
+               flex-wrap: wrap;
+
+               .background {
+                       width: 140px;
+                       padding: 15px;
+                       border-radius: var(--border-radius);
+                       text-align: center;
+
+                       &.current {
+                               background-image: var(--color-background-dark);
+                       }
+
+                       & img {
+                               width: 140px;
+                       }
+
+                       &:hover {
+                               background-color: var(--color-background-hover);
+                       }
+               }
+       }
+
+</style>