From 4f0567f17fce7734f557c36163d5b220ad0461e8 Mon Sep 17 00:00:00 2001
From: Keith Daulton <kdaulton@d13design.com>
Date: Thu, 6 Oct 2022 23:20:43 -0400
Subject: [PATCH] Adds hover state to stepped sections in home view

---
 .../apps/home/components/stepped-section.ts        | 48 +++++++++++++++-------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/webviews/apps/home/components/stepped-section.ts b/src/webviews/apps/home/components/stepped-section.ts
index 2fb416d..5d722c9 100644
--- a/src/webviews/apps/home/components/stepped-section.ts
+++ b/src/webviews/apps/home/components/stepped-section.ts
@@ -19,9 +19,18 @@ const template = html<SteppedSection>`<template role="region">
 	<div class="content${x => (x.completed ? ' is-hidden' : '')}" id="content" aria-labelledby="button">
 		<slot></slot>
 	</div>
-	<span class="checkbox"
-		><code-icon icon="${x => (x.completed ? 'pass-filled' : 'circle-large-outline')}"></code-icon
-	></span>
+	<span class="checkline">
+		<span
+			class="checkbox"
+			title="${x => (x.completed ? 'Uncheck step' : 'Check step')}"
+			@click="${(x, c) => x.handleClick(c.event)}"
+			><code-icon
+				class="check-icon"
+				icon="${x => (x.completed ? 'pass-filled' : 'circle-large-outline')}"
+			></code-icon
+			><code-icon class="check-hover-icon" icon="${x => (x.completed ? 'pass-filled' : 'pass')}"></code-icon
+		></span>
+	</span>
 </template>`;
 
 const styles = css`
@@ -56,23 +65,14 @@ const styles = css`
 		outline-offset: 0.2rem;
 	}
 
-	.checkbox {
+	.checkline {
 		position: relative;
 		grid-column: 1;
 		grid-row: 1 / span 2;
 		color: var(--vscode-textLink-foreground);
 	}
 
-	/*
-	.checkbox code-icon {
-		border-radius: 50%;
-	}
-	.heading:hover ~ .checkbox code-icon {
-		background-color: var(--vscode-textLink-foreground);
-	}
-	*/
-
-	:host(:not(:last-of-type)) .checkbox:after {
+	:host(:not(:last-of-type)) .checkline:after {
 		content: '';
 		position: absolute;
 		border-left: 0.1rem solid currentColor;
@@ -84,6 +84,26 @@ const styles = css`
 		opacity: 0.3;
 	}
 
+	.checkbox {
+		cursor: pointer;
+	}
+	.checkbox code-icon {
+		pointer-events: none;
+	}
+
+	.heading:hover ~ .checkline .check-icon,
+	.checkbox:hover .check-icon {
+		display: none;
+	}
+
+	.check-hover-icon {
+		display: none;
+	}
+	.heading:hover ~ .checkline .check-hover-icon,
+	.checkbox:hover .check-hover-icon {
+		display: unset;
+	}
+
 	.content {
 		margin-top: 1rem;
 	}