From beb534e20b9ea1c7751868e10ce213b57131866f Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sat, 10 Apr 2021 23:27:29 -0700
Subject: [PATCH] Add NumberInput component; add scale input and zoom buttons
 to options bar

---
 .../svg/24x24-bounds-16x16-icon/zoom-in.svg   |  6 ++
 .../svg/24x24-bounds-16x16-icon/zoom-out.svg  |  5 +
 .../24x24-bounds-16x16-icon/zoom-reset.svg    |  5 +
 client/web/src/components/panels/Document.vue | 15 ++-
 .../src/components/widgets/NumberInput.vue    | 93 +++++++++++++++++++
 5 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 client/web/assets/svg/24x24-bounds-16x16-icon/zoom-in.svg
 create mode 100644 client/web/assets/svg/24x24-bounds-16x16-icon/zoom-out.svg
 create mode 100644 client/web/assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg
 create mode 100644 client/web/src/components/widgets/NumberInput.vue

diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-in.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-in.svg
new file mode 100644
index 00000000..e5e66ad4
--- /dev/null
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-in.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24">
+	<path d="M19.69,18.19l-4-4.01l-1.5,1.5l4,4c0.41,0.41,1.08,0.41,1.5,0C20.1,19.28,20.1,18.61,19.69,18.19z" />
+	<path d="M10.5,5.41c2.8,0,5.09,2.28,5.09,5.09s-2.28,5.09-5.09,5.09S5.41,13.3,5.41,10.5S7.7,5.41,10.5,5.41 M10.5,4C6.91,4,4,6.91,4,10.5S6.91,17,10.5,17s6.5-2.91,6.5-6.5S14.09,4,10.5,4L10.5,4z" />
+	<rect x="7" y="9.75" width="7" height="1.5" />
+	<rect x="9.75" y="7" width="1.5" height="7" />
+</svg>
diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-out.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-out.svg
new file mode 100644
index 00000000..96507c7c
--- /dev/null
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-out.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+	<path d="M19.69,18.19l-4-4.01l-1.5,1.5l4,4c0.41,0.41,1.08,0.41,1.5,0C20.1,19.28,20.1,18.61,19.69,18.19z" />
+	<path d="M10.5,5.41c2.8,0,5.09,2.28,5.09,5.09s-2.28,5.09-5.09,5.09S5.41,13.3,5.41,10.5S7.7,5.41,10.5,5.41 M10.5,4C6.91,4,4,6.91,4,10.5S6.91,17,10.5,17s6.5-2.91,6.5-6.5S14.09,4,10.5,4L10.5,4z" />
+	<rect x="7" y="9.75" width="7" height="1.5" />
+</svg>
diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg
new file mode 100644
index 00000000..da488359
--- /dev/null
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+	<polygon points="3.97,10.5 6.86,15.5 9.74,10.5" />
+	<path d="M12.22,16.57c-0.19,0-0.37-0.01-0.56-0.02c-0.93-0.08-1.81-0.36-2.62-0.84l0.72-1.22c0.62,0.37,1.31,0.58,2.02,0.65c1.29,0.11,2.56-0.28,3.55-1.12s1.61-2.01,1.72-3.3c0.23-2.67-1.75-5.04-4.42-5.27c-1.29-0.11-2.56,0.28-3.55,1.12c-1,0.84-1.61,2.01-1.72,3.3c-0.04,0.51-0.01,1.03,0.11,1.54L6.1,11.74c-0.15-0.66-0.2-1.33-0.15-1.99C6.1,8.08,6.89,6.56,8.17,5.49c1.29-1.08,2.92-1.59,4.58-1.44c3.45,0.3,6.01,3.35,5.71,6.8c-0.15,1.67-0.93,3.18-2.22,4.26C15.1,16.06,13.69,16.57,12.22,16.57z" />
+	<path d="M19.81,18.41l-3.33-3.98l-1.49,1.25l3.33,3.98c0.34,0.41,0.96,0.46,1.37,0.12C20.1,19.43,20.15,18.82,19.81,18.41z" />
+</svg>
diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index c9c17a2d..5b808012 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -30,7 +30,12 @@
 				<DropdownButton />
 			</div>
 			<div class="spacer"></div>
-			<div class="right side"></div>
+			<div class="right side">
+				<IconButton :size="24" title="Zoom Out"><ZoomOut /></IconButton>
+				<IconButton :size="24" title="Zoom In"><ZoomIn /></IconButton>
+				<IconButton :size="24" title="Zoom to 100%"><ZoomReset /></IconButton>
+				<NumberInput />
+			</div>
 		</LayoutRow>
 		<LayoutRow :class="'shelf-and-viewport'">
 			<LayoutCol :class="'shelf'">
@@ -188,6 +193,7 @@ 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 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";
@@ -224,6 +230,9 @@ import BooleanSubtractFront from "../../../assets/svg/24x24-bounds-16x16-icon/bo
 import BooleanSubtractBack from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-subtract-back.svg";
 import BooleanIntersect from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-intersect.svg";
 import BooleanDifference from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-difference.svg";
+import ZoomReset from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg";
+import ZoomIn from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-in.svg";
+import ZoomOut from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-out.svg";
 
 const wasm = import("../../../wasm/pkg");
 
@@ -235,6 +244,7 @@ export default defineComponent({
 		ItemDivider,
 		IconButton,
 		DropdownButton,
+		NumberInput,
 		SwapButton,
 		ResetColorsButton,
 		SelectTool,
@@ -271,6 +281,9 @@ export default defineComponent({
 		BooleanSubtractBack,
 		BooleanIntersect,
 		BooleanDifference,
+		ZoomReset,
+		ZoomIn,
+		ZoomOut,
 	},
 	methods: {
 		async canvasMouseDown(e: MouseEvent) {
diff --git a/client/web/src/components/widgets/NumberInput.vue b/client/web/src/components/widgets/NumberInput.vue
new file mode 100644
index 00000000..79a768d7
--- /dev/null
+++ b/client/web/src/components/widgets/NumberInput.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="number-input">
+		<button class="arrow left"></button>
+		<button class="arrow right"></button>
+		<input type="text" spellcheck="false" value="25%" />
+	</div>
+</template>
+
+<style lang="scss">
+.number-input {
+	width: 96px;
+	height: 22px;
+	position: relative;
+	border: 1px solid #888;
+	border-radius: 2px;
+	background: #111;
+
+	input {
+		width: calc(100% - 8px);
+		margin: 0 4px;
+		outline: none;
+		border: none;
+		background: none;
+		padding: 0;
+		line-height: 22px;
+		color: #ddd;
+		font-size: 14px;
+		text-align: center;
+
+		&::selection {
+			background: #3194d6;
+		}
+	}
+
+	&:not(:hover) .arrow {
+		display: none;
+	}
+
+	.arrow {
+		position: absolute;
+		top: 0;
+		outline: none;
+		border: none;
+		background: #333;
+
+		&:hover {
+			background: #555;
+		}
+
+		&.right {
+			right: 0;
+			padding: 8px 6px 8px 7px;
+
+			&::before {
+				content: "";
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: 3px 0 3px 3px;
+				border-color: transparent transparent transparent #ddd;
+				display: block;
+			}
+		}
+
+		&.left {
+			left: 0;
+			padding: 8px 7px 8px 6px;
+
+			&::after {
+				content: "";
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: 3px 3px 3px 0;
+				border-color: transparent #ddd transparent transparent;
+				display: block;
+			}
+		}
+	}
+
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	components: {
+	},
+	props: {
+	},
+});
+</script>