feat: style two-click mode togglebutton

momentum-mod · Aug 27, 2024 · 6a3b981 · 6a3b981
1 parent 8900aef
commit 6a3b981
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/images/vector-polyline.svg b/images/vector-polyline.svg
diff --git a/images/vector-two-click.svg b/images/vector-two-click.svg
diff --git 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
@@ -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;
 	}