jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up web code's use of display CSS properties, using <LayoutRow>/<LayoutCol> where intended

This commit is contained in:
Keavon Chambers 2022-01-23 20:23:35 -08:00
parent 45d75bd13f
commit 8c29592db8
34 changed files with 385 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/App.vue
View File

@ -2,7 +2,7 @@
<MainWindow /> <MainWindow />
<div class="unsupported-modal-backdrop" v-if="showUnsupportedModal"> <div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
<div class="unsupported-modal"> <LayoutCol class="unsupported-modal">
<h2>Your browser currently doesn't support Graphite</h2> <h2>Your browser currently doesn't support Graphite</h2>
<p>Unfortunately, some features won't work properly. Please upgrade to a modern browser such as Firefox, Chrome, Edge, or Safari version 15 or later.</p> <p>Unfortunately, some features won't work properly. Please upgrade to a modern browser such as Firefox, Chrome, Edge, or Safari version 15 or later.</p>
<p> <p>
@ -13,7 +13,7 @@
<LayoutRow> <LayoutRow>
<button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button>
</LayoutRow> </LayoutRow>
</div> </LayoutCol>
</div> </div>
</template> </template>
@ -186,39 +186,43 @@ img {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex;
}
.unsupported-modal { .unsupported-modal {
background: var(--color-3-darkgray); background: var(--color-3-darkgray);
border-radius: 4px; border-radius: 4px;
box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%); box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
padding: 0 16px 16px 16px; padding: 0 16px 16px 16px;
border: 1px solid var(--color-4-dimgray); border: 1px solid var(--color-4-dimgray);
max-width: 500px; max-width: 500px;
& a { p {
color: var(--color-accent-hover); margin-top: 0;
} }
}
.unsupported-modal-button { a {
flex: 1; color: var(--color-accent-hover);
background: var(--color-1-nearblack); }
border: 0 none;
padding: 12px;
border-radius: 2px;
&:hover { .unsupported-modal-button {
background: var(--color-6-lowergray); flex: 1;
color: var(--color-f-white); background: var(--color-1-nearblack);
} border: 0 none;
padding: 12px;
border-radius: 2px;
&:active { &:hover {
background: var(--color-accent-hover); background: var(--color-6-lowergray);
color: var(--color-f-white); color: var(--color-f-white);
}
&:active {
background: var(--color-accent-hover);
color: var(--color-f-white);
}
}
} }
} }
</style> </style>
@ -234,6 +238,7 @@ import { createDocumentsState, DocumentsState } from "@/state/documents";
import { createFullscreenState, FullscreenState } from "@/state/fullscreen"; import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
import { createEditorState, EditorState } from "@/state/wasm-loader"; import { createEditorState, EditorState } from "@/state/wasm-loader";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue"; import LayoutRow from "@/components/layout/LayoutRow.vue";
import MainWindow from "@/components/window/MainWindow.vue"; import MainWindow from "@/components/window/MainWindow.vue";
@ -291,6 +296,10 @@ export default defineComponent({
const { editor } = this; const { editor } = this;
editor.instance.free(); editor.instance.free();
}, },
components: { MainWindow, LayoutRow }, components: {
MainWindow,
LayoutRow,
LayoutCol,
},
}); });
</script> </script>

2
frontend/src/components/layout/LayoutCol.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"> <div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || null" :data-scrollable-y="scrollableY || null">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

2
frontend/src/components/layout/LayoutRow.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="layout-row" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"> <div class="layout-row" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || null" :data-scrollable-y="scrollableY || null">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

24
frontend/src/components/panels/Document.vue
View File

@ -1,15 +1,17 @@
<template> <template>
<LayoutCol class="document"> <LayoutCol class="document">
<LayoutRow class="options-bar" :scrollableX="true"> <LayoutRow class="options-bar" :scrollableX="true">
<div class="left side"> <LayoutRow class="left side">
<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" /> <DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
<Separator :type="'Section'" /> <Separator :type="'Section'" />
<ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" /> <ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" />
</div> </LayoutRow>
<div class="spacer"></div>
<div class="right side"> <LayoutRow class="spacer"></LayoutRow>
<LayoutRow class="right side">
<OptionalInput v-model:checked="snappingEnabled" @update:checked="(snap: boolean) => setSnapping(snap)" :icon="'Snapping'" title="Snapping" /> <OptionalInput v-model:checked="snappingEnabled" @update:checked="(snap: boolean) => setSnapping(snap)" :icon="'Snapping'" title="Snapping" />
<PopoverButton> <PopoverButton>
<h3>Snapping</h3> <h3>Snapping</h3>
@ -64,7 +66,7 @@
:displayDecimalPlaces="4" :displayDecimalPlaces="4"
ref="zoom" ref="zoom"
/> />
</div> </LayoutRow>
</LayoutRow> </LayoutRow>
<LayoutRow class="shelf-and-viewport"> <LayoutRow class="shelf-and-viewport">
<LayoutCol class="shelf"> <LayoutCol class="shelf">
@ -106,14 +108,14 @@
<ShelfItemInput icon="VectorShapeTool" title="Shape Tool (Y)" :active="activeTool === 'Shape'" :action="() => selectTool('Shape')" /> <ShelfItemInput icon="VectorShapeTool" title="Shape Tool (Y)" :active="activeTool === 'Shape'" :action="() => selectTool('Shape')" />
</LayoutCol> </LayoutCol>
<div class="spacer"></div> <LayoutCol class="spacer"></LayoutCol>
<LayoutCol class="working-colors"> <LayoutCol class="working-colors">
<SwatchPairInput /> <SwatchPairInput />
<div class="swap-and-reset"> <LayoutRow class="swap-and-reset">
<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" /> <IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" /> <IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
</div> </LayoutRow>
</LayoutCol> </LayoutCol>
</LayoutCol> </LayoutCol>
<LayoutCol class="viewport"> <LayoutCol class="viewport">
@ -125,7 +127,7 @@
<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" /> <CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
</LayoutCol> </LayoutCol>
<LayoutCol class="canvas-area"> <LayoutCol class="canvas-area">
<div class="canvas" ref="canvas" :style="{ cursor: canvasCursor }" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)"> <div class="canvas" data-canvas ref="canvas" :style="{ cursor: canvasCursor }" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)">
<svg class="artboards" v-html="artboardSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg> <svg class="artboards" v-html="artboardSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
<svg class="artwork" v-html="artworkSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg> <svg class="artwork" v-html="artworkSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg> <svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
@ -168,7 +170,6 @@
.side { .side {
height: 100%; height: 100%;
flex: 0 0 auto; flex: 0 0 auto;
display: flex;
align-items: center; align-items: center;
margin: 0 4px; margin: 0 4px;
} }
@ -181,8 +182,6 @@
.shelf-and-viewport { .shelf-and-viewport {
.shelf { .shelf {
flex: 0 0 auto; flex: 0 0 auto;
display: flex;
flex-direction: column;
.tools { .tools {
flex: 0 1 auto; flex: 0 1 auto;
@ -198,7 +197,6 @@
.swap-and-reset { .swap-and-reset {
flex: 0 0 auto; flex: 0 0 auto;
display: flex;
} }
} }
} }

11
frontend/src/components/panels/Minimap.vue
View File

@ -1,11 +0,0 @@
<template>
<div></div>
</template>
<style lang="scss"></style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
</script>

8
frontend/src/components/panels/Properties.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div></div> <LayoutCol class="properties-panel"></LayoutCol>
</template> </template>
<style lang="scss"></style> <style lang="scss"></style>
@ -7,5 +7,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({}); import LayoutCol from "@/components/layout/LayoutCol.vue";
export default defineComponent({
components: { LayoutCol },
});
</script> </script>

2
frontend/src/components/widgets/buttons/IconButton.vue
View File

@ -6,7 +6,7 @@
<style lang="scss"> <style lang="scss">
.icon-button { .icon-button {
display: inline-flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;

8
frontend/src/components/widgets/buttons/PopoverButton.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div class="popover-button"> <LayoutRow class="popover-button">
<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner /> <IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu"> <FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
<slot></slot> <slot></slot>
</FloatingMenu> </FloatingMenu>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.popover-button { .popover-button {
display: inline-block;
position: relative; position: relative;
width: 16px; width: 16px;
height: 24px; height: 24px;
@ -17,6 +16,7 @@
.floating-menu { .floating-menu {
left: 50%; left: 50%;
bottom: 0;
} }
.icon-button { .icon-button {
@ -51,6 +51,7 @@ import { defineComponent, PropType } from "vue";
import { PopoverButtonIcon } from "@/utilities/widgets"; import { PopoverButtonIcon } from "@/utilities/widgets";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue"; import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
@ -58,6 +59,7 @@ export default defineComponent({
components: { components: {
FloatingMenu, FloatingMenu,
IconButton, IconButton,
LayoutRow,
}, },
props: { props: {
action: { type: Function as PropType<() => void>, required: false }, action: { type: Function as PropType<() => void>, required: false },

1
frontend/src/components/widgets/buttons/TextButton.vue
View File

@ -6,7 +6,6 @@
<style lang="scss"> <style lang="scss">
.text-button { .text-button {
display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;

69
frontend/src/components/widgets/floating-menus/ColorPicker.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<div class="color-picker"> <LayoutRow class="color-picker">
<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)"> <LayoutCol class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="saturationCursor" class="selection-circle"></div> <div ref="saturationCursor" class="selection-circle"></div>
</div> </LayoutCol>
<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)"> <LayoutCol class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="hueCursor" class="selection-pincers"></div> <div ref="hueCursor" class="selection-pincers"></div>
</div> </LayoutCol>
<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)"> <LayoutCol class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="opacityCursor" class="selection-pincers"></div> <div ref="opacityCursor" class="selection-pincers"></div>
</div> </LayoutCol>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.color-picker { .color-picker {
--saturation-picker-hue: #ff0000; --saturation-picker-hue: #ff0000;
--opacity-picker-color: #ff0000; --opacity-picker-color: #ff0000;
display: flex;
.saturation-picker { .saturation-picker {
width: 256px; width: 256px;
@ -51,15 +50,15 @@
&::before { &::before {
content: ""; content: "";
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1;
position: relative;
// Checkered transparent pattern
background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(#ffffff, #ffffff); linear-gradient(#ffffff, #ffffff);
background-size: 16px 16px; background-size: 16px 16px;
background-position: 0 0, 8px 8px; background-position: 0 0, 8px 8px;
position: relative;
z-index: -1;
} }
} }
@ -123,6 +122,9 @@ import { RGBA } from "@/dispatcher/js-messages";
import { hsvaToRgba, rgbaToHsva } from "@/utilities/color"; import { hsvaToRgba, rgbaToHsva } from "@/utilities/color";
import { clamp } from "@/utilities/math"; import { clamp } from "@/utilities/math";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation"; type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
// TODO: Clean up the fundamental code design in this file to simplify it and use better practices. // TODO: Clean up the fundamental code design in this file to simplify it and use better practices.
@ -157,13 +159,22 @@ export default defineComponent({
document.removeEventListener("pointerup", this.onPointerUp); document.removeEventListener("pointerup", this.onPointerUp);
}, },
onPointerDown(e: PointerEvent) { onPointerDown(e: PointerEvent) {
if (!(e.currentTarget instanceof HTMLElement)) return; const saturationPicker = this.$refs.saturationPicker as typeof LayoutCol;
const saturationPickerElement = saturationPicker && (saturationPicker.$el as HTMLElement);
if ((this.$refs.saturationPicker as HTMLElement).contains(e.currentTarget)) { const huePicker = this.$refs.huePicker as typeof LayoutCol;
const huePickerElement = huePicker && (huePicker.$el as HTMLElement);
const opacityPicker = this.$refs.opacityPicker as typeof LayoutCol;
const opacityPickerElement = opacityPicker && (opacityPicker.$el as HTMLElement);
if (!(e.currentTarget instanceof HTMLElement) || !saturationPickerElement || !huePickerElement || !opacityPickerElement) return;
if (saturationPickerElement.contains(e.currentTarget)) {
this.state = "MoveSaturation"; this.state = "MoveSaturation";
} else if ((this.$refs.huePicker as HTMLElement).contains(e.currentTarget)) { } else if (huePickerElement.contains(e.currentTarget)) {
this.state = "MoveHue"; this.state = "MoveHue";
} else if ((this.$refs.opacityPicker as HTMLElement).contains(e.currentTarget)) { } else if (opacityPickerElement.contains(e.currentTarget)) {
this.state = "MoveOpacity"; this.state = "MoveOpacity";
} else { } else {
this.state = "Idle"; this.state = "Idle";
@ -191,6 +202,7 @@ export default defineComponent({
} }
this.updateHue(); this.updateHue();
// The `color` prop's watcher calls `this.updateColor()` // The `color` prop's watcher calls `this.updateColor()`
this.$emit("update:color", hsvaToRgba(this.pickerHSVA)); this.$emit("update:color", hsvaToRgba(this.pickerHSVA));
}, },
@ -198,12 +210,23 @@ export default defineComponent({
if (this.state === "Idle") return; if (this.state === "Idle") return;
this.state = "Idle"; this.state = "Idle";
this.removeEvents(); this.removeEvents();
}, },
updateRects() { updateRects() {
const saturationPicker = this.$refs.saturationPicker as typeof LayoutCol;
const saturationPickerElement = saturationPicker && (saturationPicker.$el as HTMLElement);
const huePicker = this.$refs.huePicker as typeof LayoutCol;
const huePickerElement = huePicker && (huePicker.$el as HTMLElement);
const opacityPicker = this.$refs.opacityPicker as typeof LayoutCol;
const opacityPickerElement = opacityPicker && (opacityPicker.$el as HTMLElement);
if (!saturationPickerElement || !huePickerElement || !opacityPickerElement) return;
// Saturation // Saturation
const saturationPicker = this.$refs.saturationPicker as HTMLElement; const saturation = saturationPickerElement.getBoundingClientRect();
const saturation = saturationPicker.getBoundingClientRect();
this.pickerSaturationRect.width = saturation.width; this.pickerSaturationRect.width = saturation.width;
this.pickerSaturationRect.height = saturation.height; this.pickerSaturationRect.height = saturation.height;
@ -211,8 +234,7 @@ export default defineComponent({
this.pickerSaturationRect.top = saturation.top; this.pickerSaturationRect.top = saturation.top;
// Hue // Hue
const huePicker = this.$refs.huePicker as HTMLElement; const hue = huePickerElement.getBoundingClientRect();
const hue = huePicker.getBoundingClientRect();
this.pickerHueRect.width = hue.width; this.pickerHueRect.width = hue.width;
this.pickerHueRect.height = hue.height; this.pickerHueRect.height = hue.height;
@ -220,8 +242,7 @@ export default defineComponent({
this.pickerHueRect.top = hue.top; this.pickerHueRect.top = hue.top;
// Opacity // Opacity
const opacityPicker = this.$refs.opacityPicker as HTMLElement; const opacity = opacityPickerElement.getBoundingClientRect();
const opacity = opacityPicker.getBoundingClientRect();
this.pickerOpacityRect.width = opacity.width; this.pickerOpacityRect.width = opacity.width;
this.pickerOpacityRect.height = opacity.height; this.pickerOpacityRect.height = opacity.height;
@ -275,5 +296,9 @@ export default defineComponent({
this.updateHue(); this.updateHue();
}, },
}, },
components: {
LayoutRow,
LayoutCol,
},
}); });
</script> </script>

37
frontend/src/components/widgets/floating-menus/DialogModal.vue
View File

@ -1,21 +1,19 @@
<template> <template>
<div class="dialog-modal"> <FloatingMenu class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
<FloatingMenu :type="'Dialog'" :direction="'Center'"> <LayoutRow>
<LayoutRow> <LayoutCol class="icon-column">
<LayoutCol class="icon-column"> <!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons --> <IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" /> </LayoutCol>
</LayoutCol> <LayoutCol class="main-column">
<LayoutCol class="main-column"> <TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel> <TextLabel class="details">{{ dialog.state.details }}</TextLabel>
<TextLabel class="details">{{ dialog.state.details }}</TextLabel> <LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0">
<LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0"> <TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" />
<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" /> </LayoutRow>
</LayoutRow> </LayoutCol>
</LayoutCol> </LayoutRow>
</LayoutRow> </FloatingMenu>
</FloatingMenu>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -25,11 +23,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
.dialog {
width: 100%;
height: 100%;
}
.floating-menu-container .floating-menu-content { .floating-menu-container .floating-menu-content {
pointer-events: auto; pointer-events: auto;
padding: 24px; padding: 24px;

10
frontend/src/components/widgets/floating-menus/FloatingMenu.vue
View File

@ -2,7 +2,7 @@
<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === 'Dialog'" ref="floatingMenu"> <div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === 'Dialog'" ref="floatingMenu">
<div class="tail" v-if="type === 'Popover'"></div> <div class="tail" v-if="type === 'Popover'"></div>
<div class="floating-menu-container" ref="floatingMenuContainer"> <div class="floating-menu-container" ref="floatingMenuContainer">
<LayoutCol class="floating-menu-content" :scrollableY="scrollableY" ref="floatingMenuContent" :style="floatingMenuContentStyle"> <LayoutCol class="floating-menu-content" data-floating-menu-content :scrollableY="scrollableY" ref="floatingMenuContent" :style="floatingMenuContentStyle">
<slot></slot> <slot></slot>
</LayoutCol> </LayoutCol>
</div> </div>
@ -45,8 +45,6 @@
font-size: inherit; font-size: inherit;
padding: 8px; padding: 8px;
z-index: 0; z-index: 0;
display: flex;
flex-direction: column;
// Draw over the application without being clipped by the containing panel's `overflow: hidden` // Draw over the application without being clipped by the containing panel's `overflow: hidden`
position: fixed; position: fixed;
} }
@ -196,7 +194,7 @@ export default defineComponent({
}, },
data() { data() {
const containerResizeObserver = new ResizeObserver((entries) => { const containerResizeObserver = new ResizeObserver((entries) => {
const content = entries[0].target.querySelector(".floating-menu-content") as HTMLElement; const content = entries[0].target.querySelector("[data-floating-menu-content]") as HTMLElement;
content.style.minWidth = `${entries[0].contentRect.width}px`; content.style.minWidth = `${entries[0].contentRect.width}px`;
}); });
return { return {
@ -209,7 +207,7 @@ export default defineComponent({
const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement; const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement;
const floatingMenuContentComponent = this.$refs.floatingMenuContent as typeof LayoutCol; const floatingMenuContentComponent = this.$refs.floatingMenuContent as typeof LayoutCol;
const floatingMenuContent = floatingMenuContentComponent && (floatingMenuContentComponent.$el as HTMLElement); const floatingMenuContent = floatingMenuContentComponent && (floatingMenuContentComponent.$el as HTMLElement);
const workspace = document.querySelector(".workspace-row"); const workspace = document.querySelector("[data-workspace]");
if (!floatingMenuContainer || !floatingMenuContentComponent || !floatingMenuContent || !workspace) return; if (!floatingMenuContainer || !floatingMenuContentComponent || !floatingMenuContent || !workspace) return;
@ -346,7 +344,7 @@ export default defineComponent({
}, },
isPointerEventOutsideFloatingMenu(e: PointerEvent, extraDistanceAllowed = 0): boolean { isPointerEventOutsideFloatingMenu(e: PointerEvent, extraDistanceAllowed = 0): boolean {
// Considers all child menus as well as the top-level one. // Considers all child menus as well as the top-level one.
const allContainedFloatingMenus = [...this.$el.querySelectorAll(".floating-menu-content")]; const allContainedFloatingMenus = [...this.$el.querySelectorAll("[data-floating-menu-content]")];
return !allContainedFloatingMenus.find((element) => !this.isPointerEventOutsideMenuElement(e, element, extraDistanceAllowed)); return !allContainedFloatingMenus.find((element) => !this.isPointerEventOutsideMenuElement(e, element, extraDistanceAllowed));
}, },
isPointerEventOutsideMenuElement(e: PointerEvent, element: HTMLElement, extraDistanceAllowed = 0): boolean { isPointerEventOutsideMenuElement(e: PointerEvent, element: HTMLElement, extraDistanceAllowed = 0): boolean {

11
frontend/src/components/widgets/floating-menus/MenuList.vue
View File

@ -2,7 +2,7 @@
<FloatingMenu class="menu-list" :direction="direction" :type="'Dropdown'" ref="floatingMenu" :windowEdgeMargin="0" :scrollableY="scrollableY" data-hover-menu-keep-open> <FloatingMenu class="menu-list" :direction="direction" :type="'Dropdown'" ref="floatingMenu" :windowEdgeMargin="0" :scrollableY="scrollableY" data-hover-menu-keep-open>
<template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex"> <template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex">
<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" /> <Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
<div <LayoutRow
v-for="(entry, entryIndex) in section" v-for="(entry, entryIndex) in section"
:key="entryIndex" :key="entryIndex"
class="row" class="row"
@ -31,7 +31,7 @@
v-bind="{ defaultAction, minWidth, drawIcon, scrollableY }" v-bind="{ defaultAction, minWidth, drawIcon, scrollableY }"
:ref="(ref: any) => setEntryRefs(entry, ref)" :ref="(ref: any) => setEntryRefs(entry, ref)"
/> />
</div> </LayoutRow>
</template> </template>
</FloatingMenu> </FloatingMenu>
</template> </template>
@ -43,7 +43,6 @@
.row { .row {
height: 20px; height: 20px;
display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
@ -134,6 +133,7 @@ import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons"; import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue"; import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue"; import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@ -263,9 +263,7 @@ const MenuList = defineComponent({
}, },
}, },
data() { data() {
return { return { keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER };
keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
};
}, },
components: { components: {
FloatingMenu, FloatingMenu,
@ -273,6 +271,7 @@ const MenuList = defineComponent({
IconLabel, IconLabel,
CheckboxInput, CheckboxInput,
UserInputLabel, UserInputLabel,
LayoutRow,
}, },
}); });
export default MenuList; export default MenuList;

20
frontend/src/components/widgets/inputs/CheckboxInput.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<div class="checkbox-input" :class="{ 'outline-style': outlineStyle }"> <LayoutRow class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" /> <input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
<label :for="`checkbox-input-${id}`"> <label :for="`checkbox-input-${id}`">
<div class="checkbox-box"> <LayoutRow class="checkbox-box">
<IconLabel :icon="icon" /> <IconLabel :icon="icon" />
</div> </LayoutRow>
</label> </label>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.checkbox-input { .checkbox-input {
display: inline-block; flex: 0 0 auto;
input { input {
display: none; display: none;
} }
label { label {
display: block; display: flex;
.checkbox-box { .checkbox-box {
display: block; flex: 0 0 auto;
background: var(--color-e-nearwhite); background: var(--color-e-nearwhite);
padding: 2px; padding: 2px;
border-radius: 2px; border-radius: 2px;
@ -84,6 +84,7 @@ import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons"; import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
@ -102,6 +103,9 @@ export default defineComponent({
icon: { type: String as PropType<IconName>, default: "Checkmark" }, icon: { type: String as PropType<IconName>, default: "Checkmark" },
outlineStyle: { type: Boolean as PropType<boolean>, default: false }, outlineStyle: { type: Boolean as PropType<boolean>, default: false },
}, },
components: { IconLabel }, components: {
IconLabel,
LayoutRow,
},
}); });
</script> </script>

12
frontend/src/components/widgets/inputs/DropdownInput.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="dropdown-input"> <LayoutRow class="dropdown-input">
<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner> <LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" /> <IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<span>{{ activeEntry.label }}</span> <span>{{ activeEntry.label }}</span>
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" /> <IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</div> </LayoutRow>
<MenuList <MenuList
v-model:activeEntry="activeEntry" v-model:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)" @update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
@ -15,7 +15,7 @@
:scrollableY="true" :scrollableY="true"
ref="menuList" ref="menuList"
/> />
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -23,7 +23,6 @@
position: relative; position: relative;
.dropdown-box { .dropdown-box {
display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
background: var(--color-1-nearblack); background: var(--color-1-nearblack);
@ -36,7 +35,6 @@
} }
span { span {
display: inline-block;
margin: 0; margin: 0;
margin-left: 8px; margin-left: 8px;
flex: 1 1 100%; flex: 1 1 100%;
@ -90,6 +88,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue"; import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@ -138,6 +137,7 @@ export default defineComponent({
components: { components: {
IconLabel, IconLabel,
MenuList, MenuList,
LayoutRow,
}, },
}); });
</script> </script>

20
frontend/src/components/widgets/inputs/NumberInput.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="number-input" :class="{ disabled }"> <LayoutRow class="number-input" :class="{ disabled }">
<input <input
:class="{ 'has-label': label }" :class="{ 'has-label': label }"
:id="`number-input-${id}`" :id="`number-input-${id}`"
@ -14,7 +14,7 @@
<label v-if="label" :for="`number-input-${id}`">{{ label }}</label> <label v-if="label" :for="`number-input-${id}`">{{ label }}</label>
<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement('Decrease')"></button> <button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement('Decrease')"></button>
<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement('Increase')"></button> <button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement('Increase')"></button>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -25,7 +25,6 @@
border-radius: 2px; border-radius: 2px;
background: var(--color-1-nearblack); background: var(--color-1-nearblack);
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
label { label {
@ -154,6 +153,8 @@ import { defineComponent, PropType } from "vue";
import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets"; import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({ export default defineComponent({
props: { props: {
value: { type: Number as PropType<number>, required: true }, value: { type: Number as PropType<number>, required: true },
@ -182,7 +183,6 @@ export default defineComponent({
if (Number.isNaN(this.value)) this.text = ""; if (Number.isNaN(this.value)) this.text = "";
else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`; else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
else this.text = `${this.value}${this.unit}`; else this.text = `${this.value}${this.unit}`;
this.editing = true; this.editing = true;
const inputElement = this.$refs.input as HTMLInputElement; const inputElement = this.$refs.input as HTMLInputElement;
// Setting the value directly is required to make `inputElement.select()` work // Setting the value directly is required to make `inputElement.select()` work
@ -194,24 +194,20 @@ export default defineComponent({
onTextChanged() { onTextChanged() {
// The `inputElement.blur()` call at the bottom of this function causes itself to be run again, so this check skips a second run // The `inputElement.blur()` call at the bottom of this function causes itself to be run again, so this check skips a second run
if (!this.editing) return; if (!this.editing) return;
const newValue = parseFloat(this.text); const newValue = parseFloat(this.text);
this.updateValue(newValue); this.updateValue(newValue);
this.editing = false; this.editing = false;
const inputElement = this.$refs.input as HTMLElement; const inputElement = this.$refs.input as HTMLElement;
inputElement.blur(); inputElement.blur();
}, },
onCancelTextChange() { onCancelTextChange() {
this.updateValue(NaN); this.updateValue(NaN);
this.editing = false; this.editing = false;
const inputElement = this.$refs.input as HTMLElement; const inputElement = this.$refs.input as HTMLElement;
inputElement.blur(); inputElement.blur();
}, },
onIncrement(direction: IncrementDirection) { onIncrement(direction: IncrementDirection) {
if (Number.isNaN(this.value)) return; if (Number.isNaN(this.value)) return;
switch (this.incrementBehavior) { switch (this.incrementBehavior) {
case "Add": { case "Add": {
const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor; const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
@ -234,16 +230,12 @@ export default defineComponent({
}, },
updateValue(newValue: number) { updateValue(newValue: number) {
let sanitized = newValue; let sanitized = newValue;
const invalid = Number.isNaN(newValue); const invalid = Number.isNaN(newValue);
if (invalid) sanitized = this.value; if (invalid) sanitized = this.value;
if (this.isInteger) sanitized = Math.round(sanitized); if (this.isInteger) sanitized = Math.round(sanitized);
if (typeof this.min === "number" && !Number.isNaN(this.min)) sanitized = Math.max(sanitized, this.min); if (typeof this.min === "number" && !Number.isNaN(this.min)) sanitized = Math.max(sanitized, this.min);
if (typeof this.max === "number" && !Number.isNaN(this.max)) sanitized = Math.min(sanitized, this.max); if (typeof this.max === "number" && !Number.isNaN(this.max)) sanitized = Math.min(sanitized, this.max);
if (!invalid) this.$emit("update:value", sanitized); if (!invalid) this.$emit("update:value", sanitized);
this.setText(sanitized); this.setText(sanitized);
}, },
setText(value: number) { setText(value: number) {
@ -252,7 +244,6 @@ export default defineComponent({
// 1.23 == 1 // 1.23 == 1
// 0.23 == 0 (Reason for the slightly more complicated code) // 0.23 == 0 (Reason for the slightly more complicated code)
const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value); const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value);
const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0); const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
const displayValue = Math.round(value * roundingPower) / roundingPower; const displayValue = Math.round(value * roundingPower) / roundingPower;
this.text = `${displayValue}${this.unit}`; this.text = `${displayValue}${this.unit}`;
@ -265,12 +256,10 @@ export default defineComponent({
this.text = "-"; this.text = "-";
return; return;
} }
// The simple `clamp()` function can't be used here since `undefined` values need to be boundless // The simple `clamp()` function can't be used here since `undefined` values need to be boundless
let sanitized = newValue; let sanitized = newValue;
if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min); if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min);
if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max); if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max);
this.setText(sanitized); this.setText(sanitized);
}, },
}, },
@ -284,5 +273,6 @@ export default defineComponent({
inputElement.removeEventListener("focus", this.onTextFocused); inputElement.removeEventListener("focus", this.onTextFocused);
inputElement.removeEventListener("blur", this.onTextChanged); inputElement.removeEventListener("blur", this.onTextChanged);
}, },
components: { LayoutRow },
}); });
</script> </script>

9
frontend/src/components/widgets/inputs/OptionalInput.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<div class="optional-input"> <LayoutRow class="optional-input">
<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" /> <CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.optional-input { .optional-input {
label { label {
display: flex;
align-items: center; align-items: center;
white-space: nowrap;
justify-content: center; justify-content: center;
white-space: nowrap;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 1px solid var(--color-7-middlegray); border: 1px solid var(--color-7-middlegray);
@ -38,6 +37,7 @@ import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons"; import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue"; import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
export default defineComponent({ export default defineComponent({
@ -47,6 +47,7 @@ export default defineComponent({
}, },
components: { components: {
CheckboxInput, CheckboxInput,
LayoutRow,
}, },
}); });
</script> </script>

13
frontend/src/components/widgets/inputs/RadioInput.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="radio-input" ref="radioInput"> <LayoutRow class="radio-input">
<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="handleEntryClick(entry)" :title="entry.tooltip"> <button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="handleEntryClick(entry)" :title="entry.tooltip">
<IconLabel v-if="entry.icon" :icon="entry.icon" /> <IconLabel v-if="entry.icon" :icon="entry.icon" />
<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel> <TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
</button> </button>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -16,7 +16,7 @@
padding: 0 4px; padding: 0 4px;
outline: none; outline: none;
border: none; border: none;
display: inline-flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
@ -50,11 +50,6 @@
} }
} }
.icon-label,
.text-label {
display: inline-block;
}
.text-label { .text-label {
margin: 0 4px; margin: 0 4px;
} }
@ -71,6 +66,7 @@ import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons"; import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue"; import TextLabel from "@/components/widgets/labels/TextLabel.vue";
@ -100,6 +96,7 @@ export default defineComponent({
components: { components: {
IconLabel, IconLabel,
TextLabel, TextLabel,
LayoutRow,
}, },
}); });
</script> </script>

10
frontend/src/components/widgets/inputs/ShelfItemInput.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="shelf-item-input" :class="{ active: active }"> <LayoutRow class="shelf-item-input" :class="{ active: active }">
<IconButton :action="action" :icon="icon" :size="32" /> <IconButton :action="action" :icon="icon" :size="32" />
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -33,10 +33,14 @@ import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons"; import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
export default defineComponent({ export default defineComponent({
components: { IconButton }, components: {
IconButton,
LayoutRow,
},
props: { props: {
icon: { type: String as PropType<IconName>, required: true }, icon: { type: String as PropType<IconName>, required: true },
action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true }, action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },

18
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div class="swatch-pair"> <LayoutCol class="swatch-pair">
<div class="secondary swatch"> <LayoutRow class="secondary swatch">
<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button> <button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu"> <FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" /> <ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
</FloatingMenu> </FloatingMenu>
</div> </LayoutRow>
<div class="primary swatch"> <LayoutRow class="primary swatch">
<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button> <button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu"> <FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" /> <ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
</FloatingMenu> </FloatingMenu>
</div> </LayoutRow>
</div> </LayoutCol>
</template> </template>
<style lang="scss"> <style lang="scss">
.swatch-pair { .swatch-pair {
display: flex;
// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index` // Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
flex-direction: column-reverse; flex-direction: column-reverse;
flex: 0 0 auto;
.swatch { .swatch {
width: 28px; width: 28px;
@ -71,6 +71,8 @@ import { defineComponent } from "vue";
import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages"; import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
import { rgbaToDecimalRgba } from "@/utilities/color"; import { rgbaToDecimalRgba } from "@/utilities/color";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue"; import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue"; import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
@ -84,6 +86,8 @@ export default defineComponent({
components: { components: {
FloatingMenu, FloatingMenu,
ColorPicker, ColorPicker,
LayoutRow,
LayoutCol,
}, },
methods: { methods: {
clickPrimarySwatch() { clickPrimarySwatch() {

12
frontend/src/components/widgets/labels/IconLabel.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<div class="icon-label" :class="`size-${icons[icon].size}`"> <LayoutRow class="icon-label" :class="`size-${icons[icon].size}`">
<component :is="icon" /> <component :is="icon" />
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.icon-label { .icon-label {
display: block;
flex: 0 0 auto; flex: 0 0 auto;
fill: var(--color-e-nearwhite); fill: var(--color-e-nearwhite);
@ -32,10 +31,11 @@ import { DefineComponent, defineComponent, PropType } from "vue";
import { IconName, IconSize, ICON_LIST } from "@/utilities/icons"; import { IconName, IconSize, ICON_LIST } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST; const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
export default defineComponent({ export default defineComponent({
components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
props: { props: {
icon: { type: String as PropType<IconName>, required: true }, icon: { type: String as PropType<IconName>, required: true },
gapAfter: { type: Boolean as PropType<boolean>, default: false }, gapAfter: { type: Boolean as PropType<boolean>, default: false },
@ -45,5 +45,9 @@ export default defineComponent({
icons, icons,
}; };
}, },
components: {
LayoutRow,
...Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
},
}); });
</script> </script>

18
frontend/src/components/widgets/labels/UserInputLabel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="user-input-label"> <LayoutRow class="user-input-label">
<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex"> <template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
<span class="group-gap" v-if="keyGroupIndex > 0"></span> <span class="group-gap" v-if="keyGroupIndex > 0"></span>
<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index"> <template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
@ -15,14 +15,14 @@
<span class="hint-text" v-if="hasSlotContent"> <span class="hint-text" v-if="hasSlotContent">
<slot></slot> <slot></slot>
</span> </span>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.user-input-label { .user-input-label {
flex: 0 0 auto;
height: 100%; height: 100%;
margin: 0 8px; margin: 0 8px;
display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
@ -39,6 +39,9 @@
} }
.input-key { .input-key {
display: flex;
justify-content: center;
align-items: center;
font-family: "Inconsolata", monospace; font-family: "Inconsolata", monospace;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
@ -49,7 +52,7 @@
border-color: var(--color-7-middlegray); border-color: var(--color-7-middlegray);
border-radius: 4px; border-radius: 4px;
height: 16px; height: 16px;
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel with 15px makes them agree // Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel by using 15px makes them agree
line-height: 15px; line-height: 15px;
&.width-16 { &.width-16 {
@ -74,7 +77,6 @@
.icon-label { .icon-label {
margin: 1px; margin: 1px;
display: inline-block;
} }
} }
@ -101,10 +103,14 @@ import { HintInfo, KeysGroup } from "@/dispatcher/js-messages";
import { IconName } from "@/utilities/icons"; import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
components: { IconLabel }, components: {
IconLabel,
LayoutRow,
},
props: { props: {
inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] }, inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null }, inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },

7
frontend/src/components/widgets/options/ToolOptions.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="tool-options"> <LayoutRow class="tool-options">
<template v-for="(option, index) in toolOptionsWidgets[activeTool] || []" :key="index"> <template v-for="(option, index) in toolOptionsWidgets[activeTool] || []" :key="index">
<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` --> <!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
<IconButton v-if="option.kind === 'IconButton'" :action="() => handleIconButtonAction(option)" :title="option.tooltip" v-bind="option.props" /> <IconButton v-if="option.kind === 'IconButton'" :action="() => handleIconButtonAction(option)" :title="option.tooltip" v-bind="option.props" />
@ -16,14 +16,13 @@
/> />
<Separator v-if="option.kind === 'Separator'" v-bind="option.props" /> <Separator v-if="option.kind === 'Separator'" v-bind="option.props" />
</template> </template>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.tool-options { .tool-options {
height: 100%; height: 100%;
flex: 0 0 auto; flex: 0 0 auto;
display: flex;
align-items: center; align-items: center;
} }
</style> </style>
@ -34,6 +33,7 @@ import { defineComponent, PropType } from "vue";
import { ToolName } from "@/dispatcher/js-messages"; import { ToolName } from "@/dispatcher/js-messages";
import { WidgetRow, IconButtonWidget } from "@/utilities/widgets"; import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue"; import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue"; import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
@ -182,6 +182,7 @@ export default defineComponent({
IconButton, IconButton,
PopoverButton, PopoverButton,
NumberInput, NumberInput,
LayoutRow,
}, },
}); });
</script> </script>

1
frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
View File

@ -15,7 +15,6 @@
.arrow { .arrow {
flex: 0 0 auto; flex: 0 0 auto;
display: block;
background: none; background: none;
outline: none; outline: none;
border: none; border: none;

32
frontend/src/components/window/MainWindow.vue
View File

@ -1,14 +1,10 @@
<template> <template>
<LayoutCol class="main-window"> <LayoutCol class="main-window">
<LayoutRow class="title-bar-row"> <TitleBar :platform="platform" :maximized="maximized" />
<TitleBar :platform="platform" :maximized="maximized" />
</LayoutRow> <Workspace />
<LayoutRow class="workspace-row">
<Workspace /> <StatusBar />
</LayoutRow>
<LayoutRow class="status-bar-row">
<StatusBar />
</LayoutRow>
</LayoutCol> </LayoutCol>
</template> </template>
@ -18,29 +14,12 @@
overflow: auto; overflow: auto;
touch-action: none; touch-action: none;
} }
.title-bar-row {
height: 28px;
flex: 0 0 auto;
}
.workspace-row {
position: relative;
flex: 1 1 100%;
}
.status-bar-row {
flex: 0 0 auto;
// Prevents the creation of a scrollbar due to the child's negative margin
overflow: hidden;
}
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import LayoutCol from "@/components/layout/LayoutCol.vue"; import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import StatusBar from "@/components/window/status-bar/StatusBar.vue"; import StatusBar from "@/components/window/status-bar/StatusBar.vue";
import TitleBar from "@/components/window/title-bar/TitleBar.vue"; import TitleBar from "@/components/window/title-bar/TitleBar.vue";
import Workspace from "@/components/workspace/Workspace.vue"; import Workspace from "@/components/workspace/Workspace.vue";
@ -49,7 +28,6 @@ export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
export default defineComponent({ export default defineComponent({
components: { components: {
LayoutRow,
LayoutCol, LayoutCol,
TitleBar, TitleBar,
Workspace, Workspace,

59
frontend/src/components/window/status-bar/StatusBar.vue
View File

@ -1,33 +1,42 @@
<template> <template>
<div class="status-bar"> <LayoutRow class="status-bar">
<template v-for="(hintGroup, index) in hintData" :key="hintGroup"> <LayoutRow class="hint-groups">
<Separator :type="'Section'" v-if="index !== 0" /> <template v-for="(hintGroup, index) in hintData" :key="hintGroup">
<template v-for="hint in hintGroup" :key="hint"> <Separator :type="'Section'" v-if="index !== 0" />
<span v-if="hint.plus" class="plus">+</span> <template v-for="hint in hintGroup" :key="hint">
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel> <LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
</template>
</template> </template>
</template> </LayoutRow>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.status-bar { .status-bar {
display: flex;
height: 24px; height: 24px;
margin: 0 -4px; width: 100%;
flex: 0 0 auto;
.separator.section { .hint-groups {
margin: 0; flex: 0 0 auto;
} max-width: 100%;
margin: 0 -4px;
overflow: hidden;
.plus { .separator.section {
display: flex; margin: 0;
align-items: center; }
font-weight: 700;
}
.user-input-label + .user-input-label { .plus {
margin-left: 0; flex: 0 0 auto;
align-items: center;
font-weight: 700;
}
.user-input-label + .user-input-label {
margin-left: 0;
}
} }
} }
</style> </style>
@ -37,15 +46,12 @@ import { defineComponent } from "vue";
import { HintData, UpdateInputHints } from "@/dispatcher/js-messages"; import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue"; import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
import Separator from "@/components/widgets/separators/Separator.vue"; import Separator from "@/components/widgets/separators/Separator.vue";
export default defineComponent({ export default defineComponent({
inject: ["editor"], inject: ["editor"],
components: {
UserInputLabel,
Separator,
},
data() { data() {
return { return {
hintData: [] as HintData, hintData: [] as HintData,
@ -60,5 +66,10 @@ export default defineComponent({
this.editor.instance.select_tool("Path"); this.editor.instance.select_tool("Path");
this.editor.instance.select_tool("Select"); this.editor.instance.select_tool("Select");
}, },
components: {
UserInputLabel,
Separator,
LayoutRow,
},
}); });
</script> </script>

52
frontend/src/components/window/title-bar/TitleBar.vue
View File

@ -1,32 +1,38 @@
<template> <template>
<div class="header-third"> <LayoutRow class="title-bar">
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" /> <LayoutRow class="header-part">
<MenuBarInput v-if="platform !== 'Mac'" /> <WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
</div> <MenuBarInput v-if="platform !== 'Mac'" />
<div class="header-third"> </LayoutRow>
<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" /> <LayoutRow class="header-part">
</div> <WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
<div class="header-third"> </LayoutRow>
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" /> <LayoutRow class="header-part">
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" /> <WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
</div> <WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
</LayoutRow>
</LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.header-third { .title-bar {
display: flex; height: 28px;
flex: 1 1 100%; flex: 0 0 auto;
&:nth-child(1) { .header-part {
justify-content: flex-start; flex: 1 1 100%;
}
&:nth-child(2) { &:nth-child(1) {
justify-content: center; justify-content: flex-start;
} }
&:nth-child(3) { &:nth-child(2) {
justify-content: flex-end; justify-content: center;
}
&:nth-child(3) {
justify-content: flex-end;
}
} }
} }
</style> </style>
@ -34,6 +40,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue"; import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue"; import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue"; import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
@ -59,6 +66,7 @@ export default defineComponent({
WindowButtonsWindows, WindowButtonsWindows,
WindowButtonsMac, WindowButtonsMac,
WindowButtonsWeb, WindowButtonsWeb,
LayoutRow,
}, },
}); });
</script> </script>

19
frontend/src/components/window/title-bar/WindowButtonsMac.vue
View File

@ -1,24 +1,28 @@
<template> <template>
<div class="mac window-buttons"> <LayoutRow class="window-buttons mac">
<div class="close" title="Close"></div> <div class="close" title="Close"></div>
<div class="minimize" title="Minimize"></div> <div class="minimize" title="Minimize"></div>
<div class="zoom" title="Zoom"></div> <div class="zoom" title="Zoom"></div>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.mac.window-buttons { .window-buttons.mac {
display: flex; flex: 0 0 auto;
align-items: center; align-items: center;
margin: 0 8px;
div { div {
display: flex; flex: 0 0 auto;
align-items: center; align-items: center;
margin-left: 8px;
width: 11px; width: 11px;
height: 11px; height: 11px;
border-radius: 50%; border-radius: 50%;
& + div {
margin-left: 8px;
}
&.close { &.close {
background: #ff5a52; background: #ff5a52;
} }
@ -37,9 +41,12 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({ export default defineComponent({
props: { props: {
maximized: { type: Boolean as PropType<boolean>, default: false }, maximized: { type: Boolean as PropType<boolean>, default: false },
}, },
components: { LayoutRow },
}); });
</script> </script>

8
frontend/src/components/window/title-bar/WindowButtonsWeb.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'"> <LayoutRow class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel> <TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" /> <IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.window-buttons-web { .window-buttons-web {
display: flex; flex: 0 0 auto;
align-items: center; align-items: center;
padding: 0 8px; padding: 0 8px;
@ -33,6 +33,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue"; import TextLabel from "@/components/widgets/labels/TextLabel.vue";
@ -52,6 +53,7 @@ export default defineComponent({
components: { components: {
IconLabel, IconLabel,
TextLabel, TextLabel,
LayoutRow,
}, },
}); });
</script> </script>

26
frontend/src/components/window/title-bar/WindowButtonsWindows.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div class="windows window-button minimize" title="Minimize"> <LayoutRow class="window-button windows minimize" title="Minimize">
<IconLabel :icon="'WindowButtonWinMinimize'" /> <IconLabel :icon="'WindowButtonWinMinimize'" />
</div> </LayoutRow>
<div class="windows window-button maximize" title="Maximize" v-if="!maximized"> <LayoutRow class="window-button windows maximize" title="Maximize" v-if="!maximized">
<IconLabel :icon="'WindowButtonWinMaximize'" /> <IconLabel :icon="'WindowButtonWinMaximize'" />
</div> </LayoutRow>
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized"> <LayoutRow class="window-button windows restore-down" title="Restore Down" v-if="maximized">
<IconLabel :icon="'WindowButtonWinRestoreDown'" /> <IconLabel :icon="'WindowButtonWinRestoreDown'" />
</div> </LayoutRow>
<div class="windows window-button close" title="Close"> <LayoutRow class="window-button windows close" title="Close">
<IconLabel :icon="'WindowButtonWinClose'" /> <IconLabel :icon="'WindowButtonWinClose'" />
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.windows.window-button { .window-button.windows {
display: flex; flex: 0 0 auto;
align-items: center; align-items: center;
padding: 0 17px; padding: 0 17px;
@ -40,10 +40,14 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
components: { IconLabel }, components: {
IconLabel,
LayoutRow,
},
props: { props: {
maximized: { type: Boolean as PropType<boolean>, default: false }, maximized: { type: Boolean as PropType<boolean>, default: false },
}, },

9
frontend/src/components/window/title-bar/WindowTitle.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="window-title"> <LayoutRow class="window-title">
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </LayoutRow>
</template> </template>
<style lang="scss"> <style lang="scss">
.window-title { .window-title {
display: flex; flex: 0 0 auto;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
padding: 0 8px; padding: 0 8px;
@ -16,9 +16,12 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({ export default defineComponent({
props: { props: {
title: { type: String as PropType<string>, required: true }, title: { type: String as PropType<string>, required: true },
}, },
components: { LayoutRow },
}); });
</script> </script>

12
frontend/src/components/workspace/Panel.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<LayoutCol class="panel"> <LayoutCol class="panel">
<LayoutRow class="tab-bar" :class="{ 'min-widths': tabMinWidths }"> <LayoutRow class="tab-bar" data-tab-bar :class="{ 'min-widths': tabMinWidths }">
<LayoutRow class="tab-group" :scrollableX="true"> <LayoutRow class="tab-group" :scrollableX="true">
<div <LayoutRow
class="tab" class="tab"
:class="{ active: tabIndex === tabActiveIndex }" :class="{ active: tabIndex === tabActiveIndex }"
data-tab
v-for="(tabLabel, tabIndex) in tabLabels" v-for="(tabLabel, tabIndex) in tabLabels"
:key="tabIndex" :key="tabIndex"
@click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))" @click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))"
@ -12,7 +13,7 @@
> >
<span>{{ tabLabel }}</span> <span>{{ tabLabel }}</span>
<IconButton :action="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" /> <IconButton :action="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
</div> </LayoutRow>
</LayoutRow> </LayoutRow>
<PopoverButton :icon="'VerticalEllipsis'"> <PopoverButton :icon="'VerticalEllipsis'">
<h3>Panel Options</h3> <h3>Panel Options</h3>
@ -55,9 +56,9 @@
} }
.tab { .tab {
flex: 0 1 auto;
height: 100%; height: 100%;
padding: 0 8px; padding: 0 8px;
display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -138,7 +139,6 @@
.panel-body { .panel-body {
background: var(--color-3-darkgray); background: var(--color-3-darkgray);
flex: 1 1 100%; flex: 1 1 100%;
display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
} }
@ -152,7 +152,6 @@ import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue"; import LayoutRow from "@/components/layout/LayoutRow.vue";
import Document from "@/components/panels/Document.vue"; import Document from "@/components/panels/Document.vue";
import LayerTree from "@/components/panels/LayerTree.vue"; import LayerTree from "@/components/panels/LayerTree.vue";
import Minimap from "@/components/panels/Minimap.vue";
import Properties from "@/components/panels/Properties.vue"; import Properties from "@/components/panels/Properties.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue"; import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
@ -161,7 +160,6 @@ const panelComponents = {
Document, Document,
Properties, Properties,
LayerTree, LayerTree,
Minimap,
IconButton, IconButton,
PopoverButton, PopoverButton,
}; };

111
frontend/src/components/workspace/Workspace.vue
View File

@ -1,65 +1,68 @@
<template> <template>
<LayoutRow class="workspace-grid-subdivision"> <LayoutRow class="workspace" data-workspace>
<LayoutCol class="workspace-grid-subdivision"> <LayoutRow class="workspace-grid-subdivision">
<Panel <LayoutCol class="workspace-grid-subdivision">
:panelType="'Document'" <Panel
:tabCloseButtons="true" :panelType="'Document'"
:tabMinWidths="true" :tabCloseButtons="true"
:tabLabels="documents.state.documents.map((doc) => doc.displayName)" :tabMinWidths="true"
:clickAction=" :tabLabels="documents.state.documents.map((doc) => doc.displayName)"
(tabIndex) => { :clickAction="
const targetId = documents.state.documents[tabIndex].id; (tabIndex) => {
editor.instance.select_document(targetId); const targetId = documents.state.documents[tabIndex].id;
} editor.instance.select_document(targetId);
" }
:closeAction=" "
(tabIndex) => { :closeAction="
const targetId = documents.state.documents[tabIndex].id; (tabIndex) => {
editor.instance.close_document_with_confirmation(targetId); const targetId = documents.state.documents[tabIndex].id;
} editor.instance.close_document_with_confirmation(targetId);
" }
:tabActiveIndex="documents.state.activeDocumentIndex" "
ref="documentsPanel" :tabActiveIndex="documents.state.activeDocumentIndex"
/> ref="documentsPanel"
</LayoutCol> />
<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutCol> </LayoutCol>
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17"> <LayoutCol class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutCol>
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402"> <LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" /> <LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
</LayoutRow> <Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutRow> </LayoutRow>
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590"> <LayoutRow class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutRow>
<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" /> <LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
</LayoutRow> <Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
<!-- <LayoutRow class="workspace-grid-resize-gutter"></LayoutRow> </LayoutRow>
<LayoutRow class="workspace-grid-subdivision folded"> </LayoutCol>
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" /> </LayoutRow>
</LayoutRow> --> <DialogModal v-if="dialog.state.visible" />
</LayoutCol>
</LayoutRow> </LayoutRow>
<DialogModal v-if="dialog.state.visible" />
</template> </template>
<style lang="scss"> <style lang="scss">
.workspace-grid-subdivision { .workspace {
min-height: 28px; position: relative;
flex: 1 1 0; flex: 1 1 100%;
&.folded { .workspace-grid-subdivision {
flex-grow: 0; min-height: 28px;
height: 0; flex: 1 1 0;
}
}
.workspace-grid-resize-gutter { &.folded {
flex: 0 0 4px; flex-grow: 0;
height: 0;
&.layout-row { }
cursor: ns-resize;
} }
&.layout-col { .workspace-grid-resize-gutter {
cursor: ew-resize; flex: 0 0 4px;
&.layout-row {
cursor: ns-resize;
}
&.layout-col {
cursor: ew-resize;
}
} }
} }
</style> </style>
@ -139,7 +142,7 @@ export default defineComponent({
activeDocumentIndex(newIndex: number) { activeDocumentIndex(newIndex: number) {
this.$nextTick(() => { this.$nextTick(() => {
const documentsPanel = this.$refs.documentsPanel as typeof Panel; const documentsPanel = this.$refs.documentsPanel as typeof Panel;
const newActiveTab = documentsPanel.$el.querySelectorAll(".tab-bar .tab-group .tab")[newIndex]; const newActiveTab = documentsPanel.$el.querySelectorAll("[data-tab-bar] [data-tab]")[newIndex];
newActiveTab.scrollIntoView(); newActiveTab.scrollIntoView();
}); });
}, },

10
frontend/src/lifetime/input.ts
View File

@ -105,8 +105,8 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
const onPointerDown = (e: PointerEvent): void => { const onPointerDown = (e: PointerEvent): void => {
const { target } = e; const { target } = e;
const inCanvas = target instanceof Element && target.closest(".canvas"); const inCanvas = target instanceof Element && target.closest("[data-canvas]");
const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content"); const inDialog = target instanceof Element && target.closest("[data-dialog-modal] [data-floating-menu-content]");
if (dialog.dialogIsVisible() && !inDialog) { if (dialog.dialogIsVisible() && !inDialog) {
dialog.dismissDialog(); dialog.dismissDialog();
@ -139,9 +139,9 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
const onMouseScroll = (e: WheelEvent): void => { const onMouseScroll = (e: WheelEvent): void => {
const { target } = e; const { target } = e;
const inCanvas = target instanceof Element && target.closest(".canvas"); const inCanvas = target instanceof Element && target.closest("[data-canvas]");
const horizontalScrollableElement = target instanceof Element && target.closest(".scrollable-x"); const horizontalScrollableElement = target instanceof Element && target.closest("[data-scrollable-x]");
if (horizontalScrollableElement && e.deltaY !== 0) { if (horizontalScrollableElement && e.deltaY !== 0) {
horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0); horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0);
return; return;
@ -157,7 +157,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
// Window events // Window events
const onWindowResize = (container: HTMLElement): void => { const onWindowResize = (container: HTMLElement): void => {
const viewports = Array.from(container.querySelectorAll(".canvas")); const viewports = Array.from(container.querySelectorAll("[data-canvas]"));
const boundsOfViewports = viewports.map((canvas) => { const boundsOfViewports = viewports.map((canvas) => {
const bounds = canvas.getBoundingClientRect(); const bounds = canvas.getBoundingClientRect();
return [bounds.left, bounds.top, bounds.right, bounds.bottom]; return [bounds.left, bounds.top, bounds.right, bounds.bottom];