'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'],
]
];
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;
private $config;
/** @var string */
private $userId;
+ /**
+ * @var BackgroundService
+ */
+ private $backgroundService;
public function __construct(
string $appName,
IEventDispatcher $eventDispatcher,
IManager $dashboardManager,
IConfig $config,
+ BackgroundService $backgroundService,
$userId
) {
parent::__construct($appName, $request);
$this->eventDispatcher = $eventDispatcher;
$this->dashboardManager = $dashboardManager;
$this->config = $config;
+ $this->backgroundService = $backgroundService;
$this->userId = $userId;
}
$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');
$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;
+ }
}
--- /dev/null
+<?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]);
+ }
+}
--- /dev/null
+<?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');
+ }
+
+}
<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>
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,
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')
}
this.firstRun = false
}, 1000)
},
+ updateBackground(date) {
+ this.backgroundTime = date
+ },
},
}
</script>
.modal__content {
width: 30vw;
margin: 20px;
+ max-height: 70vh;
+ overflow: auto;
ol {
display: flex;
flex-direction: column;
--- /dev/null
+<!--
+ - @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>