Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move background settings from dashboard app to Appearance and accessibility settings #33733

Merged
merged 1 commit into from
Sep 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions apps/dashboard/appinfo/routes.php
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@
['name' => 'dashboard#index', 'url' => '/', 'verb' => 'GET'],
['name' => 'dashboard#updateLayout', 'url' => '/layout', 'verb' => 'POST'],
['name' => 'dashboard#updateStatuses', 'url' => '/statuses', 'verb' => 'POST'],
['name' => 'dashboard#getBackground', 'url' => '/background', 'verb' => 'GET'],
['name' => 'dashboard#setBackground', 'url' => '/background/{type}', 'verb' => 'POST'],
],
'ocs' => [
['name' => 'dashboardApi#getWidgetItems', 'url' => '/api/v1/widget-items', 'verb' => 'GET'],
Expand Down
72 changes: 0 additions & 72 deletions apps/dashboard/lib/Controller/DashboardController.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,12 @@
*/
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\NotFoundResponse;
use OCP\AppFramework\Http\TemplateResponse;
use OCP\App\IAppManager;
use OCP\AppFramework\Services\IInitialState;
use OCP\Dashboard\IManager;
use OCP\Dashboard\IWidget;
Expand All @@ -52,38 +48,28 @@ class DashboardController extends Controller {
private $inititalState;
/** @var IEventDispatcher */
private $eventDispatcher;
/** @var IAppManager */
private $appManager;
/** @var IManager */
private $dashboardManager;
/** @var IConfig */
private $config;
/** @var string */
private $userId;
/**
* @var BackgroundService
*/
private $backgroundService;

public function __construct(
string $appName,
IRequest $request,
IInitialState $initialState,
IEventDispatcher $eventDispatcher,
IAppManager $appManager,
IManager $dashboardManager,
IConfig $config,
BackgroundService $backgroundService,
$userId
) {
parent::__construct($appName, $request);

$this->inititalState = $initialState;
$this->eventDispatcher = $eventDispatcher;
$this->appManager = $appManager;
$this->dashboardManager = $dashboardManager;
$this->config = $config;
$this->backgroundService = $backgroundService;
$this->userId = $userId;
}

Expand Down Expand Up @@ -119,18 +105,10 @@ public function index(): TemplateResponse {
// It does not matter if some statuses are missing from the array, missing ones are considered enabled
$statuses = ($statuses && count($statuses) > 0) ? $statuses : ['weather' => true];

// if theming app is enabled and wants to override default, we pass it
$themingDefaultBackground = $this->appManager->isEnabledForUser('theming')
? $this->config->getAppValue('theming', 'backgroundMime', '')
: '';
$this->inititalState->provideInitialState('themingDefaultBackground', $themingDefaultBackground);
$this->inititalState->provideInitialState('panels', $widgets);
$this->inititalState->provideInitialState('statuses', $statuses);
$this->inititalState->provideInitialState('layout', $userLayout);
$this->inititalState->provideInitialState('firstRun', $this->config->getUserValue($this->userId, 'dashboard', 'firstRun', '1') === '1');
$this->inititalState->provideInitialState('shippedBackgrounds', BackgroundService::SHIPPED_BACKGROUNDS);
$this->inititalState->provideInitialState('background', $this->config->getUserValue($this->userId, 'dashboard', 'background', 'default'));
$this->inititalState->provideInitialState('version', $this->config->getUserValue($this->userId, 'dashboard', 'backgroundVersion', 0));
$this->config->setUserValue($this->userId, 'dashboard', 'firstRun', '0');

$response = new TemplateResponse('dashboard', 'index', [
Expand Down Expand Up @@ -165,54 +143,4 @@ public function updateStatuses(string $statuses): JSONResponse {
$this->config->setUserValue($this->userId, 'dashboard', 'statuses', $statuses);
return new JSONResponse(['statuses' => $statuses]);
}

/**
* @NoAdminRequired
*/
public function setBackground(string $type = 'default', string $value = ''): JSONResponse {
$currentVersion = (int)$this->config->getUserValue($this->userId, 'dashboard', 'backgroundVersion', '0');
try {
switch ($type) {
case 'shipped':
$this->backgroundService->setShippedBackground($value);
break;
case 'custom':
$this->backgroundService->setFileBackground($value);
break;
case 'color':
$this->backgroundService->setColorBackground($value);
break;
case 'default':
$this->backgroundService->setDefaultBackground();
break;
default:
return new JSONResponse(['error' => 'Invalid type provided'], Http::STATUS_BAD_REQUEST);
}
} catch (\InvalidArgumentException $e) {
return new JSONResponse(['error' => $e->getMessage()], Http::STATUS_BAD_REQUEST);
} catch (\Throwable $e) {
return new JSONResponse(['error' => $e->getMessage()], Http::STATUS_INTERNAL_SERVER_ERROR);
}
$currentVersion++;
$this->config->setUserValue($this->userId, 'dashboard', 'backgroundVersion', (string)$currentVersion);
return new JSONResponse([
'type' => $type,
'value' => $value,
'version' => $this->config->getUserValue($this->userId, 'dashboard', 'backgroundVersion', $currentVersion)
]);
}

/**
* @NoAdminRequired
* @NoCSRFRequired
*/
public function getBackground(): Http\Response {
$file = $this->backgroundService->getBackground();
if ($file !== null) {
$response = new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $file->getMimeType()]);
$response->cacheFor(24 * 60 * 60);
return $response;
}
return new NotFoundResponse();
}
}
76 changes: 35 additions & 41 deletions apps/dashboard/src/DashboardApp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,6 @@

<a v-if="isAdmin" :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the App Store') }}</a>

<h3>{{ t('dashboard', 'Change background image') }}</h3>
<BackgroundSettings :background="background"
:theming-default-background="themingDefaultBackground"
@update:background="updateBackground" />

<h3>{{ t('dashboard', 'Weather service') }}</h3>
<p>
{{ t('dashboard', 'For your privacy, the weather data is requested by your Nextcloud server on your behalf so the weather service receives no personal information.') }}
Expand All @@ -93,7 +88,7 @@
</template>

<script>
import { generateUrl } from '@nextcloud/router'
import { generateUrl, imagePath } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import { loadState } from '@nextcloud/initial-state'
import axios from '@nextcloud/axios'
Expand All @@ -103,16 +98,16 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import Vue from 'vue'

import isMobile from './mixins/isMobile'
import BackgroundSettings from './components/BackgroundSettings'
import getBackgroundUrl from './helpers/getBackgroundUrl'
import isMobile from './mixins/isMobile.js'
import { getBackgroundUrl } from './helpers/getBackgroundUrl.js'

const panels = loadState('dashboard', 'panels')
const firstRun = loadState('dashboard', 'firstRun')
const background = loadState('dashboard', 'background')
const themingDefaultBackground = loadState('dashboard', 'themingDefaultBackground')
const version = loadState('dashboard', 'version')
const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')

const background = loadState('theming', 'background')
const backgroundVersion = loadState('theming', 'backgroundVersion')
const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')

const statusInfo = {
weather: {
Expand All @@ -128,7 +123,6 @@ const statusInfo = {
export default {
name: 'DashboardApp',
components: {
BackgroundSettings,
NcButton,
Draggable,
NcModal,
Expand Down Expand Up @@ -158,12 +152,11 @@ export default {
statuses: {},
background,
themingDefaultBackground,
version,
}
},
computed: {
backgroundImage() {
return getBackgroundUrl(this.background, this.version, this.themingDefaultBackground)
return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
},
backgroundStyle() {
if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
Expand All @@ -175,7 +168,6 @@ export default {
backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
}
},

greeting() {
const time = this.timer.getHours()

Expand Down Expand Up @@ -280,6 +272,32 @@ export default {
},

methods: {
updateGlobalStyles() {
// Override primary-invert-if-bright and color-primary-text if background is set
const isBackgroundBright = shippedBackgroundList[this.background]?.theming === 'dark'
if (isBackgroundBright) {
document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)')
document.querySelector('#header').style.setProperty('--color-primary-text', '#000000')
// document.body.removeAttribute('data-theme-dark')
// document.body.setAttribute('data-theme-light', 'true')
} else {
document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'no')
document.querySelector('#header').style.setProperty('--color-primary-text', '#ffffff')
// document.body.removeAttribute('data-theme-light')
// document.body.setAttribute('data-theme-dark', 'true')
}

const themeElements = [document.documentElement, document.querySelector('#header'), document.querySelector('body')]
for (const element of themeElements) {
if (this.background === 'default') {
element.style.setProperty('--image-main-background', `url('${imagePath('core', 'app-background.jpg')}')`)
} else if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
element.style.setProperty('--image-main-background', undefined)
} else {
element.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
}
}
},
/**
* Method to register panels that will be called by the integrating apps
*
Expand Down Expand Up @@ -354,30 +372,6 @@ export default {
this.firstRun = false
}, 1000)
},
updateBackground(data) {
this.background = data.type === 'custom' || data.type === 'default' ? data.type : data.value
this.version = data.version
this.updateGlobalStyles()
},
updateGlobalStyles() {
// Override primary-invert-if-bright and color-primary-text if background is set
const isBackgroundBright = shippedBackgroundList[this.background]?.theming === 'dark'
if (isBackgroundBright) {
document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)')
document.querySelector('#header').style.setProperty('--color-primary-text', '#000000')
// document.body.removeAttribute('data-theme-dark')
// document.body.setAttribute('data-theme-light', 'true')
} else {
document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'no')
document.querySelector('#header').style.setProperty('--color-primary-text', '#ffffff')
// document.body.removeAttribute('data-theme-light')
// document.body.setAttribute('data-theme-dark', 'true')
}

document.documentElement.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
document.querySelector('#header').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
document.querySelector('body').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
},
updateSkipLink() {
// Make sure "Skip to main content" link points to the app content
document.getElementsByClassName('skip-navigation')[0].setAttribute('href', '#app-dashboard')
Expand Down
6 changes: 3 additions & 3 deletions apps/dashboard/src/helpers/getBackgroundUrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
*/

import { generateUrl } from '@nextcloud/router'
import prefixWithBaseUrl from './prefixWithBaseUrl'
import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'

export default (background, time = 0, themingDefaultBackground = '') => {
export const getBackgroundUrl = (background, time = 0, themingDefaultBackground = '') => {
const enabledThemes = window.OCA?.Theming?.enabledThemes || []
const isDarkTheme = (enabledThemes.length === 0 || enabledThemes[0] === 'default')
? window.matchMedia('(prefers-color-scheme: dark)').matches
Expand All @@ -42,7 +42,7 @@ export default (background, time = 0, themingDefaultBackground = '') => {

return prefixWithBaseUrl('kamil-porembinski-clouds.jpg')
} else if (background === 'custom') {
return generateUrl('/apps/dashboard/background') + '?v=' + time
return generateUrl('/apps/theming/background') + '?v=' + time
}

return prefixWithBaseUrl(background)
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/helpers/prefixWithBaseUrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,4 @@

import { generateFilePath } from '@nextcloud/router'

export default (url) => generateFilePath('dashboard', '', 'img/') + url
export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url
10 changes: 10 additions & 0 deletions apps/theming/appinfo/routes.php
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,16 @@
'verb' => 'GET',
'requirements' => ['image' => '.+']
],
[
'name' => 'userTheme#getBackground',
'url' => '/background',
'verb' => 'GET',
],
[
'name' => 'userTheme#setBackground',
'url' => '/background/{type}',
'verb' => 'POST',
],
],
'ocs' => [
[
Expand Down
Loading