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

Add "Save Scene" button

Browse Source
This commit is contained in:
Danny McGee
2023-11-14 16:31:24 -05:00
parent a472a0ed0f
commit 93a16cc72a
3 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-frontend/src/app/app.element.scss
+18 -14
View File
@@ -29,6 +29,24 @@
.toolbar-group {
display: flex;
gap: 2px;
> * {
border-radius: 0;
&:first-child {
border: {
top-left-radius: 8px;
bottom-left-radius: 8px;
}
}
&:last-child {
border: {
top-right-radius: 8px;
bottom-right-radius: 8px;
}
}
}
}
.btn-toggle {
@@ -50,20 +68,6 @@
timing-function: linear;
}
&:first-child {
border: {
top-left-radius: 8px;
bottom-left-radius: 8px;
}
}
&:last-child {
border: {
top-right-radius: 8px;
bottom-right-radius: 8px;
}
}
&:hover {
background: #0008;
color: #FFF;
studio-frontend/src/app/app.element.ts
+19 -7
View File
@@ -111,6 +111,10 @@ export class AppElement extends LitElement {
this.showHelp = !this.showHelp;
}
saveScene(): void {
// TODO
}
onTransformSpaceChange(event: InputEvent): void {
const { value } = event.target as HTMLInputElement;
const space = match (value, {
@@ -187,13 +191,21 @@ export class AppElement extends LitElement {
}
protected override render = () => html`
<div class="toolbar v-start h-start">
<sts-button class="btn-help"
icon="circle-info"
@click=${this.toggleHelp}
>
Help
</sts-button>
<div class="toolbar v-start h-start" role="toolbar">
<div class="toolbar-group" role="group">
<sts-button
icon="floppy-disk"
@click=${this.saveScene}
>
Save Scene
</sts-button>
<sts-button
icon="circle-info"
@click=${this.toggleHelp}
>
Help
</sts-button>
</div>
</div>
<!-- TODO: What's a "component"? -->
studio-frontend/src/app/icon.element.ts
+14 -12
View File
@@ -4,12 +4,13 @@ import { LitElement, TemplateResult, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import fasCircleInfo from "@fortawesome/fontawesome-pro/svgs/regular/circle-info.svg?raw";
import fasCube from "@fortawesome/fontawesome-pro/svgs/regular/cube.svg?raw";
import fasGlobe from "@fortawesome/fontawesome-pro/svgs/regular/globe.svg?raw";
import fasUpDownLeftRight from "@fortawesome/fontawesome-pro/svgs/regular/arrows-up-down-left-right.svg?raw";
import fasRotate from "@fortawesome/fontawesome-pro/svgs/regular/arrows-rotate.svg?raw";
import fasScale from "@fortawesome/fontawesome-pro/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg?raw";
import farCircleInfo from "@fortawesome/fontawesome-pro/svgs/regular/circle-info.svg?raw";
import farCube from "@fortawesome/fontawesome-pro/svgs/regular/cube.svg?raw";
import farFloppyDisk from "@fortawesome/fontawesome-pro/svgs/regular/floppy-disk.svg?raw";
import farGlobe from "@fortawesome/fontawesome-pro/svgs/regular/globe.svg?raw";
import farUpDownLeftRight from "@fortawesome/fontawesome-pro/svgs/regular/arrows-up-down-left-right.svg?raw";
import farRotate from "@fortawesome/fontawesome-pro/svgs/regular/arrows-rotate.svg?raw";
import farScale from "@fortawesome/fontawesome-pro/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg?raw";
import fasCaretRight from "@fortawesome/fontawesome-pro/svgs/solid/caret-right.svg?raw";
import styles from "./icon.element.scss?inline";
@@ -37,13 +38,14 @@ function renderSvg(iconId: string) {
return RENDER_RESULTS.get(iconId)!;
const svgSrc = match (iconId, {
"circle-info": () => fasCircleInfo,
"circle-info": () => farCircleInfo,
"caret-right": () => fasCaretRight,
"cube": () => fasCube,
"globe": () => fasGlobe,
"up-down-left-right": () => fasUpDownLeftRight,
"rotate": () => fasRotate,
"scale": () => fasScale,
"cube": () => farCube,
"floppy-disk": () => farFloppyDisk,
"globe": () => farGlobe,
"up-down-left-right": () => farUpDownLeftRight,
"rotate": () => farRotate,
"scale": () => farScale,
_: () => null,
});