storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-17 00:13:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Basic styling for material editor

Browse Source
This commit is contained in:
Danny McGee
2024-03-21 21:48:27 -04:00
committed by Brandon Thomas
parent abefbf9fcc
commit 242bf5de5e
2 changed files with 52 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-web/src/lib/inspector/material-inspector.element.scss
+14 -1
View File
@@ -11,7 +11,15 @@
h4 {
font-weight: 500;
margin: 0 0 0.25rem;
margin: 0 0 1rem;
}
.fields {
display: grid;
grid-template-columns: min-content 1fr;
align-items: baseline;
row-gap: 0.25rem;
column-gap: 0.5rem;
}
label {
@@ -19,3 +27,8 @@ label {
font-size: math.div(14, 16) * 1rem;
margin-block-end: 0.333rem;
}
sts-text-field::part(input) {
flex: unset;
width: 100%;
}
studio-web/src/lib/inspector/material-inspector.element.ts
+38 -36
View File
@@ -68,45 +68,47 @@ export class MaterialInspectorElement extends LitElement {
return html`
<h4>Material</h4>
<label for=${this.#baseColorId}>
Tint
</label>
<input
id=${this.#baseColorId}
type="color"
.value=${rgb}
@input=${this.onBaseColorInput}
/>
<div class="fields">
<label for=${this.#baseColorId}>
Tint
</label>
<input
id=${this.#baseColorId}
type="color"
.value=${rgb}
@input=${this.onBaseColorInput}
/>
<label for=${this.#roughnessId}>
Roughness
</label>
<sts-text-field
id=${this.#roughnessId}
type="number"
.value=${this.roughness.toString(10)}
@value-change=${this.updateField("perceptual_roughness")}
></sts-text-field>
<label for=${this.#roughnessId}>
Roughness
</label>
<sts-text-field
id=${this.#roughnessId}
type="number"
.value=${this.roughness.toString(10)}
@value-change=${this.updateField("perceptual_roughness")}
></sts-text-field>
<label for=${this.#metallicId}>
Metallic
</label>
<sts-text-field
id=${this.#metallicId}
type="number"
.value=${this.metallic.toString(10)}
@value-change=${this.updateField("metallic")}
></sts-text-field>
<label for=${this.#metallicId}>
Metallic
</label>
<sts-text-field
id=${this.#metallicId}
type="number"
.value=${this.metallic.toString(10)}
@value-change=${this.updateField("metallic")}
></sts-text-field>
<label for=${this.#reflectanceId}>
Reflectance
</label>
<sts-text-field
id=${this.#reflectanceId}
type="number"
.value=${this.reflectance.toString(10)}
@value-change=${this.updateField("reflectance")}
></sts-text-field>
<label for=${this.#reflectanceId}>
Reflectance
</label>
<sts-text-field
id=${this.#reflectanceId}
type="number"
.value=${this.reflectance.toString(10)}
@value-change=${this.updateField("reflectance")}
></sts-text-field>
</div>
`;
}
}