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

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>