diff --git a/src/storage.ts b/src/storage.ts index 5d96e6b..25e520f 100644 --- a/src/storage.ts +++ b/src/storage.ts @@ -201,6 +201,7 @@ export interface WorkspaceStorage { commitDetails: { autolinksExpanded?: boolean; filesAsTree?: boolean; + dismissed?: string[]; }; }; diff --git a/src/webviews/apps/commitDetails/commitDetails.html b/src/webviews/apps/commitDetails/commitDetails.html index 7d67734..ef7a065 100644 --- a/src/webviews/apps/commitDetails/commitDetails.html +++ b/src/webviews/apps/commitDetails/commitDetails.html @@ -44,59 +44,113 @@
- - - - - - - - +
+ +
+

Lock to Sidebar

+

Drag and drop this component to the sidepanel to lock it into view.

+
+ + + + + + + + + + +
+
+
    +
  • + +
    • +
+ + + + + + + +

diff --git a/src/webviews/apps/commitDetails/commitDetails.scss b/src/webviews/apps/commitDetails/commitDetails.scss index 1dda73f..4758242 100644 --- a/src/webviews/apps/commitDetails/commitDetails.scss +++ b/src/webviews/apps/commitDetails/commitDetails.scss @@ -98,6 +98,26 @@ ul { max-width: 30rem; } +.svg-themed { + --svg-outline: var(--color-foreground--50); + --svg-foreground: var(--color-link-foreground--lighten-20); + --svg-overlay: var(--color-highlight--25); + + &__outline { + stroke: var(--svg-outline); + } + + &__view { + fill: var(--svg-overlay); + stroke: var(--svg-foreground); + } + + &__line { + stroke: var(--svg-foreground); + fill: var(--svg-foreground); + } +} + .switch { margin-left: auto; display: inline-flex; @@ -105,9 +125,11 @@ ul { border-radius: 0.25em; gap: 0.1rem; + .vscode-high-contrast &, .vscode-dark & { background-color: var(--color-background--lighten-075); } + .vscode-high-contrast-light &, .vscode-light & { background-color: var(--color-background--darken-075); } @@ -136,9 +158,11 @@ ul { &:hover { color: var(--vscode-foreground); text-decoration: none; + .vscode-high-contrast &, .vscode-dark & { background-color: var(--color-background--lighten-10); } + .vscode-high-contrast-light &, .vscode-light & { background-color: var(--color-background--darken-10); } @@ -146,9 +170,11 @@ ul { &.is-selected { color: var(--vscode-foreground); + .vscode-high-contrast &, .vscode-dark & { background-color: var(--color-background--lighten-15); } + .vscode-high-contrast-light &, .vscode-light & { background-color: var(--color-background--darken-15); } @@ -215,15 +241,73 @@ ul { } } +.commit-banner { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + padding: 1rem; + gap: 0.4rem; + font-size: 1.2rem; + border-radius: 0.3rem; + margin-bottom: 1rem; + + .vscode-high-contrast &, + .vscode-dark & { + background-color: var(--color-background--lighten-075); + } + + .vscode-high-contrast-light &, + .vscode-light & { + background-color: var(--color-background--darken-075); + } + + &__message { + flex-basis: 60%; + margin: { + left: 0.6rem; + right: 0.6rem; + } + + h2 { + font-weight: normal; + font-size: inherit; + margin: { + top: 0; + bottom: 0.4rem; + } + } + p { + margin: 0; + opacity: 0.5; + transition: font-size ease 100ms; + + @media (max-width: 350px) { + font-size: 0.88em; + } + } + } + + &__media { + min-width: 10rem; + flex-basis: 40%; + max-width: 12rem; + } + + &__icon { + flex: none; + + &:last-child { + transform: translateY(-0.4rem); + } + } +} + .commit-details { &__top { position: sticky; top: 0; z-index: 1; - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; padding: { top: 1rem; left: var(--gitlens-gutter-width); @@ -231,6 +315,13 @@ ul { bottom: 0.5rem; } background-color: var(--vscode-sideBar-background); + + &-menu { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + } } &__message { diff --git a/src/webviews/apps/commitDetails/commitDetails.ts b/src/webviews/apps/commitDetails/commitDetails.ts index 4b19ebf..5ac3da3 100644 --- a/src/webviews/apps/commitDetails/commitDetails.ts +++ b/src/webviews/apps/commitDetails/commitDetails.ts @@ -70,6 +70,7 @@ export class CommitDetailsApp extends App> { DOM.on('file-change-list-item', 'file-more-actions', e => this.onFileMoreActions(e.detail), ), + DOM.on('[data-action="dismiss-banner"]', 'click', e => this.onDismissBanner(e)), DOM.on('[data-action="commit-actions"]', 'click', e => this.onCommitActions(e)), DOM.on('[data-action="pick-commit"]', 'click', e => this.onPickCommit(e)), DOM.on('[data-action="search-commit"]', 'click', e => this.onSearchCommit(e)), @@ -126,6 +127,19 @@ export class CommitDetailsApp extends App> { } } + onDismissBanner(e: MouseEvent) { + const dismissed = this.state.preferences?.dismissed ?? []; + if (dismissed.includes('sidebar')) { + return; + } + dismissed.push('sidebar'); + this.state.preferences = { ...this.state.preferences, dismissed: dismissed }; + const parent = (e.target as HTMLElement)?.closest('[data-region="sidebar-banner"]') ?? undefined; + this.renderBanner(this.state as CommitState, parent); + + this.sendCommand(PreferencesCommandType, { dismissed: dismissed }); + } + private onTreeSetting(e: MouseEvent) { const isTree = (e.target as HTMLElement)?.getAttribute('data-switch-value') === 'list-tree'; if (!isTree === this.state.preferences?.filesAsTree) return; @@ -212,6 +226,7 @@ export class CommitDetailsApp extends App> { renderContent() { if (!this.renderCommit(this.state)) return; + this.renderBanner(this.state); this.renderActions(this.state); this.renderPin(this.state); this.renderSha(this.state); @@ -225,6 +240,17 @@ export class CommitDetailsApp extends App> { // } } + renderBanner(state: CommitState, target?: HTMLElement) { + if (!state.preferences?.dismissed?.includes('sidebar')) { + return; + } + + if (!target) { + target = document.querySelector('[data-region="sidebar-banner"]') ?? undefined; + } + target?.remove(); + } + renderActions(state: CommitState) { const isHiddenForUncommitted = state.selected?.sha === uncommittedSha ? 'true' : 'false'; for (const $el of document.querySelectorAll('[data-action-type="graph"],[data-action-type="more"]')) { diff --git a/src/webviews/commitDetails/commitDetailsWebviewView.ts b/src/webviews/commitDetails/commitDetailsWebviewView.ts index a3ef3f7..d2ca895 100644 --- a/src/webviews/commitDetails/commitDetailsWebviewView.ts +++ b/src/webviews/commitDetails/commitDetailsWebviewView.ts @@ -152,6 +152,7 @@ export class CommitDetailsWebviewView extends WebviewViewBase('commit/pin'); export interface PreferenceParams { autolinksExpanded?: boolean; filesAsTree?: boolean; + dismissed?: string[]; } export const PreferencesCommandType = new IpcCommandType('commit/preferences');