From defef048d6b62eb410418ad5670e6f51fe280f52 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/select-drag.svg          |  1 +
 images/select-off.svg           |  1 +
 images/vector-polyline.svg      |  1 +
 layout/pages/zoning/zoning.xml  |  9 ++++++---
 styles/pages/zoning/zoning.scss | 19 +++++++++++++++++++
 5 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 images/select-drag.svg
 create mode 100644 images/select-off.svg
 create mode 100644 images/vector-polyline.svg

diff --git a/images/select-drag.svg b/images/select-drag.svg
new file mode 100644
index 00000000..2b58df9c
--- /dev/null
+++ b/images/select-drag.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="M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z" /></svg>
\ No newline at end of file
diff --git a/images/select-off.svg b/images/select-off.svg
new file mode 100644
index 00000000..1c9eaf07
--- /dev/null
+++ b/images/select-off.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="M1,4.27L2.28,3L21,21.72L19.73,23L17,20.27V21H15V19H15.73L5,8.27V9H3V7H3.73L1,4.27M20,3A1,1 0 0,1 21,4V5H19V3H20M15,5V3H17V5H15M11,5V3H13V5H11M7,5V3H9V5H7M11,21V19H13V21H11M7,21V19H9V21H7M4,21A1,1 0 0,1 3,20V19H5V21H4M3,15H5V17H3V15M21,15V17H19V15H21M3,11H5V13H3V11M21,11V13H19V11H21M21,7V9H19V7H21Z" /></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/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..600a5535 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}/select-drag.svg');
+			wash-color: $blue;
+		}
+
+		&:hover {
+			wash-color: $white;
+		}
+	}
+
 	&__dropdown {
 		width: 180px;
 	}