From da152b85852e61d54451dc364e146e1f47eddce9 Mon Sep 17 00:00:00 2001 From: Lee-Orr Date: Thu, 28 Mar 2024 11:25:02 -0400 Subject: [PATCH] Initial restyle (#111) ![image](https://github.com/storytold/storyteller-bevy/assets/10376144/b8078ef3-8d36-433d-b75b-5c410eec7b85) --- .../src/app/anim-editor.element.scss | 26 +- .../src/app/anim-editor.element.ts | 18 +- studio-frontend/src/app/app.element.scss | 238 ++++++++++-------- studio-frontend/src/app/app.element.ts | 188 ++++++-------- studio-frontend/src/styles.scss | 13 + studio-ui/src/lib/toolbar-group.element.scss | 2 +- .../inspector/entity-inspector.element.scss | 15 +- .../lib/inspector/entity-inspector.element.ts | 112 +++++---- .../src/lib/transform-toolbar.element.scss | 7 +- 9 files changed, 334 insertions(+), 285 deletions(-) diff --git a/studio-frontend/src/app/anim-editor.element.scss b/studio-frontend/src/app/anim-editor.element.scss index 07a10c2..000266b 100644 --- a/studio-frontend/src/app/anim-editor.element.scss +++ b/studio-frontend/src/app/anim-editor.element.scss @@ -1,8 +1,30 @@ :host { + display: grid; + grid-template-rows: subgrid; + grid-template-columns: subgrid; +} + +.timeline-controls { + align-self: end; + justify-self: center; + display: flex; + justify-content: center; + grid-column: center-toolbar; + grid-row: bottom-toolbar; + background-color: var(--color-toolbar-background); + padding: var(--padding); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + +} + +.timeline-wrapper { + grid-area: timeline; display: grid; border-radius: 8px; - background: #0006; - backdrop-filter: blur(16px); + background: var(--color-panel-background); grid-template-columns: [sidebar-start] min-content [sidebar-end divider-start] 8px [divider-end diff --git a/studio-frontend/src/app/anim-editor.element.ts b/studio-frontend/src/app/anim-editor.element.ts index 22d18f0..e790518 100644 --- a/studio-frontend/src/app/anim-editor.element.ts +++ b/studio-frontend/src/app/anim-editor.element.ts @@ -323,14 +323,9 @@ export class AnimEditorElement extends LitElement const none_selected = !selected; return html` -
+
- + ${this.keyingMode === "automatic" ? html` +
+
+
${tracklist}
@@ -409,6 +412,7 @@ export class AnimEditorElement extends LitElement .track_ordered=${track_order_hashed} .track_animation_target_ordered=${track_animation_target_order_hashed} > +
` }; }; diff --git a/studio-frontend/src/app/app.element.scss b/studio-frontend/src/app/app.element.scss index 5ad99a2..943c528 100644 --- a/studio-frontend/src/app/app.element.scss +++ b/studio-frontend/src/app/app.element.scss @@ -5,120 +5,152 @@ $hierarchy-width: 290px; .app-root { position: fixed; inset: 0; + --sidebar-width: 300px; + --timeline-height: max-content; } -// Layout utilities -.v-start { - position: absolute; - top: 16px; -} -.v-end { - position: absolute; - bottom: 16px; -} -.v-after-toolbar { - position: absolute; - top: 60px; -} -.h-start { left: 16px } -.h-end { right: 16px } -.h-center { - left: 50%; - transform: translateX(-50%); +.wrapper { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: grid; + + grid-template-columns: [timeline-start screen-start] 2rem [left-toolbar-start help-start] max-content [left-toolbar-end] auto [center-toolbar-start] max-content [center-toolbar-end] auto [right-toolbar-start] max-content [right-toolbar-end] 2rem [screen-end help-end sidebar-start] var(--sidebar-width) [sidebar-end timeline-end]; + grid-template-rows: [top-toolbar-start sidebar-start screen-start] min-content [top-toolbar-end help-start sidebar-view-start] max-content [help-end] auto [bottom-toolbar-start] max-content [bottom-toolbar-end sidebar-end sidebar-view-end screen-end timeline-start] var(--timeline-height) [timeline-end]; + + .studio-scene { + position: fixed; + bottom: 0; + left: 0; + right: 0; + } + + .action-toolbar { + grid-column: left-toolbar; + grid-row: top-toolbar; + padding-top: var(--padding); + + sts-toolbar-group { + gap: var(--padding); + } + + sts-button { + background-color: var(--color-toolbar-background); + } + + z-index: 1; + } + + .timeline { + grid-row-start: bottom-toolbar-start; + grid-row-end: timeline-end; + grid-column: timeline; + z-index: 1; + border-radius: 0; + } + + .sidebar { + display: grid; + grid-area: sidebar; + grid-template-rows: subgrid; + z-index: 1; + background-color: var(--color-panel-background); + border-radius: 0; + + + position: relative; + padding: var(--padding); + padding-left: 0.5rem; + + .resize-handle { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 0.5rem; + background: #0004; + transition: 66.666ms background linear; + + &:hover { + background: #FFF1; + } + } + + .sidebar-header { + grid-row: top-toolbar; + display: flex; + flex-direction: row; + justify-content: stretch; + gap: 0; + + .sidebar-tab { + border: none; + background: none; + border-bottom: 2px var(--color-toolbar-background) solid; + flex-grow: 1; + border-radius: 0; + + &.current-tab { + color: var(--color-text-bright); + border-bottom-color: var(--color-accent); + } + } + } + + .sidebar-view { + grid-row: sidebar-view; + } + } + + .help { + grid-area: help; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: start; + } + + .entity-inspector { + grid-column: left-toolbar; + grid-row: bottom-toolbar; + z-index: 1; + padding-bottom: var(--padding); + } + + .transform-toolbar { + grid-column: center-toolbar; + grid-row: top-toolbar; + background-color: var(--color-toolbar-background); + z-index: 1; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: var(--corner-radius); + border-bottom-left-radius: var(--corner-radius); + padding: var(--padding); + display: flex; + flex-direction: row; + gap: 1rem; + + .add-to-scene-dropdown { + background-color: var(--color-toolbar-background-light); + font-size: 16px; + padding: 10px 12px; + } + } } .studio-scene.block-pointer-events::part(canvas) { pointer-events: none; } -sts-button.active { - background: #7A2C34E3; - color: #FFF; -} - -// TODO: Probably move this -.inspector-open { - display: flex; - align-items: center; - justify-content: center; - width: 52px; - height: 52px; - border-radius: 24px; - - appearance: none; - border: none; - background: #0006; - backdrop-filter: blur(16px); - color: #FFFC; - transition: { - property: background-color, color; - duration: 100ms; - timing-function: linear; - } - cursor: pointer; - - font-size: 20px; - - &:hover { - background: #0008; - color: #FFFF; - } -} - -.inspector { - display: flex; - flex-direction: column; - border-radius: 0.5rem; - border: 0.5rem solid #0004 { - block-start: none; - inline-start: none; - } - padding: { - block-start: 2rem; - inline-start: 0.5rem; - } - - background: #0006; - backdrop-filter: blur(16px); - - &__hierarchy { - flex: 0 0 calc(50% - 0.25rem); - } - - &__entity { - flex: 1 0 0; - height: 0; - } - - .resize-handle { - background: #0004; - transition: 66.666ms background linear; - - &:hover { - background: #FFF1; - } - - &--h-start { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 0.5rem; - cursor: ew-resize; - } - - &--v-center { - height: 0.5rem; - cursor: ns-resize - } - } -} - .inspector-header { display: flex; align-items: center; justify-content: space-between; height: 2rem; + padding: 0 { inline-start: 0.75rem; } @@ -133,6 +165,7 @@ sts-button.active { &__label { margin: 0; color: #FFF9; + font: { family: "Fira Sans", sans-serif; size: math.div(15, 16) * 1rem; @@ -151,6 +184,7 @@ sts-button.active { background: transparent; border: none; color: #FFFC; + transition: { property: color, background-color; duration: 66.666ms; @@ -170,4 +204,4 @@ sts-button.active { .menu-button-icon { font-size: 12px; opacity: 0.75; -} +} \ No newline at end of file diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts index ecac5a8..26f7bfa 100644 --- a/studio-frontend/src/app/app.element.ts +++ b/studio-frontend/src/app/app.element.ts @@ -14,7 +14,7 @@ import { StudioURLParams, } from "@storyteller/studio-web"; import { match } from "@storyteller/utility"; -import { LitElement, html, nothing } from "lit"; +import { LitElement, TemplateResult, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; import { createRef, ref } from "lit/directives/ref.js"; @@ -48,14 +48,15 @@ import { mock_save_load } from "./util"; }) export class AppElement extends LitElement { @state() showHelp = false; - @state() showInspector = false; @state() loading = true; @state() resizingPanel = false; @state() inspectorWidth = 320; - @state() hierarchyHeight?: number; - #enableAnimTimeline = true; // TODO + @state() sidebars: Array<{ title: string, name: string}> = [{title: 'Hierarchy', name: 'hierarchy'}]; + + @state() currentSidebar : string = 'hierarchy'; + private api = new StorytellerApi(); #addToSceneButtonRef = createRef(); @@ -120,7 +121,7 @@ export class AppElement extends LitElement { onSceneStateChange({ detail: state }: SceneStateEvent): void { console.log("scene state change:", SceneState[state]); - this.loading = match (state, { + this.loading = match(state, { [SceneState.Active]: () => false, _: () => true, }); @@ -139,41 +140,43 @@ export class AppElement extends LitElement { this.inspectorWidth = Math.max(Math.min(updated, 1024), 128); } - resizeHierarchyHeight(event: PointerEvent): void { - let availableHeight = this.#inspectorRef.value?.clientHeight; - if (availableHeight == null) return; - // Account for: - // - `section.inspector` padding (2rem ~= 32px) - // - resize-handle (0.5rem ~= 8px) - // - minimal space for `sts-entity-inspector` (2rem ~= 32px) - availableHeight -= 72; - - const height = this.hierarchyHeight ?? this.#hierarchyRef.value?.offsetHeight; - if (height == null) return; - - const updated = height + event.movementY; - this.hierarchyHeight = Math.max(Math.min(updated, availableHeight), 8); - } - - minimizeInspector(): void { - this.showInspector = false; - } - - openInspector(): void { - this.showInspector = true; - } - toggleHelp(): void { this.showHelp = !this.showHelp; } + renderSidebar(): TemplateResult<1> { + if (this.currentSidebar === 'hierarchy') { + return html``; + } + + return html`<>`; + } + protected override render() { return html` + + ${this.#params.mode === StudioMode.Editor ? html` + { + this.#mediaLibraryRef.value?.open(); + }} + > + + ` : html`<>`} +
- + ${this.#params.mode === StudioMode.Editor ? html` studio.saveScene()} > - Save - - - Add to Scene - + Save Scene ` : nothing} Help @@ -222,99 +213,62 @@ export class AppElement extends LitElement { ${this.#params.mode === StudioMode.Editor ? html` - { - this.#mediaLibraryRef.value?.open(); - }} - > - +
+ + + +
- - - ${this.showInspector ? html`
-
-

- Inspector -

- -
+
+ ${this.sidebars.map(({title, name}) => { + return html`${title}` + })} +
- + ${this.renderSidebar()}
- - - -
- ` : html` - - `} - ${this.#enableAnimTimeline ? html` +
+ +
+ - ` : nothing} ` : nothing} - + ${this.showHelp ? html` - +
+ +
` : nothing} +
+ ${this.loading ? html` diff --git a/studio-frontend/src/styles.scss b/studio-frontend/src/styles.scss index 3782467..ac635b1 100644 --- a/studio-frontend/src/styles.scss +++ b/studio-frontend/src/styles.scss @@ -7,4 +7,17 @@ html, body { height: 100%; margin: 0; overflow: hidden; + + --color-panel-background: #1e1e2c; + --color-toolbar-background: #2c2c3b; + --color-toolbar-background-light: #595970; + --color-panel-item-name-background: #39394d; + --color-panel-item-background: #55556b; + --color-accent: #fc6b68; + --color-text: #dbdbdf; + --color-text-bright: #ffffff; + --color-text-disabled: #7c7c85; + + --corner-radius: 0.75rem; + --padding: 0.4rem; } diff --git a/studio-ui/src/lib/toolbar-group.element.scss b/studio-ui/src/lib/toolbar-group.element.scss index 462ff27..5e2eaf0 100644 --- a/studio-ui/src/lib/toolbar-group.element.scss +++ b/studio-ui/src/lib/toolbar-group.element.scss @@ -4,7 +4,7 @@ } ::slotted(*) { - border-radius: 0; + border-radius: var(--corner-radius); } ::slotted(:first-child) { diff --git a/studio-web/src/lib/inspector/entity-inspector.element.scss b/studio-web/src/lib/inspector/entity-inspector.element.scss index 8dc794d..ddc3023 100644 --- a/studio-web/src/lib/inspector/entity-inspector.element.scss +++ b/studio-web/src/lib/inspector/entity-inspector.element.scss @@ -3,10 +3,11 @@ display: flex; flex-direction: column; - gap: 1.5rem; - padding: 1rem; + gap: var(--padding); overflow: auto; + --background-color: var(--color-panel-background); + color: #FFFC; &::-webkit-scrollbar { @@ -31,3 +32,13 @@ *, *::before, *::after { box-sizing: border-box; } + +.container { + background-color: var(--background-color); + border-radius: var(--corner-radius); + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: var(--padding); + gap: var(--padding); +} \ No newline at end of file diff --git a/studio-web/src/lib/inspector/entity-inspector.element.ts b/studio-web/src/lib/inspector/entity-inspector.element.ts index 0c89348..b7865a9 100644 --- a/studio-web/src/lib/inspector/entity-inspector.element.ts +++ b/studio-web/src/lib/inspector/entity-inspector.element.ts @@ -34,63 +34,71 @@ export class EntityInspectorElement extends LitElement { this.requestUpdate(); } - protected override render = () => html` - ${this._sceneData - ?.selectionComponents - .slice() - .sort((a, b) => { - const ordA = COMPONENT_SORT_ORDER.indexOf(a.name); - const ordB = COMPONENT_SORT_ORDER.indexOf(b.name); + protected override render () { + let components = this._sceneData + ?.selectionComponents + .slice() + .sort((a, b) => { + const ordA = COMPONENT_SORT_ORDER.indexOf(a.name); + const ordB = COMPONENT_SORT_ORDER.indexOf(b.name); - if (ordA === -1) return Infinity; - if (ordB === -1) return -Infinity; + if (ordA === -1) return Infinity; + if (ordB === -1) return -Infinity; - return ordA - ordB; - }) - .map(({ name, value }) => { - switch (name) { - case "bevy_core::name::Name": { - return html` - - `; - } - case "bevy_transform::components::transform::Transform": { - return html` - - `; - } - case "bevy_pbr::pbr_material::StandardMaterial": { - const { colorSpace, baseColor } = isLinear(value.base_color) - ? { colorSpace: "linear", baseColor: value.base_color.RgbaLinear } - : { colorSpace: "srgb", baseColor: value.base_color.Rgba }; - - return html` - - `; - } - default: { - return nothing; - // return html` - //

Unknown Component: ${name}

- // 
${JSON.stringify({ name, value }, null, "   ")}
- // `; - } + return ordA - ordB; + }) + .map(({ name, value }) => { + switch (name) { + case "bevy_core::name::Name": { + return html` + + `; } - }) + case "bevy_transform::components::transform::Transform": { + return html` + + `; + } + case "bevy_pbr::pbr_material::StandardMaterial": { + const { colorSpace, baseColor } = isLinear(value.base_color) + ? { colorSpace: "linear", baseColor: value.base_color.RgbaLinear } + : { colorSpace: "srgb", baseColor: value.base_color.Rgba }; + + return html` + + `; + } + default: { + return nothing; + // return html` + //

Unknown Component: ${name}

+ // 
${JSON.stringify({ name, value }, null, "   ")}
+ // `; + } + } + }).filter((value) => value !== nothing) || []; + if (components?.length === 0) { + return nothing; } + return html` +
+ ${components + } +
`; + } } const COMPONENT_SORT_ORDER: Array = [ diff --git a/studio-web/src/lib/transform-toolbar.element.scss b/studio-web/src/lib/transform-toolbar.element.scss index 43fbb31..f45d156 100644 --- a/studio-web/src/lib/transform-toolbar.element.scss +++ b/studio-web/src/lib/transform-toolbar.element.scss @@ -8,7 +8,7 @@ pointer-events: auto; // TODO: Copypasta - background: #0006; + background: var(--color-toolbar-background); color: #FFFC; backdrop-filter: blur(16px); transition: { @@ -16,6 +16,7 @@ duration: 0.1s; timing-function: linear; } + border-radius: var(--corner-radius); &:hover { background: #0008; @@ -28,7 +29,9 @@ } &:has(:checked) { - background: #7A2C34E3; + border-color: var(--color-accent); + border-width: 2px; + border-style: solid; color: #FFF; &:hover {