Skip to content

Commit 2b6b2e2

Browse files
PytalPytal
committed
Fix flashing background color
Signed-off-by: Christopher Ng <chrng8@gmail.com>
1 parent ac1c739 commit 2b6b2e2

File tree

10 files changed

+31
-33
lines changed

10 files changed

+31
-33
lines changed

‎apps/dashboard/src/DashboardApp.vue

+4-11
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
</template>
8989

9090
<script>
91-
import { generateUrl, imagePath } from '@nextcloud/router'
91+
import { generateUrl } from '@nextcloud/router'
9292
import { getCurrentUser } from '@nextcloud/auth'
9393
import { loadState } from '@nextcloud/initial-state'
9494
import axios from '@nextcloud/axios'
@@ -287,16 +287,9 @@ export default {
287287
// document.body.setAttribute('data-theme-dark', 'true')
288288
}
289289
290-
const themeElements = [document.documentElement, document.querySelector('#header'), document.querySelector('body')]
291-
for (const element of themeElements) {
292-
if (this.background === 'default') {
293-
element.style.setProperty('--image-main-background', `url('${imagePath('core', 'app-background.jpg')}')`)
294-
} else if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
295-
element.style.setProperty('--image-main-background', undefined)
296-
} else {
297-
element.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
298-
}
299-
}
290+
document.documentElement.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
291+
document.querySelector('#header').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
292+
document.querySelector('body').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
300293
},
301294
/**
302295
* Method to register panels that will be called by the integrating apps

‎apps/theming/lib/Themes/DefaultTheme.php

+7
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
use OCA\Theming\AppInfo\Application;
2828
use OCA\Theming\ImageManager;
2929
use OCA\Theming\ITheme;
30+
use OCA\Theming\Service\BackgroundService;
3031
use OCA\Theming\ThemingDefaults;
3132
use OCA\Theming\Util;
3233
use OCP\App\IAppManager;
@@ -245,9 +246,15 @@ public function getCSSVariables(): array {
245246
$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
246247

247248
if ($themingBackground === 'custom') {
249+
// Custom
248250
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.theming.getBackground') . "')";
249251
} elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') {
252+
// Shipped background
250253
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
254+
} elseif (substr($themingBackground, 0, 1) === '#') {
255+
// Color
256+
unset($variables['--image-main-background']);
257+
$variables['--color-main-background-plain'] = $this->primaryColor;
251258
}
252259
}
253260

‎apps/theming/src/UserThemes.vue

+12-11
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
</template>
7575

7676
<script>
77-
import { generateOcsUrl, imagePath } from '@nextcloud/router'
77+
import { generateOcsUrl } from '@nextcloud/router'
7878
import { loadState } from '@nextcloud/initial-state'
7979
import axios from '@nextcloud/axios'
8080
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
@@ -111,13 +111,14 @@ export default {
111111
enforceTheme,
112112
shortcutsDisabled,
113113
background,
114+
backgroundVersion,
114115
themingDefaultBackground,
115116
}
116117
},
117118

118119
computed: {
119120
backgroundImage() {
120-
return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
121+
return getBackgroundUrl(this.background, this.backgroundVersion, this.themingDefaultBackground)
121122
},
122123
backgroundStyle() {
123124
if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
@@ -183,6 +184,7 @@ export default {
183184
methods: {
184185
updateBackground(data) {
185186
this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
187+
this.backgroundVersion = data.version
186188
this.updateGlobalStyles()
187189
},
188190
updateGlobalStyles() {
@@ -200,15 +202,14 @@ export default {
200202
// document.body.setAttribute('data-theme-dark', 'true')
201203
}
202204

203-
const themeElements = [document.documentElement, document.querySelector('#header'), document.querySelector('body')]
204-
for (const element of themeElements) {
205-
if (this.background === 'default') {
206-
element.style.setProperty('--image-main-background', `url('${imagePath('core', 'app-background.jpg')}')`)
207-
} else if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
208-
element.style.setProperty('--image-main-background', undefined)
209-
} else {
210-
element.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
211-
}
205+
document.documentElement.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
206+
document.querySelector('#header').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
207+
document.querySelector('body').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
208+
if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
209+
// FIXME should reload CSS from server instead of js styling on background change
210+
document.documentElement.style.setProperty('--color-main-background-plain', getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
211+
document.querySelector('#header').style.setProperty('--color-main-background-plain', getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
212+
document.querySelector('body').style.setProperty('--color-main-background-plain', getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
212213
}
213214
},
214215
changeTheme({ enabled, id }) {

‎core/css/apps.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/css/apps.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@ html {
3939
width: 100%;
4040
height: 100%;
4141
position: absolute;
42-
background-color: var(--color-primary);
42+
background-color: var(--color-main-background-plain, var(--color-main-background));
4343
background-image: var(--image-main-background);
4444
background-size: cover;
4545
background-position: center;
4646
}
4747

4848
body {
49-
background-color: var(--color-primary);
49+
background-color: var(--color-main-background-plain, var(--color-main-background));
5050
background-image: var(--image-main-background);
5151
background-size: cover;
5252
background-position: center;

‎core/css/server.css

+2-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/css/server.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/css/styles.css

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/css/styles.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/css/styles.scss

-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ ul {
9898
}
9999

100100
body {
101-
background-color: var(--color-main-background);
102101
font-weight: normal;
103102
/* bring the default font size up to 15px */
104103
font-size: var(--default-font-size);

0 commit comments

Comments
 (0)