Thumb Icons For Voting, Linking Author Steam Profile In Workshop Flyout, Dealing With HL2 Mounting

layout/modals/flyouts/workshop-campaign.xml

@@ -56,21 +56,44 @@
 				</Panel>
 				<Label id="Author" class="workshop-campaign__author" text="[PH] Map Author" />
 				<Panel class="flow-down vertical-align-bottom">
-					<!-- TODO: replace these with upvote icons! -->
 					<Panel class="flow-right mb-1">
-						<RadioButton id="Upvote" class="button mr-2" group="Voting" onactivate="WorkshopCampaignFlyout.changeVote(1)">
-							<Label class="button__text" text="#UI_Upvote" />
+						<RadioButton
+							group="Voting"
+							id="Upvote"
+							class="vote vote-small upvote mr-2"
+							onactivate="WorkshopCampaignFlyout.changeVote(1)"
+						>
+							<Image
+								class="vote__icon vote-small__icon flip-vertical"
+								texturewidth="96"
+								textureheight="96"
+								src="file://{images}/icons/thumb.svg"
+							/>
 						</RadioButton>
-						<RadioButton id="Downvote" class="button mr-2" group="Voting" onactivate="WorkshopCampaignFlyout.changeVote(2)">
-							<Label class="button__text" text="#UI_Downvote" />
+
+						<RadioButton
+							group="Voting"
+							id="Downvote"
+							class="vote vote-small downvote mr-2"
+							onactivate="WorkshopCampaignFlyout.changeVote(2)"
+						>
+							<Image class="vote__icon vote-small__icon" texturewidth="96" textureheight="96" src="file://{images}/icons/thumb.svg" />
 						</RadioButton>
+
+						<ToggleButton
+							id="Favorite"
+							class="vote vote-small favorite"
+							disabled="true"
+							onactivate="WorkshopCampaignFlyout.toggleMapFavorite()"
+						>
+							<Image class="vote__icon vote-small__icon" texturewidth="96" textureheight="96" src="file://{images}/star.svg" />
+						</ToggleButton>
+
+						<!-- Needed as a "default" selection when a item hasn't been voted for. -->
 						<RadioButton id="Nonevote" class="button hide" group="Voting" onactivate="WorkshopCampaignFlyout.changeVote(0)">
 							<Label class="button__text" text="#UI_Novote" />
 						</RadioButton>
 					</Panel>
-					<Button class="button button-2x hide" onactivate="WorkshopCampaignFlyout.openInSteam()">
-						<Image class="button__icon" texturewidth="64" textureheight="64" src="file://{images}/star.svg" />
-					</Button>
 				</Panel>
 			</Panel>
 		</Panel>

layout/pages/main-menu/pause-menu.xml

@@ -51,39 +51,14 @@
 			</Panel>
 			<Panel class="mainmenu__addon" hittest="false">
 				<Panel id="VoteBox" class="mainmenu__addon__voters">
-					<RadioButton
-						group="vote"
-						id="MapUpvote"
-						class="mainmenu__addon__vote mainmenu__addon__upvote"
-						onactivate="PauseMenu.setMapVote(1)"
-					>
-						<Image
-							class="mainmenu__addon__vote__icon"
-							texturewidth="96"
-							textureheight="96"
-							src="file://{images}/icons/p2_upvote.png"
-						/>
+					<RadioButton group="vote" id="MapUpvote" class="vote upvote" onactivate="PauseMenu.setMapVote(1)">
+						<Image class="vote__icon flip-vertical" texturewidth="96" textureheight="96" src="file://{images}/icons/thumb.svg" />
 					</RadioButton>
-					<RadioButton
-						group="vote"
-						id="MapDownvote"
-						class="mainmenu__addon__vote mainmenu__addon__downvote"
-						onactivate="PauseMenu.setMapVote(2)"
-					>
-						<Image
-							class="mainmenu__addon__vote__icon"
-							texturewidth="96"
-							textureheight="96"
-							src="file://{images}/icons/p2_downvote.png"
-						/>
+					<RadioButton group="vote" id="MapDownvote" class="vote downvote" onactivate="PauseMenu.setMapVote(2)">
+						<Image class="vote__icon" texturewidth="96" textureheight="96" src="file://{images}/icons/thumb.svg" />
 					</RadioButton>
-					<ToggleButton
-						id="MapFavorite"
-						class="mainmenu__addon__vote mainmenu__addon__favorite"
-						disabled="true"
-						onactivate="PauseMenu.toggleMapFavorite()"
-					>
-						<Image class="mainmenu__addon__vote__icon" texturewidth="128" textureheight="128" src="file://{images}/star.svg" />
+					<ToggleButton id="MapFavorite" class="vote favorite" disabled="true" onactivate="PauseMenu.toggleMapFavorite()">
+						<Image class="vote__icon" texturewidth="128" textureheight="128" src="file://{images}/star.svg" />
 					</ToggleButton>
 				</Panel>
 				<Panel id="AddonBottom" class="mainmenu__addon__bottom">
@@ -102,10 +77,18 @@
 				<Panel class="flow-down overflow-noclip">
 					<Panel class="mainmenu__addon__overflow">
 						<Image id="MapImage" class="mainmenu__addon__cover" />
-						<AvatarImage id="MapAvatar" class="mainmenu__addon__avatar" />
 					</Panel>
 					<Label id="MapTitle" class="mainmenu__addon__title" text="[PH] Map Title" />
-					<Label id="MapDesc" class="mainmenu__addon__desc" text="[PH] Map Author" />
+					<Label id="MapAuthor" class="mainmenu__addon__desc" text="[PH] Map Author" />
+					<Button
+						id="AuthSteamProfile"
+						class="ml-5"
+						onactivate="PauseMenu.openSteamProfile()"
+						onmouseover="UiToolkitAPI.ShowTextTooltip('AuthSteamProfile', '[HC] View Author\'s Steam Profile');"
+						onmouseout="UiToolkitAPI.HideTextTooltip();"
+					>
+						<AvatarImage id="MapAvatar" class="mainmenu__addon__avatar" />
+					</Button>
 				</Panel>
 			</Panel>
 		</Panel>

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);
 	}

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();
@@ -237,7 +236,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,8 +277,6 @@ class AddonManager {
 			if (this.toggleAllButton) this.toggleAllButton.SetSelected(anyEnabled);
 		}
 
-
-
 		this.updateAddons();
 	}
 

scripts/pages/main-menu/pause-menu.ts

@@ -136,7 +136,7 @@ class PauseMenu {
 	static mapPane = $<Panel>('#MapPanel')!;
 	static mapImage = $<Image>('#MapImage')!;
 	static mapTitle = $<Label>('#MapTitle')!;
-	static mapDesc = $<Label>('#MapDesc')!;
+	static mapAuthor = $<Label>('#MapAuthor')!;
 	static mapUpvote = $<Button>('#MapUpvote')!;
 	static mapDownvote = $<Button>('#MapDownvote')!;
 	static mapFavorite = $<Button>('#MapFavorite')!;
@@ -301,7 +301,7 @@ class PauseMenu {
 		let string = '';
 		for (let i = 0; i < addon.authors.length; ++i)
 			string += i === addon.authors.length - 1 ? addon.authors[i] : `${addon.authors[i]}, `;
-		this.mapDesc.text = string;
+		this.mapAuthor.text = string;
 
 		if (addon.local) {
 			this.mapVoteBox.visible = false;
@@ -332,4 +332,8 @@ class PauseMenu {
 	static openMapWorkshop() {
 		SteamOverlayAPI.OpenURLModal(`https://steamcommunity.com/sharedfiles/filedetails/?id=${this.workshopId}`);
 	}
+
+	static openSteamProfile() {
+		SteamOverlayAPI.OpenURLModal(`https://steamcommunity.com/profiles/${this.mapAvatar.steamid}`);
+	}
 }

styles/components/_index.scss

@@ -9,3 +9,4 @@
 @use 'settings';
 @use 'show-fps';
 @use 'card';
+@use 'voting';

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;
+	}
+}

styles/core/utility.scss

@@ -240,6 +240,14 @@ $z: (-2, -1, 0);
 	}
 }
 
+.flip-vertical {
+	transform: scaleY(-1);
+}
+
+.flip-horizontal {
+	transform: scaleX(-1);
+}
+
 // ================
 // DEBUG
 // ================