Rename and organize widget components to conform to design terminology (#132)

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

@@ -12,19 +12,19 @@
 				<IconButton :size="24" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
 				<IconButton :size="24" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
 				<IconButton :size="24" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
-				<DropdownButton>
+				<PopoverButton>
 					<h3>Align</h3>
 					<p>More alignment-related buttons will be here</p>
-				</DropdownButton>
+				</PopoverButton>
 
 				<ItemDivider />
 
 				<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
 				<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
-				<DropdownButton>
+				<PopoverButton>
 					<h3>Flip</h3>
 					<p>More flip-related buttons will be here</p>
-				</DropdownButton>
+				</PopoverButton>
 
 				<ItemDivider />
 
@@ -33,22 +33,22 @@
 				<IconButton :size="24" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
 				<IconButton :size="24" title="Boolean Intersect"><BooleanIntersect /></IconButton>
 				<IconButton :size="24" title="Boolean Difference"><BooleanDifference /></IconButton>
-				<DropdownButton>
+				<PopoverButton>
 					<h3>Boolean</h3>
 					<p>More boolean-related buttons will be here</p>
-				</DropdownButton>
+				</PopoverButton>
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<RadioPicker :initialIndex="0" @changed="viewModeChanged">
+				<RadioInput :initialIndex="0" @changed="viewModeChanged">
 					<IconButton :size="24" title="View Mode: Normal"><ViewModeNormal /></IconButton>
 					<IconButton :size="24" title="View Mode: Outline"><ViewModeOutline /></IconButton>
 					<IconButton :size="24" title="View Mode: Pixels"><ViewModePixels /></IconButton>
-					<DropdownButton>
+					<PopoverButton>
 						<h3>Display Mode</h3>
 						<p>More display mode options will be here</p>
-					</DropdownButton>
+					</PopoverButton>
-				</RadioPicker>
+				</RadioInput>
 
 				<ItemDivider />
 
@@ -159,13 +159,13 @@ import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiv
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import WorkingColors from "../widgets/WorkingColors.vue";
-import { PopoverDirection } from "../widgets/PopoverMount.vue";
+import { PopoverDirection } from "../widgets/overlays/Popover.vue";
 import ShelfItem from "../widgets/ShelfItem.vue";
 import ItemDivider from "../widgets/ItemDivider.vue";
-import IconButton from "../widgets/IconButton.vue";
+import IconButton from "../widgets/buttons/IconButton.vue";
-import DropdownButton from "../widgets/DropdownButton.vue";
+import PopoverButton from "../widgets/buttons/PopoverButton.vue";
-import RadioPicker from "../widgets/RadioPicker.vue";
+import RadioInput from "../widgets/inputs/RadioInput.vue";
-import NumberInput from "../widgets/NumberInput.vue";
+import NumberInput from "../widgets/inputs/NumberInput.vue";
 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";
@@ -217,8 +217,8 @@ export default defineComponent({
 		ShelfItem,
 		ItemDivider,
 		IconButton,
-		DropdownButton,
+		PopoverButton,
-		RadioPicker,
+		RadioInput,
 		NumberInput,
 		SelectTool,
 		CropTool,

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

@@ -3,10 +3,10 @@
 		<LayoutRow :class="'options-bar'">
 			<NumberInput />
 			<NumberInput />
-			<DropdownButton>
+			<PopoverButton>
 				<h3>Compositing Options</h3>
 				<p>More blend and compositing options will be here</p>
-			</DropdownButton>
+			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree'">
 			<LayoutCol :class="'list'">
@@ -20,7 +20,7 @@
 					<div class="layer">
 						<div class="layer-thumbnail"></div>
 						<div class="layer-type-icon">
-							<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
+							<Icon :size="24" title="Path"><NodeTypePath /></Icon>
 						</div>
 						<div class="layer-name">
 							<span>{{ layer.name }}</span>
@@ -79,11 +79,11 @@ import { defineComponent } from "vue";
 import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
-import NumberInput from "../widgets/NumberInput.vue";
+import NumberInput from "../widgets/inputs/NumberInput.vue";
-import DropdownButton from "../widgets/DropdownButton.vue";
+import PopoverButton from "../widgets/buttons/PopoverButton.vue";
-import { PopoverDirection } from "../widgets/PopoverMount.vue";
+import { PopoverDirection } from "../widgets/overlays/Popover.vue";
-import IconButton from "../widgets/IconButton.vue";
+import IconButton from "../widgets/buttons/IconButton.vue";
-import IconContainer from "../widgets/IconContainer.vue";
+import Icon from "../widgets/labels/Icon.vue";
 import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
 import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg";
 import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
@@ -94,10 +94,10 @@ export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
-		DropdownButton,
+		PopoverButton,
 		NumberInput,
 		IconButton,
-		IconContainer,
+		Icon,
 		EyeVisible,
 		EyeHidden,
 		NodeTypePath,

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

@@ -1,19 +1,6 @@
 <template>
 	<div class="working-colors">
-		<div class="swatch-pair">
+		<SwatchPairInput />
-			<div class="secondary swatch">
-				<button @click="clickSecondarySwatch" style="background: white"></button>
-				<PopoverMount :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
-					<ColorPicker />
-				</PopoverMount>
-			</div>
-			<div class="primary swatch">
-				<button @click="clickPrimarySwatch" style="background: black"></button>
-				<PopoverMount :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
-					<ColorPicker />
-				</PopoverMount>
-			</div>
-		</div>
 		<div class="swap-and-reset">
 			<IconButton :size="16">
 				<SwapButton />
@@ -27,40 +14,6 @@
 
 <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: 28px;
-		height: 28px;
-		margin: 2px;
-		position: relative;
-
-		button {
-			width: 100%;
-			height: 100%;
-			border-radius: 50%;
-			border: 2px #888 solid;
-			box-shadow: 0 0 0 2px #333;
-			margin: 0;
-			padding: 0;
-			box-sizing: border-box;
-			outline: none;
-		}
-
-		.popover-mount {
-			top: 50%;
-			right: -2px;
-		}
-
-		&.primary {
-			margin-bottom: -8px;
-		}
-	}
-
 	.swap-and-reset {
 		font-size: 0;
 	}
@@ -69,34 +22,17 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import PopoverMount, { PopoverDirection } from "./PopoverMount.vue";
+import SwatchPairInput from "./inputs/SwatchPairInput.vue";
-import ColorPicker from "../popovers/ColorPicker.vue";
+import IconButton from "./buttons/IconButton.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 default defineComponent({
 	components: {
-		PopoverMount,
+		SwatchPairInput,
-		ColorPicker,
 		IconButton,
 		SwapButton,
 		ResetColorsButton,
 	},
-	methods: {
-		clickPrimarySwatch() {
-			(this.$refs.primarySwatchPopover as typeof PopoverMount).setOpen();
-			(this.$refs.secondarySwatchPopover as typeof PopoverMount).setClosed();
-		},
-		clickSecondarySwatch() {
-			(this.$refs.secondarySwatchPopover as typeof PopoverMount).setOpen();
-			(this.$refs.primarySwatchPopover as typeof PopoverMount).setClosed();
-		},
-	},
-	data() {
-		return {
-			PopoverDirection,
-		};
-	},
 });
 </script>

client/web/src/components/widgets/buttons/IconButton.vue

@@ -18,10 +18,15 @@
 	width: 16px;
 	height: 16px;
 
-	&:not(.gap-after) + .icon-button {
+	// The `where` pseduo-class does not contribtue to specificity
+	& + :where(.icon-button) {
 		margin-left: 0;
 	}
 
+	&.gap-after + .icon-button {
+		margin-left: 8px;
+	}
+
 	&:hover {
 		background: #666;
 		color: white;

client/web/src/components/widgets/buttons/PopoverButton.vue

@@ -1,23 +1,23 @@
 <template>
-	<div class="dropdown-button">
+	<div class="popover-button">
 		<button @click="clickButton">
 			<component :is="icon" />
 		</button>
-		<PopoverMount :direction="PopoverDirection.Bottom" ref="popover">
+		<Popover :direction="PopoverDirection.Bottom" ref="popover">
 			<slot></slot>
-		</PopoverMount>
+		</Popover>
 	</div>
 </template>
 
 <style lang="scss">
-.dropdown-button {
+.popover-button {
 	display: inline-block;
 	position: relative;
 	width: 16px;
 	height: 24px;
 	margin: 2px 4px;
 
-	.popover-mount {
+	.popover {
 		left: 50%;
 	}
 
@@ -42,11 +42,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import DropdownArrow from "../../../assets/svg/16x24-bounds-8x16-icon/dropdown-arrow.svg";
+import DropdownArrow from "../../../../assets/svg/16x24-bounds-8x16-icon/dropdown-arrow.svg";
-import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
+import VerticalEllipsis from "../../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
-import PopoverMount, { PopoverDirection } from "./PopoverMount.vue";
+import Popover, { PopoverDirection } from "../overlays/Popover.vue";
 
-export enum DropdownButtonIcon {
+export enum PopoverButtonIcon {
 	"DropdownArrow" = "DropdownArrow",
 	"VerticalEllipsis" = "VerticalEllipsis",
 }
@@ -55,15 +55,15 @@ export default defineComponent({
 	components: {
 		VerticalEllipsis,
 		DropdownArrow,
-		PopoverMount,
+		Popover,
 		PopoverDirection,
 	},
 	props: {
-		icon: { type: String, default: DropdownButtonIcon.DropdownArrow },
+		icon: { type: String, default: PopoverButtonIcon.DropdownArrow },
 	},
 	methods: {
 		clickButton() {
-			(this.$refs.popover as typeof PopoverMount).setOpen();
+			(this.$refs.popover as typeof Popover).setOpen();
 		},
 	},
 	data() {

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="menu-bar-input">
+		<div class="entry"><GraphiteLogo width="16" height="16" /></div>
+		<div class="entry"><span>File</span></div>
+		<div class="entry"><span>Edit</span></div>
+		<div class="entry"><span>Document</span></div>
+		<div class="entry"><span>View</span></div>
+		<div class="entry"><span>Help</span></div>
+	</div>
+</template>
+
+<style lang="scss">
+.menu-bar-input {
+	display: flex;
+
+	.entry {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		padding: 0 8px;
+
+		svg {
+			fill: #ddd;
+		}
+
+		&:hover {
+			background: #666;
+
+			svg {
+				fill: #fff;
+			}
+
+			span {
+				color: #fff;
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { ApplicationPlatform } from "../../window/MainWindow.vue";
+import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
+
+export default defineComponent({
+	components: { GraphiteLogo },
+	data() {
+		return {
+			ApplicationPlatform,
+		};
+	},
+});
+</script>

client/web/src/components/widgets/inputs/NumberInput.vue

@@ -22,7 +22,7 @@
 		border: none;
 		background: none;
 		padding: 0;
-		line-height: 22px;
+		line-height: 24px;
 		color: #ddd;
 		font-size: inherit;
 		text-align: center;

client/web/src/components/widgets/inputs/RadioInput.vue

@@ -1,28 +1,37 @@
 <template>
-	<div class="radio-picker" ref="radioPicker">
+	<div class="radio-input" ref="radioInput">
 		<slot></slot>
 	</div>
 </template>
 
 <style lang="scss">
-.radio-picker {
+.radio-input {
-	button,
+	.popover-button button {
-	.dropdown-button {
+		border-radius: 0;
-		fill: #ddd;
+	}
+
+	& > * {
 		border-radius: 0;
 		margin: 0;
 
-		&:first-child {
+		&:first-child,
+		&:first-child button {
 			border-radius: 2px 0 0 2px;
 		}
 
-		&:last-child {
+		&:last-child,
+		&:last-child button {
 			border-radius: 0 2px 2px 0;
 		}
+
+		& + * {
+			margin-left: 1px;
+		}
 	}
 
-	.icon-button {
+	button {
 		background: #555;
+		fill: #ddd;
 
 		&:hover {
 			background: #666;
@@ -32,10 +41,6 @@
 			background: #3194d6;
 			fill: #fff;
 		}
-
-		& + .icon-button {
-			margin-left: 1px;
-		}
 	}
 }
 </style>
@@ -57,7 +62,7 @@ export default defineComponent({
 	mounted() {
 		this.updateActiveIconButton();
 
-		(this.$refs.radioPicker as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
+		(this.$refs.radioInput as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
 			iconButton.addEventListener("click", () => {
 				this.activeIndex = index;
 				this.$emit("changed", index);
@@ -70,12 +75,12 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		// This method may be called by the user of this component by setting a `ref="radioPicker"` attribute and calling `(this.$refs.viewModePicker as typeof RadioPicker).setActive(...)`
+		// This method may be called by the user of this component by setting a `ref="radioInput"` attribute and calling `(this.$refs.viewModePicker as typeof RadioInput).setActive(...)`
 		setActive(index: number) {
 			this.activeIndex = index;
 		},
 		updateActiveIconButton() {
-			const iconButtons = (this.$refs.radioPicker as Element).querySelectorAll(".icon-button");
+			const iconButtons = (this.$refs.radioInput as Element).querySelectorAll(".icon-button");
 			iconButtons.forEach((iconButton) => iconButton.classList.remove("active"));
 			iconButtons[this.activeIndex].classList.add("active");
 		},

client/web/src/components/widgets/inputs/SwatchPairInput.vue

@@ -0,0 +1,81 @@
+<template>
+	<div class="swatch-pair">
+		<div class="secondary swatch">
+			<button @click="clickSecondarySwatch" style="background: white"></button>
+			<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
+				<ColorPicker />
+			</Popover>
+		</div>
+		<div class="primary swatch">
+			<button @click="clickPrimarySwatch" style="background: black"></button>
+			<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
+				<ColorPicker />
+			</Popover>
+		</div>
+	</div>
+</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;
+
+	.swatch {
+		width: 28px;
+		height: 28px;
+		margin: 2px;
+		position: relative;
+
+		button {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			border: 2px #888 solid;
+			box-shadow: 0 0 0 2px #333;
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+			outline: none;
+		}
+
+		.popover {
+			top: 50%;
+			right: -2px;
+		}
+
+		&.primary {
+			margin-bottom: -8px;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import ColorPicker from "../../popovers/ColorPicker.vue";
+import Popover, { PopoverDirection } from "../overlays/Popover.vue";
+
+export default defineComponent({
+	components: {
+		Popover,
+		ColorPicker,
+	},
+	props: {},
+	methods: {
+		clickPrimarySwatch() {
+			(this.$refs.primarySwatchPopover as typeof Popover).setOpen();
+			(this.$refs.secondarySwatchPopover as typeof Popover).setClosed();
+		},
+		clickSecondarySwatch() {
+			(this.$refs.secondarySwatchPopover as typeof Popover).setOpen();
+			(this.$refs.primarySwatchPopover as typeof Popover).setClosed();
+		},
+	},
+	data() {
+		return {
+			PopoverDirection,
+		};
+	},
+});
+</script>

client/web/src/components/widgets/labels/Icon.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="icon-container" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
+	<div class="icon" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
 		<slot></slot>
 	</div>
 </template>
 
 <style lang="scss">
-.icon-container {
+.icon {
 	display: inline-block;
 	flex: 0 0 auto;
 	fill: #ddd;
@@ -13,7 +13,7 @@
 	width: 16px;
 	height: 16px;
 
-	&:not(.gap-after) + .icon-container {
+	&:not(.gap-after) + .icon {
 		margin-left: 0;
 	}
 

client/web/src/components/widgets/labels/UserInputLabel.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="input-hint">
+	<div class="user-input-label">
 		<span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)">
 			{{ inputKey }}
 		</span>
@@ -22,7 +22,7 @@
 </template>
 
 <style lang="scss">
-.input-hint {
+.user-input-label {
 	height: 100%;
 	margin: 0 8px;
 	display: flex;

client/web/src/components/widgets/overlays/Popover.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="popover-mount" :class="direction.toLowerCase()" v-if="open">
+	<div class="popover" :class="direction.toLowerCase()" v-if="open">
 		<div class="tail"></div>
-		<div class="popover" ref="popover">
+		<div class="popover-container" ref="popoverContainer">
 			<div class="popover-content" ref="popoverContent">
 				<slot></slot>
 			</div>
@@ -10,7 +10,7 @@
 </template>
 
 <style lang="scss">
-.popover-mount {
+.popover {
 	position: absolute;
 	width: 0;
 	height: 0;
@@ -62,7 +62,7 @@
 	}
 }
 
-.popover {
+.popover-container {
 	display: flex;
 
 	.top > & {
@@ -124,8 +124,8 @@ export default defineComponent({
 		};
 	},
 	updated() {
+		const popoverContainer = this.$refs.popoverContainer as HTMLElement;
 		const popoverContent = this.$refs.popoverContent as HTMLElement;
-		const popover = this.$refs.popover as HTMLElement;
 		const workspace = document.querySelector(".workspace");
 
 		if (popoverContent && workspace) {
@@ -134,18 +134,18 @@ export default defineComponent({
 
 			if (this.direction === PopoverDirection.Left || this.direction === PopoverDirection.Right) {
 				const topOffset = popoverBounds.top - workspaceBounds.top - 8;
-				if (topOffset < 0) popover.style.transform = `translate(0, ${-topOffset}px)`;
+				if (topOffset < 0) popoverContainer.style.transform = `translate(0, ${-topOffset}px)`;
 
 				const bottomOffset = workspaceBounds.bottom - popoverBounds.bottom - 8;
-				if (bottomOffset < 0) popover.style.transform = `translate(0, ${bottomOffset}px)`;
+				if (bottomOffset < 0) popoverContainer.style.transform = `translate(0, ${bottomOffset}px)`;
 			}
 
 			if (this.direction === PopoverDirection.Top || this.direction === PopoverDirection.Bottom) {
 				const leftOffset = popoverBounds.left - workspaceBounds.left - 8;
-				if (leftOffset < 0) popover.style.transform = `translate(${-leftOffset}px, 0)`;
+				if (leftOffset < 0) popoverContainer.style.transform = `translate(${-leftOffset}px, 0)`;
 
 				const rightOffset = workspaceBounds.right - popoverBounds.right - 8;
-				if (rightOffset < 0) popover.style.transform = `translate(${rightOffset}px, 0)`;
+				if (rightOffset < 0) popoverContainer.style.transform = `translate(${rightOffset}px, 0)`;
 			}
 		}
 	},

client/web/src/components/window/status-bar/StatusBar.vue

@@ -1,23 +1,23 @@
 <template>
 	<div class="status-bar">
-		<InputHint :inputMouse="'LMB'">Select Object</InputHint>
+		<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
 		<span class="plus">+</span>
-		<InputHint :inputKeys="['⇧']">Grow/Shrink Selection</InputHint>
+		<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
 		<div class="divider"></div>
-		<InputHint :inputMouse="'LMBDrag'">Select Area</InputHint>
+		<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
 		<span class="plus">+</span>
-		<InputHint :inputKeys="['⇧']">Grow/Shrink Selection</InputHint>
+		<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
 		<div class="divider"></div>
-		<InputHint :inputKeys="['G']">Grab Selected</InputHint>
+		<UserInputLabel :inputKeys="['G']">Grab Selected</UserInputLabel>
-		<InputHint :inputKeys="['R']">Rotate Selected</InputHint>
+		<UserInputLabel :inputKeys="['R']">Rotate Selected</UserInputLabel>
-		<InputHint :inputKeys="['S']">Scale Selected</InputHint>
+		<UserInputLabel :inputKeys="['S']">Scale Selected</UserInputLabel>
 		<div class="divider"></div>
-		<InputHint :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</InputHint>
+		<UserInputLabel :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</UserInputLabel>
 		<span class="plus">+</span>
-		<InputHint :inputKeys="['⇧']">Big Increment Nudge</InputHint>
+		<UserInputLabel :inputKeys="['⇧']">Big Increment Nudge</UserInputLabel>
 		<div class="divider"></div>
-		<InputHint :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</InputHint>
+		<UserInputLabel :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
-		<InputHint :inputKeys="['Ctrl', 'D']">Duplicate</InputHint>
+		<UserInputLabel :inputKeys="['Ctrl', 'D']">Duplicate</UserInputLabel>
 	</div>
 </template>
 
@@ -39,18 +39,18 @@
 	background: #888;
 }
 
-.input-hint + .input-hint {
+.user-input-label + .user-input-label {
 	margin-left: 0;
 }
 </style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import InputHint from "./InputHint.vue";
+import UserInputLabel from "../../widgets/labels/UserInputLabel.vue";
 
 export default defineComponent({
 	components: {
-		InputHint,
+		UserInputLabel,
 	},
 });
 </script>

client/web/src/components/window/title-bar/FileMenu.vue

@@ -1,50 +0,0 @@
-<template>
-	<div class="entry">
-		<GraphiteLogo width="16" height="16" />
-	</div>
-	<div class="entry"><span>File</span></div>
-	<div class="entry"><span>Edit</span></div>
-	<div class="entry"><span>Document</span></div>
-	<div class="entry"><span>View</span></div>
-	<div class="entry"><span>Help</span></div>
-</template>
-
-<style lang="scss">
-.entry {
-	display: flex;
-	align-items: center;
-	white-space: nowrap;
-	padding: 0 8px;
-
-	svg {
-		fill: #ddd;
-	}
-
-	&:hover {
-		background: #666;
-
-		svg {
-			fill: #fff;
-		}
-
-		span {
-			color: #fff;
-		}
-	}
-}
-</style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { ApplicationPlatform } from "../MainWindow.vue";
-import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
-
-export default defineComponent({
-	components: { GraphiteLogo },
-	data() {
-		return {
-			ApplicationPlatform,
-		};
-	},
-});
-</script>

client/web/src/components/window/title-bar/TitleBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="header-third">
 		<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
-		<FileMenu v-if="platform !== ApplicationPlatform.Mac" />
+		<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
 	</div>
 	<div class="header-third">
 		<WindowTitle :title="'X-35B Over Death Valley.gdd* - Graphite'" />
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import FileMenu from "./FileMenu.vue";
+import MenuBarInput from "../../widgets/inputs/MenuBarInput.vue";
 import WindowTitle from "./WindowTitle.vue";
 import WindowButtonsWindows from "./WindowButtonsWindows.vue";
 import WindowButtonsMac from "./WindowButtonsMac.vue";
@@ -40,7 +40,7 @@ import { ApplicationPlatform } from "../MainWindow.vue";
 
 export default defineComponent({
 	components: {
-		FileMenu,
+		MenuBarInput,
 		WindowTitle,
 		WindowButtonsWindows,
 		WindowButtonsMac,

client/web/src/components/workspace/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="workspace-panel">
+	<div class="panel">
 		<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
 			<div class="tab-group">
 				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
@@ -9,10 +9,10 @@
 					</IconButton>
 				</div>
 			</div>
-			<DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis">
+			<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
 				<h3>Panel Options</h3>
 				<p>More panel-related options will be here</p>
-			</DropdownButton>
+			</PopoverButton>
 		</div>
 		<div class="panel-body">
 			<component :is="panelType" />
@@ -21,7 +21,7 @@
 </template>
 
 <style lang="scss">
-.workspace-panel {
+.panel {
 	background: #111;
 	border-radius: 8px;
 	flex-grow: 1;
@@ -135,9 +135,9 @@ import Document from "../panels/Document.vue";
 import Properties from "../panels/Properties.vue";
 import LayerTree from "../panels/LayerTree.vue";
 import Minimap from "../panels/Minimap.vue";
-import IconButton from "../widgets/IconButton.vue";
+import IconButton from "../widgets/buttons/IconButton.vue";
-import DropdownButton, { DropdownButtonIcon } from "../widgets/DropdownButton.vue";
+import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
-import { PopoverDirection } from "../widgets/PopoverMount.vue";
+import { PopoverDirection } from "../widgets/overlays/Popover.vue";
 import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
 import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
 
@@ -148,7 +148,7 @@ export default defineComponent({
 		LayerTree,
 		Minimap,
 		IconButton,
-		DropdownButton,
+		PopoverButton,
 		CloseX,
 		VerticalEllipsis,
 	},
@@ -161,7 +161,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			DropdownButtonIcon,
+			PopoverButtonIcon,
 			PopoverDirection,
 		};
 	},

client/web/src/components/workspace/Workspace.vue

@@ -1,7 +1,7 @@
 <template>
 	<LayoutRow class="workspace-grid-subdivision">
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
-			<WorkspacePanel
+			<Panel
 				:panelType="'Document'"
 				:tabCloseButtons="true"
 				:tabMinWidths="true"
@@ -12,15 +12,15 @@
 		<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
 			<LayoutRow class="workspace-grid-subdivision">
-				<WorkspacePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
+				<Panel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
 			<LayoutRow class="workspace-grid-subdivision">
-				<WorkspacePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
+				<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
 			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 0; height: 0">
-				<WorkspacePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
+				<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
 			</LayoutRow>
 		</LayoutCol>
 	</LayoutRow>
@@ -48,13 +48,13 @@
 import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
-import WorkspacePanel from "./WorkspacePanel.vue";
+import Panel from "./Panel.vue";
 
 export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
-		WorkspacePanel,
+		Panel,
 	},
 });
 </script>