Skip to content

Commit 49ebc21

Browse files
PytalPytal
committed
Fix various theming bugs
Signed-off-by: Christopher Ng <chrng8@gmail.com>
1 parent 15f0674 commit 49ebc21

20 files changed

+38
-150
lines changed

‎apps/dashboard/src/DashboardApp.vue

+1-27
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'
@@ -99,13 +99,11 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
9999
import Vue from 'vue'
100100
101101
import isMobile from './mixins/isMobile.js'
102-
import { getBackgroundUrl } from './helpers/getBackgroundUrl.js'
103102
104103
const panels = loadState('dashboard', 'panels')
105104
const firstRun = loadState('dashboard', 'firstRun')
106105
107106
const background = loadState('theming', 'background')
108-
const backgroundVersion = loadState('theming', 'backgroundVersion')
109107
const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
110108
const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
111109
@@ -155,19 +153,6 @@ export default {
155153
}
156154
},
157155
computed: {
158-
backgroundImage() {
159-
return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
160-
},
161-
backgroundStyle() {
162-
if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
163-
|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
164-
return null
165-
}
166-
167-
return {
168-
backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
169-
}
170-
},
171156
greeting() {
172157
const time = this.timer.getHours()
173158
@@ -286,17 +271,6 @@ export default {
286271
// document.body.removeAttribute('data-theme-light')
287272
// document.body.setAttribute('data-theme-dark', 'true')
288273
}
289-
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-
}
300274
},
301275
/**
302276
* Method to register panels that will be called by the integrating apps

‎apps/dashboard/src/helpers/getBackgroundUrl.js

-49
This file was deleted.

‎apps/dashboard/src/helpers/prefixWithBaseUrl.js

-25
This file was deleted.

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

+6
Original file line numberDiff line numberDiff line change
@@ -245,9 +245,15 @@ public function getCSSVariables(): array {
245245
$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
246246

247247
if ($themingBackground === 'custom') {
248+
// Custom
248249
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')";
249250
} elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') {
251+
// Shipped background
250252
$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
253+
} elseif (substr($themingBackground, 0, 1) === '#') {
254+
// Color
255+
unset($variables['--image-main-background']);
256+
$variables['--color-main-background-plain'] = $this->primaryColor;
251257
}
252258
}
253259

‎apps/theming/src/UserThemes.vue

+4-27
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'
@@ -83,8 +83,6 @@ import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
8383
import BackgroundSettings from './components/BackgroundSettings.vue'
8484
import ItemPreview from './components/ItemPreview.vue'
8585

86-
import { getBackgroundUrl } from '../src/helpers/getBackgroundUrl.js'
87-
8886
const availableThemes = loadState('theming', 'themes', [])
8987
const enforceTheme = loadState('theming', 'enforceTheme', '')
9088
const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
@@ -111,24 +109,12 @@ export default {
111109
enforceTheme,
112110
shortcutsDisabled,
113111
background,
112+
backgroundVersion,
114113
themingDefaultBackground,
115114
}
116115
},
117116

118117
computed: {
119-
backgroundImage() {
120-
return getBackgroundUrl(this.background, backgroundVersion, this.themingDefaultBackground)
121-
},
122-
backgroundStyle() {
123-
if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
124-
|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
125-
return null
126-
}
127-
128-
return {
129-
backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
130-
}
131-
},
132118
themes() {
133119
return this.availableThemes.filter(theme => theme.type === 1)
134120
},
@@ -183,7 +169,9 @@ export default {
183169
methods: {
184170
updateBackground(data) {
185171
this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value
172+
this.backgroundVersion = data.version
186173
this.updateGlobalStyles()
174+
this.$emit('update:background')
187175
},
188176
updateGlobalStyles() {
189177
// Override primary-invert-if-bright and color-primary-text if background is set
@@ -199,17 +187,6 @@ export default {
199187
// document.body.removeAttribute('data-theme-light')
200188
// document.body.setAttribute('data-theme-dark', 'true')
201189
}
202-
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-
}
212-
}
213190
},
214191
changeTheme({ enabled, id }) {
215192
// Reset selected and select new one

‎apps/theming/src/components/BackgroundSettings.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
{{ t('theming', 'Default image') }}
3939
</button>
4040
<button class="background color"
41-
:class="{ active: background === 'custom' }"
41+
:class="{ active: background.startsWith('#') }"
4242
tabindex="0"
4343
@click="pickColor">
4444
{{ t('theming', 'Plain background') }}

‎apps/theming/src/helpers/getBackgroundUrl.js

-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@
2222
*
2323
*/
2424

25-
// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/getBackgroundUrl.js`
26-
2725
import { generateUrl } from '@nextcloud/router'
2826
import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'
2927

‎apps/theming/src/helpers/prefixWithBaseUrl.js

-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
*
2121
*/
2222

23-
// FIXME hoist this into a package? The same logic is used in `apps/dashboard/src/helpers/prefixWithBaseUrl.js`
24-
2523
import { generateFilePath } from '@nextcloud/router'
2624

2725
export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url

‎apps/theming/src/settings.js

+12
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,15 @@ Vue.prototype.t = t
3030
const View = Vue.extend(App)
3131
const theming = new View()
3232
theming.$mount('#theming')
33+
34+
theming.$on('update:background', () => {
35+
// Refresh server-side generated theming CSS
36+
[...document.head.querySelectorAll('link.theme')].forEach(theme => {
37+
const url = new URL(theme.href)
38+
url.searchParams.set('v', Date.now())
39+
const newTheme = theme.cloneNode()
40+
newTheme.href = url.toString()
41+
newTheme.onload = () => theme.remove()
42+
document.head.append(newTheme)
43+
})
44+
})

‎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.

0 commit comments

Comments
 (0)