Skip to content

Commit 8c04ce4

Browse files
d13d13
committed
Adds sidebar banner to commit details
1 parent e9dccef commit 8c04ce4

File tree

6 files changed

+239
-58
lines changed

6 files changed

+239
-58
lines changed

‎src/storage.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ export interface WorkspaceStorage {
201201
commitDetails: {
202202
autolinksExpanded?: boolean;
203203
filesAsTree?: boolean;
204+
dismissed?: string[];
204205
};
205206
};
206207

‎src/webviews/apps/commitDetails/commitDetails.html‎

Lines changed: 107 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -44,59 +44,113 @@ <h2>Best practice</h2>
4444
</div>
4545
<main class="commit-details commit-detail-panel__main" id="main" tabindex="-1">
4646
<div class="commit-details__top">
47-
<ul class="commit-details__authors" aria-label="Authors">
48-
<li class="commit-details__author" data-region="author">
49-
<skeleton-loader></skeleton-loader>
50-
</li>
51-
</ul>
52-
<a
53-
class="commit-details__commit-action"
54-
href="#"
55-
data-action="pin"
56-
aria-label="Pin Commit to View"
57-
title="Pin Commit to View"
58-
><code-icon icon="pin" data-region="commit-pin"></code-icon
59-
></a>
60-
<a
61-
class="commit-details__commit-action"
62-
href="#"
63-
data-action="commit-actions"
64-
data-action-type="sha"
65-
aria-label="Copy SHA
66-
[⌥] Pick Commit..."
67-
title="Copy SHA
68-
[⌥] Pick Commit..."
69-
>
70-
<code-icon icon="git-commit"></code-icon>
71-
<span class="commit-details__sha" data-region="shortsha"></span
72-
></a>
73-
<a
74-
class="commit-details__commit-action"
75-
href="#"
76-
data-action="commit-actions"
77-
data-action-type="scm"
78-
aria-label="Open SCM view"
79-
title="Open SCM view"
80-
><code-icon icon="source-control"></code-icon
81-
></a>
82-
<a
83-
class="commit-details__commit-action"
84-
href="#"
85-
data-action="commit-actions"
86-
data-action-type="graph"
87-
aria-label="Open in Commit Graph"
88-
title="Open in Commit Graph"
89-
><code-icon icon="graph"></code-icon
90-
></a>
91-
<a
92-
class="commit-details__commit-action"
93-
href="#"
94-
data-action="commit-actions"
95-
data-action-type="more"
96-
aria-label="Show Commit Actions"
97-
title="Show Commit Actions"
98-
><code-icon icon="kebab-vertical"></code-icon
99-
></a>
47+
<div class="commit-banner" data-region="sidebar-banner">
48+
<code-icon class="commit-banner__icon" icon="layout-sidebar-right"></code-icon>
49+
<div class="commit-banner__message">
50+
<h2>Lock to Sidebar</h2>
51+
<p>Drag and drop this component to the sidepanel to lock it into view.</p>
52+
</div>
53+
<svg
54+
class="svg-themed commit-banner__media"
55+
fill="none"
56+
xmlns="http://www.w3.org/2000/svg"
57+
viewBox="0 0 101 49"
58+
>
59+
<g opacity=".2" stroke="#E6E8FA" class="svg-themed__outline">
60+
<rect x=".5" y=".5" width="99.45" height="48" rx="2.5" />
61+
<path d="M82 0v49M15.66 0v49M1.23 35.02h15.92" />
62+
</g>
63+
<rect
64+
x="6.5"
65+
y="29.5"
66+
width="19"
67+
height="14"
68+
rx=".5"
69+
fill="#2E3346"
70+
stroke="#91D3FF"
71+
class="svg-themed__view"
72+
/>
73+
<rect
74+
x="85.5"
75+
y="4.5"
76+
width="11"
77+
height="41"
78+
rx=".5"
79+
fill="#2E3346"
80+
stroke="#91D3FF"
81+
stroke-dasharray="2 2"
82+
class="svg-themed__view"
83+
/>
84+
<path
85+
d="M22.33 31a2.67 2.67 0 1 0 5.34 0 2.67 2.67 0 0 0-5.34 0ZM76 7l-5.09-2.73.18 5.77L76 7ZM25.42 31.28c4.91-7.46 20.77-22.07 46.1-23.64l-.05-1c-25.7 1.59-41.82 16.4-46.89 24.08l.84.56Z"
86+
fill="#91D3FF"
87+
class="svg-themed__line"
88+
/>
89+
</svg>
90+
<a
91+
class="commit-banner__icon commit-details__commit-action"
92+
href="#"
93+
data-action="dismiss-banner"
94+
aria-label="Dismiss banner"
95+
title="Dismiss banner"
96+
><code-icon icon="chrome-close"></code-icon
97+
></a>
98+
</div>
99+
<div class="commit-details__top-menu">
100+
<ul class="commit-details__authors" aria-label="Authors">
101+
<li class="commit-details__author" data-region="author">
102+
<skeleton-loader></skeleton-loader>
103+
</li>
104+
</ul>
105+
<a
106+
class="commit-details__commit-action"
107+
href="#"
108+
data-action="pin"
109+
aria-label="Pin Commit to View"
110+
title="Pin Commit to View"
111+
><code-icon icon="pin" data-region="commit-pin"></code-icon
112+
></a>
113+
<a
114+
class="commit-details__commit-action"
115+
href="#"
116+
data-action="commit-actions"
117+
data-action-type="sha"
118+
aria-label="Copy SHA
119+
[⌥] Pick Commit..."
120+
title="Copy SHA
121+
[⌥] Pick Commit..."
122+
>
123+
<code-icon icon="git-commit"></code-icon>
124+
<span class="commit-details__sha" data-region="shortsha"></span
125+
></a>
126+
<a
127+
class="commit-details__commit-action"
128+
href="#"
129+
data-action="commit-actions"
130+
data-action-type="scm"
131+
aria-label="Open SCM view"
132+
title="Open SCM view"
133+
><code-icon icon="source-control"></code-icon
134+
></a>
135+
<a
136+
class="commit-details__commit-action"
137+
href="#"
138+
data-action="commit-actions"
139+
data-action-type="graph"
140+
aria-label="Open in Commit Graph"
141+
title="Open in Commit Graph"
142+
><code-icon icon="graph"></code-icon
143+
></a>
144+
<a
145+
class="commit-details__commit-action"
146+
href="#"
147+
data-action="commit-actions"
148+
data-action-type="more"
149+
aria-label="Show Commit Actions"
150+
title="Show Commit Actions"
151+
><code-icon icon="kebab-vertical"></code-icon
152+
></a>
153+
</div>
100154
</div>
101155
<div class="commit-details__message">
102156
<p class="commit-details__message-text" data-region="message">

‎src/webviews/apps/commitDetails/commitDetails.scss‎

Lines changed: 95 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,16 +98,38 @@ ul {
9898
max-width: 30rem;
9999
}
100100

101+
.svg-themed {
102+
--svg-outline: var(--color-foreground--50);
103+
--svg-foreground: var(--color-link-foreground--lighten-20);
104+
--svg-overlay: var(--color-highlight--25);
105+
106+
&__outline {
107+
stroke: var(--svg-outline);
108+
}
109+
110+
&__view {
111+
fill: var(--svg-overlay);
112+
stroke: var(--svg-foreground);
113+
}
114+
115+
&__line {
116+
stroke: var(--svg-foreground);
117+
fill: var(--svg-foreground);
118+
}
119+
}
120+
101121
.switch {
102122
margin-left: auto;
103123
display: inline-flex;
104124
flex-direction: row;
105125
border-radius: 0.25em;
106126
gap: 0.1rem;
107127

128+
.vscode-high-contrast &,
108129
.vscode-dark & {
109130
background-color: var(--color-background--lighten-075);
110131
}
132+
.vscode-high-contrast-light &,
111133
.vscode-light & {
112134
background-color: var(--color-background--darken-075);
113135
}
@@ -136,19 +158,23 @@ ul {
136158
&:hover {
137159
color: var(--vscode-foreground);
138160
text-decoration: none;
161+
.vscode-high-contrast &,
139162
.vscode-dark & {
140163
background-color: var(--color-background--lighten-10);
141164
}
165+
.vscode-high-contrast-light &,
142166
.vscode-light & {
143167
background-color: var(--color-background--darken-10);
144168
}
145169
}
146170

147171
&.is-selected {
148172
color: var(--vscode-foreground);
173+
.vscode-high-contrast &,
149174
.vscode-dark & {
150175
background-color: var(--color-background--lighten-15);
151176
}
177+
.vscode-high-contrast-light &,
152178
.vscode-light & {
153179
background-color: var(--color-background--darken-15);
154180
}
@@ -215,22 +241,87 @@ ul {
215241
}
216242
}
217243

244+
.commit-banner {
245+
display: flex;
246+
flex-direction: row;
247+
align-items: flex-start;
248+
justify-content: space-between;
249+
padding: 1rem;
250+
gap: 0.4rem;
251+
font-size: 1.2rem;
252+
border-radius: 0.3rem;
253+
margin-bottom: 1rem;
254+
255+
.vscode-high-contrast &,
256+
.vscode-dark & {
257+
background-color: var(--color-background--lighten-075);
258+
}
259+
260+
.vscode-high-contrast-light &,
261+
.vscode-light & {
262+
background-color: var(--color-background--darken-075);
263+
}
264+
265+
&__message {
266+
flex-basis: 60%;
267+
margin: {
268+
left: 0.6rem;
269+
right: 0.6rem;
270+
}
271+
272+
h2 {
273+
font-weight: normal;
274+
font-size: inherit;
275+
margin: {
276+
top: 0;
277+
bottom: 0.4rem;
278+
}
279+
}
280+
p {
281+
margin: 0;
282+
opacity: 0.5;
283+
transition: font-size ease 100ms;
284+
285+
@media (max-width: 350px) {
286+
font-size: 0.88em;
287+
}
288+
}
289+
}
290+
291+
&__media {
292+
min-width: 10rem;
293+
flex-basis: 40%;
294+
max-width: 12rem;
295+
}
296+
297+
&__icon {
298+
flex: none;
299+
300+
&:last-child {
301+
transform: translateY(-0.4rem);
302+
}
303+
}
304+
}
305+
218306
.commit-details {
219307
&__top {
220308
position: sticky;
221309
top: 0;
222310
z-index: 1;
223-
display: flex;
224-
flex-direction: row;
225-
align-items: flex-start;
226-
justify-content: space-between;
227311
padding: {
228312
top: 1rem;
229313
left: var(--gitlens-gutter-width);
230314
right: var(--gitlens-scrollbar-gutter-width);
231315
bottom: 0.5rem;
232316
}
233317
background-color: var(--vscode-sideBar-background);
318+
319+
&-menu {
320+
display: flex;
321+
flex-direction: row;
322+
align-items: flex-start;
323+
justify-content: space-between;
324+
}
234325
}
235326

236327
&__message {

‎src/webviews/apps/commitDetails/commitDetails.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export class CommitDetailsApp extends App<Serialized<State>> {
7070
DOM.on<FileChangeListItem, FileChangeListItemDetail>('file-change-list-item', 'file-more-actions', e =>
7171
this.onFileMoreActions(e.detail),
7272
),
73+
DOM.on('[data-action="dismiss-banner"]', 'click', e => this.onDismissBanner(e)),
7374
DOM.on('[data-action="commit-actions"]', 'click', e => this.onCommitActions(e)),
7475
DOM.on('[data-action="pick-commit"]', 'click', e => this.onPickCommit(e)),
7576
DOM.on('[data-action="search-commit"]', 'click', e => this.onSearchCommit(e)),
@@ -126,6 +127,19 @@ export class CommitDetailsApp extends App<Serialized<State>> {
126127
}
127128
}
128129

130+
onDismissBanner(e: MouseEvent) {
131+
const dismissed = this.state.preferences?.dismissed ?? [];
132+
if (dismissed.includes('sidebar')) {
133+
return;
134+
}
135+
dismissed.push('sidebar');
136+
this.state.preferences = { ...this.state.preferences, dismissed: dismissed };
137+
const parent = (e.target as HTMLElement)?.closest<HTMLElement>('[data-region="sidebar-banner"]') ?? undefined;
138+
this.renderBanner(this.state as CommitState, parent);
139+
140+
this.sendCommand(PreferencesCommandType, { dismissed: dismissed });
141+
}
142+
129143
private onTreeSetting(e: MouseEvent) {
130144
const isTree = (e.target as HTMLElement)?.getAttribute('data-switch-value') === 'list-tree';
131145
if (!isTree === this.state.preferences?.filesAsTree) return;
@@ -212,6 +226,7 @@ export class CommitDetailsApp extends App<Serialized<State>> {
212226
renderContent() {
213227
if (!this.renderCommit(this.state)) return;
214228

229+
this.renderBanner(this.state);
215230
this.renderActions(this.state);
216231
this.renderPin(this.state);
217232
this.renderSha(this.state);
@@ -225,6 +240,17 @@ export class CommitDetailsApp extends App<Serialized<State>> {
225240
// }
226241
}
227242

243+
renderBanner(state: CommitState, target?: HTMLElement) {
244+
if (!state.preferences?.dismissed?.includes('sidebar')) {
245+
return;
246+
}
247+
248+
if (!target) {
249+
target = document.querySelector<HTMLElement>('[data-region="sidebar-banner"]') ?? undefined;
250+
}
251+
target?.remove();
252+
}
253+
228254
renderActions(state: CommitState) {
229255
const isHiddenForUncommitted = state.selected?.sha === uncommittedSha ? 'true' : 'false';
230256
for (const $el of document.querySelectorAll('[data-action-type="graph"],[data-action-type="more"]')) {

0 commit comments

Comments
 (0)