diff --git a/studio-frontend/src/app/app.element.scss b/studio-frontend/src/app/app.element.scss index d803121..0895210 100644 --- a/studio-frontend/src/app/app.element.scss +++ b/studio-frontend/src/app/app.element.scss @@ -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; diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts index a2f869c..7ea4197 100644 --- a/studio-frontend/src/app/app.element.ts +++ b/studio-frontend/src/app/app.element.ts @@ -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` -
- - Help - + diff --git a/studio-frontend/src/app/icon.element.ts b/studio-frontend/src/app/icon.element.ts index 9788b68..2d2d21f 100644 --- a/studio-frontend/src/app/icon.element.ts +++ b/studio-frontend/src/app/icon.element.ts @@ -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, });