Complete implementing popover system main features (#131)

* Make popover buttons open popover menus and add placeholder messages to all of them.
* Implement all directions for drawing, aligning, and edge-clamping popovers.
* Fix popovers so they are drawn outside their parent panel bounds and not clipped.
* Fix popover HTML to avoid nesting it inside a <button> element.

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

@@ -3,7 +3,10 @@
 		<LayoutRow :class="'options-bar'">
 			<NumberInput />
 			<NumberInput />
-			<DropdownButton />
+			<DropdownButton>
+				<h3>Compositing Options</h3>
+				<p>More blend and compositing options will be here</p>
+			</DropdownButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree'">
 			<LayoutCol :class="'list'">
@@ -78,6 +81,7 @@ import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import NumberInput from "../widgets/NumberInput.vue";
 import DropdownButton from "../widgets/DropdownButton.vue";
+import { PopoverDirection } from "../widgets/PopoverMount.vue";
 import IconButton from "../widgets/IconButton.vue";
 import IconContainer from "../widgets/IconContainer.vue";
 import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
@@ -122,6 +126,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			PopoverDirection,
 			layers: [] as Array<LayerPanelEntry>,
 		};
 	},