Skip to content

Commit 3cfa2c9

Browse files
bhestonbheston
authored
Explorer updates: (#171)
- Migrated to state context object - Migrated control panel to AWC - Updated styling
1 parent 02b5663 commit 3cfa2c9

File tree

15 files changed

+247
-254
lines changed

15 files changed

+247
-254
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/adaptive-ui-explorer/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
display: flex;
1717
}
1818
</style>
19-
<script type="module" src="/src/app.ts"></script>
19+
<script type="module" src="/src/index.ts"></script>
2020
</head>
2121

2222
<body>

‎packages/adaptive-ui-explorer/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
},
3030
"dependencies": {
3131
"@adaptive-web/adaptive-ui": "0.2.2",
32+
"@adaptive-web/adaptive-web-components": "0.4.2",
3233
"@microsoft/fast-element": "2.0.0-beta.26",
3334
"@microsoft/fast-foundation": "3.0.0-alpha.31",
3435
"culori": "^3.2.0"

‎packages/adaptive-ui-explorer/src/app.ts‎

Lines changed: 82 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,27 @@ import {
1919
wcagContrastLevel
2020
} from "@adaptive-web/adaptive-ui/reference";
2121
import {
22-
attr,
2322
css,
2423
customElement,
2524
FASTElement,
2625
html,
26+
Notifier,
27+
Observable,
2728
observable,
2829
ref,
2930
repeat,
31+
Subscriber,
3032
ViewTemplate,
3133
} from "@microsoft/fast-element";
3234
import { DesignToken } from "@microsoft/fast-foundation";
33-
import { AdaptiveDesignSystem, componentBaseStyles } from "@adaptive-web/adaptive-web-components";
34-
import { AllComponents } from "@adaptive-web/adaptive-web-components/all-components";
35+
import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
3536
import { ComponentType } from "./component-type.js";
3637
import { ColorBlock } from "./components/color-block.js";
3738
import { ControlPane } from "./components/control-pane/index.js";
3839
import { LayerBackground } from "./components/layer-background/index.js";
3940
import { PaletteGradient } from "./components/palette-gradient/palette-gradient.js";
4041
import { SampleApp } from "./sample/index.js";
41-
42-
AdaptiveDesignSystem.defineComponents(AllComponents);
43-
44-
DesignToken.registerDefaultStyleTarget();
42+
import { State } from "./state.js";
4543

4644
ColorBlock;
4745
ControlPane;
@@ -54,12 +52,12 @@ const colorBlockTemplate = html<App>`
5452
(x) => x.backgrounds,
5553
html<SwatchInfo, App>`
5654
<app-color-block
57-
id="${(x) => x.color.toUpperCase().replace("#", "")}"
58-
index="${(x, c) => x.index}"
59-
component="${(x, c) => c.parent.componentType}"
60-
color="${(x) => x.color}"
61-
layer-name="${(x) => x.title}"
62-
:disabledState=${(x, c) => c.parent.disabledState}
55+
id=${(x) => x.color.toUpperCase().replace("#", "")}
56+
index=${(x) => x.index}
57+
component=${(_, c) => c.parent.state.componentType}
58+
color=${(x) => x.color}
59+
layer-name=${(x) => x.title}
60+
:disabledState=${(_, c) => c.parent.state.disabledState}
6361
></app-color-block>
6462
`
6563
)}
@@ -93,13 +91,13 @@ const template = html<App>`
9391
<app-design-system-provider ${ref("designSystemElement")}></app-design-system-provider>
9492
<div class="container fill">
9593
<div class="row gradient">
96-
<app-palette-gradient :palette="${(x) => x.neutralPalette}"></app-palette-gradient>
94+
<app-palette-gradient :palette=${(x) => x.neutralPalette}></app-palette-gradient>
9795
</div>
9896
<div class="row gradient">
99-
<app-palette-gradient :palette="${(x) => x.accentPalette}"></app-palette-gradient>
97+
<app-palette-gradient :palette=${(x) => x.accentPalette}></app-palette-gradient>
10098
</div>
10199
<div class="row gradient">
102-
<app-palette-gradient :palette="${(x) => x.highlightPalette}"></app-palette-gradient>
100+
<app-palette-gradient :palette=${(x) => x.highlightPalette}></app-palette-gradient>
103101
</div>
104102
<div class="row fill">
105103
<div style="display: flex; overflow: auto;">${(x) => x.componentTypeTemplate()}</div>
@@ -108,18 +106,10 @@ const template = html<App>`
108106
</app-design-system-provider>
109107
<div>
110108
<app-layer-background
111-
id="control-pane"
112109
class="control-pane-container"
113-
base-layer-luminance="${LayerBaseLuminance.DarkMode}"
110+
base-layer-luminance=${LayerBaseLuminance.DarkMode}
114111
>
115-
<app-control-pane
116-
:componentType="${(x) => x.componentType}"
117-
:neutralColor="${(x) => x.neutralColor}"
118-
:accentColor="${(x) => x.accentColor}"
119-
:highlightColor="${(x) => x.highlightColor}"
120-
:showOnlyLayerBackgrounds="${(x) => x.showOnlyLayerBackgrounds}"
121-
@formvaluechange="${(x, c) => x.controlPaneHandler(c.event as CustomEvent)}"
122-
></app-control-pane>
112+
<app-control-pane></app-control-pane>
123113
</app-layer-background>
124114
</div>
125115
</div>
@@ -158,18 +148,18 @@ const styles = css`
158148
flex-grow: 1;
159149
}
160150
161-
.gradient {
151+
app-palette-gradient {
162152
height: 20px;
153+
flex: 1;
163154
}
164155
165156
.control-pane-container {
166157
height: 100%;
167158
z-index: 1;
168159
padding: 40px;
169160
position: relative;
170-
overflow: auto;
161+
overflow-y: auto;
171162
width: 320px;
172-
box-sizing: border-box;
173163
}
174164
175165
app-color-block {
@@ -193,95 +183,87 @@ export interface SwatchInfo {
193183
class DesignSystemProvider extends FASTElement {}
194184
DesignSystemProvider;
195185

196-
export interface AppAttributes {
197-
componentType: ComponentType;
198-
neutralColor: string;
199-
accentColor: string;
200-
highlightColor: string;
201-
showOnlyLayerBackgrounds: boolean;
202-
}
203-
204-
@customElement({
205-
name: "app-main",
206-
template,
207-
styles,
208-
})
209-
export class App extends FASTElement implements AppAttributes {
186+
export class App extends FASTElement {
210187
public canvas: DesignSystemProvider;
211188

212-
@attr({ attribute: "component-type" })
213-
public componentType: ComponentType = ComponentType.backplate;
214-
215-
@attr({ attribute: "neutral-color" })
216-
public neutralColor: string;
217-
protected neutralColorChanged(prev?: string, next?: string) {
218-
if (this.$fastController.isConnected && next) {
219-
neutralBaseColor.setValueFor(this.canvas, next);
220-
221-
this.neutralPalette = neutralPalette.getValueFor(this.canvas);
222-
this.neutralColors = this.neutralPalette.swatches.map((x) => x.toColorString());
223-
224-
this.updateBackgrounds();
225-
}
226-
}
189+
@State state!: State;
227190

228191
@observable
229192
public neutralPalette: Palette;
230193

231194
@observable
232195
public neutralColors: string[] = [];
233196

234-
@attr({ attribute: "accent-color" })
235-
public accentColor: string;
236-
protected accentColorChanged(prev?: string, next?: string) {
237-
if (this.$fastController.isConnected && next) {
238-
accentBaseColor.setValueFor(this.canvas, next);
239-
240-
this.accentPalette = accentPalette.getValueFor(this.canvas);
241-
}
242-
}
243-
244197
@observable
245198
public accentPalette: Palette;
246199

247-
@attr({ attribute: "highlight-color" })
248-
public highlightColor: string;
249-
protected highlightColorChanged(prev?: string, next?: string) {
250-
if (this.$fastController.isConnected && next) {
251-
highlightBaseColor.setValueFor(this.canvas, next);
252-
253-
this.highlightPalette = highlightPalette.getValueFor(this.canvas);
254-
}
255-
}
256-
257200
@observable
258201
public highlightPalette: Palette;
259202

260-
@observable
261-
public showOnlyLayerBackgrounds: boolean = true;
262-
protected showOnlyLayerBackgroundsChanged() {
263-
if (this.$fastController.isConnected) {
264-
this.updateBackgrounds();
265-
}
266-
}
267-
268203
@observable
269204
public backgrounds: SwatchInfo[];
270205

271-
@observable
272-
public disabledState: boolean = false;
206+
private _stateNotifier: Notifier | null;
207+
private _stateHandler: Subscriber | null;
273208

274-
public connectedCallback() {
209+
public connectedCallback(): void {
275210
super.connectedCallback();
276-
this.neutralColor = "#808080";
277-
this.accentColor = "#F26C0D";
278-
this.highlightColor = "#0DA1F2";
211+
212+
// eslint-disable-next-line @typescript-eslint/no-this-alias
213+
const app = this;
214+
this._stateNotifier = Observable.getNotifier(this.state);
215+
this._stateHandler = {
216+
handleChange(source: State, propertyName: keyof State) {
217+
if (app.$fastController.isConnected) {
218+
switch (propertyName) {
219+
case "neutralColor":
220+
neutralBaseColor.setValueFor(app.canvas, source.neutralColor);
221+
222+
app.neutralPalette = neutralPalette.getValueFor(app.canvas);
223+
app.neutralColors = app.neutralPalette.swatches.map((x) => x.toColorString());
224+
225+
app.updateBackgrounds();
226+
break;
227+
case "accentColor":
228+
accentBaseColor.setValueFor(app.canvas, source.accentColor);
229+
230+
app.accentPalette = accentPalette.getValueFor(app.canvas);
231+
break;
232+
case "highlightColor":
233+
highlightBaseColor.setValueFor(app.canvas, source.highlightColor);
234+
235+
app.highlightPalette = highlightPalette.getValueFor(app.canvas);
236+
break;
237+
case "showOnlyLayerBackgrounds":
238+
app.updateBackgrounds();
239+
break;
240+
case "wcagContrastLevel":
241+
wcagContrastLevel.setValueFor(app.canvas, source.wcagContrastLevel);
242+
break;
243+
default:
244+
break;
245+
}
246+
}
247+
},
248+
};
249+
this._stateNotifier.subscribe(this._stateHandler);
250+
251+
this.state.neutralColor = neutralBaseColor.getValueFor(this);
252+
this.state.accentColor = accentBaseColor.getValueFor(this);
253+
this.state.highlightColor = highlightBaseColor.getValueFor(this);
254+
}
255+
256+
public disconnectedCallback(): void {
257+
super.disconnectedCallback();
258+
if (this._stateHandler) {
259+
this._stateNotifier?.unsubscribe(this._stateHandler);
260+
}
279261
}
280262

281263
public designSystemElement: FASTElement;
282264

283265
public componentTypeTemplate(): ViewTemplate<App, any> {
284-
if (this.componentType === ComponentType.sample) {
266+
if (this.state.componentType === ComponentType.sample) {
285267
return sampleTemplate;
286268
} else {
287269
return colorBlockTemplate;
@@ -291,7 +273,7 @@ export class App extends FASTElement implements AppAttributes {
291273
private updateBackgrounds(): void {
292274
const layers: SwatchInfo[] = this.lightModeLayers.concat(this.darkModeLayers);
293275

294-
this.backgrounds = this.showOnlyLayerBackgrounds
276+
this.backgrounds = this.state.showOnlyLayerBackgrounds
295277
? layers
296278
: this.neutralColors.map((color: string, index: number): SwatchInfo => {
297279
const neutralLayerIndex: number = layers.findIndex(
@@ -354,15 +336,10 @@ export class App extends FASTElement implements AppAttributes {
354336
private get darkModeLayers(): SwatchInfo[] {
355337
return this.resolveLayerRecipes(LayerBaseLuminance.DarkMode);
356338
}
357-
358-
public controlPaneHandler(e: CustomEvent) {
359-
const detail: { field: string; value: any } = e.detail;
360-
if (detail.field === "wcagContrastLevel") {
361-
if (this.$fastController.isConnected) {
362-
wcagContrastLevel.setValueFor(this.canvas, detail.value);
363-
}
364-
} else {
365-
(this as any)[detail.field] = detail.value;
366-
}
367-
}
368339
}
340+
341+
export const app = App.compose({
342+
name: "app-main",
343+
template,
344+
styles,
345+
});

‎packages/adaptive-ui-explorer/src/components/adaptive-component.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { ElementStylesRenderer, Interactivity } from "@adaptive-web/adaptive-ui";
22
import type { Styles } from "@adaptive-web/adaptive-ui";
3+
import { cornerRadiusControl, densityControl, typeRampBaseFontSize } from "@adaptive-web/adaptive-ui/reference";
4+
import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
35
import {
46
attr,
57
css,
@@ -22,14 +24,15 @@ function template<T extends AdaptiveComponent>(): ElementViewTemplate<T> {
2224
}
2325

2426
const styles = css`
27+
${componentBaseStyles}
28+
2529
:host {
2630
display: flex;
2731
align-items: center;
28-
padding: 6px 12px;
29-
box-sizing: border-box;
30-
font-size: 14px;
3132
justify-items: start;
32-
border-radius: 4px;
33+
border-radius: ${cornerRadiusControl};
34+
padding: ${densityControl.padding};
35+
font-size: ${typeRampBaseFontSize};
3336
cursor: pointer;
3437
}
3538
`;

0 commit comments

Comments
 (0)