storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-18 07:35:19 +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 { .toolbar-group {
display: flex; display: flex;
gap: 2px; 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 { .btn-toggle {
@@ -50,20 +68,6 @@
timing-function: linear; 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 { &:hover {
background: #0008; background: #0008;
color: #FFF; 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; this.showHelp = !this.showHelp;
} }
saveScene(): void {
// TODO
}
onTransformSpaceChange(event: InputEvent): void { onTransformSpaceChange(event: InputEvent): void {
const { value } = event.target as HTMLInputElement; const { value } = event.target as HTMLInputElement;
const space = match (value, { const space = match (value, {
@@ -187,13 +191,21 @@ export class AppElement extends LitElement {
} }
protected override render = () => html` protected override render = () => html`
<div class="toolbar v-start h-start"> <div class="toolbar v-start h-start" role="toolbar">
<sts-button class="btn-help" <div class="toolbar-group" role="group">
icon="circle-info" <sts-button
@click=${this.toggleHelp} icon="floppy-disk"
> @click=${this.saveScene}
Help >
</sts-button> Save Scene
</sts-button>
<sts-button
icon="circle-info"
@click=${this.toggleHelp}
>
Help
</sts-button>
</div>
</div> </div>
<!-- TODO: What's a "component"? --> <!-- 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 { customElement, property } from "lit/decorators.js";
import { unsafeSVG } from "lit/directives/unsafe-svg.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import fasCircleInfo from "@fortawesome/fontawesome-pro/svgs/regular/circle-info.svg?raw"; import farCircleInfo from "@fortawesome/fontawesome-pro/svgs/regular/circle-info.svg?raw";
import fasCube from "@fortawesome/fontawesome-pro/svgs/regular/cube.svg?raw"; import farCube from "@fortawesome/fontawesome-pro/svgs/regular/cube.svg?raw";
import fasGlobe from "@fortawesome/fontawesome-pro/svgs/regular/globe.svg?raw"; import farFloppyDisk from "@fortawesome/fontawesome-pro/svgs/regular/floppy-disk.svg?raw";
import fasUpDownLeftRight from "@fortawesome/fontawesome-pro/svgs/regular/arrows-up-down-left-right.svg?raw"; import farGlobe from "@fortawesome/fontawesome-pro/svgs/regular/globe.svg?raw";
import fasRotate from "@fortawesome/fontawesome-pro/svgs/regular/arrows-rotate.svg?raw"; import farUpDownLeftRight from "@fortawesome/fontawesome-pro/svgs/regular/arrows-up-down-left-right.svg?raw";
import fasScale from "@fortawesome/fontawesome-pro/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.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 fasCaretRight from "@fortawesome/fontawesome-pro/svgs/solid/caret-right.svg?raw";
import styles from "./icon.element.scss?inline"; import styles from "./icon.element.scss?inline";
@@ -37,13 +38,14 @@ function renderSvg(iconId: string) {
return RENDER_RESULTS.get(iconId)!; return RENDER_RESULTS.get(iconId)!;
const svgSrc = match (iconId, { const svgSrc = match (iconId, {
"circle-info": () => fasCircleInfo, "circle-info": () => farCircleInfo,
"caret-right": () => fasCaretRight, "caret-right": () => fasCaretRight,
"cube": () => fasCube, "cube": () => farCube,
"globe": () => fasGlobe, "floppy-disk": () => farFloppyDisk,
"up-down-left-right": () => fasUpDownLeftRight, "globe": () => farGlobe,
"rotate": () => fasRotate, "up-down-left-right": () => farUpDownLeftRight,
"scale": () => fasScale, "rotate": () => farRotate,
"scale": () => farScale,
_: () => null, _: () => null,
}); });