Eric Amodio
3 years ago
22 changed files with 1995 additions and 24 deletions
Unified View
Diff Options
-
+29 -1package.json
-
+1 -0src/constants.ts
-
+15 -0src/container.ts
-
+2 -0src/features.ts
-
+44 -0src/premium/webviews/timeline/protocol.ts
-
+205 -0src/premium/webviews/timeline/timelineWebview.ts
-
+218 -0src/premium/webviews/timeline/timelineWebviewView.ts
-
+5 -0src/subscription.ts
-
+490 -0src/webviews/apps/premium/timeline/chart.scss
-
+331 -0src/webviews/apps/premium/timeline/chart.ts
-
+18 -0src/webviews/apps/premium/timeline/partials/state.free-preview-expired.html
-
+20 -0src/webviews/apps/premium/timeline/partials/state.free.html
-
+10 -0src/webviews/apps/premium/timeline/partials/state.plus-trial-expired.html
-
+11 -0src/webviews/apps/premium/timeline/partials/state.verify-email.html
-
+5 -0src/webviews/apps/premium/timeline/plugins.d.ts
-
+59 -0src/webviews/apps/premium/timeline/timeline.html
-
+165 -0src/webviews/apps/premium/timeline/timeline.scss
-
+171 -0src/webviews/apps/premium/timeline/timeline.ts
-
+22 -16src/webviews/apps/shared/theme.ts
-
+1 -0src/webviews/protocol.ts
-
+3 -1webpack.config.js
-
+170 -6yarn.lock
+ 29
- 1
package.json
View File
+ 1
- 0
src/constants.ts
View File
+ 15
- 0
src/container.ts
View File
+ 2
- 0
src/features.ts
View File
+ 44
- 0
src/premium/webviews/timeline/protocol.ts
View File
| @ -0,0 +1,44 @@ | |||||
| import type { FeatureAccess } from '../../../features'; | |||||
| import { IpcCommandType, IpcNotificationType } from '../../../webviews/protocol'; | |||||
| export interface State { | |||||
| dataset?: Commit[]; | |||||
| period: Period; | |||||
| title: string; | |||||
| uri?: string; | |||||
| dateFormat: string; | |||||
| access: FeatureAccess; | |||||
| } | |||||
| export interface Commit { | |||||
| commit: string; | |||||
| author: string; | |||||
| date: string; | |||||
| message: string; | |||||
| additions: number; | |||||
| deletions: number; | |||||
| sort: number; | |||||
| } | |||||
| export type Period = `${number}|${'D' | 'M' | 'Y'}`; | |||||
| export interface DidChangeStateParams { | |||||
| state: State; | |||||
| } | |||||
| export const DidChangeStateNotificationType = new IpcNotificationType<DidChangeStateParams>('timeline/data/didChange'); | |||||
| export interface OpenDataPointParams { | |||||
| data?: { | |||||
| id: string; | |||||
| selected: boolean; | |||||
| }; | |||||
| } | |||||
| export const OpenDataPointCommandType = new IpcCommandType<OpenDataPointParams>('timeline/point/click'); | |||||
| export interface UpdatePeriodParams { | |||||
| period: Period; | |||||
| } | |||||
| export const UpdatePeriodCommandType = new IpcCommandType<UpdatePeriodParams>('timeline/period/update'); | |||||
+ 205
- 0
src/premium/webviews/timeline/timelineWebview.ts
View File
| @ -0,0 +1,205 @@ | |||||
| 'use strict'; | |||||
| import { commands, ProgressLocation, TextEditor, window } from 'vscode'; | |||||
| import { ShowQuickCommitCommandArgs } from '../../../commands'; | |||||
| import { Commands } from '../../../constants'; | |||||
| import type { Container } from '../../../container'; | |||||
| import { PremiumFeatures } from '../../../features'; | |||||
| import { GitUri } from '../../../git/gitUri'; | |||||
| import { createFromDateDelta } from '../../../system/date'; | |||||
| import { debug } from '../../../system/decorators/log'; | |||||
| import { debounce } from '../../../system/function'; | |||||
| import { hasVisibleTextEditor, isTextEditor } from '../../../system/utils'; | |||||
| import { IpcMessage, onIpc } from '../../../webviews/protocol'; | |||||
| import { WebviewBase } from '../../../webviews/webviewBase'; | |||||
| import { SubscriptionChangeEvent } from '../../subscription/subscriptionService'; | |||||
| import { | |||||
| Commit, | |||||
| DidChangeStateNotificationType, | |||||
| OpenDataPointCommandType, | |||||
| State, | |||||
| UpdatePeriodCommandType, | |||||
| } from './protocol'; | |||||
| export class TimelineWebview extends WebviewBase<State> { | |||||
| private _editor: TextEditor | undefined; | |||||
| private _period: `${number}|${'D' | 'M' | 'Y'}` = '3|M'; | |||||
| constructor(container: Container) { | |||||
| super( | |||||
| container, | |||||
| 'gitlens.timeline', | |||||
| 'timeline.html', | |||||
| 'images/gitlens-icon.png', | |||||
| 'Visual File History', | |||||
| Commands.ShowTimelinePage, | |||||
| ); | |||||
| this.disposables.push( | |||||
| this.container.subscription.onDidChange(this.onSubscriptionChanged, this), | |||||
| window.onDidChangeActiveTextEditor(debounce(this.onActiveEditorChanged, 500), this), | |||||
| ); | |||||
| } | |||||
| protected override onReady() { | |||||
| this.onActiveEditorChanged(window.activeTextEditor); | |||||
| } | |||||
| protected override async includeBootstrap(): Promise<State> { | |||||
| return this.getState(undefined); | |||||
| } | |||||
| @debug({ args: false }) | |||||
| private onActiveEditorChanged(editor: TextEditor | undefined) { | |||||
| if (!this.isReady || (this._editor === editor && editor != null)) return; | |||||
| if (editor == null && hasVisibleTextEditor()) return; | |||||
| if (editor != null && !isTextEditor(editor)) return; | |||||
| this._editor = editor; | |||||
| void this.notifyDidChangeState(editor); | |||||
| } | |||||
| private onSubscriptionChanged(_e: SubscriptionChangeEvent) { | |||||
| void this.notifyDidChangeState(this._editor); | |||||
| } | |||||
| protected override onMessageReceived(e: IpcMessage) { | |||||
| switch (e.method) { | |||||
| case OpenDataPointCommandType.method: | |||||
| onIpc(OpenDataPointCommandType, e, params => { | |||||
| if (params.data == null || this._editor == null || !params.data.selected) return; | |||||
| const repository = this.container.git.getRepository(this._editor.document.uri); | |||||
| if (repository == null) return; | |||||
| const commandArgs: ShowQuickCommitCommandArgs = { | |||||
| repoPath: repository.path, | |||||
| sha: params.data.id, | |||||
| }; | |||||
| void commands.executeCommand(Commands.ShowQuickCommit, commandArgs); | |||||
| // const commandArgs: DiffWithPreviousCommandArgs = { | |||||
| // line: 0, | |||||
| // showOptions: { | |||||
| // preserveFocus: true, | |||||
| // preview: true, | |||||
| // viewColumn: ViewColumn.Beside, | |||||
| // }, | |||||
| // }; | |||||
| // void commands.executeCommand( | |||||
| // Commands.DiffWithPrevious, | |||||
| // new GitUri(gitUri, { repoPath: gitUri.repoPath!, sha: params.data.id }), | |||||
| // commandArgs, | |||||
| // ); | |||||
| }); | |||||
| break; | |||||
| case UpdatePeriodCommandType.method: | |||||
| onIpc(UpdatePeriodCommandType, e, params => { | |||||
| this._period = params.period; | |||||
| void this.notifyDidChangeState(this._editor); | |||||
| }); | |||||
| break; | |||||
| } | |||||
| } | |||||
| @debug({ args: { 0: e => e?.document.uri.toString(true) } }) | |||||
| private async getState(editor: TextEditor | undefined): Promise<State> { | |||||
| const access = await this.container.git.access(PremiumFeatures.Timeline); | |||||
| const dateFormat = this.container.config.defaultDateFormat ?? 'MMMM Do, YYYY h:mma'; | |||||
| if (editor == null || !access.allowed) { | |||||
| return { | |||||
| period: this._period, | |||||
| title: 'There are no editors open that can provide file history information', | |||||
| dateFormat: dateFormat, | |||||
| access: access, | |||||
| }; | |||||
| } | |||||
| const gitUri = await GitUri.fromUri(editor.document.uri); | |||||
| const repoPath = gitUri.repoPath!; | |||||
| const title = gitUri.relativePath; | |||||
| // this.setTitle(`${this.title} \u2022 ${gitUri.fileName}`); | |||||
| // this.description = gitUri.fileName; | |||||
| const [currentUser, log] = await Promise.all([ | |||||
| this.container.git.getCurrentUser(repoPath), | |||||
| this.container.git.getLogForFile(repoPath, gitUri.fsPath, { | |||||
| limit: 0, | |||||
| ref: gitUri.sha, | |||||
| since: this.getPeriodDate().toISOString(), | |||||
| }), | |||||
| ]); | |||||
| if (log == null) { | |||||
| return { | |||||
| dataset: [], | |||||
| period: this._period, | |||||
| title: title, | |||||
| uri: editor.document.uri.toString(), | |||||
| dateFormat: dateFormat, | |||||
| access: access, | |||||
| }; | |||||
| } | |||||
| const name = currentUser?.name ? `${currentUser.name} (you)` : 'You'; | |||||
| const dataset: Commit[] = []; | |||||
| for (const commit of log.commits.values()) { | |||||
| const stats = commit.file?.stats; | |||||
| dataset.push({ | |||||
| author: commit.author.name === 'You' ? name : commit.author.name, | |||||
| additions: stats?.additions ?? 0, | |||||
| // changed: stats?.changes ?? 0, | |||||
| deletions: stats?.deletions ?? 0, | |||||
| commit: commit.sha, | |||||
| date: commit.date.toISOString(), | |||||
| message: commit.message ?? commit.summary, | |||||
| sort: commit.date.getTime(), | |||||
| }); | |||||
| } | |||||
| dataset.sort((a, b) => b.sort - a.sort); | |||||
| return { | |||||
| dataset: dataset, | |||||
| period: this._period, | |||||
| title: title, | |||||
| uri: editor.document.uri.toString(), | |||||
| dateFormat: dateFormat, | |||||
| access: access, | |||||
| }; | |||||
| } | |||||
| private getPeriodDate(): Date { | |||||
| const period = this._period ?? '3|M'; | |||||
| const [number, unit] = period.split('|'); | |||||
| switch (unit) { | |||||
| case 'D': | |||||
| return createFromDateDelta(new Date(), { days: -parseInt(number, 10) }); | |||||
| case 'M': | |||||
| return createFromDateDelta(new Date(), { months: -parseInt(number, 10) }); | |||||
| case 'Y': | |||||
| return createFromDateDelta(new Date(), { years: -parseInt(number, 10) }); | |||||
| default: | |||||
| return createFromDateDelta(new Date(), { months: -3 }); | |||||
| } | |||||
| } | |||||
| private async notifyDidChangeState(editor: TextEditor | undefined) { | |||||
| if (!this.isReady) return false; | |||||
| return window.withProgress({ location: ProgressLocation.Window }, async () => | |||||
| this.notify(DidChangeStateNotificationType, { | |||||
| state: await this.getState(editor), | |||||
| }), | |||||
| ); | |||||
| } | |||||
| } | |||||
+ 218
- 0
src/premium/webviews/timeline/timelineWebviewView.ts
View File
| @ -0,0 +1,218 @@ | |||||
| 'use strict'; | |||||
| import { commands, Disposable, TextEditor, window } from 'vscode'; | |||||
| import { ShowQuickCommitCommandArgs } from '../../../commands'; | |||||
| import { Commands } from '../../../constants'; | |||||
| import { Container } from '../../../container'; | |||||
| import { PremiumFeatures } from '../../../features'; | |||||
| import { GitUri } from '../../../git/gitUri'; | |||||
| import { createFromDateDelta } from '../../../system/date'; | |||||
| import { debug } from '../../../system/decorators/log'; | |||||
| import { debounce } from '../../../system/function'; | |||||
| import { hasVisibleTextEditor, isTextEditor } from '../../../system/utils'; | |||||
| import { IpcMessage, onIpc } from '../../../webviews/protocol'; | |||||
| import { WebviewViewBase } from '../../../webviews/webviewViewBase'; | |||||
| import type { SubscriptionChangeEvent } from '../../subscription/subscriptionService'; | |||||
| import { | |||||
| Commit, | |||||
| DidChangeStateNotificationType, | |||||
| OpenDataPointCommandType, | |||||
| State, | |||||
| UpdatePeriodCommandType, | |||||
| } from './protocol'; | |||||
| export class TimelineWebviewView extends WebviewViewBase<State> { | |||||
| private _editor: TextEditor | undefined; | |||||
| private _period: `${number}|${'D' | 'M' | 'Y'}` = '3|M'; | |||||
| constructor(container: Container) { | |||||
| super(container, 'gitlens.views.timeline', 'timeline.html', 'Visual File History'); | |||||
| this.disposables.push(this.container.subscription.onDidChange(this.onSubscriptionChanged, this)); | |||||
| } | |||||
| override dispose() { | |||||
| super.dispose(); | |||||
| this._disposableVisibility?.dispose(); | |||||
| } | |||||
| protected override onReady() { | |||||
| this.onActiveEditorChanged(window.activeTextEditor); | |||||
| } | |||||
| protected override async includeBootstrap(): Promise<State> { | |||||
| return this.getState(undefined); | |||||
| } | |||||
| @debug({ args: false }) | |||||
| private onActiveEditorChanged(editor: TextEditor | undefined) { | |||||
| if (!this.isReady || (this._editor === editor && editor != null)) return; | |||||
| if (editor == null && hasVisibleTextEditor()) return; | |||||
| if (editor != null && !isTextEditor(editor)) return; | |||||
| this._editor = editor; | |||||
| void this.notifyDidChangeState(editor); | |||||
| } | |||||
| private onSubscriptionChanged(_e: SubscriptionChangeEvent) { | |||||
| void this.notifyDidChangeState(this._editor); | |||||
| } | |||||
| private _disposableVisibility: Disposable | undefined; | |||||
| protected override onVisibilityChanged(visible: boolean) { | |||||
| if (visible) { | |||||
| if (this._disposableVisibility == null) { | |||||
| this._disposableVisibility = window.onDidChangeActiveTextEditor( | |||||
| debounce(this.onActiveEditorChanged, 500), | |||||
| this, | |||||
| ); | |||||
| } | |||||
| this.onActiveEditorChanged(window.activeTextEditor); | |||||
| } else { | |||||
| this._disposableVisibility?.dispose(); | |||||
| this._disposableVisibility = undefined; | |||||
| this._editor = undefined; | |||||
| } | |||||
| } | |||||
| protected override onMessageReceived(e: IpcMessage) { | |||||
| switch (e.method) { | |||||
| case OpenDataPointCommandType.method: | |||||
| onIpc(OpenDataPointCommandType, e, params => { | |||||
| if (params.data == null || this._editor == null || !params.data.selected) return; | |||||
| const repository = this.container.git.getRepository(this._editor.document.uri); | |||||
| if (repository == null) return; | |||||
| const commandArgs: ShowQuickCommitCommandArgs = { | |||||
| repoPath: repository.path, | |||||
| sha: params.data.id, | |||||
| }; | |||||
| void commands.executeCommand(Commands.ShowQuickCommit, commandArgs); | |||||
| // const commandArgs: DiffWithPreviousCommandArgs = { | |||||
| // line: 0, | |||||
| // showOptions: { | |||||
| // preserveFocus: true, | |||||
| // preview: true, | |||||
| // viewColumn: ViewColumn.Beside, | |||||
| // }, | |||||
| // }; | |||||
| // void commands.executeCommand( | |||||
| // Commands.DiffWithPrevious, | |||||
| // new GitUri(gitUri, { repoPath: gitUri.repoPath!, sha: params.data.id }), | |||||
| // commandArgs, | |||||
| // ); | |||||
| }); | |||||
| break; | |||||
| case UpdatePeriodCommandType.method: | |||||
| onIpc(UpdatePeriodCommandType, e, params => { | |||||
| this._period = params.period; | |||||
| void this.notifyDidChangeState(this._editor); | |||||
| }); | |||||
| break; | |||||
| } | |||||
| } | |||||
| @debug({ args: { 0: e => e?.document.uri.toString(true) } }) | |||||
| private async getState(editor: TextEditor | undefined): Promise<State> { | |||||
| const access = await this.container.git.access(PremiumFeatures.Timeline); | |||||
| const dateFormat = this.container.config.defaultDateFormat ?? 'MMMM Do, YYYY h:mma'; | |||||
| if (editor == null || !access.allowed) { | |||||
| return { | |||||
| period: this._period, | |||||
| title: 'There are no editors open that can provide file history information', | |||||
| dateFormat: dateFormat, | |||||
| access: access, | |||||
| }; | |||||
| } | |||||
| const gitUri = await GitUri.fromUri(editor.document.uri); | |||||
| const repoPath = gitUri.repoPath!; | |||||
| const title = gitUri.relativePath; | |||||
| // this.setTitle(`${this.title} \u2022 ${gitUri.fileName}`); | |||||
| this.description = gitUri.fileName; | |||||
| const [currentUser, log] = await Promise.all([ | |||||
| this.container.git.getCurrentUser(repoPath), | |||||
| this.container.git.getLogForFile(repoPath, gitUri.fsPath, { | |||||
| limit: 0, | |||||
| ref: gitUri.sha, | |||||
| since: this.getPeriodDate().toISOString(), | |||||
| }), | |||||
| ]); | |||||
| if (log == null) { | |||||
| return { | |||||
| dataset: [], | |||||
| period: this._period, | |||||
| title: title, | |||||
| uri: editor.document.uri.toString(), | |||||
| dateFormat: dateFormat, | |||||
| access: access, | |||||
| }; | |||||
| } | |||||
| const name = currentUser?.name ? `${currentUser.name} (you)` : 'You'; | |||||
| const dataset: Commit[] = []; | |||||
| for (const commit of log.commits.values()) { | |||||
| const stats = commit.file?.stats; | |||||
| dataset.push({ | |||||
| author: commit.author.name === 'You' ? name : commit.author.name, | |||||
| additions: stats?.additions ?? 0, | |||||
| // changed: stats?.changes ?? 0, | |||||
| deletions: stats?.deletions ?? 0, | |||||
| commit: commit.sha, | |||||
| date: commit.date.toISOString(), | |||||
| message: commit.message ?? commit.summary, | |||||
| sort: commit.date.getTime(), | |||||
| }); | |||||
| } | |||||
| dataset.sort((a, b) => b.sort - a.sort); | |||||
| return { | |||||
| dataset: dataset, | |||||
| period: this._period, | |||||
| title: title, | |||||
| uri: editor.document.uri.toString(), | |||||
| dateFormat: dateFormat, | |||||
| access: access, | |||||
| }; | |||||
| } | |||||
| private getPeriodDate(): Date { | |||||
| const period = this._period ?? '3|M'; | |||||
| const [number, unit] = period.split('|'); | |||||
| switch (unit) { | |||||
| case 'D': | |||||
| return createFromDateDelta(new Date(), { days: -parseInt(number, 10) }); | |||||
| case 'M': | |||||
| return createFromDateDelta(new Date(), { months: -parseInt(number, 10) }); | |||||
| case 'Y': | |||||
| return createFromDateDelta(new Date(), { years: -parseInt(number, 10) }); | |||||
| default: | |||||
| return createFromDateDelta(new Date(), { months: -3 }); | |||||
| } | |||||
| } | |||||
| private async notifyDidChangeState(editor: TextEditor | undefined) { | |||||
| if (!this.isReady) return false; | |||||
| return window.withProgress({ location: { viewId: this.id } }, async () => | |||||
| this.notify(DidChangeStateNotificationType, { | |||||
| state: await this.getState(editor), | |||||
| }), | |||||
| ); | |||||
| } | |||||
| } | |||||
+ 5
- 0
src/subscription.ts
View File
+ 490
- 0
src/webviews/apps/premium/timeline/chart.scss
View File
| @ -0,0 +1,490 @@ | |||||
| .bb { | |||||
| svg { | |||||
| // font-size: 12px; | |||||
| // line-height: 1; | |||||
| font: 10px sans-serif; | |||||
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |||||
| } | |||||
| path, | |||||
| line { | |||||
| fill: none; | |||||
| // stroke: #000; | |||||
| } | |||||
| path.domain { | |||||
| .vscode-dark & { | |||||
| stroke: var(--color-background--lighten-15); | |||||
| } | |||||
| .vscode-light & { | |||||
| stroke: var(--color-background--darken-15); | |||||
| } | |||||
| } | |||||
| text, | |||||
| .bb-button { | |||||
| user-select: none; | |||||
| // fill: var(--color-foreground--75); | |||||
| fill: var(--color-view-foreground); | |||||
| font-size: 11px; | |||||
| } | |||||
| .bb-legend-item-tile, | |||||
| .bb-xgrid-focus, | |||||
| .bb-ygrid-focus, | |||||
| .bb-ygrid, | |||||
| .bb-event-rect, | |||||
| .bb-bars path { | |||||
| shape-rendering: crispEdges; | |||||
| } | |||||
| .bb-chart-arc { | |||||
| .bb-gauge-value { | |||||
| fill: #000; | |||||
| } | |||||
| path { | |||||
| stroke: #fff; | |||||
| } | |||||
| rect { | |||||
| stroke: #fff; | |||||
| stroke-width: 1; | |||||
| } | |||||
| text { | |||||
| fill: #fff; | |||||
| font-size: 13px; | |||||
| } | |||||
| } | |||||
| /*-- Axis --*/ | |||||
| .bb-axis { | |||||
| shape-rendering: crispEdges; | |||||
| } | |||||
| // .bb-axis-y, | |||||
| // .bb-axis-y2 { | |||||
| // text { | |||||
| // fill: var(--color-foreground--75); | |||||
| // } | |||||
| // } | |||||
| // .bb-event-rects { | |||||
| // fill-opacity: 1 !important; | |||||
| // .bb-event-rect { | |||||
| // fill: transparent; | |||||
| // &._active_ { | |||||
| // fill: rgba(39, 201, 3, 0.05); | |||||
| // } | |||||
| // } | |||||
| // } | |||||
| // .tick._active_ text { | |||||
| // fill: #00c83c !important; | |||||
| // } | |||||
| /*-- Grid --*/ | |||||
| .bb-grid { | |||||
| pointer-events: none; | |||||
| line { | |||||
| .vscode-dark & { | |||||
| stroke: var(--color-background--lighten-075); | |||||
| &.bb-ygrid { | |||||
| stroke: var(--color-background--lighten-15); | |||||
| } | |||||
| } | |||||
| .vscode-light & { | |||||
| stroke: var(--color-background--darken-075); | |||||
| &.bb-ygrid { | |||||
| stroke: var(--color-background--darken-15); | |||||
| } | |||||
| } | |||||
| } | |||||
| text { | |||||
| // fill: #aaa; | |||||
| fill: var(--color-view-foreground); | |||||
| } | |||||
| } | |||||
| .bb-xgrid { | |||||
| stroke-dasharray: 2 2; | |||||
| } | |||||
| .bb-ygrid { | |||||
| stroke-dasharray: 2 1; | |||||
| } | |||||
| .bb-xgrid-focus { | |||||
| line { | |||||
| .vscode-dark & { | |||||
| stroke: var(--color-background--lighten-30); | |||||
| } | |||||
| .vscode-light & { | |||||
| stroke: var(--color-background--darken-30); | |||||
| } | |||||
| } | |||||
| } | |||||
| /*-- Text on Chart --*/ | |||||
| .bb-text.bb-empty { | |||||
| fill: #808080; | |||||
| font-size: 2em; | |||||
| } | |||||
| /*-- Line --*/ | |||||
| .bb-line { | |||||
| stroke-width: 1px; | |||||
| } | |||||
| /*-- Point --*/ | |||||
| .bb-circle { | |||||
| // opacity: 0.8 !important; | |||||
| // stroke-width: 0; | |||||
| // fill-opacity: 0.6; | |||||
| &._expanded_ { | |||||
| // stroke-width: 1px; | |||||
| // stroke: white; | |||||
| // opacity: 1 !important; | |||||
| fill-opacity: 1; | |||||
| stroke-width: 3px; | |||||
| stroke-opacity: 0.6; | |||||
| } | |||||
| } | |||||
| .bb-selected-circle { | |||||
| // fill: white; | |||||
| // stroke-width: 2px; | |||||
| // opacity: 1 !important; | |||||
| fill-opacity: 1; | |||||
| stroke-width: 3px; | |||||
| stroke-opacity: 0.6; | |||||
| } | |||||
| // .bb-circles { | |||||
| // &.bb-focused { | |||||
| // opacity: 1; | |||||
| // } | |||||
| // &.bb-defocused { | |||||
| // opacity: 0.3 !important; | |||||
| // } | |||||
| // } | |||||
| // rect.bb-circle, | |||||
| // use.bb-circle { | |||||
| // &._expanded_ { | |||||
| // stroke-width: 3px; | |||||
| // } | |||||
| // } | |||||
| // .bb-selected-circle { | |||||
| // stroke-width: 2px; | |||||
| // .vscode-dark & { | |||||
| // fill: rgba(255, 255, 255, 0.2); | |||||
| // } | |||||
| // .vscode-light & { | |||||
| // fill: rgba(0, 0, 0, 0.1); | |||||
| // } | |||||
| // } | |||||
| /*-- Bar --*/ | |||||
| .bb-bar { | |||||
| stroke-width: 0; | |||||
| // opacity: 0.8 !important; | |||||
| // fill-opacity: 0.6; | |||||
| &._expanded_ { | |||||
| fill-opacity: 0.75; | |||||
| // opacity: 1 !important; | |||||
| // stroke-width: 3px; | |||||
| // stroke-opacity: 0.6; | |||||
| } | |||||
| } | |||||
| /*-- Candlestick --*/ | |||||
| .bb-candlestick { | |||||
| stroke-width: 1px; | |||||
| &._expanded_ { | |||||
| fill-opacity: 0.75; | |||||
| } | |||||
| } | |||||
| /*-- Focus --*/ | |||||
| .bb-target.bb-focused, | |||||
| .bb-circles.bb-focused { | |||||
| opacity: 1; | |||||
| } | |||||
| .bb-target.bb-focused path.bb-line, | |||||
| .bb-target.bb-focused path.bb-step, | |||||
| .bb-circles.bb-focused path.bb-line, | |||||
| .bb-circles.bb-focused path.bb-step { | |||||
| stroke-width: 2px; | |||||
| } | |||||
| .bb-target.bb-defocused, | |||||
| .bb-circles.bb-defocused { | |||||
| opacity: 0.3 !important; | |||||
| } | |||||
| .bb-target.bb-defocused .text-overlapping, | |||||
| .bb-circles.bb-defocused .text-overlapping { | |||||
| opacity: 0.05 !important; | |||||
| } | |||||
| /*-- Region --*/ | |||||
| .bb-region { | |||||
| fill: steelblue; | |||||
| fill-opacity: 0.1; | |||||
| } | |||||
| /*-- Zoom region --*/ | |||||
| .bb-zoom-brush { | |||||
| .vscode-dark & { | |||||
| fill: white; | |||||
| fill-opacity: 0.2; | |||||
| } | |||||
| .vscode-light & { | |||||
| fill: black; | |||||
| fill-opacity: 0.1; | |||||
| } | |||||
| } | |||||
| /*-- Brush --*/ | |||||
| .bb-brush { | |||||
| .extent { | |||||
| fill-opacity: 0.1; | |||||
| } | |||||
| } | |||||
| /*-- Legend --*/ | |||||
| .bb-legend-item { | |||||
| font-size: 12px; | |||||
| user-select: none; | |||||
| } | |||||
| .bb-legend-item-hidden { | |||||
| opacity: 0.15; | |||||
| } | |||||
| .bb-legend-background { | |||||
| opacity: 0.75; | |||||
| fill: white; | |||||
| stroke: lightgray; | |||||
| stroke-width: 1; | |||||
| } | |||||
| /*-- Title --*/ | |||||
| .bb-title { | |||||
| font: 14px sans-serif; | |||||
| } | |||||
| /*-- Tooltip --*/ | |||||
| .bb-tooltip-container { | |||||
| z-index: 10; | |||||
| user-select: none; | |||||
| } | |||||
| .bb-tooltip { | |||||
| display: flex; | |||||
| border-collapse: collapse; | |||||
| border-spacing: 0; | |||||
| background-color: var(--color-hover-background); | |||||
| color: var(--color-hover-foreground); | |||||
| empty-cells: show; | |||||
| opacity: 1; | |||||
| box-shadow: 7px 7px 12px -9px var(--color-hover-border); | |||||
| font-size: var(--font-size); | |||||
| font-family: var(--font-family); | |||||
| tbody { | |||||
| border: 1px solid var(--color-hover-border); | |||||
| } | |||||
| th { | |||||
| padding: 0.5rem 1rem; | |||||
| text-align: left; | |||||
| } | |||||
| tr { | |||||
| &:not(.bb-tooltip-name-additions, .bb-tooltip-name-deletions) { | |||||
| display: flex; | |||||
| flex-direction: column-reverse; | |||||
| td { | |||||
| &.name { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| font-size: 12px; | |||||
| font-family: var(--editor-font-family); | |||||
| background-color: var(--color-hover-statusBarBackground); | |||||
| border-top: 1px solid var(--color-hover-border); | |||||
| border-bottom: 1px solid var(--color-hover-border); | |||||
| padding: 0.5rem; | |||||
| line-height: 2rem; | |||||
| &:before { | |||||
| font: normal normal normal 16px/1 codicon; | |||||
| display: inline-block; | |||||
| text-decoration: none; | |||||
| text-rendering: auto; | |||||
| text-align: center; | |||||
| -webkit-font-smoothing: antialiased; | |||||
| -moz-osx-font-smoothing: grayscale; | |||||
| user-select: none; | |||||
| vertical-align: middle; | |||||
| line-height: 2rem; | |||||
| padding-right: 0.25rem; | |||||
| content: '\eafc'; | |||||
| } | |||||
| span { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| &.value { | |||||
| display: flex; | |||||
| padding: 0.25rem 2rem 1rem 2rem; | |||||
| white-space: pre-line; | |||||
| word-wrap: break-word; | |||||
| overflow-wrap: break-word; | |||||
| max-width: 450px; | |||||
| max-height: 450px; | |||||
| overflow-y: scroll; | |||||
| overflow-x: hidden; | |||||
| } | |||||
| } | |||||
| } | |||||
| &.bb-tooltip-name-additions, | |||||
| &.bb-tooltip-name-deletions { | |||||
| display: inline-flex; | |||||
| flex-direction: row-reverse; | |||||
| justify-content: center; | |||||
| width: calc(50% - 2rem); | |||||
| margin: 0px 1rem; | |||||
| td { | |||||
| &.name { | |||||
| text-transform: lowercase; | |||||
| } | |||||
| &.value { | |||||
| margin-right: 0.25rem; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // td > span, | |||||
| // td > svg { | |||||
| // display: inline-block; | |||||
| // width: 10px; | |||||
| // height: 10px; | |||||
| // margin-right: 6px; | |||||
| // } | |||||
| } | |||||
| /*-- Area --*/ | |||||
| .bb-area { | |||||
| stroke-width: 0; | |||||
| opacity: 0.2; | |||||
| } | |||||
| /*-- Arc --*/ | |||||
| .bb-chart-arcs-title { | |||||
| dominant-baseline: middle; | |||||
| font-size: 1.3em; | |||||
| } | |||||
| text.bb-chart-arcs-gauge-title { | |||||
| dominant-baseline: middle; | |||||
| font-size: 2.7em; | |||||
| } | |||||
| .bb-chart-arcs .bb-chart-arcs-background { | |||||
| fill: #e0e0e0; | |||||
| stroke: #fff; | |||||
| } | |||||
| .bb-chart-arcs .bb-chart-arcs-gauge-unit { | |||||
| fill: #000; | |||||
| font-size: 16px; | |||||
| } | |||||
| .bb-chart-arcs .bb-chart-arcs-gauge-max { | |||||
| fill: #777; | |||||
| } | |||||
| .bb-chart-arcs .bb-chart-arcs-gauge-min { | |||||
| fill: #777; | |||||
| } | |||||
| /*-- Radar --*/ | |||||
| .bb-chart-radars .bb-levels polygon { | |||||
| fill: none; | |||||
| stroke: #848282; | |||||
| stroke-width: 0.5px; | |||||
| } | |||||
| .bb-chart-radars .bb-levels text { | |||||
| fill: #848282; | |||||
| } | |||||
| .bb-chart-radars .bb-axis line { | |||||
| stroke: #848282; | |||||
| stroke-width: 0.5px; | |||||
| } | |||||
| .bb-chart-radars .bb-axis text { | |||||
| font-size: 1.15em; | |||||
| cursor: default; | |||||
| } | |||||
| .bb-chart-radars .bb-shapes polygon { | |||||
| fill-opacity: 0.2; | |||||
| stroke-width: 1px; | |||||
| } | |||||
| /*-- Button --*/ | |||||
| .bb-button { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| right: 2rem; | |||||
| border: 1px solid var(--color-button-background); | |||||
| background-color: var(--color-button-background); | |||||
| color: var(--color-button-foreground); | |||||
| font-size: var(--font-size); | |||||
| font-family: var(--font-family); | |||||
| .bb-zoom-reset { | |||||
| display: inline-block; | |||||
| padding: 0.5rem 1rem; | |||||
| cursor: pointer; | |||||
| } | |||||
| } | |||||
| } | |||||
+ 331
- 0
src/webviews/apps/premium/timeline/chart.ts
View File
| @ -0,0 +1,331 @@ | |||||
| 'use strict'; | |||||
| /*global*/ | |||||
| import { bar, bb, bubble, Chart, ChartOptions, DataItem, selection, zoom } from 'billboard.js'; | |||||
| // import BubbleCompare from 'billboard.js/dist/plugin/billboardjs-plugin-bubblecompare'; | |||||
| import { Commit, State } from '../../../../premium/webviews/timeline/protocol'; | |||||
| import { formatDate, fromNow } from '../../shared/date'; | |||||
| import { Emitter, Event } from '../../shared/events'; | |||||
| export interface DataPointClickEvent { | |||||
| data: { | |||||
| id: string; | |||||
| selected: boolean; | |||||
| }; | |||||
| } | |||||
| export class TimelineChart { | |||||
| private _onDidClickDataPoint = new Emitter<DataPointClickEvent>(); | |||||
| get onDidClickDataPoint(): Event<DataPointClickEvent> { | |||||
| return this._onDidClickDataPoint.event; | |||||
| } | |||||
| private readonly _chart: Chart; | |||||
| private _commitsByTimestamp = new Map<string, Commit>(); | |||||
| private _authorsByIndex = new Map<number, string>(); | |||||
| private _indexByAuthors = new Map<string, number>(); | |||||
| private _dateFormat: string = undefined!; | |||||
| constructor(selector: string) { | |||||
| const config: ChartOptions = { | |||||
| bindto: selector, | |||||
| data: { | |||||
| columns: [], | |||||
| types: { time: bubble(), additions: bar(), deletions: bar() }, | |||||
| xFormat: '%Y-%m-%dT%H:%M:%S.%LZ', | |||||
| xLocaltime: false, | |||||
| selection: { | |||||
| enabled: selection(), | |||||
| draggable: false, | |||||
| grouped: false, | |||||
| multiple: false, | |||||
| }, | |||||
| onclick: this.onDataPointClicked.bind(this), | |||||
| }, | |||||
| axis: { | |||||
| x: { | |||||
| type: 'timeseries', | |||||
| clipPath: false, | |||||
| localtime: true, | |||||
| tick: { | |||||
| // autorotate: true, | |||||
| centered: true, | |||||
| culling: false, | |||||
| fit: false, | |||||
| format: '%-m/%-d/%Y', | |||||
| multiline: false, | |||||
| // rotate: 15, | |||||
| show: false, | |||||
| }, | |||||
| }, | |||||
| y: { | |||||
| max: 0, | |||||
| padding: { | |||||
| top: 50, | |||||
| bottom: 100, | |||||
| }, | |||||
| show: true, | |||||
| tick: { | |||||
| format: (y: number) => this._authorsByIndex.get(y) ?? '', | |||||
| outer: false, | |||||
| }, | |||||
| }, | |||||
| y2: { | |||||
| label: { | |||||
| text: 'Number of Lines Changed', | |||||
| position: 'outer-middle', | |||||
| }, | |||||
| // min: 0, | |||||
| show: true, | |||||
| tick: { | |||||
| outer: true, | |||||
| // culling: true, | |||||
| // stepSize: 1, | |||||
| }, | |||||
| }, | |||||
| }, | |||||
| bar: { | |||||
| width: 2, | |||||
| sensitivity: 4, | |||||
| padding: 2, | |||||
| }, | |||||
| bubble: { | |||||
| maxR: 50, | |||||
| }, | |||||
| grid: { | |||||
| focus: { | |||||
| edge: true, | |||||
| show: true, | |||||
| y: true, | |||||
| }, | |||||
| front: true, | |||||
| lines: { | |||||
| front: false, | |||||
| }, | |||||
| x: { | |||||
| show: false, | |||||
| }, | |||||
| y: { | |||||
| show: true, | |||||
| }, | |||||
| }, | |||||
| legend: { | |||||
| show: true, | |||||
| padding: 10, | |||||
| }, | |||||
| // point: { | |||||
| // r: 6, | |||||
| // focus: { | |||||
| // expand: { | |||||
| // enabled: true, | |||||
| // r: 9, | |||||
| // }, | |||||
| // }, | |||||
| // select: { | |||||
| // r: 12, | |||||
| // }, | |||||
| // }, | |||||
| resize: { | |||||
| auto: true, | |||||
| }, | |||||
| tooltip: { | |||||
| grouped: true, | |||||
| format: { | |||||
| title: this.getTooltipTitle.bind(this), | |||||
| name: this.getTooltipName.bind(this), | |||||
| value: this.getTooltipValue.bind(this), | |||||
| }, | |||||
| // linked: true, //{ name: 'time' }, | |||||
| show: true, | |||||
| order: 'desc', | |||||
| }, | |||||
| zoom: { | |||||
| enabled: zoom(), | |||||
| type: 'drag', | |||||
| rescale: true, | |||||
| resetButton: true, | |||||
| extent: [1, 0.01], | |||||
| x: { | |||||
| min: 100, | |||||
| }, | |||||
| // onzoomstart: function(...args: any[]) { | |||||
| // console.log('onzoomstart', args); | |||||
| // }, | |||||
| // onzoom: function(...args: any[]) { | |||||
| // console.log('onzoom', args); | |||||
| // }, | |||||
| // onzoomend: function(...args: any[]) { | |||||
| // console.log('onzoomend', args); | |||||
| // } | |||||
| }, | |||||
| // plugins: [ | |||||
| // new BubbleCompare({ | |||||
| // minR: 3, | |||||
| // maxR: 30, | |||||
| // expandScale: 1.2, | |||||
| // }), | |||||
| // ], | |||||
| }; | |||||
| this._chart = bb.generate(config); | |||||
| } | |||||
| private onDataPointClicked(d: DataItem, _element: SVGElement) { | |||||
| const commit = this._commitsByTimestamp.get(new Date(d.x).toISOString()); | |||||
| if (commit == null) return; | |||||
| const selected = this._chart.selected(d.id) as unknown as DataItem[]; | |||||
| this._onDidClickDataPoint.fire({ | |||||
| data: { | |||||
| id: commit.commit, | |||||
| selected: selected?.[0]?.id === d.id, | |||||
| }, | |||||
| }); | |||||
| } | |||||
| reset() { | |||||
| this._chart.unselect(); | |||||
| this._chart.unzoom(); | |||||
| } | |||||
| updateChart(state: State) { | |||||
| this._dateFormat = state.dateFormat; | |||||
| this._commitsByTimestamp.clear(); | |||||
| this._authorsByIndex.clear(); | |||||
| this._indexByAuthors.clear(); | |||||
| if (state?.dataset == null) { | |||||
| this._chart.unload(); | |||||
| return; | |||||
| } | |||||
| const xs: { [key: string]: string } = {}; | |||||
| const colors: { [key: string]: string } = {}; | |||||
| const names: { [key: string]: string } = {}; | |||||
| const axes: { [key: string]: string } = {}; | |||||
| const types: { [key: string]: string } = {}; | |||||
| const groups: string[][] = []; | |||||
| const series: { [key: string]: any } = {}; | |||||
| const group = []; | |||||
| let index = 0; | |||||
| let commit: Commit; | |||||
| let author: string; | |||||
| let date: string; | |||||
| let additions: number; | |||||
| let deletions: number; | |||||
| for (commit of state.dataset) { | |||||
| ({ author, date, additions, deletions } = commit); | |||||
| if (!this._indexByAuthors.has(author)) { | |||||
| this._indexByAuthors.set(author, index); | |||||
| this._authorsByIndex.set(index, author); | |||||
| index--; | |||||
| } | |||||
| const x = 'time'; | |||||
| if (series[x] == null) { | |||||
| series[x] = []; | |||||
| series['additions'] = []; | |||||
| series['deletions'] = []; | |||||
| xs['additions'] = x; | |||||
| xs['deletions'] = x; | |||||
| axes['additions'] = 'y2'; | |||||
| axes['deletions'] = 'y2'; | |||||
| names['additions'] = 'Additions'; | |||||
| names['deletions'] = 'Deletions'; | |||||
| colors['additions'] = 'rgba(73, 190, 71, 1)'; | |||||
| colors['deletions'] = 'rgba(195, 32, 45, 1)'; | |||||
| types['additions'] = bar(); | |||||
| types['deletions'] = bar(); | |||||
| group.push(x); | |||||
| groups.push(['additions', 'deletions']); | |||||
| } | |||||
| const authorX = `${x}.${author}`; | |||||
| if (series[authorX] == null) { | |||||
| series[authorX] = []; | |||||
| series[author] = []; | |||||
| xs[author] = authorX; | |||||
| axes[author] = 'y'; | |||||
| names[author] = author; | |||||
| types[author] = bubble(); | |||||
| group.push(author, authorX); | |||||
| } | |||||
| series[x].push(date); | |||||
| series['additions'].push(additions); | |||||
| series['deletions'].push(deletions); | |||||
| series[authorX].push(date); | |||||
| series[author].push({ /*x: date,*/ y: this._indexByAuthors.get(author), z: additions + deletions }); | |||||
| this._commitsByTimestamp.set(date, commit); | |||||
| } | |||||
| this._chart.config('axis.y.tick.values', [...this._authorsByIndex.keys()], false); | |||||
| this._chart.config('axis.y.min', index - 2, false); | |||||
| groups.push(group); | |||||
| this._chart.groups(groups); | |||||
| const columns = Object.entries(series).map(([key, value]) => [key, ...value]); | |||||
| this._chart.load({ | |||||
| columns: columns, | |||||
| xs: xs, | |||||
| axes: axes, | |||||
| names: names, | |||||
| colors: colors, | |||||
| types: types, | |||||
| unload: true, | |||||
| }); | |||||
| } | |||||
| private getTooltipName(name: string, ratio: number, id: string, index: number) { | |||||
| if (id === 'additions' || /*id === 'changes' ||*/ id === 'deletions') return name; | |||||
| const date = new Date(this._chart.data(id)[0].values[index].x); | |||||
| const commit = this._commitsByTimestamp.get(date.toISOString()); | |||||
| return commit?.commit.slice(0, 8) ?? '00000000'; | |||||
| } | |||||
| private getTooltipTitle(x: string) { | |||||
| const date = new Date(x); | |||||
| const formattedDate = `${capitalize(fromNow(date))} (${formatDate(date, this._dateFormat)})`; | |||||
| const commit = this._commitsByTimestamp.get(date.toISOString()); | |||||
| if (commit == null) return formattedDate; | |||||
| return `${commit.author}, ${formattedDate}`; | |||||
| } | |||||
| private getTooltipValue(value: any, ratio: number, id: string, index: number) { | |||||
| if (id === 'additions' || /*id === 'changes' ||*/ id === 'deletions') { | |||||
| return value === 0 ? undefined! : value; | |||||
| } | |||||
| const date = new Date(this._chart.data(id)[0].values[index].x); | |||||
| const commit = this._commitsByTimestamp.get(date.toISOString()); | |||||
| return commit?.message ?? '???'; | |||||
| } | |||||
| } | |||||
| function capitalize(s: string): string { | |||||
| return s.charAt(0).toUpperCase() + s.slice(1); | |||||
| } | |||||
+ 18
- 0
src/webviews/apps/premium/timeline/partials/state.free-preview-expired.html
View File
| @ -0,0 +1,18 @@ | |||||
| <template id="state:free-preview-expired"> | |||||
| <section> | |||||
| <!-- <h3>Continue using Premium Features</h3> --> | |||||
| <p data-visible="public"> | |||||
| The Visual File History is a premium feature, which requires a free account for public repos. | |||||
| </p> | |||||
| <p data-visible="private"> | |||||
| The Visual File History is a premium feature, which requires at least a Pro subscription for private repos. | |||||
| </p> | |||||
| <p>Create a free account to continue trialing premium features for all code for an additional 7 days.</p> | |||||
| <vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button> | |||||
| <vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button> | |||||
| <span class="button-subaction" | |||||
| >Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span | |||||
| > | |||||
| <vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button> | |||||
| </section> | |||||
| </template> | |||||
+ 20
- 0
src/webviews/apps/premium/timeline/partials/state.free.html
View File
| @ -0,0 +1,20 @@ | |||||
| <template id="state:free"> | |||||
| <section> | |||||
| <!-- <h3>Try GitLens Premium Features</h3> --> | |||||
| <p data-visible="public"> | |||||
| The Visual File History is a premium feature, which requires a free account for public repos. | |||||
| </p> | |||||
| <p data-visible="private"> | |||||
| The Visual File History is a premium feature, which requires at least a Pro subscription for private repos. | |||||
| </p> | |||||
| <vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button> | |||||
| <vscode-button data-action="command:gitlens.premium.startPreviewTrial">Try premium features now</vscode-button> | |||||
| <vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button> | |||||
| <span class="button-subaction" | |||||
| >Have an existing account? <a href="command:gitlens.premium.loginOrSignUp">Sign in</a></span | |||||
| > | |||||
| <vscode-button data-action="command:gitlens.premium.showPlans" appearance="secondary" | |||||
| >View paid plans</vscode-button | |||||
| > | |||||
| </section> | |||||
| </template> | |||||
+ 10
- 0
src/webviews/apps/premium/timeline/partials/state.plus-trial-expired.html
View File
| @ -0,0 +1,10 @@ | |||||
| <template id="state:plus-trial-expired"> | |||||
| <section> | |||||
| <!-- <h3>GitLens Free+</h3> --> | |||||
| <p> | |||||
| The Visual File History is a premium feature, which requires at least a Pro subscription for private repos. | |||||
| </p> | |||||
| <vscode-button data-action="command:gitlens.premium.learn">Learn about premium features</vscode-button> | |||||
| <vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button> | |||||
| </section> | |||||
| </template> | |||||
+ 11
- 0
src/webviews/apps/premium/timeline/partials/state.verify-email.html
View File
| @ -0,0 +1,11 @@ | |||||
| <template id="state:verify-email"> | |||||
| <section> | |||||
| <!-- <h3>Please verify your email</h3> --> | |||||
| <p>To continue using premium GitLens features, please verify the email for the account you created.</p> | |||||
| <vscode-button data-action="command:gitlens.premium.resendVerification" | |||||
| >Resend verification email</vscode-button | |||||
| > | |||||
| <vscode-button data-action="command:gitlens.premium.validate">Refresh verification status</vscode-button> | |||||
| <p>All non-premium features will continue to be free without an account.</p> | |||||
| </section> | |||||
| </template> | |||||
+ 5
- 0
src/webviews/apps/premium/timeline/plugins.d.ts
View File
| @ -0,0 +1,5 @@ | |||||
| declare module 'billboard.js/dist/plugin/billboardjs-plugin-bubblecompare' { | |||||
| import BubbleCompare from 'billboard.js/types/plugin/bubblecompare'; | |||||
| export = BubbleCompare; | |||||
| } | |||||
+ 59
- 0
src/webviews/apps/premium/timeline/timeline.html
View File
| @ -0,0 +1,59 @@ | |||||
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8" /> | |||||
| </head> | |||||
| <body class="preload"> | |||||
| <div class="container"> | |||||
| <section id="header"> | |||||
| <h2 data-bind="title"></h2> | |||||
| <h2 data-bind="description"></h2> | |||||
| <div class="select-container"> | |||||
| <label for="periods">Since</label> | |||||
| <vscode-dropdown id="periods" name="periods" position="below"> | |||||
| <vscode-option value="7|D">1 week ago</vscode-option> | |||||
| <vscode-option value="1|M">1 month ago</vscode-option> | |||||
| <vscode-option value="3|M" selected="true">3 months ago</vscode-option> | |||||
| <vscode-option value="6|M">6 months ago</vscode-option> | |||||
| <vscode-option value="9|M">9 months ago</vscode-option> | |||||
| <vscode-option value="1|Y">1 year ago</vscode-option> | |||||
| <vscode-option value="2|Y">2 years ago</vscode-option> | |||||
| <vscode-option value="4|Y">4 years ago</vscode-option> | |||||
| </vscode-dropdown> | |||||
| </div> | |||||
| </section> | |||||
| <section id="content"> | |||||
| <div id="chart"></div> | |||||
| </section> | |||||
| <section id="footer"></section> | |||||
| </div> | |||||
| <div id="overlay"> | |||||
| <p> | |||||
| The | |||||
| <a href="command:gitlens.openWalkthrough?%22gitlens.premium%7Cgitlens.premium.visualFileHistory%22" | |||||
| >Visual File History</a | |||||
| > | |||||
| allows you to clearly see the history of a file, including: when changes were made, how large they were, | |||||
| and who made them. Authors who have contributed changes to a file are on one axis, and dates on the | |||||
| other. Color-coded dots represent points in time where that author made changes to the file, and | |||||
| vertical lines represent the magnitude of the change in two colors: green for lines added, and red for | |||||
| lines removed. | |||||
| </p> | |||||
| <div id="overlay-slot"></div> | |||||
| </div> | |||||
| #{endOfBody} | |||||
| <style nonce="#{cspNonce}"> | |||||
| @font-face { | |||||
| font-family: 'codicon'; | |||||
| src: url('#{root}/dist/webviews/codicon.ttf?669d352dfabff8f6eaa466c8ae820e43') format('truetype'); | |||||
| } | |||||
| </style> | |||||
| </body> | |||||
| <!-- prettier-ignore --> | |||||
| <%= require('html-loader?{"esModule":false}!./partials/state.free.html') %> | |||||
| <%= require('html-loader?{"esModule":false}!./partials/state.free-preview-expired.html') %> | |||||
| <%= require('html-loader?{"esModule":false}!./partials/state.plus-trial-expired.html') %> | |||||
| <%= require('html-loader?{"esModule":false}!./partials/state.verify-email.html') %> | |||||
| </html> | |||||
+ 165
- 0
src/webviews/apps/premium/timeline/timeline.scss
View File
| @ -0,0 +1,165 @@ | |||||
| * { | |||||
| box-sizing: border-box; | |||||
| } | |||||
| html { | |||||
| height: 100%; | |||||
| font-size: 62.5%; | |||||
| } | |||||
| body { | |||||
| background-color: var(--color-background); | |||||
| color: var(--color-view-foreground); | |||||
| font-family: var(--font-family); | |||||
| height: 100%; | |||||
| line-height: 1.4; | |||||
| font-size: 100% !important; | |||||
| overflow: hidden; | |||||
| margin: 0 20px 20px 20px; | |||||
| padding: 0; | |||||
| } | |||||
| .container { | |||||
| display: grid; | |||||
| grid-template-rows: min-content 1fr min-content; | |||||
| min-height: 100%; | |||||
| // width: 100%; | |||||
| } | |||||
| section { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| padding: 0; | |||||
| } | |||||
| h2 { | |||||
| font-weight: 400; | |||||
| &[data-bind='title'] { | |||||
| flex: auto 0 1; | |||||
| } | |||||
| &[data-bind='description'] { | |||||
| flex: auto 1 1; | |||||
| font-size: 1.3em; | |||||
| font-weight: 200; | |||||
| margin-left: 1.5rem; | |||||
| opacity: 0.7; | |||||
| } | |||||
| } | |||||
| h3 { | |||||
| border: none; | |||||
| color: var(--color-view-header-foreground); | |||||
| font-size: 1.5rem; | |||||
| font-weight: 600; | |||||
| margin-bottom: 0; | |||||
| white-space: nowrap; | |||||
| } | |||||
| h4 { | |||||
| font-size: 1.5rem; | |||||
| font-weight: 400; | |||||
| margin: 0.5rem 0 1rem 0; | |||||
| } | |||||
| a { | |||||
| text-decoration: none; | |||||
| &:focus { | |||||
| outline-color: var(--focus-border); | |||||
| } | |||||
| &:hover { | |||||
| text-decoration: underline; | |||||
| } | |||||
| } | |||||
| b { | |||||
| font-weight: 600; | |||||
| } | |||||
| p { | |||||
| margin-bottom: 0; | |||||
| } | |||||
| vscode-button { | |||||
| align-self: center; | |||||
| margin-top: 1.5rem; | |||||
| max-width: 300px; | |||||
| width: 100%; | |||||
| } | |||||
| span.button-subaction { | |||||
| align-self: center; | |||||
| margin-top: 0.75rem; | |||||
| } | |||||
| @media (min-width: 640px) { | |||||
| vscode-button { | |||||
| align-self: flex-start; | |||||
| } | |||||
| span.button-subaction { | |||||
| align-self: flex-start; | |||||
| } | |||||
| } | |||||
| section#header { | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| align-items: baseline; | |||||
| @media all and (max-width: 500px) { | |||||
| flex-wrap: wrap; | |||||
| } | |||||
| } | |||||
| .select-container { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: flex-end; | |||||
| margin: 1em; | |||||
| flex: 100% 0 1; | |||||
| label { | |||||
| margin-right: 1em; | |||||
| font-size: var(--font-size); | |||||
| } | |||||
| } | |||||
| // .chart-container { | |||||
| // height: calc(100% - 0.5em); | |||||
| // width: 100%; | |||||
| // overflow: hidden; | |||||
| // } | |||||
| #chart { | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| } | |||||
| [data-visible] { | |||||
| display: none; | |||||
| } | |||||
| #overlay { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: var(--color-background); | |||||
| font-size: 1.3em; | |||||
| min-height: 100%; | |||||
| padding: 0 2rem 2rem 2rem; | |||||
| display: none; | |||||
| grid-template-rows: min-content; | |||||
| &.subscription-required { | |||||
| display: grid; | |||||
| } | |||||
| } | |||||
| @import './chart'; | |||||
+ 171
- 0
src/webviews/apps/premium/timeline/timeline.ts
View File
| @ -0,0 +1,171 @@ | |||||
| 'use strict'; | |||||
| /*global*/ | |||||
| import './timeline.scss'; | |||||
| import { provideVSCodeDesignSystem, vsCodeButton, vsCodeDropdown, vsCodeOption } from '@vscode/webview-ui-toolkit'; | |||||
| import { | |||||
| DidChangeStateNotificationType, | |||||
| OpenDataPointCommandType, | |||||
| State, | |||||
| UpdatePeriodCommandType, | |||||
| } from '../../../../premium/webviews/timeline/protocol'; | |||||
| import { SubscriptionPlanId, SubscriptionState } from '../../../../subscription'; | |||||
| import { ExecuteCommandType, IpcMessage, onIpc } from '../../../protocol'; | |||||
| import { App } from '../../shared/appBase'; | |||||
| import { DOM } from '../../shared/dom'; | |||||
| import { DataPointClickEvent, TimelineChart } from './chart'; | |||||
| export class TimelineApp extends App<State> { | |||||
| private _chart: TimelineChart | undefined; | |||||
| constructor() { | |||||
| super('TimelineApp'); | |||||
| } | |||||
| protected override onInitialize() { | |||||
| provideVSCodeDesignSystem().register({ | |||||
| register: function (container: any, context: any) { | |||||
| vsCodeButton().register(container, context); | |||||
| vsCodeDropdown().register(container, context); | |||||
| vsCodeOption().register(container, context); | |||||
| }, | |||||
| }); | |||||
| this.updateState(); | |||||
| } | |||||
| protected override onBind() { | |||||
| const disposables = super.onBind?.() ?? []; | |||||
| disposables.push( | |||||
| DOM.on('[data-action]', 'click', (e, target: HTMLElement) => this.onActionClicked(e, target)), | |||||
| DOM.on(document, 'keydown', (e: KeyboardEvent) => this.onKeyDown(e)), | |||||
| DOM.on(document.getElementById('periods')! as HTMLSelectElement, 'change', (e, target) => | |||||
| this.onPeriodChanged(e, target), | |||||
| ), | |||||
| ); | |||||
| return disposables; | |||||
| } | |||||
| protected override onMessageReceived(e: MessageEvent) { | |||||
| const msg = e.data as IpcMessage; | |||||
| switch (msg.method) { | |||||
| case DidChangeStateNotificationType.method: | |||||
| this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`); | |||||
| onIpc(DidChangeStateNotificationType, msg, params => { | |||||
| this.state = params.state; | |||||
| this.updateState(); | |||||
| }); | |||||
| break; | |||||
| default: | |||||
| super.onMessageReceived?.(e); | |||||
| } | |||||
| } | |||||
| private onActionClicked(e: MouseEvent, target: HTMLElement) { | |||||
| const action = target.dataset.action; | |||||
| if (action?.startsWith('command:')) { | |||||
| this.sendCommand(ExecuteCommandType, { command: action.slice(8) }); | |||||
| } | |||||
| } | |||||
| private onChartDataPointClicked(e: DataPointClickEvent) { | |||||
| this.sendCommand(OpenDataPointCommandType, e); | |||||
| } | |||||
| private onKeyDown(e: KeyboardEvent) { | |||||
| if (e.key === 'Escape' || e.key === 'Esc') { | |||||
| this._chart?.reset(); | |||||
| } | |||||
| } | |||||
| private onPeriodChanged(e: Event, element: HTMLSelectElement) { | |||||
| const value = element.options[element.selectedIndex].value; | |||||
| assertPeriod(value); | |||||
| this.log(`${this.appName}.onPeriodChanged: name=${element.name}, value=${value}`); | |||||
| this.sendCommand(UpdatePeriodCommandType, { period: value }); | |||||
| } | |||||
| private updateState(): void { | |||||
| const $overlay = document.getElementById('overlay') as HTMLDivElement; | |||||
| $overlay.classList.toggle('subscription-required', !this.state.access.allowed); | |||||
| const $slot = document.getElementById('overlay-slot') as HTMLDivElement; | |||||
| if (!this.state.access.allowed) { | |||||
| const { current: subscription, required } = this.state.access.subscription; | |||||
| const requiresPublic = required === SubscriptionPlanId.FreePlus; | |||||
| const options = { visible: { public: requiresPublic, private: !requiresPublic } }; | |||||
| if (subscription.account?.verified === false) { | |||||
| DOM.insertTemplate('state:verify-email', $slot, options); | |||||
| return; | |||||
| } | |||||
| switch (subscription.state) { | |||||
| case SubscriptionState.Free: | |||||
| DOM.insertTemplate('state:free', $slot, options); | |||||
| break; | |||||
| case SubscriptionState.FreePreviewExpired: | |||||
| DOM.insertTemplate('state:free-preview-expired', $slot, options); | |||||
| break; | |||||
| case SubscriptionState.FreePlusTrialExpired: | |||||
| DOM.insertTemplate('state:plus-trial-expired', $slot, options); | |||||
| break; | |||||
| } | |||||
| return; | |||||
| } | |||||
| $slot.innerHTML = ''; | |||||
| if (this._chart == null) { | |||||
| this._chart = new TimelineChart('#chart'); | |||||
| this._chart.onDidClickDataPoint(this.onChartDataPointClicked, this); | |||||
| } | |||||
| let { title } = this.state; | |||||
| let description = ''; | |||||
| const index = title.lastIndexOf('/'); | |||||
| if (index >= 0) { | |||||
| const name = title.substring(index + 1); | |||||
| description = title.substring(0, index); | |||||
| title = name; | |||||
| } | |||||
| for (const [key, value] of Object.entries({ title: title, description: description })) { | |||||
| const $el = document.querySelector(`[data-bind="${key}"]`); | |||||
| if ($el != null) { | |||||
| $el.textContent = String(value); | |||||
| } | |||||
| } | |||||
| const $periods = document.getElementById('periods') as HTMLSelectElement; | |||||
| if ($periods != null) { | |||||
| const period = this.state?.period; | |||||
| for (let i = 0, len = $periods.options.length; i < len; ++i) { | |||||
| if ($periods.options[i].value === period) { | |||||
| $periods.selectedIndex = i; | |||||
| break; | |||||
| } | |||||
| } | |||||
| } | |||||
| this._chart.updateChart(this.state); | |||||
| } | |||||
| } | |||||
| function assertPeriod(period: string): asserts period is `${number}|${'D' | 'M' | 'Y'}` { | |||||
| const [value, unit] = period.split('|'); | |||||
| if (isNaN(Number(value)) || (unit !== 'D' && unit !== 'M' && unit !== 'Y')) { | |||||
| throw new Error(`Invalid period: ${period}`); | |||||
| } | |||||
| } | |||||
| new TimelineApp(); | |||||