From 8900aef0b684717ede9c022fadf6a2893e4c6bd3 Mon Sep 17 00:00:00 2001 From: PeenScreeker Date: Thu, 22 Aug 2024 22:53:04 -0400 Subject: [PATCH 1/2] feat: update tabmenu with new togglebutton for zoning --- layout/hud/tab-menu.xml | 7 +------ scripts/hud/tab-menu.js | 10 ---------- styles/hud/tab-menu.scss | 14 ++++++++++++++ 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/layout/hud/tab-menu.xml b/layout/hud/tab-menu.xml index 7a2eb3aa..308136de 100644 --- a/layout/hud/tab-menu.xml +++ b/layout/hud/tab-menu.xml @@ -59,12 +59,7 @@ - - + diff --git a/scripts/hud/tab-menu.js b/scripts/hud/tab-menu.js index bb41b164..4a2a4095 100644 --- 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 index 5354492b..d3a4b65a 100644 --- a/styles/hud/tab-menu.scss +++ b/styles/hud/tab-menu.scss @@ -88,6 +88,20 @@ } } + &__zoning-button { + height: $button-height; + width: height-percentage(100%); + background-position: center; + background-repeat: no-repeat; + background-image: url('file://{images}/pencil-outline.svg'); + img-shadow: $button-icon-shadow; + wash-color: $button-text-color; + + &:selected { + background-image: url('file://{images}/pencil-off-outline.svg'); + } + } + &__enable-cursor { border-top: 1px solid rgba(0, 0, 0, 0.4); width: 100%; From 6a3b981721718410481d0dd58329b203b5580de6 Mon Sep 17 00:00:00 2001 From: PeenScreeker Date: Wed, 14 Aug 2024 01:56:35 -0400 Subject: [PATCH 2/2] 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 @@ + \ 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 @@ + + + \ 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 @@ - + + + + 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; }