Skip to content

added tabs to side bar, including hierarchy #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

added tabs to side bar, including hierarchy #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9fa2dca
added tabs to side bar, including hierarchy
Apr 3, 2024
7565197
fixed hierarchy import
Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions studio-frontend/src/app/app.element.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,13 @@ $hierarchy-width: 290px;
border-radius: 0;
}

.sidebar {
display: grid;
sts-inspector {}



.sidebar, sts-inspector {
pointer-events: all;
// display: grid;
grid-area: sidebar;
grid-template-rows: subgrid;
z-index: 1;
Expand All @@ -63,8 +68,8 @@ $hierarchy-width: 290px;


position: relative;
padding: var(--padding);
padding-left: 0.5rem;
// padding: var(--padding);
// padding-left: 0.5rem;

.resize-handle {
position: absolute;
Expand Down
27 changes: 2 additions & 25 deletions studio-frontend/src/app/app.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import "@storyteller/studio-web/studio";
import "@storyteller/studio-web/transform-toolbar";
import "./anim-editor.element";
import "./help.element";
import "./inspector.element";
import "./temp-video-preview.element";

import "./app.element.scss";
Expand Down Expand Up @@ -231,31 +232,7 @@ export class AppElement extends LitElement {
<sts-transform-toolbar></sts-transform-toolbar>
</div>

<section
${ref(this.#inspectorRef)}
class="sidebar"
style=${styleMap({
width: `${this.inspectorWidth}px`,
})}
aria-labelledby="sidebar-heading"
>
<div class="sidebar-header">
${this.sidebars.map(({title, name}) => {
return html`<sts-button class=${classMap({"current-tab": name === this.currentSidebar, "sidebar-tab": true})}>${title}</sts-button>`
})}
</div>

${this.renderSidebar()}

<div
class="resize-handle"
${drag({
start: this.onPanelResizeStart,
end: this.onPanelResizeEnd,
move: this.resizeInspectorWidth,
})}
></div>
</section>
<sts-inspector></sts-inspector>

<div class="entity-inspector">
<sts-entity-inspector></sts-entity-inspector>
Expand Down
26 changes: 23 additions & 3 deletions studio-frontend/src/app/bubble-select.element.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,30 @@
@use "sass:math";

:host {
// background: red;
font-family: "Fira Sans", sans-serif;
font-size: 15px;
color: #fff;

label {
display: block;
margin-bottom: .5rem;
}
}

.studio-bubble-options {
display: flex;
gap: 0.6rem;
box-sizing: border-box;
overflow-x: scroll;
padding: 4px 4px 1rem;
}

*, *::before, *::after {
box-sizing: border-box;
}

.bubble {
// pointer-events: all;
position: relative;
flex: 0 0 auto;
display: flex;
Expand All @@ -26,9 +39,9 @@
}

outline: #FFF2 solid 2px;
color: rgba(#fff, 0.75);
color: transparent;
transition: {
property: background-color, outline-color;
property: color, background-color, outline-color;
duration: 200ms;
timing-function: ease;
}
Expand All @@ -49,9 +62,16 @@

.label {
position: relative;
// color: transparent;
width: 100%;
text-wrap: wrap;
font: {
size: math.div(12, 16) * 1rem;
weight: 500;
}
}

&:hover {
color: rgba(#fff, 0.75);
}
}
47 changes: 25 additions & 22 deletions studio-frontend/src/app/bubble-select.element.ts
View file
Open in desktop
Copy link
Contributor

@dannymcgee dannymcgee Apr 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few things here:

SelectBaseStyle

  1. How would you feel about styling the scrollbar to be less invasive? It's pretty ugly on Windows. You can copy the scrollbar styles from studio-web/src/lib/scene-hierarchy.element.scss if you don't have any objections. (And we'll extract this type of thing to Sass mixins soon so there's not so much copypasta going on with styles)

  2. Is it expected that most of the options don't have images currently? Are we waiting for a frontend update so those get populated?

  3. Did you talk to @bflatastic about hiding the labels by default? I'm not sure if I love it, tbh. The missing images obviously make it worse, but even when the images are there I worry that it just makes it unnecessarily difficult to understand what the options actually represent.

    If we do keep the hidden labels, we should probably give the same treatment to the gradient overlays, since they make the images a little harder to "read" and don't serve much purpose except making the labels more legible.

EDIT: Just got off the call with you re: this feature being moved into its own page. 😆 Feel free to ignore anything in this comment that won't be relevant for the new design.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't even think we're going to keep that input for styles. We have a lot of styles and it doesn't seem to accommodate them well.

Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,30 @@ export class BubbleSelect extends FormFieldBaseElement {
}

protected override render = () => html`
${ this.options.map(({ label, value, imageUrl }) => html`
<div
class=${classMap({
"bubble": true,
"selected": value === this.value,
})}
style=${styleMap({
"background-image": `url(${imageUrl})`,
})}
@click=${() => {
// this.onChange({ target: { name: this.name, value: itemValue } });
this.dispatchEvent(new CustomEvent("value-change", {
detail: value,
}))
} }
>
<div class="gradient"></div>
<span class="label">
${ label }
</span>
</div>`
)}
<label>Select base style</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're making this a fully self-contained one-off instead of a generic/reusable form control, we should probably revert the class to extends LitElement and remove the override role property and override update method.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't even know what override does, so we can get rid of it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't even know what override does, so we can get rid of it

override is a TypeScript-specific keyword, indicating that you're overriding a property/method that exists in a parent class. I.e.:

class Dog {
  bark() {
    console.log("Woof")
  }
}

class FrenchBulldog extends Dog {
  override bark() {
    console.log("Le woof")
  }
}

On a related note, if FrenchBulldog called super.bark() before its console log, then it would print "Woof" and then "Le woof" to the console, but the way it's written in that snippet it would only print "Le woof". That's why we always call the super method in our LitElement overrides, because they're usually doing important things that will cause the component to break if we forget it.

<div class="studio-bubble-options">
${ this.options.map(({ label, value, imageUrl }) => html`
<div
class=${classMap({
"bubble": true,
"selected": value === this.value,
})}
style=${styleMap({
"background-image": `url(${imageUrl})`,
})}
@click=${() => {
// this.onChange({ target: { name: this.name, value: itemValue } });
this.dispatchEvent(new CustomEvent("value-change", {
detail: value,
}))
} }
>
<div class="gradient"></div>
<span class="label">
${ label }
</span>
</div>`
)}
</div>
`
}
22 changes: 22 additions & 0 deletions studio-frontend/src/app/inspector-tabs/style-tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
.inspector-input-set {
label {
display: block;
color: #fff;
margin-bottom: .5rem;
}
textarea {
background: var(--color-panel-item-name-background);
border: none;
box-sizing: border-box;
color: #fff;
font-family: "Fira Sans", sans-serif;
outline: none;
padding: .5rem;
border-radius: .5rem;
margin-bottom: 1rem;
resize: none;
width: 100%;
}

.sidebar-button-row {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
}
20 changes: 13 additions & 7 deletions studio-frontend/src/app/inspector-tabs/style-tab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,15 +154,14 @@ export class StyleTab extends LitElement {

protected override render = (): TemplateResult => html`
<section class="inspector-input-set">
${ this.vstStyle }
<button @click=${ this.thingy }>State</button>
<sts-bubble-select
.options=${STYLE_OPTIONS}
.value=${bind(this, "vstStyle")}
></sts-bubble-select>

<label htmlFor="inspector-posPrompt">Positive Prompt</label>
<textarea
rows="7"
id="inspector-posPrompt"
name="posPrompt"
@input=${ this.inputChange }
Expand All @@ -171,17 +170,24 @@ export class StyleTab extends LitElement {

<label htmlFor="inspector-posPrompt">Negative Prompt</label>
<textarea
rows="7"
id="inspector-negPrompt"
name="negPrompt"
placeholder="Type here to filter out the things you don’t want in the scene..."
@input=${ this.inputChange }
.value=${ this.negPrompt }
></textarea>

<sts-button
@click=${this.compositorEnqueue(this.sceneToken)}
>
Generate your movie
</sts-button>
<div class="sidebar-button-row">
<sts-button primary
@click=${this.compositorEnqueue(this.sceneToken)}
>
Generate your movie
</sts-button>
</div>
<!-- debugging stuff -V
${ this.vstStyle }
<button @click=${ this.thingy }>State</button> -->
</section>
`;
}
15 changes: 15 additions & 0 deletions studio-frontend/src/app/inspector.element.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
:host {
font-family: "Fira Sans", sans-serif;
font-size: 15px;
color: #fff;

label {
display: block;
margin-bottom: .5rem;
}
}


.studio-sidebar-frame {
padding: 1rem;
}
40 changes: 24 additions & 16 deletions studio-frontend/src/app/inspector.ts → studio-frontend/src/app/inspector.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
import { LitElement, type PropertyValues, html, nothing, unsafeCSS } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { createRef, ref } from "lit/directives/ref.js";
import "@storyteller/studio-ui/tree";
import "./tabs.element";
import "./bubble-select.element";
import "./inspector-tabs/style-tab";
import styles from "./inspector.element.scss?inline";
import "@storyteller/studio-ui/button";
import "@storyteller/studio-web/scene-hierarchy";
import {
SceneHierarchyElement,
} from "@storyteller/studio-web";

// const abc = "word";

enum InspectorMode {
Properties,
Hierarchy,
Style
}

Expand All @@ -20,10 +25,11 @@ export class Inspector extends LitElement {
@state() selectedTab = InspectorMode.Style;
@property() sceneToken = "";
@property() styleMediaToken = "";
#hierarchyRef = createRef<SceneHierarchyElement>();

tabs = [{
label: "Properties",
value: InspectorMode.Properties
label: "Hierarchy",
value: InspectorMode.Hierarchy
},{
label: "Style",
value: InspectorMode.Style
Expand All @@ -33,28 +39,30 @@ export class Inspector extends LitElement {
console.log("🏎️", this.styleMediaToken);
}

propertiesTab = html`<div>Properties</div>`;
propertiesTab = html`<sts-scene-hierarchy
${ref(this.#hierarchyRef)}
class="hierarchy sidebar-view"
></sts-scene-hierarchy>`;

tabContent = () => {
switch (this.selectedTab) {
case InspectorMode.Properties: return this.propertiesTab;
case InspectorMode.Hierarchy: return this.propertiesTab;
case InspectorMode.Style: return html`<sts-style-tab .sceneToken=${this.sceneToken}></sts-style-tab>`;
}
}

protected override render = () => html`
<div class="studio-inspector">
<button @click=${ this.thingy }>State</button>
<sts-tabs
.onChange=${ ({ target }: any) => {
<sts-tabs
.onChange=${
({ target }: any) => {
this.selectedTab = target.value;
} }
.tabs=${this.tabs}
.value=${this.selectedTab}
></sts-tabs>
<div>
${ this.tabContent() }
</div>
}
}
.tabs=${this.tabs}
.value=${this.selectedTab}
></sts-tabs>
<div class="studio-sidebar-frame">
${ this.tabContent() }
</div>
`
}
27 changes: 21 additions & 6 deletions studio-frontend/src/app/tabs.element.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,35 @@
:host {
font-family: "Fira Sans", sans-serif;
font-size: 15px;
// margin-bottom: ;
}

.studio-tabs {
// background: red;
display: flex;
appearance: none;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
list-style: none;
margin-block-start: 0px;
margin-block-end: 0px;
width: 100%;
padding-inline-start: 0px;

li {
.studio-tabs-tab {

// width: max-content;
display: inline-flex;
justify-content: center;
// flex: 1;
border: none;
padding: 1rem 1.4rem;
padding: 1rem;
border-bottom: 4px solid transparent;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
font-weight: 500;
white-space: nowrap;
border-bottom: 4px solid var(--color-toolbar-background-light);

&.selected-tab {
color: #fff;
border-bottom: 4px solid #e66462;
}
}
Expand Down
Loading