Fix various theming bugs

Signed-off-by: Christopher Ng <chrng8@gmail.com>
pull/34204/head
Christopher Ng 2 years ago
parent f6f0195a3f
commit 295d03869e

@ -88,7 +88,7 @@
</template>
<script>
import { generateUrl, imagePath } from '@nextcloud/router'
import { generateUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import { loadState } from '@nextcloud/initial-state'
import axios from '@nextcloud/axios'
@ -99,13 +99,11 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
import Vue from 'vue'
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('theming', 'background')
const backgroundVersion = loadState('theming', 'backgroundVersion')
const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
@ -155,19 +153,6 @@ export default {
}
},
computed: {
backgroundImage() {
return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
},
backgroundStyle() {
if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
return null
}
return {
backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
}
},
greeting() {
const time = this.timer.getHours()
@ -286,17 +271,6 @@ export default {
// 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

@ -1,49 +0,0 @@
/**
* @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
*
* @author Avior <florian.bouillon@delta-wings.net>
* @author Julien Veyssier <eneiluj@posteo.net>
* @author Julius Härtl <jus@bitgrid.net>
*
* @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 { generateUrl } from '@nextcloud/router'
import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'
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
: enabledThemes.join('').indexOf('dark') !== -1
if (background === 'default') {
if (themingDefaultBackground && themingDefaultBackground !== 'backgroundColor') {
return generateUrl('/apps/theming/image/background') + '?v=' + window.OCA.Theming.cacheBuster
}
if (isDarkTheme) {
return prefixWithBaseUrl('eduardo-neves-pedra-azul.jpg')
}
return prefixWithBaseUrl('kamil-porembinski-clouds.jpg')
} else if (background === 'custom') {
return generateUrl('/apps/theming/background') + '?v=' + time
}
return prefixWithBaseUrl(background)
}

@ -1,25 +0,0 @@
/**
* @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @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 { generateFilePath } from '@nextcloud/router'
export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url

@ -227,9 +227,15 @@ class DefaultTheme implements ITheme {
$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
if ($themingBackground === 'custom') {
// Custom
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')";
} elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') {
// Shipped background
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
} elseif (substr($themingBackground, 0, 1) === '#') {
// Color
unset($variables['--image-main-background']);
$variables['--color-main-background-plain'] = $this->primaryColor;
}
}

@ -74,7 +74,7 @@
</template>
<script>
import { generateOcsUrl, imagePath } from '@nextcloud/router'
import { generateOcsUrl } from '@nextcloud/router'
import { loadState } from '@nextcloud/initial-state'
import axios from '@nextcloud/axios'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
@ -83,8 +83,6 @@ import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
import BackgroundSettings from './components/BackgroundSettings.vue'
import ItemPreview from './components/ItemPreview.vue'
import { getBackgroundUrl } from '../src/helpers/getBackgroundUrl.js'
const availableThemes = loadState('theming', 'themes', [])
const enforceTheme = loadState('theming', 'enforceTheme', '')
const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
@ -111,24 +109,12 @@ export default {
enforceTheme,
shortcutsDisabled,
background,
backgroundVersion,
themingDefaultBackground,
}
},
computed: {
backgroundImage() {
return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
},
backgroundStyle() {
if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
return null
}
return {
backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
}
},
themes() {
return this.availableThemes.filter(theme => theme.type === 1)
},
@ -183,7 +169,9 @@ export default {
methods: {
updateBackground(data) {
this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
this.backgroundVersion = data.version
this.updateGlobalStyles()
this.$emit('update:background')
},
updateGlobalStyles() {
// Override primary-invert-if-bright and color-primary-text if background is set
@ -199,17 +187,6 @@ export default {
// 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)
}
}
},
changeTheme({ enabled, id }) {
// Reset selected and select new one

@ -38,7 +38,7 @@
{{ t('theming', 'Default image') }}
</button>
<button class="background color"
:class="{ active: background === 'custom' }"
:class="{ active: background.startsWith('#') }"
tabindex="0"
@click="pickColor">
{{ t('theming', 'Plain background') }}

@ -22,8 +22,6 @@
*
*/
// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/getBackgroundUrl.js`
import { generateUrl } from '@nextcloud/router'
import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'

@ -20,8 +20,6 @@
*
*/
// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/prefixWithBaseUrl.js`
import { generateFilePath } from '@nextcloud/router'
export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url

@ -30,3 +30,15 @@ Vue.prototype.t = t
const View = Vue.extend(App)
const theming = new View()
theming.$mount('#theming')
theming.$on('update:background', () => {
// Refresh server-side generated theming CSS
[...document.head.querySelectorAll('link.theme')].forEach(theme => {
const url = new URL(theme.href)
url.searchParams.set('v', Date.now())
const newTheme = theme.cloneNode()
newTheme.href = url.toString()
newTheme.onload = () => theme.remove()
document.head.append(newTheme)
})
})

@ -89,14 +89,14 @@ html {
width: 100%;
height: 100%;
position: absolute;
background-color: var(--color-primary);
background-color: var(--color-main-background-plain, var(--color-main-background));
background-image: var(--image-main-background);
background-size: cover;
background-position: center;
}
body {
background-color: var(--color-primary);
background-color: var(--color-main-background-plain, var(--color-main-background));
background-image: var(--image-main-background);
background-size: cover;
background-position: center;

@ -39,14 +39,14 @@ html {
width: 100%;
height: 100%;
position: absolute;
background-color: var(--color-primary);
background-color: var(--color-main-background-plain, var(--color-main-background));
background-image: var(--image-main-background);
background-size: cover;
background-position: center;
}
body {
background-color: var(--color-primary);
background-color: var(--color-main-background-plain, var(--color-main-background));
background-image: var(--image-main-background);
background-size: cover;
background-position: center;

@ -118,7 +118,6 @@ ul {
}
body {
background-color: var(--color-main-background);
font-weight: normal;
/* bring the default font size up to 15px */
font-size: var(--default-font-size);
@ -2868,14 +2867,14 @@ html {
width: 100%;
height: 100%;
position: absolute;
background-color: var(--color-primary);
background-color: var(--color-main-background-plain, var(--color-main-background));
background-image: var(--image-main-background);
background-size: cover;
background-position: center;
}
body {
background-color: var(--color-primary);
background-color: var(--color-main-background-plain, var(--color-main-background));
background-image: var(--image-main-background);
background-size: cover;
background-position: center;

File diff suppressed because one or more lines are too long

@ -117,7 +117,6 @@ ul {
}
body {
background-color: var(--color-main-background);
font-weight: normal;
/* bring the default font size up to 15px */
font-size: var(--default-font-size);

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;;;AAGD;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAGC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGD;EAGC;;AAKD;EACC;;AAEA;EACC;;;AAMJ;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;AAAA;EAEC;;AAIF;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;AA8DA;;AA5DA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;AACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;AAGD;EAGC;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;AAKF;EACC;EACA;;AAED;EACC;;;AAMH;EACC;EACA;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;;;AAGD;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAGC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGD;EAGC;;AAKD;EACC;;AAEA;EACC;;;AAMJ;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;AAAA;EAEC;;AAIF;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;AA8DA;;AA5DA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;AACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;AAGD;EAGC;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;AAKF;EACC;EACA;;AAED;EACC;;;AAMH;EACC;EACA;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}

@ -98,7 +98,6 @@ ul {
}
body {
background-color: var(--color-main-background);
font-weight: normal;
/* bring the default font size up to 15px */
font-size: var(--default-font-size);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,7 +1,7 @@
@apache
Feature: app-theming
Scenario: changing the color updates the header color
Scenario: changing the color updates the primary color
Given I am logged in as the admin
And I visit the admin settings page
And I open the "Theming" section
@ -9,19 +9,19 @@ Feature: app-theming
# The "eventually" part is not really needed here, as the colour is not
# being animated at this point, but there is no need to create a specific
# step just for this.
And I see that the background color is eventually "#0082C9"
And I see that the primary color is eventually "#0082C9"
When I set the "Color" parameter in the Theming app to "#C9C9C9"
Then I see that the parameters in the Theming app are eventually saved
And I see that the background color is eventually "#C9C9C9"
And I see that the primary color is eventually "#C9C9C9"
Scenario: resetting the color updates the header color
Scenario: resetting the color updates the primary color
Given I am logged in as the admin
And I visit the admin settings page
And I open the "Theming" section
And I see that the color selector in the Theming app has loaded
And I set the "Color" parameter in the Theming app to "#C9C9C9"
And I see that the parameters in the Theming app are eventually saved
And I see that the background color is eventually "#C9C9C9"
And I see that the primary color is eventually "#C9C9C9"
When I reset the "Color" parameter in the Theming app to its default value
Then I see that the parameters in the Theming app are eventually saved
And I see that the background color is eventually "#0082C9"
And I see that the primary color is eventually "#0082C9"

@ -125,19 +125,19 @@ class ThemingAppContext implements Context, ActorAwareInterface {
}
/**
* @Then I see that the background color is eventually :color
* @Then I see that the primary color is eventually :color
*/
public function iSeeThatTheBackgroundColorIsEventually($color) {
$backgroundColorMatchesCallback = function () use ($color) {
$headerColor = $this->actor->getSession()->evaluateScript("return $('body').css('background-color');");
$headerColor = $this->getRGBArray($headerColor);
public function iSeeThatThePrimaryColorIsEventually($color) {
$primaryColorMatchesCallback = function () use ($color) {
$primaryColor = $this->actor->getSession()->evaluateScript("return getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim();");
$primaryColor = $this->getRGBArray($primaryColor);
$color = $this->getRGBArray($color);
return $headerColor == $color;
return $primaryColor == $color;
};
if (!Utils::waitFor($backgroundColorMatchesCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) {
Assert::fail("The background color is not $color yet after $timeout seconds");
if (!Utils::waitFor($primaryColorMatchesCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) {
Assert::fail("The primary color is not $color yet after $timeout seconds");
}
}

Loading…
Cancel
Save