fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 12:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Keavon Chambers
2022-01-23 20:24:50 -08:00
parent 12ef88f261
commit c215719598
34 changed files with 385 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/floating-menus/ColorPicker.vue
+47 -22
View File
@@ -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>
frontend/src/components/widgets/floating-menus/DialogModal.vue
+15 -22
View File
@@ -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;
frontend/src/components/widgets/floating-menus/FloatingMenu.vue
+4 -6
View File
@@ -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 {
frontend/src/components/widgets/floating-menus/MenuList.vue
+5 -6
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>
<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;