mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-16 00:03:29 +00:00
Danny McGee
0a0acacfdb
This PR adds a `CanvasProviderElement` to `@storyteller/studio-web` to manage the complexity of maintaining a single concrete `HTMLCanvasElement` for `@storyteller/studio`, while still being able to treat components like the `ViewerElement` as self-contained "views" that behave as expected with regards to CSS styling, DOM placement, etc. Consuming applications should wrap the new `<sts-canvas-provider />` element around some common ancestor of all views into the `@storyteller/studio` app, similar to a React context provider. The `react-frontend` application has been updated to take advantage of the new `CanvasProviderElement` by demonstrating a more realistic use case for the `ViewerElement`. The new demo presents a grid of "thumbnails," one for each object in our hard-coded "object library." Clicking on one of these thumbnails will render a `ViewerElement` for that object in a modal dialog.
115 lines
1.6 KiB
SCSS
115 lines
1.6 KiB
SCSS
.root {
|
|
position: relative;
|
|
padding: 64px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.thumbnail {
|
|
flex: 0 0 352px;
|
|
width: 352px;
|
|
height: 352px;
|
|
background: #444;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #666;
|
|
}
|
|
}
|
|
|
|
.modalOverlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #2222227F;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
width: 1280px;
|
|
height: 720px;
|
|
top: calc(50vh - 360px);
|
|
left: calc(50vw - 640px);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 0 16px rgba(0,0,0,0.17),
|
|
0 16px 48px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #222;
|
|
pointer-events: none;
|
|
transition: opacity 66.666ms linear;
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background: #2222227F;
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.input {
|
|
height: 32px;
|
|
font: unset {
|
|
family: inherit;
|
|
size: 16px;
|
|
}
|
|
}
|
|
|
|
.modalClose {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 48px;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
border-radius: 50%;
|
|
appearance: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #2222227F;
|
|
backdrop-filter: blur(16px);
|
|
font: unset {
|
|
family: inherit;
|
|
weight: 400;
|
|
size: 40px;
|
|
}
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #222222AA;
|
|
}
|
|
}
|