Skip to content

Commit 7fce724

Browse files
OsamaSayeghellaestigoy
OsamaSayegh
and
ellaestigoy
authored
FEATURE: Theme-owned color palettes (#32795)
This commit removes the color palette dropdown from the theme page and replaces it with a new "Colors" tab where the theme's color palette can be edited directly in that tab on the theme page. With this change, a theme's color palette is strongly tied to its theme and can't be linked to other themes and it can't be selected by users without using the theme as well. All of the changes are behind a feature flag. To enable it, turn on the `use_overhauled_theme_color_palette` setting. Co-authored-by: Ella <ella.estigoy@gmail.com>
1 parent a5d6e6a commit 7fce724

File tree

48 files changed

+2443
-1384
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2443
-1384
lines changed

‎app/assets/javascripts/admin/addon/adapters/theme.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,6 @@ export default class Theme extends RestAdapter {
77
return "/admin/";
88
}
99

10-
pathFor(store, type, findArgs) {
11-
if (findArgs?.useConfigAreaEndpoint) {
12-
return "/admin/config/customize/themes";
13-
}
14-
return super.pathFor(...arguments);
15-
}
16-
1710
afterFindAll(results) {
1811
let map = {};
1912

‎app/assets/javascripts/admin/addon/components/admin-config-areas/color-palette.gjs

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,13 @@ export default class AdminConfigAreasColorPalette extends Component {
5555
}
5656

5757
@action
58-
onLightColorChange(name, value) {
59-
const color = this.data.colors.find((c) => c.name === name);
58+
onLightColorChange(color, value) {
6059
color.hex = value;
6160
this.hasChangedColors = true;
6261
}
6362

6463
@action
65-
onDarkColorChange(name, value) {
66-
const color = this.data.colors.find((c) => c.name === name);
64+
onDarkColorChange(color, value) {
6765
color.dark_hex = value;
6866
this.hasChangedColors = true;
6967
}

‎app/assets/javascripts/admin/addon/components/admin-site-settings-changes-banner.gjs

Lines changed: 11 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,27 @@
11
import Component from "@glimmer/component";
2-
import { tracked } from "@glimmer/tracking";
32
import { action } from "@ember/object";
4-
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
5-
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
63
import { service } from "@ember/service";
7-
import DButton from "discourse/components/d-button";
8-
import htmlSafe from "discourse/helpers/html-safe";
4+
import { gt } from "truth-helpers";
95
import { i18n } from "discourse-i18n";
6+
import ChangesBanner from "admin/components/changes-banner";
107

118
export default class AdminSiteSettingsChangesBanner extends Component {
129
@service siteSettingChangeTracker;
1310

14-
@tracked isSaving = false;
15-
_resizer = null;
16-
1711
@action
1812
async save() {
19-
this.isSaving = true;
20-
21-
try {
22-
await this.siteSettingChangeTracker.save();
23-
} finally {
24-
this.isSaving = false;
25-
}
13+
await this.siteSettingChangeTracker.save();
2614
}
2715

2816
@action
2917
discard() {
3018
this.siteSettingChangeTracker.discard();
3119
}
3220

33-
@action
34-
setupResizeObserver(element) {
35-
const container = document.getElementById("main-container");
36-
this._resizer = () => this.positionBanner(container, element);
37-
38-
this._resizer();
39-
40-
this._resizeObserver = window.addEventListener("resize", this._resizer);
41-
}
42-
43-
@action
44-
teardownResizeObserver() {
45-
window.removeEventListener("resize", this._resizer);
46-
}
47-
48-
positionBanner(container, element) {
49-
if (container) {
50-
const { width } = container.getBoundingClientRect();
51-
52-
element.style.width = `${width}px`;
53-
}
54-
}
55-
5621
get dirtyCount() {
5722
return this.siteSettingChangeTracker.count;
5823
}
5924

60-
get showBanner() {
61-
return this.dirtyCount > 0;
62-
}
63-
6425
get bannerLabel() {
6526
return i18n("admin.site_settings.dirty_banner", {
6627
count: this.dirtyCount,
@@ -80,30 +41,14 @@ export default class AdminSiteSettingsChangesBanner extends Component {
8041
}
8142

8243
<template>
83-
{{#if this.showBanner}}
84-
<div
85-
class="admin-site-settings__changes-banner"
86-
{{didInsert this.setupResizeObserver}}
87-
{{willDestroy this.teardownResizeObserver}}
88-
>
89-
<span>{{htmlSafe this.bannerLabel}}</span>
90-
<div class="controls">
91-
<DButton
92-
@action={{this.discard}}
93-
@disabled={{this.isSaving}}
94-
class="btn-secondary btn-small"
95-
>
96-
{{this.discardLabel}}
97-
</DButton>
98-
<DButton
99-
@action={{this.save}}
100-
@isLoading={{this.isSaving}}
101-
class="btn-primary btn-small"
102-
>
103-
{{this.saveLabel}}
104-
</DButton>
105-
</div>
106-
</div>
44+
{{#if (gt this.dirtyCount 0)}}
45+
<ChangesBanner
46+
@bannerLabel={{this.bannerLabel}}
47+
@saveLabel={{this.saveLabel}}
48+
@discardLabel={{this.discardLabel}}
49+
@save={{this.save}}
50+
@discard={{this.discard}}
51+
/>
10752
{{/if}}
10853
</template>
10954
}

‎app/assets/javascripts/admin/addon/components/changes-banner.gjs

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import Component from "@glimmer/component";
2+
import { tracked } from "@glimmer/tracking";
3+
import { action } from "@ember/object";
4+
import { modifier } from "ember-modifier";
5+
import DButton from "discourse/components/d-button";
6+
import htmlSafe from "discourse/helpers/html-safe";
7+
8+
export default class ChangesBanner extends Component {
9+
@tracked isSaving = false;
10+
11+
resizerModifier = modifier((element) => {
12+
const container = document.getElementById("main-container");
13+
const resizer = () => this.positionBanner(container, element);
14+
resizer();
15+
16+
window.addEventListener("resize", resizer);
17+
return () => window.removeEventListener("resize", resizer);
18+
});
19+
20+
@action
21+
async save() {
22+
this.isSaving = true;
23+
24+
try {
25+
await this.args.save();
26+
} finally {
27+
this.isSaving = false;
28+
}
29+
}
30+
31+
positionBanner(container, element) {
32+
if (container) {
33+
const { width } = container.getBoundingClientRect();
34+
35+
element.style.width = `${width}px`;
36+
}
37+
}
38+
39+
<template>
40+
<div class="admin-changes-banner" {{this.resizerModifier}}>
41+
<span class="admin-changes-banner__main-label">{{htmlSafe
42+
@bannerLabel
43+
}}</span>
44+
<div class="controls">
45+
<DButton
46+
class="btn-secondary btn-small"
47+
@action={{@discard}}
48+
@disabled={{this.isSaving}}
49+
@translatedLabel={{@discardLabel}}
50+
/>
51+
<DButton
52+
class="btn-primary btn-small"
53+
@action={{this.save}}
54+
@isLoading={{this.isSaving}}
55+
@translatedLabel={{@saveLabel}}
56+
/>
57+
</div>
58+
</div>
59+
</template>
60+
}

0 commit comments

Comments
 (0)