Adds indicator dots & tooltips to welcome

gitkraken · May 12, 2024 · 6852e9b · 6852e9b
1 parent e23f7e8
commit 6852e9b
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 45 deletions.
diff --git a/src/webviews/apps/welcome/components/svg-blame.ts b/src/webviews/apps/welcome/components/svg-blame.ts
@@ -6,6 +6,13 @@ export class BlameSvg extends LitElement {
 	static override styles = css`
 		:host {
 			position: relative;
+
+			--gl-svg-indicator-color: var(
+				--vscode-activityBarBadge-background,
+				dodgerblue
+			); //color-mix(in srgb, var(--vscode-activityBarBadge-background) 90%, white);
+			--gl-svg-indicator-size: 2.5;
+			--gl-svg-indicator-pulse-size: 12; // calc(var(--gl-svg-indicator-size, 3) * 4);
 		}
 
 		:host svg:last-child {
@@ -183,6 +190,9 @@ export class BlameSvg extends LitElement {
 			}
 		}
 
+		:host([hovering]) {
+			z-index: 1000;
+		}
 		:host([hovered][hovering]) .hover {
 			animation-name: fadeInHover;
 		}
@@ -201,6 +211,29 @@ export class BlameSvg extends LitElement {
 			cursor: default;
 			opacity: 0;
 		}
+
+		circle.indicator {
+			fill: var(--gl-svg-indicator-color);
+			stroke: var(--gl-svg-indicator-color);
+			stroke-width: 1;
+			r: var(--gl-svg-indicator-size);
+			pointer-events: none;
+		}
+
+		circle.indicator--pulse {
+			animation: 1.05s ease 0s infinite normal none running pulse;
+		}
+
+		@keyframes pulse {
+			0% {
+				stroke-width: 1;
+				opacity: 1;
+			}
+			100% {
+				stroke-width: var(--gl-svg-indicator-pulse-size, 12);
+				opacity: 0;
+			}
+		}
 	`;
 
 	@property({ type: Boolean, reflect: true })
@@ -265,6 +298,8 @@ export class BlameSvg extends LitElement {
 				<g class="line">
 					<text y="34"><tspan x="7" class="line-number">13</tspan><tspan x="38" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan><tspan dx="24" class="blame" @mouseover=${this
 				.onMouseOver} @mouseout=${this.onMouseOut}>You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
+					<circle class="indicator indicator--pulse" cx="260" cy="20" />
+					<circle class="indicator" cx="260" cy="20" />
 				</g>
 				<!-- <g class="line">
 					<text y="34"><tspan x="7" class="line-number">12</tspan><tspan x="38" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan><tspan class="cursor">|</tspan><tspan dx="24" class="blame" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>

diff --git a/src/webviews/apps/welcome/components/svg-editor-toolbar.ts b/src/webviews/apps/welcome/components/svg-editor-toolbar.ts
@@ -6,6 +6,15 @@ import type { RevisionNavigationSvg } from './svg-revision-navigation';
 @customElement('gk-editor-toolbar-svg')
 export class EditorToolbarSvg extends LitElement {
 	static override styles = css`
+		:host {
+			--gl-svg-indicator-color: var(
+				--vscode-activityBarBadge-background,
+				dodgerblue
+			); //color-mix(in srgb, var(--vscode-activityBarBadge-background) 90%, white);
+			--gl-svg-indicator-size: 2.5;
+			--gl-svg-indicator-pulse-size: 12; // calc(var(--gl-svg-indicator-size, 3) * 4);
+		}
+
 		:host > svg {
 			display: block;
 			max-width: 69.2rem;
@@ -58,49 +67,36 @@ export class EditorToolbarSvg extends LitElement {
 			fill: var(--vscode-menu-background);
 		}
 
-		@keyframes wiggle {
-			0%,
-			8%,
-			100% {
-				transform: rotate(0) scale(1);
-			}
-
-			1%,
-			4% {
-				transform: rotate(0.02turn) scale(var(--wiggle-scale-1));
-			}
-
-			2%,
-			6% {
-				transform: rotate(-0.02turn) scale(var(--wiggle-scale-2));
-			}
-		}
-
-		.icon__annotations {
-			--wiggle-scale-1: 1.14;
-			--wiggle-scale-2: 1.28;
-
-			transform-origin: 60%;
-			animation: wiggle 5s ease-in-out 2s infinite;
-			animation-timing-function: steps(8);
-		}
-
-		.icon__revision {
-			--wiggle-scale-1: 1.14;
-			--wiggle-scale-2: 1.28;
-
-			transform-origin: 5%;
-			animation: wiggle 5s ease-in-out 4s infinite;
-			animation-timing-function: steps(8);
-		}
-
 		:host([revision-toggled]) .icon__revision-bg {
 			fill: var(--color-foreground);
 			opacity: 0.2;
 		}
 		:host(:not([revision-toggled])) .icon__revision-bg {
 			fill: none;
 		}
+
+		circle.indicator {
+			fill: var(--gl-svg-indicator-color);
+			stroke: var(--gl-svg-indicator-color);
+			stroke-width: 1;
+			r: var(--gl-svg-indicator-size);
+			pointer-events: none;
+		}
+
+		circle.indicator--pulse {
+			animation: 1.05s ease 0s infinite normal none running pulse;
+		}
+
+		@keyframes pulse {
+			0% {
+				stroke-width: 1;
+				opacity: 1;
+			}
+			100% {
+				stroke-width: var(--gl-svg-indicator-pulse-size, 12);
+				opacity: 0;
+			}
+		}
 	`;
 
 	@property({ type: Boolean, reflect: true })
@@ -172,20 +168,36 @@ export class EditorToolbarSvg extends LitElement {
 						fill="transparent"
 						stroke="none"
 						@click=${this.onClick}
-				  ></rect>`
+				  >
+				  	<title>${
+						this.revisionToggled
+							? 'Click to reset simulated revision navigation below\nShowing diff with revision (simulated)'
+							: 'Click to simulate revision navigation below\nShowing original (simulated)'
+					}</title>
+				  </rect>
+				  <circle class="indicator indicator--pulse" cx="16" cy="2" />
+				  <circle class="indicator" cx="16" cy="2" />`
 				: ''}
 				${this.annotations
 				? svg`<rect
 						class="interactive"
 						data-feature="annotations"
-						x="80"
+						x="75"
 						y="0"
 						width="16"
 						height="16"
 						fill="transparent"
 						stroke="none"
 						@click=${this.onClick}
-				  ></rect>`
+				  >
+				  	<title>${
+						this.annotationsToggled
+							? 'Click to simulate toggling the annotation below\nFile annotations are on (simulated)'
+							: 'Click to simulate toggling the annotation below\nFile annotations are off (simulated)'
+					}</title>
+				  </rect>
+				  <circle class="indicator indicator--pulse" cx="90" cy="2" />
+				  <circle class="indicator" cx="90" cy="2" />`
 				: ''}
 			</svg>
 		`;

diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
@@ -123,13 +123,29 @@ <h2 class="h-large-mt-0">Powerful Features</h2>
 
 					<section>
 						<h3 class="checkbox-group sticky">
-							<label class="checkbox" for="inline-blame"
-								><input type="checkbox" id="inline-blame" data-feature="blame" checked />Inline
-								Blame</label
+							<gl-tooltip hoist placement="top">
+								<label class="checkbox" for="inline-blame"
+									><gl-indicator pulse></gl-indicator
+									><input type="checkbox" id="inline-blame" data-feature="blame" checked />Inline
+									Blame</label
+								>
+								<div slot="content">
+									Enables or disables Inline Blame
+									<hr />
+									Toggle to see it in action below
+								</div></gl-tooltip
 							><span>and</span
-							><label class="checkbox" for="codelens"
-								><input type="checkbox" id="codelens" data-feature="codelens" checked />Git
-								CodeLens</label
+							><gl-tooltip hoist placement="top"
+								><label class="checkbox" for="codelens"
+									><gl-indicator pulse></gl-indicator
+									><input type="checkbox" id="codelens" data-feature="codelens" checked />Git
+									CodeLens</label
+								>
+								<div slot="content">
+									Enables or disables Git CodeLens
+									<hr />
+									Toggle to see it in action below
+								</div></gl-tooltip
 							>
 						</h3>
 						<p>

diff --git a/src/webviews/apps/welcome/welcome.scss b/src/webviews/apps/welcome/welcome.scss
@@ -16,6 +16,7 @@
 // normalize type
 body {
 	line-height: 1.4;
+	--gl-indicator-size: 0.6rem;
 }
 
 a {
@@ -570,3 +571,13 @@ gl-feature-badge.super.small {
 	--gl-feature-badge-font-size: 7px;
 	margin-left: 0.4rem;
 }
+
+gl-indicator {
+	position: absolute;
+	top: -15px;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid var(--color-foreground--25);
+}
diff --git a/src/webviews/apps/welcome/welcome.ts b/src/webviews/apps/welcome/welcome.ts
@@ -23,6 +23,7 @@ import './components/svg-revision-navigation';
 import './components/svg-timeline';
 import './components/svg-workspaces';
 import './components/video-button';
+import '../shared/components/indicators/indicator';
 
 export class WelcomeApp extends App<State> {
 	constructor() {