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

Image Generator Demo: UI/UX (#58)

Browse Source 
This PR updates the UI/UX of the Image Generator Demo.

* Hierarchy moved to the left of the editor view instead of overlaying
  it
* Hierarchy can now be resized
* Bevy canvas resizes trigger a screen-capture update
* Transform Toolbar now centered over the editor view instead of the
  entire viewport
* Added Prompt and Seed text fields, with a refresh button for the Seed
This commit is contained in:
Danny McGee
2024-02-28 03:17:45 -05:00
committed by GitHub
parent 343919a9f5
commit d6c5d5d5bd
5 changed files with 268 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
image-generator-demo/src/app/app.element.scss
+114 -22
View File
@@ -2,6 +2,7 @@
position: fixed;
inset: 0;
display: flex;
background: #242433;
}
// Layout utilities
@@ -17,46 +18,137 @@
transform: translateX(-50%);
}
.hierarchy-wrapper {
display: flex;
flex: 0 0 auto;
height: 100vh;
}
.hierarchy {
display: block;
width: 100%;
height: 100%;
padding: 1rem {
inline-end: 0.5rem;
}
border: none;
background: transparent;
}
.hierarchy-resize-handle {
width: 0.5rem;
cursor: ew-resize;
background: transparent;
transition: background 66.666ms linear;
&:hover, &.resizing {
background: #39394c;
}
}
.split-screen {
display: flex;
flex: 1 0 0;
position: relative;
}
.studio-scene,
.image-capture {
flex: 0 0 50%;
}
.studio-scene {
overflow: hidden;
}
.image-capture {
width: 0;
object-fit: cover;
}
.hierarchy {
width: 256px;
max-height: calc(100vh - 2rem);
.studio-scene.resizing::part(canvas) {
pointer-events: none;
}
.config {
display: flex;
flex-direction: column;
gap: 0.25em;
padding: 0.5rem 1rem;
padding: 1rem;
background: #0006;
backdrop-filter: blur(16px);
border-radius: 0.5rem;
}
.checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
height: 1.5rem;
.config-prompt {
display: flex;
gap: 0.5rem;
}
color: #FFFC;
transition: color 0.1s linear;
font: {
family: "Fira Sans", sans-serif;
size: 15px;
weight: 500;
}
.config-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
&:hover {
color: #FFFF;
color: #FFFC;
transition: color 0.1s linear;
font: {
family: "Fira Sans", sans-serif;
size: 15px;
weight: 500;
}
&:hover {
color: #FFFF;
}
}
.config-field {
background: #0004;
border: 1px solid #FFF2;
color: #FFFC;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
font: {
family: "Fira Sans", sans-serif;
size: 1rem;
}
&::placeholder {
color: #FFF6;
}
&:focus-visible {
outline: none !important;
border-color: #FFF4;
background: #0006;
color: #FFFF;
}
&.prompt {
width: 512px;
}
&.seed {
width: 96px;
appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
}
}
.config-field-group {
position: relative;
}
.seed-refresh {
position: absolute;
top: 0;
right: 0.5rem;
bottom: 0;
appearance: none;
border: none;
background: transparent;
color: #FFFC;
}
.loading {
position: absolute;
inset: 0;