mirror of https://github.com/nextcloud/server.git
Migrating themes to Theming app
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>pull/31751/head
parent
69d1d1a84e
commit
9ea72b1010
@ -1,73 +0,0 @@
|
|||||||
// Rules we could port to the rest of Nextcloud too
|
|
||||||
|
|
||||||
// Proper highlight for links and focus feedback
|
|
||||||
#accessibility a {
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Highlight checkbox label in bold for focus feedback
|
|
||||||
// Drawback: Text width increases a bit
|
|
||||||
#accessibility .checkbox:focus + label {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limit width of settings sections for readability
|
|
||||||
#accessibility.section p {
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// End of rules we could port to rest of Nextcloud
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.preview-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
margin-top: 3em;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&,
|
|
||||||
* {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-image {
|
|
||||||
flex-basis: 200px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: 1em;
|
|
||||||
background-position: top left;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-description {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
label {
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: ($breakpoint-mobile / 2)) {
|
|
||||||
.app-settings #accessibility .preview-list .preview {
|
|
||||||
display: unset;
|
|
||||||
|
|
||||||
.preview-image {
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Binary file not shown.
After Width: | Height: | Size: 369 KiB |
Binary file not shown.
After Width: | Height: | Size: 382 KiB |
Binary file not shown.
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,111 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2018 John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
||||||
|
* @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
|
||||||
|
*
|
||||||
|
* @author Christoph Wurst <christoph@winzerhof-wurst.at>
|
||||||
|
* @author Daniel Kesselberg <mail@danielkesselberg.de>
|
||||||
|
* @author Janis Köhr <janis.koehr@novatec-gmbh.de>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
||||||
|
*
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
namespace OCA\Theming\Controller;
|
||||||
|
|
||||||
|
use OCA\Theming\Service\ThemesService;
|
||||||
|
use OCP\AppFramework\Http\DataResponse;
|
||||||
|
use OCP\AppFramework\OCS\OCSBadRequestException;
|
||||||
|
use OCP\AppFramework\OCSController;
|
||||||
|
use OCP\IConfig;
|
||||||
|
use OCP\IRequest;
|
||||||
|
use OCP\IUserSession;
|
||||||
|
use OCP\PreConditionNotMetException;
|
||||||
|
|
||||||
|
class UserThemeController extends OCSController {
|
||||||
|
|
||||||
|
protected string $userId;
|
||||||
|
private IConfig $config;
|
||||||
|
private IUserSession $userSession;
|
||||||
|
private ThemesService $themesService;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Config constructor.
|
||||||
|
*/
|
||||||
|
public function __construct(string $appName,
|
||||||
|
IRequest $request,
|
||||||
|
IConfig $config,
|
||||||
|
IUserSession $userSession,
|
||||||
|
ThemesService $themesService) {
|
||||||
|
parent::__construct($appName, $request);
|
||||||
|
$this->config = $config;
|
||||||
|
$this->userSession = $userSession;
|
||||||
|
$this->themesService = $themesService;
|
||||||
|
$this->userId = $userSession->getUser()->getUID();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @NoAdminRequired
|
||||||
|
*
|
||||||
|
* Enable theme
|
||||||
|
*
|
||||||
|
* @param string $themeId the theme ID
|
||||||
|
* @return DataResponse
|
||||||
|
* @throws OCSBadRequestException|PreConditionNotMetException
|
||||||
|
*/
|
||||||
|
public function enableTheme(string $themeId): DataResponse {
|
||||||
|
if ($themeId === '' || !$themeId) {
|
||||||
|
throw new OCSBadRequestException('Invalid theme id: ' . $themeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
$themes = $this->themesService->getThemes();
|
||||||
|
if (!isset($themes[$themeId])) {
|
||||||
|
throw new OCSBadRequestException('Invalid theme id: ' . $themeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enable selected theme
|
||||||
|
$this->themesService->enableTheme($themes[$themeId]);
|
||||||
|
return new DataResponse();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @NoAdminRequired
|
||||||
|
*
|
||||||
|
* Disable theme
|
||||||
|
*
|
||||||
|
* @param string $themeId the theme ID
|
||||||
|
* @return DataResponse
|
||||||
|
* @throws OCSBadRequestException|PreConditionNotMetException
|
||||||
|
*/
|
||||||
|
public function disableTheme(string $themeId): DataResponse {
|
||||||
|
if ($themeId === '' || !$themeId) {
|
||||||
|
throw new OCSBadRequestException('Invalid theme id: ' . $themeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
$themes = $this->themesService->getThemes();
|
||||||
|
if (!isset($themes[$themeId])) {
|
||||||
|
throw new OCSBadRequestException('Invalid theme id: ' . $themeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enable selected theme
|
||||||
|
$this->themesService->disableTheme($themes[$themeId]);
|
||||||
|
return new DataResponse();
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,93 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
* @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
|
||||||
|
*
|
||||||
|
* @author Christoph Wurst <christoph@winzerhof-wurst.at>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
||||||
|
*
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
namespace OCA\Theming\Settings;
|
||||||
|
|
||||||
|
use OCA\Theming\Service\ThemesService;
|
||||||
|
use OCP\AppFramework\Http\TemplateResponse;
|
||||||
|
use OCP\AppFramework\Services\IInitialState;
|
||||||
|
use OCP\IConfig;
|
||||||
|
use OCP\IUserSession;
|
||||||
|
use OCP\Settings\ISettings;
|
||||||
|
use OCP\Util;
|
||||||
|
|
||||||
|
class Personal implements ISettings {
|
||||||
|
|
||||||
|
protected string $appName;
|
||||||
|
private IConfig $config;
|
||||||
|
private IUserSession $userSession;
|
||||||
|
private ThemesService $themesService;
|
||||||
|
private IInitialState $initialStateService;
|
||||||
|
|
||||||
|
public function __construct(string $appName,
|
||||||
|
IConfig $config,
|
||||||
|
IUserSession $userSession,
|
||||||
|
ThemesService $themesService,
|
||||||
|
IInitialState $initialStateService) {
|
||||||
|
$this->appName = $appName;
|
||||||
|
$this->config = $config;
|
||||||
|
$this->userSession = $userSession;
|
||||||
|
$this->themesService = $themesService;
|
||||||
|
$this->initialStateService = $initialStateService;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getForm(): TemplateResponse {
|
||||||
|
$themes = array_map(function($theme) {
|
||||||
|
return [
|
||||||
|
'id' => $theme->getId(),
|
||||||
|
'type' => $theme->getType(),
|
||||||
|
'title' => $theme->getTitle(),
|
||||||
|
'enableLabel' => $theme->getEnableLabel(),
|
||||||
|
'description' => $theme->getDescription(),
|
||||||
|
'enabled' => $this->themesService->isEnabled($theme),
|
||||||
|
];
|
||||||
|
}, $this->themesService->getThemes());
|
||||||
|
|
||||||
|
$this->initialStateService->provideInitialState('themes', array_values($themes));
|
||||||
|
Util::addScript($this->appName, 'theming-settings');
|
||||||
|
|
||||||
|
return new TemplateResponse($this->appName, 'settings-personal');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return string the section ID, e.g. 'sharing'
|
||||||
|
* @since 9.1
|
||||||
|
*/
|
||||||
|
public function getSection(): string {
|
||||||
|
return $this->appName;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return int whether the form should be rather on the top or bottom of
|
||||||
|
* the admin section. The forms are arranged in ascending order of the
|
||||||
|
* priority values. It is required to return a value between 0 and 100.
|
||||||
|
*
|
||||||
|
* E.g.: 70
|
||||||
|
* @since 9.1
|
||||||
|
*/
|
||||||
|
public function getPriority(): int {
|
||||||
|
return 40;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,100 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @author Christoph Wurst <christoph@winzerhof-wurst.at>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
namespace OCA\Theming\Settings;
|
||||||
|
|
||||||
|
use OCP\IL10N;
|
||||||
|
use OCP\IURLGenerator;
|
||||||
|
use OCP\Settings\IIconSection;
|
||||||
|
|
||||||
|
class PersonalSection implements IIconSection {
|
||||||
|
|
||||||
|
/** @var string */
|
||||||
|
protected $appName;
|
||||||
|
|
||||||
|
/** @var IURLGenerator */
|
||||||
|
private $urlGenerator;
|
||||||
|
|
||||||
|
/** @var IL10N */
|
||||||
|
private $l;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Personal Section constructor.
|
||||||
|
*
|
||||||
|
* @param string $appName
|
||||||
|
* @param IURLGenerator $urlGenerator
|
||||||
|
* @param IL10N $l
|
||||||
|
*/
|
||||||
|
public function __construct(string $appName,
|
||||||
|
IURLGenerator $urlGenerator,
|
||||||
|
IL10N $l) {
|
||||||
|
$this->appName = $appName;
|
||||||
|
$this->urlGenerator = $urlGenerator;
|
||||||
|
$this->l = $l;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* returns the relative path to an 16*16 icon describing the section.
|
||||||
|
* e.g. '/core/img/places/files.svg'
|
||||||
|
*
|
||||||
|
* @returns string
|
||||||
|
* @since 13.0.0
|
||||||
|
*/
|
||||||
|
public function getIcon() {
|
||||||
|
return $this->urlGenerator->imagePath($this->appName, 'app-dark.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* returns the ID of the section. It is supposed to be a lower case string,
|
||||||
|
* e.g. 'ldap'
|
||||||
|
*
|
||||||
|
* @returns string
|
||||||
|
* @since 9.1
|
||||||
|
*/
|
||||||
|
public function getID() {
|
||||||
|
return $this->appName;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* returns the translated name as it should be displayed, e.g. 'LDAP / AD
|
||||||
|
* integration'. Use the L10N service to translate it.
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
* @since 9.1
|
||||||
|
*/
|
||||||
|
public function getName() {
|
||||||
|
return $this->l->t('Appearance and accessibility');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return int whether the form should be rather on the top or bottom of
|
||||||
|
* the settings navigation. The sections are arranged in ascending order of
|
||||||
|
* the priority values. It is required to return a value between 0 and 99.
|
||||||
|
*
|
||||||
|
* E.g.: 70
|
||||||
|
* @since 9.1
|
||||||
|
*/
|
||||||
|
public function getPriority() {
|
||||||
|
return 15;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,75 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
|
||||||
|
*
|
||||||
|
* @author Joas Schilling <coding@schilljs.com>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
namespace OCA\Theming\Themes;
|
||||||
|
|
||||||
|
use OCA\Theming\ITheme;
|
||||||
|
|
||||||
|
class DyslexiaFont extends DefaultTheme implements ITheme {
|
||||||
|
|
||||||
|
public function getId(): string {
|
||||||
|
return 'opendyslexic';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getType(): int {
|
||||||
|
return ITheme::TYPE_FONT;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getTitle(): string {
|
||||||
|
return $this->l->t('Dyslexia font');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getEnableLabel(): string {
|
||||||
|
return $this->l->t('Enable dyslexia font');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getDescription(): string {
|
||||||
|
return $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia.');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getCSSVariables(): array {
|
||||||
|
$variables = parent::getCSSVariables();
|
||||||
|
$originalFontFace = $variables['--font-face'];
|
||||||
|
|
||||||
|
$variables = [
|
||||||
|
'--font-face' => 'OpenDyslexic, ' . $originalFontFace
|
||||||
|
];
|
||||||
|
|
||||||
|
return $variables;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// @font-face {
|
||||||
|
// font-family: 'OpenDyslexic';
|
||||||
|
// font-style: normal;
|
||||||
|
// font-weight: 400;
|
||||||
|
// src: url('../fonts/OpenDyslexic-Regular.woff') format('woff');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// @font-face {
|
||||||
|
// font-family: 'OpenDyslexic';
|
||||||
|
// font-style: normal;
|
||||||
|
// font-weight: 700;
|
||||||
|
// src: url('../fonts/OpenDyslexic-Bold.woff') format('woff');
|
||||||
|
// }
|
@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<div class="theming__preview">
|
||||||
|
<div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" />
|
||||||
|
<div class="theming__preview-description">
|
||||||
|
<h3>{{ theme.title }}</h3>
|
||||||
|
<p>{{ theme.description }}</p>
|
||||||
|
<CheckboxRadioSwitch class="theming__preview-toggle"
|
||||||
|
:checked.sync="checked"
|
||||||
|
:name="name"
|
||||||
|
:type="switchType">
|
||||||
|
{{ theme.enableLabel }}
|
||||||
|
</CheckboxRadioSwitch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { generateFilePath} from '@nextcloud/router'
|
||||||
|
import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ItemPreview',
|
||||||
|
components: {
|
||||||
|
CheckboxRadioSwitch,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
theme: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
themes: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
switchType() {
|
||||||
|
return this.themes.length === 1 ? 'switch' : 'radio'
|
||||||
|
},
|
||||||
|
|
||||||
|
name() {
|
||||||
|
return this.switchType === 'radio' ? this.type : null
|
||||||
|
},
|
||||||
|
|
||||||
|
img() {
|
||||||
|
return generateFilePath('theming', 'img', this.theme.id + '.jpg')
|
||||||
|
},
|
||||||
|
|
||||||
|
checked: {
|
||||||
|
get() {
|
||||||
|
return this.selected
|
||||||
|
},
|
||||||
|
set(checked) {
|
||||||
|
console.debug('Selecting theme', this.theme, checked)
|
||||||
|
|
||||||
|
// If this is a radio, we can only enable
|
||||||
|
if (this.switchType === 'radio') {
|
||||||
|
this.$emit('change', { enabled: true, id: this.theme.id })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// If this is a switch, we can disable the theme
|
||||||
|
this.$emit('change', { enabled: checked === true, id: this.theme.id })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.theming__preview {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 140px;
|
||||||
|
margin-top: 3em;
|
||||||
|
|
||||||
|
&,
|
||||||
|
* {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-image {
|
||||||
|
flex-basis: 200px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 30px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top left;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-description {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: (1024 / 2)) {
|
||||||
|
.theming__preview {
|
||||||
|
display: unset;
|
||||||
|
|
||||||
|
&-image {
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @license AGPL-3.0-or-later
|
||||||
|
*
|
||||||
|
* 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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './UserThemes.vue'
|
||||||
|
|
||||||
|
// bind to window
|
||||||
|
Vue.prototype.OC = OC
|
||||||
|
Vue.prototype.t = t
|
||||||
|
|
||||||
|
const View = Vue.extend(App)
|
||||||
|
const accessibility = new View()
|
||||||
|
accessibility.$mount('#theming')
|
@ -0,0 +1,26 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<span id="theming"></span>
|
Loading…
Reference in New Issue