Переглянути джерело

Renames to activity minibar to minimap

main
Eric Amodio 2 роки тому
джерело
коміт
b83e92c8b0
10 змінених файлів з 951 додано та 955 видалено
  1. +2
    -2
      package.json
  2. +1
    -1
      src/config.ts
  3. +7
    -10
      src/plus/webviews/graph/graphWebview.ts
  4. +1
    -1
      src/plus/webviews/graph/protocol.ts
  5. +0
    -8
      src/webviews/apps/plus/activity/react.tsx
  6. +40
    -42
      src/webviews/apps/plus/graph/GraphWrapper.tsx
  7. +30
    -29
      src/webviews/apps/plus/graph/graph.tsx
  8. +44
    -44
      src/webviews/apps/plus/graph/minimap/minimap.ts
  9. +8
    -0
      src/webviews/apps/plus/graph/minimap/react.tsx

+ 2
- 2
package.json Переглянути файл

@ -2309,10 +2309,10 @@
"scope": "window", "scope": "window",
"order": 100 "order": 100
}, },
"gitlens.graph.experimental.activityMinibar.enabled": {
"gitlens.graph.experimental.minimap.enabled": {
"type": "boolean", "type": "boolean",
"default": false, "default": false,
"markdownDescription": "Specifies whether to show an activity minibar above the _Commit Graph_",
"markdownDescription": "Specifies whether to show a minimap of commit activity above the _Commit Graph_",
"scope": "window", "scope": "window",
"order": 100 "order": 100
} }

+ 1
- 1
src/config.ts Переглянути файл

@ -389,7 +389,7 @@ export interface GraphConfig {
defaultItemLimit: number; defaultItemLimit: number;
dimMergeCommits: boolean; dimMergeCommits: boolean;
experimental: { experimental: {
activityMinibar: {
minimap: {
enabled: boolean; enabled: boolean;
}; };
}; };

+ 7
- 10
src/plus/webviews/graph/graphWebview.ts Переглянути файл

@ -479,11 +479,8 @@ export class GraphWebview extends WebviewBase {
for (key in params.changes) { for (key in params.changes) {
if (config[key] !== params.changes[key]) { if (config[key] !== params.changes[key]) {
switch (key) { switch (key) {
case 'activityMinibar':
void configuration.updateEffective(
'graph.experimental.activityMinibar.enabled',
params.changes[key],
);
case 'minimap':
void configuration.updateEffective('graph.experimental.minimap.enabled', params.changes[key]);
break; break;
default: default:
// TODO:@eamodio add more config options as needed // TODO:@eamodio add more config options as needed
@ -586,13 +583,13 @@ export class GraphWebview extends WebviewBase {
configuration.changed(e, 'graph.pullRequests.enabled') || configuration.changed(e, 'graph.pullRequests.enabled') ||
configuration.changed(e, 'graph.showRemoteNames') || configuration.changed(e, 'graph.showRemoteNames') ||
configuration.changed(e, 'graph.showUpstreamStatus') || configuration.changed(e, 'graph.showUpstreamStatus') ||
configuration.changed(e, 'graph.experimental.activityMinibar.enabled')
configuration.changed(e, 'graph.experimental.minimap.enabled')
) { ) {
void this.notifyDidChangeConfiguration(); void this.notifyDidChangeConfiguration();
if ( if (
configuration.changed(e, 'graph.experimental.activityMinibar.enabled') &&
configuration.get('graph.experimental.activityMinibar.enabled') &&
configuration.changed(e, 'graph.experimental.minimap.enabled') &&
configuration.get('graph.experimental.minimap.enabled') &&
!this._graph?.includes?.stats !this._graph?.includes?.stats
) { ) {
this.updateState(); this.updateState();
@ -1598,7 +1595,6 @@ export class GraphWebview extends WebviewBase {
private getComponentConfig(): GraphComponentConfig { private getComponentConfig(): GraphComponentConfig {
const config: GraphComponentConfig = { const config: GraphComponentConfig = {
activityMinibar: configuration.get('graph.experimental.activityMinibar.enabled'),
avatars: configuration.get('graph.avatars'), avatars: configuration.get('graph.avatars'),
dateFormat: dateFormat:
configuration.get('graph.dateFormat') ?? configuration.get('defaultDateFormat') ?? 'short+short', configuration.get('graph.dateFormat') ?? configuration.get('defaultDateFormat') ?? 'short+short',
@ -1607,6 +1603,7 @@ export class GraphWebview extends WebviewBase {
dimMergeCommits: configuration.get('graph.dimMergeCommits'), dimMergeCommits: configuration.get('graph.dimMergeCommits'),
enableMultiSelection: false, enableMultiSelection: false,
highlightRowsOnRefHover: configuration.get('graph.highlightRowsOnRefHover'), highlightRowsOnRefHover: configuration.get('graph.highlightRowsOnRefHover'),
minimap: configuration.get('graph.experimental.minimap.enabled'),
scrollRowPadding: configuration.get('graph.scrollRowPadding'), scrollRowPadding: configuration.get('graph.scrollRowPadding'),
showGhostRefsOnRowHover: configuration.get('graph.showGhostRefsOnRowHover'), showGhostRefsOnRowHover: configuration.get('graph.showGhostRefsOnRowHover'),
showRemoteNamesOnRefs: configuration.get('graph.showRemoteNames'), showRemoteNamesOnRefs: configuration.get('graph.showRemoteNames'),
@ -1703,7 +1700,7 @@ export class GraphWebview extends WebviewBase {
this.repository.path, this.repository.path,
this._panel!.webview.asWebviewUri.bind(this._panel!.webview), this._panel!.webview.asWebviewUri.bind(this._panel!.webview),
{ {
include: { stats: configuration.get('graph.experimental.activityMinibar.enabled') },
include: { stats: configuration.get('graph.experimental.minimap.enabled') },
limit: limit, limit: limit,
ref: ref, ref: ref,
}, },

+ 1
- 1
src/plus/webviews/graph/protocol.ts Переглянути файл

@ -128,7 +128,6 @@ export type GraphTag = Tag;
export type GraphBranch = Head; export type GraphBranch = Head;
export interface GraphComponentConfig { export interface GraphComponentConfig {
activityMinibar?: boolean;
avatars?: boolean; avatars?: boolean;
dateFormat: DateTimeFormat | string; dateFormat: DateTimeFormat | string;
dateStyle: DateStyle; dateStyle: DateStyle;
@ -136,6 +135,7 @@ export interface GraphComponentConfig {
enabledRefMetadataTypes?: GraphRefMetadataType[]; enabledRefMetadataTypes?: GraphRefMetadataType[];
enableMultiSelection?: boolean; enableMultiSelection?: boolean;
highlightRowsOnRefHover?: boolean; highlightRowsOnRefHover?: boolean;
minimap?: boolean;
scrollRowPadding?: number; scrollRowPadding?: number;
showGhostRefsOnRowHover?: boolean; showGhostRefsOnRowHover?: boolean;
showRemoteNamesOnRefs?: boolean; showRemoteNamesOnRefs?: boolean;

+ 0
- 8
src/webviews/apps/plus/activity/react.tsx Переглянути файл

@ -1,8 +0,0 @@
import { reactWrapper } from '../../shared/components/helpers/react-wrapper';
import { ActivityMinibar as activityMinibarComponent } from './activity-minibar';
export const ActivityMinibar = reactWrapper(activityMinibarComponent, {
events: {
onSelected: 'selected',
},
});

+ 40
- 42
src/webviews/apps/plus/graph/GraphWrapper.tsx Переглянути файл

@ -66,13 +66,13 @@ import type { SearchNavigationEventDetail } from '../../shared/components/search
import type { DateTimeFormat } from '../../shared/date'; import type { DateTimeFormat } from '../../shared/date';
import { formatDate, fromNow } from '../../shared/date'; import { formatDate, fromNow } from '../../shared/date';
import type { import type {
ActivityMarker,
ActivityMinibar as ActivityMinibarType,
ActivitySearchResultMarker,
ActivityStats,
ActivityStatsSelectedEventDetail,
} from '../activity/activity-minibar';
import { ActivityMinibar } from '../activity/react';
GraphMinimapDaySelectedEventDetail,
GraphMinimapMarker,
GraphMinimapSearchResultMarker,
GraphMinimapStats,
GraphMinimap as GraphMinimapType,
} from './minimap/minimap';
import { GraphMinimap } from './minimap/react';
export interface GraphWrapperProps { export interface GraphWrapperProps {
nonce?: string; nonce?: string;
@ -228,7 +228,7 @@ export function GraphWrapper({
state.workingTreeStats ?? { added: 0, modified: 0, deleted: 0 }, state.workingTreeStats ?? { added: 0, modified: 0, deleted: 0 },
); );
const activityMinibar = useRef<ActivityMinibarType | undefined>(undefined);
const minimap = useRef<GraphMinimapType | undefined>(undefined);
const ensuredIds = useRef<Set<string>>(new Set()); const ensuredIds = useRef<Set<string>>(new Set());
const ensuredSkippedIds = useRef<Set<string>>(new Set()); const ensuredSkippedIds = useRef<Set<string>>(new Set());
@ -344,12 +344,12 @@ export function GraphWrapper({
}; };
}, [activeRow]); }, [activeRow]);
const activityData = useMemo(() => {
if (!graphConfig?.activityMinibar) return undefined;
const minimapData = useMemo(() => {
if (!graphConfig?.minimap) return undefined;
// Loops through all the rows and group them by day and aggregate the row.stats // Loops through all the rows and group them by day and aggregate the row.stats
const statsByDayMap = new Map<number, ActivityStats>();
const markersByDay = new Map<number, ActivityMarker[]>();
const statsByDayMap = new Map<number, GraphMinimapStats>();
const markersByDay = new Map<number, GraphMinimapMarker[]>();
let rankedShas: { let rankedShas: {
head: string | undefined; head: string | undefined;
@ -395,7 +395,7 @@ export function GraphWrapper({
rankedShas.branch = row.sha; rankedShas.branch = row.sha;
// eslint-disable-next-line no-loop-func // eslint-disable-next-line no-loop-func
headMarkers = row.heads.map<ActivityMarker>(h => {
headMarkers = row.heads.map<GraphMinimapMarker>(h => {
if (h.isCurrentHead) { if (h.isCurrentHead) {
head = h; head = h;
rankedShas.head = row.sha; rankedShas.head = row.sha;
@ -420,7 +420,7 @@ export function GraphWrapper({
rankedShas.remote = row.sha; rankedShas.remote = row.sha;
// eslint-disable-next-line no-loop-func // eslint-disable-next-line no-loop-func
remoteMarkers = row.remotes.map<ActivityMarker>(r => {
remoteMarkers = row.remotes.map<GraphMinimapMarker>(r => {
let current = false; let current = false;
if (r.name === head?.name) { if (r.name === head?.name) {
rankedShas.remote = row.sha; rankedShas.remote = row.sha;
@ -445,7 +445,7 @@ export function GraphWrapper({
if (row.tags?.length) { if (row.tags?.length) {
rankedShas.tag = row.sha; rankedShas.tag = row.sha;
tagMarkers = row.tags.map<ActivityMarker>(t => ({
tagMarkers = row.tags.map<GraphMinimapMarker>(t => ({
type: 'tag', type: 'tag',
name: t.name, name: t.name,
})); }));
@ -489,12 +489,12 @@ export function GraphWrapper({
} }
return { stats: statsByDayMap, markers: markersByDay }; return { stats: statsByDayMap, markers: markersByDay };
}, [rows, graphConfig?.activityMinibar]);
}, [rows, graphConfig?.minimap]);
const activitySearchResults = useMemo(() => {
if (!graphConfig?.activityMinibar) return undefined;
const minimapSearchResults = useMemo(() => {
if (!graphConfig?.minimap) return undefined;
const searchResultsByDay = new Map<number, ActivitySearchResultMarker>();
const searchResultsByDay = new Map<number, GraphMinimapSearchResultMarker>();
if (searchResults?.ids != null) { if (searchResults?.ids != null) {
let day; let day;
@ -512,9 +512,9 @@ export function GraphWrapper({
} }
return searchResultsByDay; return searchResultsByDay;
}, [searchResults, graphConfig?.activityMinibar]);
}, [searchResults, graphConfig?.minimap]);
const handleOnActivityStatsSelected = (e: CustomEvent<ActivityStatsSelectedEventDetail>) => {
const handleOnMinimapDaySelected = (e: CustomEvent<GraphMinimapDaySelectedEventDetail>) => {
let { sha } = e.detail; let { sha } = e.detail;
if (sha == null) { if (sha == null) {
const date = e.detail.date?.getTime(); const date = e.detail.date?.getTime();
@ -530,18 +530,18 @@ export function GraphWrapper({
graphRef.current?.selectCommits([sha], false, true); graphRef.current?.selectCommits([sha], false, true);
}; };
const handleOnToggleActivityMinibar = (_e: React.MouseEvent) => {
onUpdateGraphConfiguration?.({ activityMinibar: !graphConfig?.activityMinibar });
const handleOnToggleMinimap = (_e: React.MouseEvent) => {
onUpdateGraphConfiguration?.({ minimap: !graphConfig?.minimap });
}; };
const handleOnGraphMouseLeave = (_event: any) => { const handleOnGraphMouseLeave = (_event: any) => {
activityMinibar.current?.unselect(undefined, true);
minimap.current?.unselect(undefined, true);
}; };
const handleOnGraphRowHovered = (_event: any, graphZoneType: GraphZoneType, graphRow: GraphRow) => { const handleOnGraphRowHovered = (_event: any, graphZoneType: GraphZoneType, graphRow: GraphRow) => {
if (graphZoneType === REF_ZONE_TYPE || activityMinibar.current == null) return;
if (graphZoneType === REF_ZONE_TYPE || minimap.current == null) return;
activityMinibar.current?.select(graphRow.date, true);
minimap.current?.select(graphRow.date, true);
}; };
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
@ -1223,9 +1223,9 @@ export function GraphWrapper({
<button <button
type="button" type="button"
className="action-button action-button--narrow" className="action-button action-button--narrow"
title="Toggle Activity Minibar (experimental)"
aria-label="Toggle Activity Minibar (experimental)"
onClick={handleOnToggleActivityMinibar}
title="Toggle Minimap (experimental)"
aria-label="Toggle Minimap (experimental)"
onClick={handleOnToggleMinimap}
> >
<span className="codicon codicon-graph-line action-button__icon"></span> <span className="codicon codicon-graph-line action-button__icon"></span>
</button> </button>
@ -1236,16 +1236,16 @@ export function GraphWrapper({
<div className="progress-bar"></div> <div className="progress-bar"></div>
</div> </div>
</header> </header>
{graphConfig?.activityMinibar && (
<ActivityMinibar
ref={activityMinibar as any}
{graphConfig?.minimap && (
<GraphMinimap
ref={minimap as any}
activeDay={activeDay} activeDay={activeDay}
data={activityData?.stats}
markers={activityData?.markers}
searchResults={activitySearchResults}
data={minimapData?.stats}
markers={minimapData?.markers}
searchResults={minimapSearchResults}
visibleDays={visibleDays} visibleDays={visibleDays}
onSelected={e => handleOnActivityStatsSelected(e as CustomEvent<ActivityStatsSelectedEventDetail>)}
></ActivityMinibar>
onSelected={e => handleOnMinimapDaySelected(e as CustomEvent<GraphMinimapDaySelectedEventDetail>)}
></GraphMinimap>
)} )}
<main <main
id="main" id="main"
@ -1285,16 +1285,14 @@ export function GraphWrapper({
onDoubleClickGraphRow={handleOnDoubleClickRow} onDoubleClickGraphRow={handleOnDoubleClickRow}
onDoubleClickGraphRef={handleOnDoubleClickRef} onDoubleClickGraphRef={handleOnDoubleClickRef}
onGraphColumnsReOrdered={handleOnGraphColumnsReOrdered} onGraphColumnsReOrdered={handleOnGraphColumnsReOrdered}
onGraphMouseLeave={activityMinibar.current ? handleOnGraphMouseLeave : undefined}
onGraphRowHovered={activityMinibar.current ? handleOnGraphRowHovered : undefined}
onGraphMouseLeave={minimap.current ? handleOnGraphMouseLeave : undefined}
onGraphRowHovered={minimap.current ? handleOnGraphRowHovered : undefined}
onSelectGraphRows={handleSelectGraphRows} onSelectGraphRows={handleSelectGraphRows}
onToggleRefsVisibilityClick={handleOnToggleRefsVisibilityClick} onToggleRefsVisibilityClick={handleOnToggleRefsVisibilityClick}
onEmailsMissingAvatarUrls={handleMissingAvatars} onEmailsMissingAvatarUrls={handleMissingAvatars}
onRefsMissingMetadata={handleMissingRefsMetadata} onRefsMissingMetadata={handleMissingRefsMetadata}
onShowMoreCommits={handleMoreCommits} onShowMoreCommits={handleMoreCommits}
onGraphVisibleRowsChanged={
activityMinibar.current ? handleOnGraphVisibleRowsChanged : undefined
}
onGraphVisibleRowsChanged={minimap.current ? handleOnGraphVisibleRowsChanged : undefined}
platform={clientPlatform} platform={clientPlatform}
refMetadataById={refsMetadata} refMetadataById={refsMetadata}
shaLength={graphConfig?.idLength} shaLength={graphConfig?.idLength}

+ 30
- 29
src/webviews/apps/plus/graph/graph.tsx Переглянути файл

@ -382,7 +382,8 @@ export class GraphApp extends App {
bodyStyle.setProperty('--color-graph-text-secondary', opacity(e.colors.foreground, 65)); bodyStyle.setProperty('--color-graph-text-secondary', opacity(e.colors.foreground, 65));
bodyStyle.setProperty('--color-graph-text-disabled', opacity(e.colors.foreground, 50)); bodyStyle.setProperty('--color-graph-text-disabled', opacity(e.colors.foreground, 50));
// activity minibar
// minimap
const resultColor = Color.fromHex('#ffff00'); const resultColor = Color.fromHex('#ffff00');
const headColor = Color.fromHex('#00ff00'); const headColor = Color.fromHex('#00ff00');
const branchColor = Color.fromHex('#ff7f50'); const branchColor = Color.fromHex('#ff7f50');
@ -390,17 +391,17 @@ export class GraphApp extends App {
color = e.computedStyle.getPropertyValue('--vscode-progressBar-background').trim(); color = e.computedStyle.getPropertyValue('--vscode-progressBar-background').trim();
const activityColor = Color.from(color); const activityColor = Color.from(color);
// bodyStyle.setProperty('--color-activityMinibar-line0', color);
bodyStyle.setProperty('--color-activityMinibar-line0', activityColor.luminance(themeLuminance(0.5)).toString());
// bodyStyle.setProperty('--color-graph-minimap-line0', color);
bodyStyle.setProperty('--color-graph-minimap-line0', activityColor.luminance(themeLuminance(0.5)).toString());
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-focusLine',
'--color-graph-minimap-focusLine',
backgroundColor.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.2)).toString(), backgroundColor.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.2)).toString(),
); );
color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-background').trim(); color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-background').trim();
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-visibleAreaBackground',
'--color-graph-minimap-visibleAreaBackground',
Color.from(color) Color.from(color)
.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15)) .luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
.toString(), .toString(),
@ -408,7 +409,7 @@ export class GraphApp extends App {
color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-hoverBackground').trim(); color = e.computedStyle.getPropertyValue('--vscode-scrollbarSlider-hoverBackground').trim();
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-visibleAreaHoverBackground',
'--color-graph-minimap-visibleAreaHoverBackground',
Color.from(color) Color.from(color)
.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15)) .luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.15))
.toString(), .toString(),
@ -418,11 +419,11 @@ export class GraphApp extends App {
.luminance(themeLuminance(e.isLightTheme ? 0.45 : 0.32)) .luminance(themeLuminance(e.isLightTheme ? 0.45 : 0.32))
.toString(); .toString();
// color = e.computedStyle.getPropertyValue('--vscode-editorCursor-foreground').trim(); // color = e.computedStyle.getPropertyValue('--vscode-editorCursor-foreground').trim();
bodyStyle.setProperty('--color-activityMinibar-selectedMarker', color);
bodyStyle.setProperty('--color-activityMinibar-highlightedMarker', opacity(color, 60));
bodyStyle.setProperty('--color-graph-minimap-selectedMarker', color);
bodyStyle.setProperty('--color-graph-minimap-highlightedMarker', opacity(color, 60));
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-resultMarker',
'--color-graph-minimap-resultMarker',
resultColor.luminance(themeLuminance(0.6)).toString(), resultColor.luminance(themeLuminance(0.6)).toString(),
); );
@ -431,41 +432,41 @@ export class GraphApp extends App {
const headBorder = headColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(); const headBorder = headColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
const headMarker = headColor.luminance(themeLuminance(0.5)).toString(); const headMarker = headColor.luminance(themeLuminance(0.5)).toString();
bodyStyle.setProperty('--color-activityMinibar-headBackground', headBackground);
bodyStyle.setProperty('--color-activityMinibar-headBorder', headBorder);
bodyStyle.setProperty('--color-activityMinibar-headForeground', pillLabel);
bodyStyle.setProperty('--color-activityMinibar-headMarker', opacity(headMarker, 80));
bodyStyle.setProperty('--color-graph-minimap-headBackground', headBackground);
bodyStyle.setProperty('--color-graph-minimap-headBorder', headBorder);
bodyStyle.setProperty('--color-graph-minimap-headForeground', pillLabel);
bodyStyle.setProperty('--color-graph-minimap-headMarker', opacity(headMarker, 80));
bodyStyle.setProperty('--color-activityMinibar-upstreamBackground', headBackground);
bodyStyle.setProperty('--color-activityMinibar-upstreamBorder', headBorder);
bodyStyle.setProperty('--color-activityMinibar-upstreamForeground', pillLabel);
bodyStyle.setProperty('--color-activityMinibar-upstreamMarker', opacity(headMarker, 60));
bodyStyle.setProperty('--color-graph-minimap-upstreamBackground', headBackground);
bodyStyle.setProperty('--color-graph-minimap-upstreamBorder', headBorder);
bodyStyle.setProperty('--color-graph-minimap-upstreamForeground', pillLabel);
bodyStyle.setProperty('--color-graph-minimap-upstreamMarker', opacity(headMarker, 60));
const branchBackground = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.3)).toString(); const branchBackground = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.3)).toString();
const branchBorder = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(); const branchBorder = branchColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString();
const branchMarker = branchColor.luminance(themeLuminance(0.6)).toString(); const branchMarker = branchColor.luminance(themeLuminance(0.6)).toString();
bodyStyle.setProperty('--color-activityMinibar-branchBackground', branchBackground);
bodyStyle.setProperty('--color-activityMinibar-branchBorder', branchBorder);
bodyStyle.setProperty('--color-activityMinibar-branchForeground', pillLabel);
bodyStyle.setProperty('--color-activityMinibar-branchMarker', opacity(branchMarker, 70));
bodyStyle.setProperty('--color-graph-minimap-branchBackground', branchBackground);
bodyStyle.setProperty('--color-graph-minimap-branchBorder', branchBorder);
bodyStyle.setProperty('--color-graph-minimap-branchForeground', pillLabel);
bodyStyle.setProperty('--color-graph-minimap-branchMarker', opacity(branchMarker, 70));
bodyStyle.setProperty('--color-activityMinibar-remoteBackground', opacity(branchBackground, 80));
bodyStyle.setProperty('--color-activityMinibar-remoteBorder', opacity(branchBorder, 80));
bodyStyle.setProperty('--color-activityMinibar-remoteForeground', pillLabel);
bodyStyle.setProperty('--color-activityMinibar-remoteMarker', opacity(branchMarker, 30));
bodyStyle.setProperty('--color-graph-minimap-remoteBackground', opacity(branchBackground, 80));
bodyStyle.setProperty('--color-graph-minimap-remoteBorder', opacity(branchBorder, 80));
bodyStyle.setProperty('--color-graph-minimap-remoteForeground', pillLabel);
bodyStyle.setProperty('--color-graph-minimap-remoteMarker', opacity(branchMarker, 30));
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-tagBackground',
'--color-graph-minimap-tagBackground',
tagColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.2)).toString(), tagColor.luminance(themeLuminance(e.isLightTheme ? 0.8 : 0.2)).toString(),
); );
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-tagBorder',
'--color-graph-minimap-tagBorder',
tagColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(), tagColor.luminance(themeLuminance(e.isLightTheme ? 0.2 : 0.4)).toString(),
); );
bodyStyle.setProperty('--color-activityMinibar-tagForeground', pillLabel);
bodyStyle.setProperty('--color-graph-minimap-tagForeground', pillLabel);
bodyStyle.setProperty( bodyStyle.setProperty(
'--color-activityMinibar-tagMarker',
'--color-graph-minimap-tagMarker',
opacity(tagColor.luminance(themeLuminance(0.5)).toString(), 60), opacity(tagColor.luminance(themeLuminance(0.5)).toString(), 60),
); );

src/webviews/apps/plus/activity/activity-minibar.ts → src/webviews/apps/plus/graph/minimap/minimap.ts Переглянути файл

@ -1,10 +1,10 @@
import { css, customElement, FASTElement, html, observable, ref } from '@microsoft/fast-element'; import { css, customElement, FASTElement, html, observable, ref } from '@microsoft/fast-element';
import type { Chart, DataItem, RegionOptions } from 'billboard.js'; import type { Chart, DataItem, RegionOptions } from 'billboard.js';
import { bb, selection, spline, zoom } from 'billboard.js'; import { bb, selection, spline, zoom } from 'billboard.js';
import { groupByMap } from '../../../../system/array';
import { first, flatMap, map, some, union } from '../../../../system/iterable';
import { pluralize } from '../../../../system/string';
import { formatDate, formatNumeric, fromNow } from '../../shared/date';
import { groupByMap } from '../../../../../system/array';
import { first, flatMap, map, some, union } from '../../../../../system/iterable';
import { pluralize } from '../../../../../system/string';
import { formatDate, formatNumeric, fromNow } from '../../../shared/date';
export interface BranchMarker { export interface BranchMarker {
type: 'branch'; type: 'branch';
@ -24,14 +24,14 @@ export interface TagMarker {
current?: undefined; current?: undefined;
} }
export type ActivityMarker = BranchMarker | RemoteMarker | TagMarker;
export type GraphMinimapMarker = BranchMarker | RemoteMarker | TagMarker;
export interface ActivitySearchResultMarker {
export interface GraphMinimapSearchResultMarker {
type: 'search-result'; type: 'search-result';
sha: string; sha: string;
} }
export interface ActivityStats {
export interface GraphMinimapStats {
commits: number; commits: number;
activity?: { additions: number; deletions: number }; activity?: { additions: number; deletions: number };
@ -39,14 +39,14 @@ export interface ActivityStats {
sha?: string; sha?: string;
} }
export type ActivityStatsSelectedEvent = CustomEvent<ActivityStatsSelectedEventDetail>;
export type GraphMinimapDaySelectedEvent = CustomEvent<GraphMinimapDaySelectedEventDetail>;
export interface ActivityStatsSelectedEventDetail {
export interface GraphMinimapDaySelectedEventDetail {
date: Date; date: Date;
sha?: string; sha?: string;
} }
const template = html<ActivityMinibar>`<template>
const template = html<GraphMinimap>`<template>
<div id="chart" ${ref('chart')}></div> <div id="chart" ${ref('chart')}></div>
</template>`; </template>`;
@ -86,7 +86,7 @@ const styles = css`
/*-- Grid --*/ /*-- Grid --*/
.bb-xgrid-focus line { .bb-xgrid-focus line {
stroke: var(--color-activityMinibar-focusLine);
stroke: var(--color-graph-minimap-focusLine);
} }
/*-- Line --*/ /*-- Line --*/
@ -123,7 +123,7 @@ const styles = css`
/*-- Regions --*/ /*-- Regions --*/
.bb-region.visible-area { .bb-region.visible-area {
fill: var(--color-activityMinibar-visibleAreaBackground);
fill: var(--color-graph-minimap-visibleAreaBackground);
/* transform: translateY(26px); */ /* transform: translateY(26px); */
transform: translateY(-4px); transform: translateY(-4px);
z-index: 0; z-index: 0;
@ -134,11 +134,11 @@ const styles = css`
} }
/* :host(:hover) .bb-region.visible-area { /* :host(:hover) .bb-region.visible-area {
fill: var(--color-activityMinibar-visibleAreaHoverBackground);
fill: var(--color-graph-minimap-visibleAreaHoverBackground);
} */ } */
.bb-region.marker-result { .bb-region.marker-result {
fill: var(--color-activityMinibar-resultMarker);
fill: var(--color-graph-minimap-resultMarker);
transform: translate(-1px, -4px); transform: translate(-1px, -4px);
z-index: 10; z-index: 10;
} }
@ -148,7 +148,7 @@ const styles = css`
} }
.bb-region.marker-head { .bb-region.marker-head {
fill: var(--color-activityMinibar-headMarker);
fill: var(--color-graph-minimap-headMarker);
transform: translate(0px, -4px); transform: translate(0px, -4px);
z-index: 5; z-index: 5;
} }
@ -158,7 +158,7 @@ const styles = css`
} }
.bb-region.marker-upstream { .bb-region.marker-upstream {
fill: var(--color-activityMinibar-upstreamMarker);
fill: var(--color-graph-minimap-upstreamMarker);
transform: translate(0px, -4px); transform: translate(0px, -4px);
z-index: 4; z-index: 4;
} }
@ -168,7 +168,7 @@ const styles = css`
} }
.bb-region.marker-branch { .bb-region.marker-branch {
fill: var(--color-activityMinibar-branchMarker);
fill: var(--color-graph-minimap-branchMarker);
transform: translate(-2px, 26px); transform: translate(-2px, 26px);
z-index: 3; z-index: 3;
} }
@ -178,7 +178,7 @@ const styles = css`
} }
.bb-region.marker-remote { .bb-region.marker-remote {
fill: var(--color-activityMinibar-remoteMarker);
fill: var(--color-graph-minimap-remoteMarker);
transform: translate(-3px, 31px); transform: translate(-3px, 31px);
z-index: 2; z-index: 2;
} }
@ -188,7 +188,7 @@ const styles = css`
} }
.bb-region.marker-tag { .bb-region.marker-tag {
fill: var(--color-activityMinibar-tagMarker);
fill: var(--color-graph-minimap-tagMarker);
transform: translate(1px, 31px); transform: translate(1px, 31px);
z-index: 1; z-index: 1;
} }
@ -295,38 +295,38 @@ const styles = css`
.bb-tooltip .refs .branch { .bb-tooltip .refs .branch {
border-radius: 3px; border-radius: 3px;
padding: 0 4px; padding: 0 4px;
background-color: var(--color-activityMinibar-branchBackground);
border: 1px solid var(--color-activityMinibar-branchBorder);
color: var(--color-activityMinibar-branchForeground);
background-color: var(--color-graph-minimap-branchBackground);
border: 1px solid var(--color-graph-minimap-branchBorder);
color: var(--color-graph-minimap-branchForeground);
} }
.bb-tooltip .refs .branch.current { .bb-tooltip .refs .branch.current {
background-color: var(--color-activityMinibar-headBackground);
border: 1px solid var(--color-activityMinibar-headBorder);
color: var(--color-activityMinibar-headForeground);
background-color: var(--color-graph-minimap-headBackground);
border: 1px solid var(--color-graph-minimap-headBorder);
color: var(--color-graph-minimap-headForeground);
} }
.bb-tooltip .refs .remote { .bb-tooltip .refs .remote {
border-radius: 3px; border-radius: 3px;
padding: 0 4px; padding: 0 4px;
background-color: var(--color-activityMinibar-remoteBackground);
border: 1px solid var(--color-activityMinibar-remoteBorder);
color: var(--color-activityMinibar-remoteForeground);
background-color: var(--color-graph-minimap-remoteBackground);
border: 1px solid var(--color-graph-minimap-remoteBorder);
color: var(--color-graph-minimap-remoteForeground);
} }
.bb-tooltip .refs .remote.current { .bb-tooltip .refs .remote.current {
background-color: var(--color-activityMinibar-upstreamBackground);
border: 1px solid var(--color-activityMinibar-upstreamBorder);
color: var(--color-activityMinibar-upstreamForeground);
background-color: var(--color-graph-minimap-upstreamBackground);
border: 1px solid var(--color-graph-minimap-upstreamBorder);
color: var(--color-graph-minimap-upstreamForeground);
} }
.bb-tooltip .refs .tag { .bb-tooltip .refs .tag {
border-radius: 3px; border-radius: 3px;
padding: 0 4px; padding: 0 4px;
background-color: var(--color-activityMinibar-tagBackground);
border: 1px solid var(--color-activityMinibar-tagBorder);
color: var(--color-activityMinibar-tagForeground);
background-color: var(--color-graph-minimap-tagBackground);
border: 1px solid var(--color-graph-minimap-tagBorder);
color: var(--color-graph-minimap-tagForeground);
} }
`; `;
@customElement({ name: 'activity-minibar', template: template, styles: styles })
export class ActivityMinibar extends FASTElement {
@customElement({ name: 'graph-minimap', template: template, styles: styles })
export class GraphMinimap extends FASTElement {
chart!: HTMLDivElement; chart!: HTMLDivElement;
private _chart!: Chart; private _chart!: Chart;
@ -342,10 +342,10 @@ export class ActivityMinibar extends FASTElement {
} }
@observable @observable
data: Map<number, ActivityStats | null> | undefined;
data: Map<number, GraphMinimapStats | null> | undefined;
protected dataChanged( protected dataChanged(
_oldVal?: Map<number, ActivityStats | null>,
_newVal?: Map<number, ActivityStats | null>,
_oldVal?: Map<number, GraphMinimapStats | null>,
_newVal?: Map<number, GraphMinimapStats | null>,
markerChanged?: boolean, markerChanged?: boolean,
) { ) {
if (this._loadTimer) { if (this._loadTimer) {
@ -362,13 +362,13 @@ export class ActivityMinibar extends FASTElement {
} }
@observable @observable
markers: Map<number, ActivityMarker[]> | undefined;
markers: Map<number, GraphMinimapMarker[]> | undefined;
protected markersChanged() { protected markersChanged() {
this.dataChanged(undefined, undefined, true); this.dataChanged(undefined, undefined, true);
} }
@observable @observable
searchResults: Map<number, ActivitySearchResultMarker> | undefined;
searchResults: Map<number, GraphMinimapSearchResultMarker> | undefined;
protected searchResultsChanged() { protected searchResultsChanged() {
this._chart?.regions.remove({ classes: ['marker-result'] }); this._chart?.regions.remove({ classes: ['marker-result'] });
if (this.searchResults == null) return; if (this.searchResults == null) return;
@ -455,7 +455,7 @@ export class ActivityMinibar extends FASTElement {
if (this._markerRegions == null) { if (this._markerRegions == null) {
if (this.markers != null) { if (this.markers != null) {
const regions = flatMap(this.markers, ([day, markers]) => const regions = flatMap(this.markers, ([day, markers]) =>
map<ActivityMarker, RegionOptions>(
map<GraphMinimapMarker, RegionOptions>(
markers, markers,
m => m =>
({ ({
@ -616,7 +616,7 @@ export class ActivityMinibar extends FASTElement {
this.$emit('selected', { this.$emit('selected', {
date: date, date: date,
sha: sha, sha: sha,
} satisfies ActivityStatsSelectedEventDetail);
} satisfies GraphMinimapDaySelectedEventDetail);
}); });
}, },
selection: { selection: {
@ -630,7 +630,7 @@ export class ActivityMinibar extends FASTElement {
// }, // },
}, },
colors: { colors: {
activity: 'var(--color-activityMinibar-line0)',
activity: 'var(--color-graph-minimap-line0)',
// additions: 'rgba(73, 190, 71, 0.7)', // additions: 'rgba(73, 190, 71, 0.7)',
// deletions: 'rgba(195, 32, 45, 0.7)', // deletions: 'rgba(195, 32, 45, 0.7)',
}, },

+ 8
- 0
src/webviews/apps/plus/graph/minimap/react.tsx Переглянути файл

@ -0,0 +1,8 @@
import { reactWrapper } from '../../../shared/components/helpers/react-wrapper';
import { GraphMinimap as graphMinimapComponent } from './minimap';
export const GraphMinimap = reactWrapper(graphMinimapComponent, {
events: {
onSelected: 'selected',
},
});

Завантаження…
Відмінити
Зберегти