mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-09-07 21:50:31 +00:00
Clean up web code's use of display CSS properties, using <LayoutRow>/<LayoutCol> where intended
This commit is contained in:
Keavon Chambers
parent
45d75bd13f
commit
8c29592db8
34 changed files with 385 additions and 345 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<MainWindow />
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<LayoutRow>
|
||||
<button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button>
|
||||
</LayoutRow>
|
||||
</div>
|
||||
</LayoutCol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -186,39 +186,43 @@ img {
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.unsupported-modal {
|
||||
background: var(--color-3-darkgray);
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
|
||||
padding: 0 16px 16px 16px;
|
||||
border: 1px solid var(--color-4-dimgray);
|
||||
max-width: 500px;
|
||||
.unsupported-modal {
|
||||
background: var(--color-3-darkgray);
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
|
||||
padding: 0 16px 16px 16px;
|
||||
border: 1px solid var(--color-4-dimgray);
|
||||
max-width: 500px;
|
||||
|
||||
& a {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.unsupported-modal-button {
|
||||
flex: 1;
|
||||
background: var(--color-1-nearblack);
|
||||
border: 0 none;
|
||||
padding: 12px;
|
||||
border-radius: 2px;
|
||||
a {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-6-lowergray);
|
||||
color: var(--color-f-white);
|
||||
}
|
||||
.unsupported-modal-button {
|
||||
flex: 1;
|
||||
background: var(--color-1-nearblack);
|
||||
border: 0 none;
|
||||
padding: 12px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:active {
|
||||
background: var(--color-accent-hover);
|
||||
color: var(--color-f-white);
|
||||
&:hover {
|
||||
background: var(--color-6-lowergray);
|
||||
color: var(--color-f-white);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-accent-hover);
|
||||
color: var(--color-f-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -234,6 +238,7 @@ import { createDocumentsState, DocumentsState } from "@/state/documents";
|
|||
import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
|
||||
import { createEditorState, EditorState } from "@/state/wasm-loader";
|
||||
|
||||
import LayoutCol from "@/components/layout/LayoutCol.vue";
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import MainWindow from "@/components/window/MainWindow.vue";
|
||||
|
||||
|
|
@ -291,6 +296,10 @@ export default defineComponent({
|
|||
const { editor } = this;
|
||||
editor.instance.free();
|
||||
},
|
||||
components: { MainWindow, LayoutRow },
|
||||
components: {
|
||||
MainWindow,
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<LayoutCol class="document">
|
||||
<LayoutRow class="options-bar" :scrollableX="true">
|
||||
<div class="left side">
|
||||
<LayoutRow class="left side">
|
||||
<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
|
||||
|
||||
<Separator :type="'Section'" />
|
||||
|
||||
<ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" />
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="right side">
|
||||
</LayoutRow>
|
||||
|
||||
<LayoutRow class="spacer"></LayoutRow>
|
||||
|
||||
<LayoutRow class="right side">
|
||||
<OptionalInput v-model:checked="snappingEnabled" @update:checked="(snap: boolean) => setSnapping(snap)" :icon="'Snapping'" title="Snapping" />
|
||||
<PopoverButton>
|
||||
<h3>Snapping</h3>
|
||||
|
|
@ -64,7 +66,7 @@
|
|||
:displayDecimalPlaces="4"
|
||||
ref="zoom"
|
||||
/>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
<LayoutRow class="shelf-and-viewport">
|
||||
<LayoutCol class="shelf">
|
||||
|
|
@ -106,14 +108,14 @@
|
|||
<ShelfItemInput icon="VectorShapeTool" title="Shape Tool (Y)" :active="activeTool === 'Shape'" :action="() => selectTool('Shape')" />
|
||||
</LayoutCol>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<LayoutCol class="spacer"></LayoutCol>
|
||||
|
||||
<LayoutCol class="working-colors">
|
||||
<SwatchPairInput />
|
||||
<div class="swap-and-reset">
|
||||
<LayoutRow class="swap-and-reset">
|
||||
<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
|
||||
<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</LayoutCol>
|
||||
<LayoutCol class="viewport">
|
||||
|
|
@ -125,7 +127,7 @@
|
|||
<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
|
||||
</LayoutCol>
|
||||
<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="artwork" v-html="artworkSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
|
||||
<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
|
||||
|
|
@ -168,7 +170,6 @@
|
|||
.side {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
|
@ -181,8 +182,6 @@
|
|||
.shelf-and-viewport {
|
||||
.shelf {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tools {
|
||||
flex: 0 1 auto;
|
||||
|
|
@ -198,7 +197,6 @@
|
|||
|
||||
.swap-and-reset {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<LayoutCol class="properties-panel"></LayoutCol>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -7,5 +7,9 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({});
|
||||
import LayoutCol from "@/components/layout/LayoutCol.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { LayoutCol },
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<style lang="scss">
|
||||
.icon-button {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<div class="popover-button">
|
||||
<LayoutRow class="popover-button">
|
||||
<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
|
||||
<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
|
||||
<slot></slot>
|
||||
</FloatingMenu>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.popover-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
|
|
@ -17,6 +16,7 @@
|
|||
|
||||
.floating-menu {
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
|
|
@ -51,6 +51,7 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { PopoverButtonIcon } from "@/utilities/widgets";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
||||
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
|
||||
|
||||
|
|
@ -58,6 +59,7 @@ export default defineComponent({
|
|||
components: {
|
||||
FloatingMenu,
|
||||
IconButton,
|
||||
LayoutRow,
|
||||
},
|
||||
props: {
|
||||
action: { type: Function as PropType<() => void>, required: false },
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
<style lang="scss">
|
||||
.text-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
<template>
|
||||
<div class="color-picker">
|
||||
<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
|
||||
<LayoutRow class="color-picker">
|
||||
<LayoutCol class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
|
||||
<div ref="saturationCursor" class="selection-circle"></div>
|
||||
</div>
|
||||
<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
|
||||
</LayoutCol>
|
||||
<LayoutCol class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
|
||||
<div ref="hueCursor" class="selection-pincers"></div>
|
||||
</div>
|
||||
<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
|
||||
</LayoutCol>
|
||||
<LayoutCol class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
|
||||
<div ref="opacityCursor" class="selection-pincers"></div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.color-picker {
|
||||
--saturation-picker-hue: #ff0000;
|
||||
--opacity-picker-color: #ff0000;
|
||||
display: flex;
|
||||
|
||||
.saturation-picker {
|
||||
width: 256px;
|
||||
|
|
@ -51,15 +50,15 @@
|
|||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 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%),
|
||||
linear-gradient(#ffffff, #ffffff);
|
||||
background-size: 16px 16px;
|
||||
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 { clamp } from "@/utilities/math";
|
||||
|
||||
import LayoutCol from "@/components/layout/LayoutCol.vue";
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
|
||||
type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
|
||||
|
||||
// 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);
|
||||
},
|
||||
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";
|
||||
} else if ((this.$refs.huePicker as HTMLElement).contains(e.currentTarget)) {
|
||||
} else if (huePickerElement.contains(e.currentTarget)) {
|
||||
this.state = "MoveHue";
|
||||
} else if ((this.$refs.opacityPicker as HTMLElement).contains(e.currentTarget)) {
|
||||
} else if (opacityPickerElement.contains(e.currentTarget)) {
|
||||
this.state = "MoveOpacity";
|
||||
} else {
|
||||
this.state = "Idle";
|
||||
|
|
@ -191,6 +202,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
this.updateHue();
|
||||
|
||||
// The `color` prop's watcher calls `this.updateColor()`
|
||||
this.$emit("update:color", hsvaToRgba(this.pickerHSVA));
|
||||
},
|
||||
|
|
@ -198,12 +210,23 @@ export default defineComponent({
|
|||
if (this.state === "Idle") return;
|
||||
|
||||
this.state = "Idle";
|
||||
|
||||
this.removeEvents();
|
||||
},
|
||||
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
|
||||
const saturationPicker = this.$refs.saturationPicker as HTMLElement;
|
||||
const saturation = saturationPicker.getBoundingClientRect();
|
||||
const saturation = saturationPickerElement.getBoundingClientRect();
|
||||
|
||||
this.pickerSaturationRect.width = saturation.width;
|
||||
this.pickerSaturationRect.height = saturation.height;
|
||||
|
|
@ -211,8 +234,7 @@ export default defineComponent({
|
|||
this.pickerSaturationRect.top = saturation.top;
|
||||
|
||||
// Hue
|
||||
const huePicker = this.$refs.huePicker as HTMLElement;
|
||||
const hue = huePicker.getBoundingClientRect();
|
||||
const hue = huePickerElement.getBoundingClientRect();
|
||||
|
||||
this.pickerHueRect.width = hue.width;
|
||||
this.pickerHueRect.height = hue.height;
|
||||
|
|
@ -220,8 +242,7 @@ export default defineComponent({
|
|||
this.pickerHueRect.top = hue.top;
|
||||
|
||||
// Opacity
|
||||
const opacityPicker = this.$refs.opacityPicker as HTMLElement;
|
||||
const opacity = opacityPicker.getBoundingClientRect();
|
||||
const opacity = opacityPickerElement.getBoundingClientRect();
|
||||
|
||||
this.pickerOpacityRect.width = opacity.width;
|
||||
this.pickerOpacityRect.height = opacity.height;
|
||||
|
|
@ -275,5 +296,9 @@ export default defineComponent({
|
|||
this.updateHue();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
<template>
|
||||
<div class="dialog-modal">
|
||||
<FloatingMenu :type="'Dialog'" :direction="'Center'">
|
||||
<LayoutRow>
|
||||
<LayoutCol class="icon-column">
|
||||
<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
|
||||
<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
|
||||
</LayoutCol>
|
||||
<LayoutCol class="main-column">
|
||||
<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
|
||||
<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
|
||||
<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" />
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
</FloatingMenu>
|
||||
</div>
|
||||
<FloatingMenu class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
|
||||
<LayoutRow>
|
||||
<LayoutCol class="icon-column">
|
||||
<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
|
||||
<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
|
||||
</LayoutCol>
|
||||
<LayoutCol class="main-column">
|
||||
<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
|
||||
<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
|
||||
<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" />
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
</FloatingMenu>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -25,11 +23,6 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.floating-menu-container .floating-menu-content {
|
||||
pointer-events: auto;
|
||||
padding: 24px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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="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>
|
||||
</LayoutCol>
|
||||
</div>
|
||||
|
|
@ -45,8 +45,6 @@
|
|||
font-size: inherit;
|
||||
padding: 8px;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// Draw over the application without being clipped by the containing panel's `overflow: hidden`
|
||||
position: fixed;
|
||||
}
|
||||
|
|
@ -196,7 +194,7 @@ export default defineComponent({
|
|||
},
|
||||
data() {
|
||||
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`;
|
||||
});
|
||||
return {
|
||||
|
|
@ -209,7 +207,7 @@ export default defineComponent({
|
|||
const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement;
|
||||
const floatingMenuContentComponent = this.$refs.floatingMenuContent as typeof LayoutCol;
|
||||
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;
|
||||
|
||||
|
|
@ -346,7 +344,7 @@ export default defineComponent({
|
|||
},
|
||||
isPointerEventOutsideFloatingMenu(e: PointerEvent, extraDistanceAllowed = 0): boolean {
|
||||
// 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));
|
||||
},
|
||||
isPointerEventOutsideMenuElement(e: PointerEvent, element: HTMLElement, extraDistanceAllowed = 0): boolean {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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">
|
||||
<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
|
||||
<div
|
||||
<LayoutRow
|
||||
v-for="(entry, entryIndex) in section"
|
||||
:key="entryIndex"
|
||||
class="row"
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
v-bind="{ defaultAction, minWidth, drawIcon, scrollableY }"
|
||||
:ref="(ref: any) => setEntryRefs(entry, ref)"
|
||||
/>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
</FloatingMenu>
|
||||
</template>
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
|
||||
.row {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
|
@ -134,6 +133,7 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { IconName } from "@/utilities/icons";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
|
||||
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
|
|
@ -263,9 +263,7 @@ const MenuList = defineComponent({
|
|||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
|
||||
};
|
||||
return { keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER };
|
||||
},
|
||||
components: {
|
||||
FloatingMenu,
|
||||
|
|
@ -273,6 +271,7 @@ const MenuList = defineComponent({
|
|||
IconLabel,
|
||||
CheckboxInput,
|
||||
UserInputLabel,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
export default MenuList;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<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)" />
|
||||
<label :for="`checkbox-input-${id}`">
|
||||
<div class="checkbox-box">
|
||||
<LayoutRow class="checkbox-box">
|
||||
<IconLabel :icon="icon" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</label>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.checkbox-input {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
display: flex;
|
||||
|
||||
.checkbox-box {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
background: var(--color-e-nearwhite);
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
|
|
@ -84,6 +84,7 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { IconName } from "@/utilities/icons";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -102,6 +103,9 @@ export default defineComponent({
|
|||
icon: { type: String as PropType<IconName>, default: "Checkmark" },
|
||||
outlineStyle: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
components: { IconLabel },
|
||||
components: {
|
||||
IconLabel,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="dropdown-input">
|
||||
<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
|
||||
<LayoutRow class="dropdown-input">
|
||||
<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" />
|
||||
<span>{{ activeEntry.label }}</span>
|
||||
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
<MenuList
|
||||
v-model:activeEntry="activeEntry"
|
||||
@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
:scrollableY="true"
|
||||
ref="menuList"
|
||||
/>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -23,7 +23,6 @@
|
|||
position: relative;
|
||||
|
||||
.dropdown-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
background: var(--color-1-nearblack);
|
||||
|
|
@ -36,7 +35,6 @@
|
|||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-left: 8px;
|
||||
flex: 1 1 100%;
|
||||
|
|
@ -90,6 +88,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
|
||||
|
|
@ -138,6 +137,7 @@ export default defineComponent({
|
|||
components: {
|
||||
IconLabel,
|
||||
MenuList,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="number-input" :class="{ disabled }">
|
||||
<LayoutRow class="number-input" :class="{ disabled }">
|
||||
<input
|
||||
:class="{ 'has-label': label }"
|
||||
:id="`number-input-${id}`"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<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 right" @click="onIncrement('Increase')"></button>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -25,7 +25,6 @@
|
|||
border-radius: 2px;
|
||||
background: var(--color-1-nearblack);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
label {
|
||||
|
|
@ -154,6 +153,8 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: { type: Number as PropType<number>, required: true },
|
||||
|
|
@ -182,7 +183,6 @@ export default defineComponent({
|
|||
if (Number.isNaN(this.value)) this.text = "";
|
||||
else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
|
||||
else this.text = `${this.value}${this.unit}`;
|
||||
|
||||
this.editing = true;
|
||||
const inputElement = this.$refs.input as HTMLInputElement;
|
||||
// Setting the value directly is required to make `inputElement.select()` work
|
||||
|
|
@ -194,24 +194,20 @@ export default defineComponent({
|
|||
onTextChanged() {
|
||||
// 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;
|
||||
|
||||
const newValue = parseFloat(this.text);
|
||||
this.updateValue(newValue);
|
||||
|
||||
this.editing = false;
|
||||
const inputElement = this.$refs.input as HTMLElement;
|
||||
inputElement.blur();
|
||||
},
|
||||
onCancelTextChange() {
|
||||
this.updateValue(NaN);
|
||||
|
||||
this.editing = false;
|
||||
const inputElement = this.$refs.input as HTMLElement;
|
||||
inputElement.blur();
|
||||
},
|
||||
onIncrement(direction: IncrementDirection) {
|
||||
if (Number.isNaN(this.value)) return;
|
||||
|
||||
switch (this.incrementBehavior) {
|
||||
case "Add": {
|
||||
const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
|
||||
|
|
@ -234,16 +230,12 @@ export default defineComponent({
|
|||
},
|
||||
updateValue(newValue: number) {
|
||||
let sanitized = newValue;
|
||||
|
||||
const invalid = Number.isNaN(newValue);
|
||||
if (invalid) sanitized = this.value;
|
||||
|
||||
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.max === "number" && !Number.isNaN(this.max)) sanitized = Math.min(sanitized, this.max);
|
||||
|
||||
if (!invalid) this.$emit("update:value", sanitized);
|
||||
|
||||
this.setText(sanitized);
|
||||
},
|
||||
setText(value: number) {
|
||||
|
|
@ -252,7 +244,6 @@ export default defineComponent({
|
|||
// 1.23 == 1
|
||||
// 0.23 == 0 (Reason for the slightly more complicated code)
|
||||
const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value);
|
||||
|
||||
const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
|
||||
const displayValue = Math.round(value * roundingPower) / roundingPower;
|
||||
this.text = `${displayValue}${this.unit}`;
|
||||
|
|
@ -265,12 +256,10 @@ export default defineComponent({
|
|||
this.text = "-";
|
||||
return;
|
||||
}
|
||||
|
||||
// The simple `clamp()` function can't be used here since `undefined` values need to be boundless
|
||||
let sanitized = newValue;
|
||||
if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min);
|
||||
if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max);
|
||||
|
||||
this.setText(sanitized);
|
||||
},
|
||||
},
|
||||
|
|
@ -284,5 +273,6 @@ export default defineComponent({
|
|||
inputElement.removeEventListener("focus", this.onTextFocused);
|
||||
inputElement.removeEventListener("blur", this.onTextChanged);
|
||||
},
|
||||
components: { LayoutRow },
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<div class="optional-input">
|
||||
<LayoutRow class="optional-input">
|
||||
<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.optional-input {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--color-7-middlegray);
|
||||
|
|
@ -38,6 +37,7 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { IconName } from "@/utilities/icons";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -47,6 +47,7 @@ export default defineComponent({
|
|||
},
|
||||
components: {
|
||||
CheckboxInput,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<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">
|
||||
<IconLabel v-if="entry.icon" :icon="entry.icon" />
|
||||
<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
|
||||
</button>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
padding: 0 4px;
|
||||
outline: none;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -50,11 +50,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.icon-label,
|
||||
.text-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
|
@ -71,6 +66,7 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { IconName } from "@/utilities/icons";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
|
||||
|
||||
|
|
@ -100,6 +96,7 @@ export default defineComponent({
|
|||
components: {
|
||||
IconLabel,
|
||||
TextLabel,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="shelf-item-input" :class="{ active: active }">
|
||||
<LayoutRow class="shelf-item-input" :class="{ active: active }">
|
||||
<IconButton :action="action" :icon="icon" :size="32" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -33,10 +33,14 @@ import { defineComponent, PropType } from "vue";
|
|||
|
||||
import { IconName } from "@/utilities/icons";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { IconButton },
|
||||
components: {
|
||||
IconButton,
|
||||
LayoutRow,
|
||||
},
|
||||
props: {
|
||||
icon: { type: String as PropType<IconName>, required: true },
|
||||
action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
<template>
|
||||
<div class="swatch-pair">
|
||||
<div class="secondary swatch">
|
||||
<LayoutCol class="swatch-pair">
|
||||
<LayoutRow class="secondary swatch">
|
||||
<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
|
||||
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
|
||||
<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
|
||||
</FloatingMenu>
|
||||
</div>
|
||||
<div class="primary swatch">
|
||||
</LayoutRow>
|
||||
<LayoutRow class="primary swatch">
|
||||
<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
|
||||
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
|
||||
<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
|
||||
</FloatingMenu>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.swatch-pair {
|
||||
display: flex;
|
||||
// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
|
||||
flex-direction: column-reverse;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.swatch {
|
||||
width: 28px;
|
||||
|
|
@ -71,6 +71,8 @@ import { defineComponent } from "vue";
|
|||
import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
|
||||
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 FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
|
||||
|
||||
|
|
@ -84,6 +86,8 @@ export default defineComponent({
|
|||
components: {
|
||||
FloatingMenu,
|
||||
ColorPicker,
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
},
|
||||
methods: {
|
||||
clickPrimarySwatch() {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<div class="icon-label" :class="`size-${icons[icon].size}`">
|
||||
<LayoutRow class="icon-label" :class="`size-${icons[icon].size}`">
|
||||
<component :is="icon" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
fill: var(--color-e-nearwhite);
|
||||
|
||||
|
|
@ -32,10 +31,11 @@ import { DefineComponent, defineComponent, PropType } from "vue";
|
|||
|
||||
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;
|
||||
|
||||
export default defineComponent({
|
||||
components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
|
||||
props: {
|
||||
icon: { type: String as PropType<IconName>, required: true },
|
||||
gapAfter: { type: Boolean as PropType<boolean>, default: false },
|
||||
|
|
@ -45,5 +45,9 @@ export default defineComponent({
|
|||
icons,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
LayoutRow,
|
||||
...Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="user-input-label">
|
||||
<LayoutRow class="user-input-label">
|
||||
<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
|
||||
<span class="group-gap" v-if="keyGroupIndex > 0"></span>
|
||||
<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
|
||||
|
|
@ -15,14 +15,14 @@
|
|||
<span class="hint-text" v-if="hasSlotContent">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.user-input-label {
|
||||
flex: 0 0 auto;
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -39,6 +39,9 @@
|
|||
}
|
||||
|
||||
.input-key {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "Inconsolata", monospace;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
|
@ -49,7 +52,7 @@
|
|||
border-color: var(--color-7-middlegray);
|
||||
border-radius: 4px;
|
||||
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;
|
||||
|
||||
&.width-16 {
|
||||
|
|
@ -74,7 +77,6 @@
|
|||
|
||||
.icon-label {
|
||||
margin: 1px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,10 +103,14 @@ import { HintInfo, KeysGroup } from "@/dispatcher/js-messages";
|
|||
|
||||
import { IconName } from "@/utilities/icons";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { IconLabel },
|
||||
components: {
|
||||
IconLabel,
|
||||
LayoutRow,
|
||||
},
|
||||
props: {
|
||||
inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
|
||||
inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tool-options">
|
||||
<LayoutRow class="tool-options">
|
||||
<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` -->
|
||||
<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" />
|
||||
</template>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.tool-options {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,6 +33,7 @@ import { defineComponent, PropType } from "vue";
|
|||
import { ToolName } from "@/dispatcher/js-messages";
|
||||
import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
||||
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
|
||||
import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
|
||||
|
|
@ -182,6 +182,7 @@ export default defineComponent({
|
|||
IconButton,
|
||||
PopoverButton,
|
||||
NumberInput,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
|
||||
.arrow {
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
<template>
|
||||
<LayoutCol class="main-window">
|
||||
<LayoutRow class="title-bar-row">
|
||||
<TitleBar :platform="platform" :maximized="maximized" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="workspace-row">
|
||||
<Workspace />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="status-bar-row">
|
||||
<StatusBar />
|
||||
</LayoutRow>
|
||||
<TitleBar :platform="platform" :maximized="maximized" />
|
||||
|
||||
<Workspace />
|
||||
|
||||
<StatusBar />
|
||||
</LayoutCol>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,29 +14,12 @@
|
|||
overflow: auto;
|
||||
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>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "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 TitleBar from "@/components/window/title-bar/TitleBar.vue";
|
||||
import Workspace from "@/components/workspace/Workspace.vue";
|
||||
|
|
@ -49,7 +28,6 @@ export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
|
|||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
TitleBar,
|
||||
Workspace,
|
||||
|
|
|
|||
|
|
@ -1,33 +1,42 @@
|
|||
<template>
|
||||
<div class="status-bar">
|
||||
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
|
||||
<Separator :type="'Section'" v-if="index !== 0" />
|
||||
<template v-for="hint in hintGroup" :key="hint">
|
||||
<span v-if="hint.plus" class="plus">+</span>
|
||||
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
|
||||
<LayoutRow class="status-bar">
|
||||
<LayoutRow class="hint-groups">
|
||||
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
|
||||
<Separator :type="'Section'" v-if="index !== 0" />
|
||||
<template v-for="hint in hintGroup" :key="hint">
|
||||
<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
|
||||
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.status-bar {
|
||||
display: flex;
|
||||
height: 24px;
|
||||
margin: 0 -4px;
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.separator.section {
|
||||
margin: 0;
|
||||
}
|
||||
.hint-groups {
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
margin: 0 -4px;
|
||||
overflow: hidden;
|
||||
|
||||
.plus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
.separator.section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-input-label + .user-input-label {
|
||||
margin-left: 0;
|
||||
.plus {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-input-label + .user-input-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,15 +46,12 @@ import { defineComponent } from "vue";
|
|||
|
||||
import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
|
||||
import Separator from "@/components/widgets/separators/Separator.vue";
|
||||
|
||||
export default defineComponent({
|
||||
inject: ["editor"],
|
||||
components: {
|
||||
UserInputLabel,
|
||||
Separator,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hintData: [] as HintData,
|
||||
|
|
@ -60,5 +66,10 @@ export default defineComponent({
|
|||
this.editor.instance.select_tool("Path");
|
||||
this.editor.instance.select_tool("Select");
|
||||
},
|
||||
components: {
|
||||
UserInputLabel,
|
||||
Separator,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
<template>
|
||||
<div class="header-third">
|
||||
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
|
||||
<MenuBarInput v-if="platform !== 'Mac'" />
|
||||
</div>
|
||||
<div class="header-third">
|
||||
<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
|
||||
</div>
|
||||
<div class="header-third">
|
||||
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
|
||||
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
|
||||
</div>
|
||||
<LayoutRow class="title-bar">
|
||||
<LayoutRow class="header-part">
|
||||
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
|
||||
<MenuBarInput v-if="platform !== 'Mac'" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="header-part">
|
||||
<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="header-part">
|
||||
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
|
||||
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.header-third {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
.title-bar {
|
||||
height: 28px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:nth-child(1) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.header-part {
|
||||
flex: 1 1 100%;
|
||||
|
||||
&:nth-child(2) {
|
||||
justify-content: center;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
justify-content: flex-end;
|
||||
&:nth-child(2) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,6 +40,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
|
||||
import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
|
||||
import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
|
||||
|
|
@ -59,6 +66,7 @@ export default defineComponent({
|
|||
WindowButtonsWindows,
|
||||
WindowButtonsMac,
|
||||
WindowButtonsWeb,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
<template>
|
||||
<div class="mac window-buttons">
|
||||
<LayoutRow class="window-buttons mac">
|
||||
<div class="close" title="Close"></div>
|
||||
<div class="minimize" title="Minimize"></div>
|
||||
<div class="zoom" title="Zoom"></div>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.mac.window-buttons {
|
||||
display: flex;
|
||||
.window-buttons.mac {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
|
||||
& + div {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.close {
|
||||
background: #ff5a52;
|
||||
}
|
||||
|
|
@ -37,9 +41,12 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
maximized: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
components: { LayoutRow },
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<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>
|
||||
<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.window-buttons-web {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
|
||||
|
||||
|
|
@ -52,6 +53,7 @@ export default defineComponent({
|
|||
components: {
|
||||
IconLabel,
|
||||
TextLabel,
|
||||
LayoutRow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div class="windows window-button minimize" title="Minimize">
|
||||
<LayoutRow class="window-button windows minimize" title="Minimize">
|
||||
<IconLabel :icon="'WindowButtonWinMinimize'" />
|
||||
</div>
|
||||
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button windows maximize" title="Maximize" v-if="!maximized">
|
||||
<IconLabel :icon="'WindowButtonWinMaximize'" />
|
||||
</div>
|
||||
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button windows restore-down" title="Restore Down" v-if="maximized">
|
||||
<IconLabel :icon="'WindowButtonWinRestoreDown'" />
|
||||
</div>
|
||||
<div class="windows window-button close" title="Close">
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button windows close" title="Close">
|
||||
<IconLabel :icon="'WindowButtonWinClose'" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.windows.window-button {
|
||||
display: flex;
|
||||
.window-button.windows {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding: 0 17px;
|
||||
|
||||
|
|
@ -40,10 +40,14 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { IconLabel },
|
||||
components: {
|
||||
IconLabel,
|
||||
LayoutRow,
|
||||
},
|
||||
props: {
|
||||
maximized: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="window-title">
|
||||
<LayoutRow class="window-title">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.window-title {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding: 0 8px;
|
||||
|
|
@ -16,9 +16,12 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: { type: String as PropType<string>, required: true },
|
||||
},
|
||||
components: { LayoutRow },
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<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">
|
||||
<div
|
||||
<LayoutRow
|
||||
class="tab"
|
||||
:class="{ active: tabIndex === tabActiveIndex }"
|
||||
data-tab
|
||||
v-for="(tabLabel, tabIndex) in tabLabels"
|
||||
:key="tabIndex"
|
||||
@click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))"
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
>
|
||||
<span>{{ tabLabel }}</span>
|
||||
<IconButton :action="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
|
||||
</div>
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
<PopoverButton :icon="'VerticalEllipsis'">
|
||||
<h3>Panel Options</h3>
|
||||
|
|
@ -55,9 +56,9 @@
|
|||
}
|
||||
|
||||
.tab {
|
||||
flex: 0 1 auto;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -138,7 +139,6 @@
|
|||
.panel-body {
|
||||
background: var(--color-3-darkgray);
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
|
@ -152,7 +152,6 @@ import LayoutCol from "@/components/layout/LayoutCol.vue";
|
|||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import Document from "@/components/panels/Document.vue";
|
||||
import LayerTree from "@/components/panels/LayerTree.vue";
|
||||
import Minimap from "@/components/panels/Minimap.vue";
|
||||
import Properties from "@/components/panels/Properties.vue";
|
||||
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
||||
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
|
||||
|
|
@ -161,7 +160,6 @@ const panelComponents = {
|
|||
Document,
|
||||
Properties,
|
||||
LayerTree,
|
||||
Minimap,
|
||||
IconButton,
|
||||
PopoverButton,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,65 +1,68 @@
|
|||
<template>
|
||||
<LayoutRow class="workspace-grid-subdivision">
|
||||
<LayoutCol class="workspace-grid-subdivision">
|
||||
<Panel
|
||||
:panelType="'Document'"
|
||||
:tabCloseButtons="true"
|
||||
:tabMinWidths="true"
|
||||
:tabLabels="documents.state.documents.map((doc) => doc.displayName)"
|
||||
:clickAction="
|
||||
(tabIndex) => {
|
||||
const targetId = documents.state.documents[tabIndex].id;
|
||||
editor.instance.select_document(targetId);
|
||||
}
|
||||
"
|
||||
:closeAction="
|
||||
(tabIndex) => {
|
||||
const targetId = documents.state.documents[tabIndex].id;
|
||||
editor.instance.close_document_with_confirmation(targetId);
|
||||
}
|
||||
"
|
||||
:tabActiveIndex="documents.state.activeDocumentIndex"
|
||||
ref="documentsPanel"
|
||||
/>
|
||||
</LayoutCol>
|
||||
<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutCol>
|
||||
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
|
||||
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
|
||||
<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutRow>
|
||||
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
|
||||
<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
<!-- <LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
|
||||
<LayoutRow class="workspace-grid-subdivision folded">
|
||||
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
|
||||
</LayoutRow> -->
|
||||
</LayoutCol>
|
||||
<LayoutRow class="workspace" data-workspace>
|
||||
<LayoutRow class="workspace-grid-subdivision">
|
||||
<LayoutCol class="workspace-grid-subdivision">
|
||||
<Panel
|
||||
:panelType="'Document'"
|
||||
:tabCloseButtons="true"
|
||||
:tabMinWidths="true"
|
||||
:tabLabels="documents.state.documents.map((doc) => doc.displayName)"
|
||||
:clickAction="
|
||||
(tabIndex) => {
|
||||
const targetId = documents.state.documents[tabIndex].id;
|
||||
editor.instance.select_document(targetId);
|
||||
}
|
||||
"
|
||||
:closeAction="
|
||||
(tabIndex) => {
|
||||
const targetId = documents.state.documents[tabIndex].id;
|
||||
editor.instance.close_document_with_confirmation(targetId);
|
||||
}
|
||||
"
|
||||
:tabActiveIndex="documents.state.activeDocumentIndex"
|
||||
ref="documentsPanel"
|
||||
/>
|
||||
</LayoutCol>
|
||||
<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutCol>
|
||||
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
|
||||
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
|
||||
<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutRow>
|
||||
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
|
||||
<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
<DialogModal v-if="dialog.state.visible" />
|
||||
</LayoutRow>
|
||||
<DialogModal v-if="dialog.state.visible" />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.workspace-grid-subdivision {
|
||||
min-height: 28px;
|
||||
flex: 1 1 0;
|
||||
.workspace {
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
|
||||
&.folded {
|
||||
flex-grow: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.workspace-grid-subdivision {
|
||||
min-height: 28px;
|
||||
flex: 1 1 0;
|
||||
|
||||
.workspace-grid-resize-gutter {
|
||||
flex: 0 0 4px;
|
||||
|
||||
&.layout-row {
|
||||
cursor: ns-resize;
|
||||
&.folded {
|
||||
flex-grow: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-col {
|
||||
cursor: ew-resize;
|
||||
.workspace-grid-resize-gutter {
|
||||
flex: 0 0 4px;
|
||||
|
||||
&.layout-row {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
&.layout-col {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -139,7 +142,7 @@ export default defineComponent({
|
|||
activeDocumentIndex(newIndex: number) {
|
||||
this.$nextTick(() => {
|
||||
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();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -105,8 +105,8 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
|
|||
|
||||
const onPointerDown = (e: PointerEvent): void => {
|
||||
const { target } = e;
|
||||
const inCanvas = target instanceof Element && target.closest(".canvas");
|
||||
const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content");
|
||||
const inCanvas = target instanceof Element && target.closest("[data-canvas]");
|
||||
const inDialog = target instanceof Element && target.closest("[data-dialog-modal] [data-floating-menu-content]");
|
||||
|
||||
if (dialog.dialogIsVisible() && !inDialog) {
|
||||
dialog.dismissDialog();
|
||||
|
|
@ -139,9 +139,9 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
|
|||
|
||||
const onMouseScroll = (e: WheelEvent): void => {
|
||||
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) {
|
||||
horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0);
|
||||
return;
|
||||
|
|
@ -157,7 +157,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
|
|||
// Window events
|
||||
|
||||
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 bounds = canvas.getBoundingClientRect();
|
||||
return [bounds.left, bounds.top, bounds.right, bounds.bottom];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue