Allow to set a custom background
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
1e043d5a24
commit
4ec0afd0e7
|
@ -28,5 +28,7 @@ return [
|
||||||
'routes' => [
|
'routes' => [
|
||||||
['name' => 'dashboard#index', 'url' => '/', 'verb' => 'GET'],
|
['name' => 'dashboard#index', 'url' => '/', 'verb' => 'GET'],
|
||||||
['name' => 'dashboard#updateLayout', 'url' => '/layout', 'verb' => 'POST'],
|
['name' => 'dashboard#updateLayout', 'url' => '/layout', 'verb' => 'POST'],
|
||||||
|
['name' => 'dashboard#getBackground', 'url' => '/background', 'verb' => 'GET'],
|
||||||
|
['name' => 'dashboard#setBackground', 'url' => '/background', 'verb' => 'POST'],
|
||||||
]
|
]
|
||||||
];
|
];
|
||||||
|
|
|
@ -26,9 +26,12 @@ declare(strict_types=1);
|
||||||
|
|
||||||
namespace OCA\Dashboard\Controller;
|
namespace OCA\Dashboard\Controller;
|
||||||
|
|
||||||
|
use OCA\Dashboard\Service\BackgroundService;
|
||||||
use OCA\Files\Event\LoadSidebar;
|
use OCA\Files\Event\LoadSidebar;
|
||||||
use OCA\Viewer\Event\LoadViewer;
|
use OCA\Viewer\Event\LoadViewer;
|
||||||
use OCP\AppFramework\Controller;
|
use OCP\AppFramework\Controller;
|
||||||
|
use OCP\AppFramework\Http;
|
||||||
|
use OCP\AppFramework\Http\FileDisplayResponse;
|
||||||
use OCP\AppFramework\Http\JSONResponse;
|
use OCP\AppFramework\Http\JSONResponse;
|
||||||
use OCP\AppFramework\Http\TemplateResponse;
|
use OCP\AppFramework\Http\TemplateResponse;
|
||||||
use OCP\Dashboard\IManager;
|
use OCP\Dashboard\IManager;
|
||||||
|
@ -51,6 +54,10 @@ class DashboardController extends Controller {
|
||||||
private $config;
|
private $config;
|
||||||
/** @var string */
|
/** @var string */
|
||||||
private $userId;
|
private $userId;
|
||||||
|
/**
|
||||||
|
* @var BackgroundService
|
||||||
|
*/
|
||||||
|
private $backgroundService;
|
||||||
|
|
||||||
public function __construct(
|
public function __construct(
|
||||||
string $appName,
|
string $appName,
|
||||||
|
@ -59,6 +66,7 @@ class DashboardController extends Controller {
|
||||||
IEventDispatcher $eventDispatcher,
|
IEventDispatcher $eventDispatcher,
|
||||||
IManager $dashboardManager,
|
IManager $dashboardManager,
|
||||||
IConfig $config,
|
IConfig $config,
|
||||||
|
BackgroundService $backgroundService,
|
||||||
$userId
|
$userId
|
||||||
) {
|
) {
|
||||||
parent::__construct($appName, $request);
|
parent::__construct($appName, $request);
|
||||||
|
@ -67,6 +75,7 @@ class DashboardController extends Controller {
|
||||||
$this->eventDispatcher = $eventDispatcher;
|
$this->eventDispatcher = $eventDispatcher;
|
||||||
$this->dashboardManager = $dashboardManager;
|
$this->dashboardManager = $dashboardManager;
|
||||||
$this->config = $config;
|
$this->config = $config;
|
||||||
|
$this->backgroundService = $backgroundService;
|
||||||
$this->userId = $userId;
|
$this->userId = $userId;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -95,6 +104,7 @@ class DashboardController extends Controller {
|
||||||
$this->inititalStateService->provideInitialState('dashboard', 'panels', $widgets);
|
$this->inititalStateService->provideInitialState('dashboard', 'panels', $widgets);
|
||||||
$this->inititalStateService->provideInitialState('dashboard', 'layout', $userLayout);
|
$this->inititalStateService->provideInitialState('dashboard', 'layout', $userLayout);
|
||||||
$this->inititalStateService->provideInitialState('dashboard', 'firstRun', $this->config->getUserValue($this->userId, 'dashboard', 'firstRun', '1') === '1');
|
$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');
|
$this->config->setUserValue($this->userId, 'dashboard', 'firstRun', '0');
|
||||||
|
|
||||||
return new TemplateResponse('dashboard', 'index');
|
return new TemplateResponse('dashboard', 'index');
|
||||||
|
@ -109,4 +119,30 @@ class DashboardController extends Controller {
|
||||||
$this->config->setUserValue($this->userId, 'dashboard', 'layout', $layout);
|
$this->config->setUserValue($this->userId, 'dashboard', 'layout', $layout);
|
||||||
return new JSONResponse(['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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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]);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -53,6 +53,9 @@
|
||||||
|
|
||||||
<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
|
<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>
|
<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>
|
<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>
|
</div>
|
||||||
|
@ -69,15 +72,19 @@ import Draggable from 'vuedraggable'
|
||||||
import axios from '@nextcloud/axios'
|
import axios from '@nextcloud/axios'
|
||||||
import { generateUrl, generateFilePath } from '@nextcloud/router'
|
import { generateUrl, generateFilePath } from '@nextcloud/router'
|
||||||
import isMobile from './mixins/isMobile'
|
import isMobile from './mixins/isMobile'
|
||||||
|
import BackgroundSettings from './components/BackgroundSettings'
|
||||||
|
|
||||||
const panels = loadState('dashboard', 'panels')
|
const panels = loadState('dashboard', 'panels')
|
||||||
const firstRun = loadState('dashboard', 'firstRun')
|
const firstRun = loadState('dashboard', 'firstRun')
|
||||||
|
|
||||||
|
const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
Modal,
|
Modal,
|
||||||
Draggable,
|
Draggable,
|
||||||
|
BackgroundSettings,
|
||||||
},
|
},
|
||||||
mixins: [
|
mixins: [
|
||||||
isMobile,
|
isMobile,
|
||||||
|
@ -96,11 +103,14 @@ export default {
|
||||||
modal: false,
|
modal: false,
|
||||||
appStoreUrl: generateUrl('/settings/apps/dashboard'),
|
appStoreUrl: generateUrl('/settings/apps/dashboard'),
|
||||||
statuses: {},
|
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: {
|
computed: {
|
||||||
backgroundImage() {
|
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') {
|
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-148302424@N05-36591009215.jpg?v=1') : prefixWithBaseUrl('flickr-148302424@N05-36591009215-mobile.jpg?v=1')
|
||||||
}
|
}
|
||||||
|
@ -244,6 +254,9 @@ export default {
|
||||||
this.firstRun = false
|
this.firstRun = false
|
||||||
}, 1000)
|
}, 1000)
|
||||||
},
|
},
|
||||||
|
updateBackground(date) {
|
||||||
|
this.backgroundTime = date
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -411,6 +424,8 @@ export default {
|
||||||
.modal__content {
|
.modal__content {
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow: auto;
|
||||||
ol {
|
ol {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue