Skip to content

Commit 6852e9b

Browse files
eamodioeamodio
committed
Adds indicator dots & tooltips to welcome
1 parent e23f7e8 commit 6852e9b

File tree

5 files changed

+120
-45
lines changed

5 files changed

+120
-45
lines changed

‎src/webviews/apps/welcome/components/svg-blame.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@ export class BlameSvg extends LitElement {
66
static override styles = css`
77
:host {
88
position: relative;
9+
10+
--gl-svg-indicator-color: var(
11+
--vscode-activityBarBadge-background,
12+
dodgerblue
13+
); //color-mix(in srgb, var(--vscode-activityBarBadge-background) 90%, white);
14+
--gl-svg-indicator-size: 2.5;
15+
--gl-svg-indicator-pulse-size: 12; // calc(var(--gl-svg-indicator-size, 3) * 4);
916
}
1017
1118
:host svg:last-child {
@@ -183,6 +190,9 @@ export class BlameSvg extends LitElement {
183190
}
184191
}
185192
193+
:host([hovering]) {
194+
z-index: 1000;
195+
}
186196
:host([hovered][hovering]) .hover {
187197
animation-name: fadeInHover;
188198
}
@@ -201,6 +211,29 @@ export class BlameSvg extends LitElement {
201211
cursor: default;
202212
opacity: 0;
203213
}
214+
215+
circle.indicator {
216+
fill: var(--gl-svg-indicator-color);
217+
stroke: var(--gl-svg-indicator-color);
218+
stroke-width: 1;
219+
r: var(--gl-svg-indicator-size);
220+
pointer-events: none;
221+
}
222+
223+
circle.indicator--pulse {
224+
animation: 1.05s ease 0s infinite normal none running pulse;
225+
}
226+
227+
@keyframes pulse {
228+
0% {
229+
stroke-width: 1;
230+
opacity: 1;
231+
}
232+
100% {
233+
stroke-width: var(--gl-svg-indicator-pulse-size, 12);
234+
opacity: 0;
235+
}
236+
}
204237
`;
205238

206239
@property({ type: Boolean, reflect: true })
@@ -265,6 +298,8 @@ export class BlameSvg extends LitElement {
265298
<g class="line">
266299
<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
267300
.onMouseOver} @mouseout=${this.onMouseOut}>You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
301+
<circle class="indicator indicator--pulse" cx="260" cy="20" />
302+
<circle class="indicator" cx="260" cy="20" />
268303
</g>
269304
<!-- <g class="line">
270305
<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>

‎src/webviews/apps/welcome/components/svg-editor-toolbar.ts

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ import type { RevisionNavigationSvg } from './svg-revision-navigation';
66
@customElement('gk-editor-toolbar-svg')
77
export class EditorToolbarSvg extends LitElement {
88
static override styles = css`
9+
:host {
10+
--gl-svg-indicator-color: var(
11+
--vscode-activityBarBadge-background,
12+
dodgerblue
13+
); //color-mix(in srgb, var(--vscode-activityBarBadge-background) 90%, white);
14+
--gl-svg-indicator-size: 2.5;
15+
--gl-svg-indicator-pulse-size: 12; // calc(var(--gl-svg-indicator-size, 3) * 4);
16+
}
17+
918
:host > svg {
1019
display: block;
1120
max-width: 69.2rem;
@@ -58,49 +67,36 @@ export class EditorToolbarSvg extends LitElement {
5867
fill: var(--vscode-menu-background);
5968
}
6069
61-
@keyframes wiggle {
62-
0%,
63-
8%,
64-
100% {
65-
transform: rotate(0) scale(1);
66-
}
67-
68-
1%,
69-
4% {
70-
transform: rotate(0.02turn) scale(var(--wiggle-scale-1));
71-
}
72-
73-
2%,
74-
6% {
75-
transform: rotate(-0.02turn) scale(var(--wiggle-scale-2));
76-
}
77-
}
78-
79-
.icon__annotations {
80-
--wiggle-scale-1: 1.14;
81-
--wiggle-scale-2: 1.28;
82-
83-
transform-origin: 60%;
84-
animation: wiggle 5s ease-in-out 2s infinite;
85-
animation-timing-function: steps(8);
86-
}
87-
88-
.icon__revision {
89-
--wiggle-scale-1: 1.14;
90-
--wiggle-scale-2: 1.28;
91-
92-
transform-origin: 5%;
93-
animation: wiggle 5s ease-in-out 4s infinite;
94-
animation-timing-function: steps(8);
95-
}
96-
9770
:host([revision-toggled]) .icon__revision-bg {
9871
fill: var(--color-foreground);
9972
opacity: 0.2;
10073
}
10174
:host(:not([revision-toggled])) .icon__revision-bg {
10275
fill: none;
10376
}
77+
78+
circle.indicator {
79+
fill: var(--gl-svg-indicator-color);
80+
stroke: var(--gl-svg-indicator-color);
81+
stroke-width: 1;
82+
r: var(--gl-svg-indicator-size);
83+
pointer-events: none;
84+
}
85+
86+
circle.indicator--pulse {
87+
animation: 1.05s ease 0s infinite normal none running pulse;
88+
}
89+
90+
@keyframes pulse {
91+
0% {
92+
stroke-width: 1;
93+
opacity: 1;
94+
}
95+
100% {
96+
stroke-width: var(--gl-svg-indicator-pulse-size, 12);
97+
opacity: 0;
98+
}
99+
}
104100
`;
105101

106102
@property({ type: Boolean, reflect: true })
@@ -172,20 +168,36 @@ export class EditorToolbarSvg extends LitElement {
172168
fill="transparent"
173169
stroke="none"
174170
@click=${this.onClick}
175-
></rect>`
171+
>
172+
<title>${
173+
this.revisionToggled
174+
? 'Click to reset simulated revision navigation below\nShowing diff with revision (simulated)'
175+
: 'Click to simulate revision navigation below\nShowing original (simulated)'
176+
}</title>
177+
</rect>
178+
<circle class="indicator indicator--pulse" cx="16" cy="2" />
179+
<circle class="indicator" cx="16" cy="2" />`
176180
: ''}
177181
${this.annotations
178182
? svg`<rect
179183
class="interactive"
180184
data-feature="annotations"
181-
x="80"
185+
x="75"
182186
y="0"
183187
width="16"
184188
height="16"
185189
fill="transparent"
186190
stroke="none"
187191
@click=${this.onClick}
188-
></rect>`
192+
>
193+
<title>${
194+
this.annotationsToggled
195+
? 'Click to simulate toggling the annotation below\nFile annotations are on (simulated)'
196+
: 'Click to simulate toggling the annotation below\nFile annotations are off (simulated)'
197+
}</title>
198+
</rect>
199+
<circle class="indicator indicator--pulse" cx="90" cy="2" />
200+
<circle class="indicator" cx="90" cy="2" />`
189201
: ''}
190202
</svg>
191203
`;

‎src/webviews/apps/welcome/welcome.html

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,29 @@ <h2 class="h-large-mt-0">Powerful Features</h2>
123123

124124
<section>
125125
<h3 class="checkbox-group sticky">
126-
<label class="checkbox" for="inline-blame"
127-
><input type="checkbox" id="inline-blame" data-feature="blame" checked />Inline
128-
Blame</label
126+
<gl-tooltip hoist placement="top">
127+
<label class="checkbox" for="inline-blame"
128+
><gl-indicator pulse></gl-indicator
129+
><input type="checkbox" id="inline-blame" data-feature="blame" checked />Inline
130+
Blame</label
131+
>
132+
<div slot="content">
133+
Enables or disables Inline Blame
134+
<hr />
135+
Toggle to see it in action below
136+
</div></gl-tooltip
129137
><span>and</span
130-
><label class="checkbox" for="codelens"
131-
><input type="checkbox" id="codelens" data-feature="codelens" checked />Git
132-
CodeLens</label
138+
><gl-tooltip hoist placement="top"
139+
><label class="checkbox" for="codelens"
140+
><gl-indicator pulse></gl-indicator
141+
><input type="checkbox" id="codelens" data-feature="codelens" checked />Git
142+
CodeLens</label
143+
>
144+
<div slot="content">
145+
Enables or disables Git CodeLens
146+
<hr />
147+
Toggle to see it in action below
148+
</div></gl-tooltip
133149
>
134150
</h3>
135151
<p>

‎src/webviews/apps/welcome/welcome.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
// normalize type
1717
body {
1818
line-height: 1.4;
19+
--gl-indicator-size: 0.6rem;
1920
}
2021

2122
a {
@@ -570,3 +571,13 @@ gl-feature-badge.super.small {
570571
--gl-feature-badge-font-size: 7px;
571572
margin-left: 0.4rem;
572573
}
574+
575+
gl-indicator {
576+
position: absolute;
577+
top: -15px;
578+
}
579+
580+
hr {
581+
border: none;
582+
border-top: 1px solid var(--color-foreground--25);
583+
}

‎src/webviews/apps/welcome/welcome.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import './components/svg-revision-navigation';
2323
import './components/svg-timeline';
2424
import './components/svg-workspaces';
2525
import './components/video-button';
26+
import '../shared/components/indicators/indicator';
2627

2728
export class WelcomeApp extends App<State> {
2829
constructor() {

0 commit comments

Comments
 (0)