Implement popover component and beginnings of color picker (#128)

client/web/src/App.vue

@@ -8,12 +8,18 @@ body,
 #app {
 	margin: 0;
 	height: 100%;
+	background: #222;
+	user-select: none;
+}
+
+body,
+input,
+textarea,
+button {
 	font-family: "Source Sans Pro", Arial, sans-serif;
 	font-size: 14px;
 	line-height: 1;
 	color: #ddd;
-	background: #222;
-	user-select: none;
 }
 </style>
 

client/web/src/components/panels/Document.vue

@@ -81,20 +81,7 @@
 					<ShelfItem title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')"><ShapeTool /></ShelfItem>
 				</div>
 				<div class="spacer"></div>
-				<div class="working-colors">
+				<WorkingColors />
-					<div class="swatch-pair">
-						<button class="secondary swatch" style="background: white"></button>
-						<button class="primary swatch" style="background: black"></button>
-					</div>
-					<div class="swap-and-reset">
-						<IconButton :size="16">
-							<SwapButton />
-						</IconButton>
-						<IconButton :size="16">
-							<ResetColorsButton />
-						</IconButton>
-					</div>
-				</div>
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove">
@@ -129,30 +116,6 @@
 	.shelf-and-viewport {
 		.shelf {
 			flex: 0 0 32px;
-
-			.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;
-			}
-
-			.working-colors {
-				.swatch {
-					width: 24px;
-					height: 24px;
-					border-radius: 50%;
-					border: 2px #888 solid;
-					box-shadow: 0 0 0 2px #333;
-					margin: 2px;
-					padding: 0;
-					box-sizing: unset;
-					outline: none;
-				}
-
-				.primary.swatch {
-					margin-bottom: -8px;
-				}
-			}
 		}
 
 		.viewport {
@@ -183,14 +146,13 @@ import { defineComponent } from "vue";
 import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool } from "../../response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
+import WorkingColors from "../widgets/WorkingColors.vue";
 import ShelfItem from "../widgets/ShelfItem.vue";
 import ItemDivider from "../widgets/ItemDivider.vue";
 import IconButton from "../widgets/IconButton.vue";
 import DropdownButton from "../widgets/DropdownButton.vue";
 import RadioPicker from "../widgets/RadioPicker.vue";
 import NumberInput from "../widgets/NumberInput.vue";
-import SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
-import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
 import SelectTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-select.svg";
 import CropTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-crop.svg";
 import NavigateTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-navigate.svg";
@@ -238,14 +200,13 @@ export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
+		WorkingColors,
 		ShelfItem,
 		ItemDivider,
 		IconButton,
 		DropdownButton,
 		RadioPicker,
 		NumberInput,
-		SwapButton,
-		ResetColorsButton,
 		SelectTool,
 		CropTool,
 		NavigateTool,

client/web/src/components/popovers/ColorPicker.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="popover-color-picker" @click="notImplemented">
+		<div class="color-picker">
+			<div class="selection-circle"></div>
+		</div>
+		<div class="hue-picker">
+			<div class="selection-pincers"></div>
+		</div>
+		<div class="opacity-picker">
+			<div class="selection-pincers"></div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.popover-color-picker {
+	display: flex;
+
+	.color-picker {
+		--hue: #ff0000;
+		width: 256px;
+		background-blend-mode: multiply;
+		background: linear-gradient(to bottom, #ffffff, #000000), linear-gradient(to right, #ffffff, var(--hue));
+		position: relative;
+	}
+
+	.color-picker,
+	.hue-picker,
+	.opacity-picker {
+		height: 256px;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.hue-picker,
+	.opacity-picker {
+		width: 24px;
+		margin-left: 8px;
+		position: relative;
+	}
+
+	.hue-picker {
+		background-blend-mode: screen;
+		background: linear-gradient(to top, #ff0000ff 16.666%, #ff000000 33.333%, #ff000000 66.666%, #ff0000ff 83.333%),
+			linear-gradient(to top, #00ff0000 0%, #00ff00ff 16.666%, #00ff00ff 50%, #00ff0000 66.666%), linear-gradient(to top, #0000ff00 33.333%, #0000ffff 50%, #0000ffff 83.333%, #0000ff00 100%);
+	}
+
+	.opacity-picker {
+		background: linear-gradient(to bottom, #ff0000, transparent);
+
+		&::before {
+			content: "";
+			display: block;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
+				linear-gradient(#fff, #fff);
+			background-size: 16px 16px;
+			background-position: 0 0, 8px 8px;
+			position: relative;
+			z-index: -1;
+		}
+	}
+
+	.selection-circle {
+		position: absolute;
+		left: 100%;
+		top: 0%;
+		width: 0;
+		height: 0;
+
+		&::after {
+			content: "";
+			display: block;
+			position: relative;
+			left: -6px;
+			top: -6px;
+			width: 12px;
+			height: 12px;
+			border-radius: 50%;
+			border: 2px solid white;
+			box-sizing: border-box;
+			mix-blend-mode: difference;
+		}
+	}
+
+	.selection-pincers {
+		position: absolute;
+		top: 0%;
+		width: 100%;
+		height: 0;
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: -4px;
+			left: 0;
+			border-style: solid;
+			border-width: 4px 0 4px 4px;
+			border-color: transparent transparent transparent black;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: -4px;
+			right: 0;
+			border-style: solid;
+			border-width: 4px 4px 4px 0;
+			border-color: transparent black transparent transparent;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	components: {},
+	props: {},
+	methods: {
+		notImplemented() {
+			alert("Color picker is not functional yet");
+		},
+	},
+});
+</script>

client/web/src/components/widgets/PopoverMount.vue

@@ -0,0 +1,95 @@
+<template>
+	<div class="popover-mount" v-if="open">
+		<div class="tail left"></div>
+		<div class="popover">
+			<div class="popover-content" ref="popoverContent">
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.popover-mount {
+	position: absolute;
+	width: 0;
+	height: 0;
+	display: flex;
+}
+
+.tail {
+	width: 0;
+	height: 0;
+	border-style: solid;
+	z-index: 1;
+
+	&.top {
+		border-width: 0 6px 8px 6px;
+		border-color: transparent transparent #222222e6 transparent;
+		margin-left: -6px;
+		margin-top: 2px;
+	}
+
+	&.bottom {
+		border-width: 8px 6px 0 6px;
+		border-color: #222222e6 transparent transparent transparent;
+		margin-left: -6px;
+		margin-bottom: 2px;
+	}
+
+	&.left {
+		border-width: 6px 8px 6px 0;
+		border-color: transparent #222222e6 transparent transparent;
+		margin-top: -6px;
+		margin-left: 2px;
+	}
+
+	&.right {
+		border-width: 6px 0 6px 8px;
+		border-color: transparent transparent transparent #222222e6;
+		margin-top: -6px;
+		margin-right: 2px;
+	}
+}
+
+.popover {
+	display: flex;
+	align-items: center;
+
+	.popover-content {
+		background: #222222e6;
+		box-shadow: #000 0 0 4px;
+		border-radius: 4px;
+		color: #eee;
+		font-size: inherit;
+		padding: 8px;
+		z-index: 0;
+		display: flex;
+		// This `position: relative` is used to allow `top`/`right`/`bottom`/`left` properties to shift the content back from overflowing the workspace
+		position: relative;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	components: {},
+	props: {
+		open: { type: Boolean, default: false },
+	},
+	updated() {
+		const popoverContent = this.$refs.popoverContent as HTMLElement;
+		const workspace = document.querySelector(".workspace");
+		if (popoverContent && workspace) {
+			const workspaceBounds = workspace.getBoundingClientRect();
+
+			const popoverBounds = popoverContent.getBoundingClientRect();
+
+			const bottomOffset = workspaceBounds.bottom - popoverBounds.bottom - 8;
+			if (bottomOffset < 0) popoverContent.style.top = `${bottomOffset}px`;
+		}
+	},
+});
+</script>

client/web/src/components/widgets/WorkingColors.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="working-colors">
+		<div class="swatch-pair">
+			<button @click="clickSwatch(SwatchSelection.Secondary)" class="secondary swatch" style="background: white">
+				<PopoverMount :open="swatchOpen === SwatchSelection.Secondary">
+					<ColorPicker />
+				</PopoverMount>
+			</button>
+			<button @click="clickSwatch(SwatchSelection.Primary)" class="primary swatch" style="background: black">
+				<PopoverMount :open="swatchOpen === SwatchSelection.Primary">
+					<ColorPicker />
+				</PopoverMount>
+			</button>
+		</div>
+		<div class="swap-and-reset">
+			<IconButton :size="16">
+				<SwapButton />
+			</IconButton>
+			<IconButton :size="16">
+				<ResetColorsButton />
+			</IconButton>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.working-colors {
+	.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;
+	}
+
+	.swatch {
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		border: 2px #888 solid;
+		box-shadow: 0 0 0 2px #333;
+		margin: 2px;
+		padding: 0;
+		box-sizing: unset;
+		outline: none;
+		position: relative;
+
+		.popover-mount {
+			right: -4px;
+		}
+	}
+
+	.primary.swatch {
+		margin-bottom: -8px;
+	}
+
+	.swap-and-reset {
+		font-size: 0;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import PopoverMount from "./PopoverMount.vue";
+import ColorPicker from "../popovers/ColorPicker.vue";
+import IconButton from "./IconButton.vue";
+import SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
+import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
+
+export enum SwatchSelection {
+	"None" = "None",
+	"Primary" = "Primary",
+	"Secondary" = "Secondary",
+}
+
+export default defineComponent({
+	components: {
+		PopoverMount,
+		ColorPicker,
+		IconButton,
+		SwapButton,
+		ResetColorsButton,
+	},
+	data() {
+		return {
+			swatchOpen: SwatchSelection.None,
+			SwatchSelection,
+		};
+	},
+	methods: {
+		clickSwatch(selection: SwatchSelection) {
+			if (this.swatchOpen !== selection) this.swatchOpen = selection;
+			else this.swatchOpen = SwatchSelection.None;
+		},
+	},
+});
+</script>