From 1562471997cfbc9ecfa96ddb6bff3e15a1ee4383 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 14 Aug 2024 01:56:35 -0400
Subject: [PATCH] feat: style two-click mode togglebutton

---
 images/vector-polyline.svg      |  1 +
 images/vector-two-click.svg     |  3 +++
 layout/pages/zoning/zoning.xml  |  9 ++++++---
 styles/pages/zoning/zoning.scss | 19 +++++++++++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 images/vector-polyline.svg
 create mode 100644 images/vector-two-click.svg

diff --git a/images/vector-polyline.svg b/images/vector-polyline.svg
new file mode 100644
index 00000000..3bf4b331
--- /dev/null
+++ b/images/vector-polyline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M2 3V9H4.95L6.95 15H6V21H12V16.41L17.41 11H22V5H16V9.57L10.59 15H9.06L7.06 9H8V3M4 5H6V7H4M18 7H20V9H18M8 17H10V19H8Z" /></svg>
\ No newline at end of file
diff --git a/images/vector-two-click.svg b/images/vector-two-click.svg
new file mode 100644
index 00000000..7bcaadbb
--- /dev/null
+++ b/images/vector-two-click.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="#fff" d="M16 4V2h6v6h-2v12H8v2H2v-6h2l0-12M16 8V6H6v10h2v2l10-0L18 8zm2-4v2h2V4zM4 18v2h2v-2z"/>
+</svg>
\ No newline at end of file
diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index 6bfdbf3d..377cc1cf 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -161,9 +161,12 @@
 					</Panel>
 					<Panel id="PointsSection" class="zoning__region-details">
 						<Panel id="RegionPoints" class="zoning__property">
-							<Button class="button zoning__property-button" onactivate="ZoneMenu.pickCorners();">
-								<Label class="button__text" text="#Zoning_EditPoints" />
-							</Button>
+							<Panel class="zoning__region-property-container">
+								<ToggleButton id="TwoClickMode" class="zoning__two-click-button" convar="mom_zone_two_click" onmouseover="UiToolkitAPI.ShowTextTooltip('TwoClickMode', '#Zoning_TwoClickTogle_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();" />
+								<Button class="button zoning__property-button" onactivate="ZoneMenu.pickCorners();">
+									<Label class="button__text" text="#Zoning_EditPoints" />
+								</Button>
+							</Panel>
 						</Panel>
 						<Panel id="PointsList" class="zoning__region-points-list">
 						<!-- Populated in JS -->
diff --git a/styles/pages/zoning/zoning.scss b/styles/pages/zoning/zoning.scss
index aff30d13..cdb7aeb1 100644
--- a/styles/pages/zoning/zoning.scss
+++ b/styles/pages/zoning/zoning.scss
@@ -273,6 +273,25 @@ $medium: 28px;
 		}
 	}
 
+	&__two-click-button {
+		height: $button-height;
+		width: height-percentage(100%);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-image: url('file://{images}/vector-polyline.svg');
+		wash-color: $red;
+		tooltip-position: top;
+
+		&:selected {
+			background-image: url('file://{images}/vector-two-click.svg');
+			wash-color: $blue;
+		}
+
+		&:hover {
+			wash-color: $white;
+		}
+	}
+
 	&__dropdown {
 		width: 180px;
 	}