From 10abdc679be2e64cdf4a22458734c93952baadba Mon Sep 17 00:00:00 2001 From: Orsell <34631691+OrsellGit@users.noreply.github.com> Date: Fri, 8 May 2026 01:36:32 -0700 Subject: [PATCH 1/5] feat: Implemented new thumb icons into voting UIs, still needs work --- images/icons/thumbdown.svg | 46 +++++++++++++++++++++ images/icons/thumbup.svg | 46 +++++++++++++++++++++ layout/modals/flyouts/workshop-campaign.xml | 30 ++++++++++++-- layout/pages/main-menu/pause-menu.xml | 4 +- styles/pages/main-menu/main-menu.scss | 12 ++++++ 5 files changed, 132 insertions(+), 6 deletions(-) create mode 100644 images/icons/thumbdown.svg create mode 100644 images/icons/thumbup.svg diff --git a/images/icons/thumbdown.svg b/images/icons/thumbdown.svg new file mode 100644 index 00000000..42b02185 --- /dev/null +++ b/images/icons/thumbdown.svg @@ -0,0 +1,46 @@ + + + + diff --git a/images/icons/thumbup.svg b/images/icons/thumbup.svg new file mode 100644 index 00000000..49a45dfc --- /dev/null +++ b/images/icons/thumbup.svg @@ -0,0 +1,46 @@ + + + + diff --git a/layout/modals/flyouts/workshop-campaign.xml b/layout/modals/flyouts/workshop-campaign.xml index fb547169..c55b0190 100644 --- a/layout/modals/flyouts/workshop-campaign.xml +++ b/layout/modals/flyouts/workshop-campaign.xml @@ -58,12 +58,34 @@ - - diff --git a/scripts/modals/flyouts/workshop-campaign.ts b/scripts/modals/flyouts/workshop-campaign.ts index 65fa67b7..cbe881d6 100644 --- a/scripts/modals/flyouts/workshop-campaign.ts +++ b/scripts/modals/flyouts/workshop-campaign.ts @@ -125,6 +125,7 @@ class WorkshopCampaignFlyout { static play() { if (this.hasMissing) { + $.PlaySoundEvent('UIPanorama.P2CE.MenuError'); UiToolkitAPI.ShowCustomLayoutPopupParameters( 'dependencies', 'file://{resources}/layout/modals/popups/addon-dependencies.xml', @@ -144,6 +145,10 @@ class WorkshopCampaignFlyout { WorkshopAPI.SetAddonUserRating(this.addonId, vote); } + static toggleMapFavorite() { + $.Warning('Not implemented!'); + } + static close() { $.DispatchEvent('Cancelled', $.GetContextPanel(), PanelEventSource.PROGRAM); } diff --git a/styles/pages/main-menu/main-menu.scss b/styles/pages/main-menu/main-menu.scss index 45c78956..ab7d942f 100644 --- a/styles/pages/main-menu/main-menu.scss +++ b/styles/pages/main-menu/main-menu.scss @@ -694,6 +694,7 @@ $pane-move-time: 0.1s; height: 80px; background-color: $button-background; border: $menu-pane-border; + padding: 10px; &__icon { horizontal-align: center; vertical-align: center; From 62d6f71578f09e12fbf400e699153dea4ea35303 Mon Sep 17 00:00:00 2001 From: Orsell <34631691+OrsellGit@users.noreply.github.com> Date: Fri, 8 May 2026 20:37:00 -0700 Subject: [PATCH 3/5] feat: Made the workshop author avatar lead to their steam profile. Positioning is still WIP --- layout/pages/main-menu/pause-menu.xml | 12 ++++++++++-- scripts/pages/main-menu/addons.ts | 4 ++-- scripts/pages/main-menu/pause-menu.ts | 8 ++++++-- styles/pages/main-menu/main-menu.scss | 4 ++++ 4 files changed, 22 insertions(+), 6 deletions(-) diff --git a/layout/pages/main-menu/pause-menu.xml b/layout/pages/main-menu/pause-menu.xml index a5b3fa86..e4bdf696 100644 --- a/layout/pages/main-menu/pause-menu.xml +++ b/layout/pages/main-menu/pause-menu.xml @@ -102,10 +102,18 @@ - diff --git a/scripts/pages/main-menu/addons.ts b/scripts/pages/main-menu/addons.ts index 0be58879..bf8e2dbc 100644 --- a/scripts/pages/main-menu/addons.ts +++ b/scripts/pages/main-menu/addons.ts @@ -237,7 +237,7 @@ class AddonManager { p.AddClass('fancy-orange-noborder'); p.AddClass('addons__divider__orange'); $.CreatePanel('Label', p, 'ContentDividerText', { - text: '[HC] The following addons are required by in-game content.', + text: '[HC] The following addons are required by the content currently being played.', class: 'horizontal-align-center text-weight-bold' }); } @@ -278,7 +278,7 @@ class AddonManager { if (this.toggleAllButton) this.toggleAllButton.SetSelected(anyEnabled); } - + this.updateAddons(); } diff --git a/scripts/pages/main-menu/pause-menu.ts b/scripts/pages/main-menu/pause-menu.ts index cd056dc1..3fe9d92b 100644 --- a/scripts/pages/main-menu/pause-menu.ts +++ b/scripts/pages/main-menu/pause-menu.ts @@ -136,7 +136,7 @@ class PauseMenu { static mapPane = $('#MapPanel')!; static mapImage = $('#MapImage')!; static mapTitle = $ diff --git a/scripts/pages/main-menu/addons.ts b/scripts/pages/main-menu/addons.ts index bf8e2dbc..4948ec69 100644 --- a/scripts/pages/main-menu/addons.ts +++ b/scripts/pages/main-menu/addons.ts @@ -224,7 +224,6 @@ class AddonManager { this.purgeAddonList(); - if (GameInterfaceAPI.GetGameUIState() === GameUIState.PAUSEMENU) { const activeAddons = WorkshopAPI.GetActiveMountList(); const campaign = CampaignAPI.GetActiveCampaign(); @@ -278,8 +277,6 @@ class AddonManager { if (this.toggleAllButton) this.toggleAllButton.SetSelected(anyEnabled); } - - this.updateAddons(); } diff --git a/styles/components/_index.scss b/styles/components/_index.scss index c08d4644..0af134b7 100644 --- a/styles/components/_index.scss +++ b/styles/components/_index.scss @@ -9,3 +9,4 @@ @use 'settings'; @use 'show-fps'; @use 'card'; +@use 'voting'; diff --git a/styles/components/voting.scss b/styles/components/voting.scss new file mode 100644 index 00000000..30827f43 --- /dev/null +++ b/styles/components/voting.scss @@ -0,0 +1,96 @@ +@use '../config' as *; +@use 'sass:color'; + +.vote { + width: 128px; + height: 128px; + background-color: $button-background; + border: $menu-pane-border; + &__icon { + horizontal-align: center; + vertical-align: center; + width: 96px; + height: 96px; + } +} +.vote-small { + width: 80px; + height: 80px; + &__icon { + width: 64px; + height: 64px; + } +} +.upvote { + &:hover { + background-color: gradient( + radial, + 50% 50%, + 0% 0%, + 70% 70%, + from($base-950), + to(color.scale($p2-blue, $lightness: -80%)) + ); + border-color: $p2-blue; + Image { + wash-color: $p2-blue; + } + } + &:selected { + background-color: gradient( + radial, + 50% 50%, + 0% 0%, + 70% 70%, + from($p2-blue), + to(color.scale($p2-blue, $lightness: -50%)) + ); + border-color: $p2-blue; + Image { + wash-color: $base-950; + } + } +} +.downvote { + &:hover { + background-color: gradient( + radial, + 50% 50%, + 0% 0%, + 70% 70%, + from($base-950), + to(color.scale($p2-orange, $lightness: -80%)) + ); + border-color: $p2-orange; + Image { + wash-color: $p2-orange; + } + } + &:selected { + background-color: gradient( + radial, + 50% 50%, + 0% 0%, + 70% 70%, + from($p2-orange), + to(color.scale($p2-orange, $lightness: -50%)) + ); + border-color: $p2-orange; + Image { + wash-color: $base-950; + } + } +} +.favorite { + &:disabled { + opacity: 0.1; + } + &:hover:not(:disabled) { + background-color: $button-background-hover; + border-color: $primary-color; + } + &:selected:not(:disabled) { + background-color: $button-background-selected; + border-color: $primary-color; + } +} diff --git a/styles/pages/main-menu/main-menu.scss b/styles/pages/main-menu/main-menu.scss index 81d62a90..1e27facd 100644 --- a/styles/pages/main-menu/main-menu.scss +++ b/styles/pages/main-menu/main-menu.scss @@ -686,99 +686,6 @@ $pane-move-time: 0.1s; vertical-align: bottom; margin-bottom: 128px; } - &__vote { - width: 128px; - height: 128px; - background-color: $button-background; - border: $menu-pane-border; - &__icon { - horizontal-align: center; - vertical-align: center; - width: 96px; - height: 96px; - } - } - &__vote-small { - width: 80px; - height: 80px; - &__icon { - width: 64px; - height: 64px; - } - } - &__upvote { - &:hover { - background-color: gradient( - radial, - 50% 50%, - 0% 0%, - 70% 70%, - from($base-950), - to(color.scale($p2-blue, $lightness: -80%)) - ); - border-color: $p2-blue; - Image { - wash-color: $p2-blue; - } - } - &:selected { - background-color: gradient( - radial, - 50% 50%, - 0% 0%, - 70% 70%, - from($p2-blue), - to(color.scale($p2-blue, $lightness: -50%)) - ); - border-color: $p2-blue; - Image { - wash-color: $base-950; - } - } - } - &__downvote { - &:hover { - background-color: gradient( - radial, - 50% 50%, - 0% 0%, - 70% 70%, - from($base-950), - to(color.scale($p2-orange, $lightness: -80%)) - ); - border-color: $p2-orange; - Image { - wash-color: $p2-orange; - } - } - &:selected { - background-color: gradient( - radial, - 50% 50%, - 0% 0%, - 70% 70%, - from($p2-orange), - to(color.scale($p2-orange, $lightness: -50%)) - ); - border-color: $p2-orange; - Image { - wash-color: $base-950; - } - } - } - &__favorite { - &:disabled { - opacity: 0.1; - } - &:hover:not(:disabled) { - background-color: $button-background-hover; - border-color: $primary-color; - } - &:selected:not(:disabled) { - background-color: $button-background-selected; - border-color: $primary-color; - } - } } }