fix(theme): checkbox and layout in context menus

ricewind012 · Feb 12, 2025 · 96d1e32 · 96d1e32
1 parent 9a49959
commit 96d1e32
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 12 deletions.
diff --git a/plugin/parts/steamdesktop/actionbutton.tsx b/plugin/parts/steamdesktop/actionbutton.tsx
@@ -1,4 +1,4 @@
-import { showContextMenu, sleep } from "@steambrew/client";
+import { findModuleExport, showContextMenu, sleep } from "@steambrew/client";
 
 import { RibbonButton, RibbonGameSectionButton } from "../../components/ribbon";
 import { classes } from "../../shared";
@@ -38,6 +38,10 @@ const mapCategoryLocTokens: Record<MobileCategory_t, string[]> = {
 	],
 };
 
+const CheckIcon = findModuleExport((e) =>
+	e.toString().includes("SVGIcon_Check"),
+);
+
 function StreamingContextMenu({ overview, onStreamingTargetSelected }) {
 	const bInGamepadUI = Config.IN_GAMEPADUI;
 	const bHasMobileCategories =
@@ -56,18 +60,19 @@ function StreamingContextMenu({ overview, onStreamingTargetSelected }) {
 						key={e.clientid}
 						pClient={e}
 						bIsLocalClient={overview.BIsPerClientDataLocal(e)}
+						bSelected={overview.selected_clientid === e.clientid}
 						onSelected={(t) => onStreamingTargetSelected(e, t)}
 					/>
 				))}
 			</ContextMenu>
 			{bHasMobileCategories && (
-				<>
+				<div>
 					<ContextMenuSeparator />
 					<RemotePlayAnywhereContextMenuItem
 						overview={overview}
 						onSelected={onRemotePlayItemSelected}
 					/>
-				</>
+				</div>
 			)}
 		</>
 	);
@@ -76,6 +81,7 @@ function StreamingContextMenu({ overview, onStreamingTargetSelected }) {
 function StreamingClientContextMenuItem({
 	pClient,
 	bIsLocalClient,
+	bSelected,
 	onSelected,
 }) {
 	let text = Localize("#StreamingClient_StreamFrom", pClient.client_name);
@@ -87,7 +93,9 @@ function StreamingClientContextMenuItem({
 
 	return (
 		<StreamingContextMenuItem onSelected={onSelected}>
-			{text}
+			<>
+				{bSelected && <CheckIcon />} {text}
+			</>
 		</StreamingContextMenuItem>
 	);
 }
@@ -121,12 +129,12 @@ function RemotePlayAnywhereContextMenuItem({ overview, onSelected }) {
 
 	return (
 		<StreamingContextMenuItem onSelected={onSelected}>
-			<>
+			<div>
 				<div>{strDevice}</div>
 				<div className={classes.appactionbutton.RemotePlayAnywhereDescription}>
 					{strLinkDesc}
 				</div>
-			</>
+			</div>
 		</StreamingContextMenuItem>
 	);
 }

diff --git a/theme/client/popups/contextmenus/contextmenu.scss b/theme/client/popups/contextmenus/contextmenu.scss
@@ -19,6 +19,8 @@
 }
 
 $icons: (
+	"Check": "context-menu-checkmark",
+	"DialogCheck": "context-menu-checkmark",
 	"PlusCircle": "add",
 	"Play": "play",
 );
@@ -71,6 +73,26 @@ $icons: (
 		}
 	}
 
+	&:has(.SVGIcon_Check, .SVGIcon_DialogCheck) {
+		--offset: -1px;
+		--size: 22px;
+
+		&::before {
+			position: absolute;
+			box-sizing: border-box;
+			top: var(--offset);
+			left: var(--offset);
+			width: var(--size);
+			height: var(--size);
+
+			@include contextmenu.item-active;
+
+			background-image: var(--icon), var(--contextmenu_item-gradient);
+			background-position: center;
+			border-radius: var(--border-radius);
+		}
+	}
+
 	&#active {
 		@include contextmenu.item-active;
 	}
@@ -80,6 +102,11 @@ $icons: (
 		--contextmenu_item-border: #d3d3d3;
 		--contextmenu_item-gradient-start: #f4f5f5;
 		--contextmenu_item-gradient-end: #e6e6e6;
+		--contextmenu_item-gradient: linear-gradient(
+			180deg,
+			var(--contextmenu_item-gradient-start),
+			var(--contextmenu_item-gradient-end)
+		);
 	}
 
 	&::before {

diff --git a/theme/client/popups/contextmenus/gamelistdropdown.scss b/theme/client/popups/contextmenus/gamelistdropdown.scss
@@ -26,6 +26,7 @@
 
 		background-color: transparent;
 		border-radius: var(--border-radius);
+		box-shadow: none;
 
 		position: absolute;
 		top: var(--offset);

diff --git a/theme/shared/extends/contextmenu.scss b/theme/shared/extends/contextmenu.scss
@@ -28,12 +28,6 @@
 	height: var(--icon-size);
 }
 
-@mixin item-active {
-	background: var(--contextmenu_item-gradient);
-	border: 1px solid var(--contextmenu_item-border);
-	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-}
-
 @mixin item {
 	color: var(--contextmenu_fg);
 	font-size: var(--font-size);
@@ -51,6 +45,27 @@
 	}
 }
 
+@mixin item-active {
+	background: var(--contextmenu_item-gradient);
+	border: 1px solid var(--contextmenu_item-border);
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+@mixin item-checkbox {
+	--offset: -1px;
+	--size: 22px;
+
+	@include item-active;
+
+	border-radius: var(--border-radius);
+
+	position: absolute;
+	top: var(--offset);
+	left: var(--offset);
+	width: var(--size);
+	height: var(--size);
+}
+
 @mixin separator {
 	border-top: 1px solid var(--contextmenu_separator-light);
 	box-shadow: 0 -1px var(--contextmenu_separator-dark);

diff --git a/theme/shared/icons.scss b/theme/shared/icons.scss
@@ -6,6 +6,7 @@
 	--icon-checkmark: icon("checkmark");
 	--icon-clock: icon("clock");
 	--icon-community: icon("community");
+	--icon-context-menu-checkmark: icon("context-menu-checkmark");
 	--icon-details: icon("details");
 	--icon-discussions: icon("discussions");
 	--icon-display: icon("display");