Add RadioPicker; add view mode picker to document options bar

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

@@ -8,7 +8,7 @@
 
 <style lang="scss">
 .number-input {
-	width: 96px;
+	width: 64px;
 	height: 22px;
 	position: relative;
 	border: 1px solid #888;
@@ -26,6 +26,7 @@
 		color: #ddd;
 		font-size: 14px;
 		text-align: center;
+		font-family: inherit;
 
 		&::selection {
 			background: #3194d6;

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

@@ -0,0 +1,83 @@
+<template>
+	<div class="radio-picker" ref="radioPicker">
+		<slot></slot>
+	</div>
+</template>
+
+<style lang="scss">
+.radio-picker {
+	font-size: 0;
+
+	button {
+		fill: #fff;
+		border-radius: 0;
+		margin: 0;
+
+		&:first-child {
+			border-radius: 2px 0 0 2px;
+		}
+
+		&:last-child {
+			border-radius: 0 2px 2px 0;
+		}
+	}
+
+	.icon-button {
+		background: #888;
+
+		& + .icon-button {
+			margin-left: 1px;
+		}
+
+		&:hover {
+			background: #555;
+		}
+
+		&.active {
+			background: #3194d6;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	components: {
+	},
+	props: {
+		initialIndex: { type: Number, required: true },
+		setIndex: { type: Function, required: false },
+	},
+	data() {
+		return {
+			activeIndex: this.initialIndex,
+		};
+	},
+	mounted() {
+		this.updateActiveIconButton();
+
+		(this.$refs.radioPicker as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
+			iconButton.addEventListener("click", () => {
+				this.activeIndex = index;
+				this.$emit("changed", index);
+			});
+		});
+	},
+	watch: {
+		activeIndex() { this.updateActiveIconButton(); },
+	},
+	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(...)`
+		setActive(index: number) {
+			this.activeIndex = index;
+		},
+		updateActiveIconButton() {
+			const iconButtons = (this.$refs.radioPicker as Element).querySelectorAll(".icon-button");
+			iconButtons.forEach((iconButton) => iconButton.classList.remove("active"));
+			iconButtons[this.activeIndex].classList.add("active");
+		},
+	},
+});
+</script>