yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1575 from umbraco/chore/profile-theme

Browse Source 
Chore: User Theme picker refactor
This commit is contained in:
Lee Kelleher
2024-04-10 20:13:36 +01:00
committed by GitHub
parent 1af12dfd69 89be11bea1
commit 251895113f
2 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts
View File

@@ -34,9 +34,7 @@ export class UmbThemeContext extends UmbContextBase<UmbThemeContext> {
if (themeAlias) {
localStorage.setItem(LOCAL_STORAGE_KEY, themeAlias);
this.#themeObserver = this.observe(
umbExtensionsRegistry
.byType('theme')
.pipe(map((extensions) => extensions.filter((extension) => extension.alias === themeAlias))),
umbExtensionsRegistry.byTypeAndFilter('theme', (extension) => extension.alias === themeAlias),
async (themes) => {
this.#styleElement?.remove();
if (themes.length > 0 && themes[0].css) {

44
src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts
View File

@@ -1,10 +1,9 @@
import type { UmbThemeContext } from '@umbraco-cms/backoffice/themes';
import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { ManifestTheme } from '@umbraco-cms/backoffice/extension-registry';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
import type { UmbThemeContext } from '@umbraco-cms/backoffice/themes';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
@customElement('umb-current-user-theme-user-profile-app')
export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
@@ -14,7 +13,7 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
private _themeAlias: string | null = null;
@state()
private _themes: Array<ManifestTheme> = [];
private _themes: Array<Option> = [];
constructor() {
super();
@@ -31,14 +30,14 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
this.observe(
umbExtensionsRegistry.byType('theme'),
(themes) => {
this._themes = themes;
this._themes = themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
},
'_observeThemeExtensions',
);
});
}
#handleThemeChange(event: UUISelectEvent) {
#onThemeChange(event: UUISelectEvent) {
if (!this.#themeContext) return;
const theme = event.target.value.toString();
@@ -46,32 +45,23 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
this.#themeContext.setThemeByAlias(theme);
}
get #options() {
return this._themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
}
render() {
if (!this._themes.length) return nothing;
return html`
<b>Select Theme</b>
<uui-select
label="theme select"
@change=${this.#handleThemeChange}
.value=${this._themeAlias}
.options=${this.#options}></uui-select>
<uui-box headline="Select theme">
<uui-select
label="Select theme"
.options=${this._themes}
.value=${this._themeAlias}
@change=${this.#onThemeChange}></uui-select>
</uui-box>
`;
}
static styles = [
css`
:host {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-4);
padding: var(--uui-size-space-5);
background: var(--uui-color-surface);
color: var(--uui-color-text);
border-radius: var(--uui-border-radius);
box-shadow: var(--uui-shadow-depth-1);
uui-select {
width: 100%;
}
`,
];