feat: update tabmenu with new togglebutton for zoning

momentum-mod · Aug 23, 2024 · 38c2ec1 · 38c2ec1
1 parent 9130893
commit 38c2ec1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/layout/hud/tab-menu.xml b/layout/hud/tab-menu.xml
@@ -59,12 +59,9 @@
 			</Panel>
 
 			<Panel class="hud-tab-menu__enable-cursor">
-				<Button id="ZoningOpen" class="button horizontal-align-left" onactivate="GameInterfaceAPI.ConsoleCommand('mom_zone_edit 1');$.DispatchEvent('ZoneMenu_Show');" onmouseover="UiToolkitAPI.ShowTextTooltip('ZoningOpen', '#Zoning_ShowMenu_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
-					<Image class="button__icon" src="file://{images}/pencil-outline.svg" textureheight="24" />
-				</Button>
-				<Button id="ZoningClose" class="button horizontal-align-left" onactivate="GameInterfaceAPI.ConsoleCommand('mom_zone_edit 0');$.DispatchEvent('ZoneMenu_Hide');" onmouseover="UiToolkitAPI.ShowTextTooltip('ZoningClose', '#Zoning_HideMenu_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
-					<Image class="button__icon" src="file://{images}/pencil-off-outline.svg" textureheight="24" />
-				</Button>
+				<ToggleButton id="ZoningToggle" class="button horizontal-align-left hud-tab-menu__zoning-button" convar="mom_zone_edit">
+					<Image class="button__icon" />
+				</ToggleButton>
 				<Label class="hud-tab-menu__enable-cursor-tip" text="#HudTabMenu_EnableCursorTip"/> 
 			</Panel>
 		</Panel>

diff --git a/scripts/hud/tab-menu.js b/scripts/hud/tab-menu.js
@@ -11,10 +11,6 @@ class HudTabMenu {
 		endOfRunContainer: $('#EndOfRunContainer'),
 		/** @type {Panel} @static */
 		zoningContainer: $('#ZoningContainer'),
-		/** @type {Panel} @static */
-		zoningOpenButton: $('#ZoningOpen'),
-		/** @type {Panel} @static */
-		zoningCloseButton: $('#ZoningClose'),
 		/** @type {Image} @static */
 		gamemodeImage: $('#HudTabMenuGamemodeImage'),
 		/** @type {Panel} @static */
@@ -46,20 +42,14 @@ class HudTabMenu {
 		this.panels.tabMenu.AddClass('hud-tab-menu--offset');
 		this.panels.leaderboardsContainer.AddClass('hud-tab-menu__leaderboards--hidden');
 		this.panels.endOfRunContainer.AddClass('hud-tab-menu__endofrun--hidden');
-
 		this.panels.zoningContainer.RemoveClass('hud-tab-menu__zoning--hidden');
-		this.panels.zoningOpenButton.AddClass('hud-tab-menu__zoning--hidden');
-		this.panels.zoningCloseButton.RemoveClass('hud-tab-menu__zoning--hidden');
 	}
 
 	static hideZoneMenu() {
 		this.panels.tabMenu.RemoveClass('hud-tab-menu--offset');
 		this.panels.leaderboardsContainer.RemoveClass('hud-tab-menu__leaderboards--hidden');
 		this.panels.endOfRunContainer.AddClass('hud-tab-menu__endofrun--hidden');
-
 		this.panels.zoningContainer.AddClass('hud-tab-menu__zoning--hidden');
-		this.panels.zoningOpenButton.RemoveClass('hud-tab-menu__zoning--hidden');
-		this.panels.zoningCloseButton.AddClass('hud-tab-menu__zoning--hidden');
 	}
 
 	static setMapData(isOfficial) {

diff --git a/styles/hud/tab-menu.scss b/styles/hud/tab-menu.scss
@@ -88,6 +88,18 @@
 		}
 	}
 
+	&__zoning-button {
+		& Image {
+			background-position: center;
+			background-repeat: no-repeat;
+			background-image: url('file://{images}/pencil-outline.svg');
+		}
+
+		&:selected Image {
+			background-image: url('file://{images}/pencil-off-outline.svg');
+		}
+	}
+
 	&__enable-cursor {
 		border-top: 1px solid rgba(0, 0, 0, 0.4);
 		width: 100%;