From a0c26c8a1dbd1d4ce22ff414c5a41ab4d7417476 Mon Sep 17 00:00:00 2001 From: Johannes Rieken Date: Tue, 24 Oct 2017 17:54:54 +0200 Subject: [PATCH] deco - show badge in scm viewlet when no icons are provided --- extensions/git/package.json | 18 +++++ extensions/git/src/repository.ts | 65 +++++++++++++++++-- .../scm/electron-browser/media/scmViewlet.css | 23 ++++--- .../parts/scm/electron-browser/scmViewlet.ts | 13 ++-- 4 files changed, 99 insertions(+), 20 deletions(-) diff --git a/extensions/git/package.json b/extensions/git/package.json index a69c16b2429..3a7615f75a3 100644 --- a/extensions/git/package.json +++ b/extensions/git/package.json @@ -842,6 +842,15 @@ "highContrast": "#E2C08D" } }, + { + "id": "git.color.deleted", + "description": "Color for deleted resources", + "defaults": { + "light": "#c02e11", + "dark": "#c74e39", + "highContrast": "#c74e39" + } + }, { "id": "git.color.untracked", "description": "Color for untracked resources", @@ -859,6 +868,15 @@ "dark": "#A7A8A9", "highContrast": "#A7A8A9" } + }, + { + "id": "git.color.conflict", + "description": "Color for resources with conflicts", + "defaults": { + "light": "#6c6cc4", + "dark": "#6c6cc4", + "highContrast": "#6c6cc4" + } } ] }, diff --git a/extensions/git/src/repository.ts b/extensions/git/src/repository.ts index 04e7dc49012..ab4180a8785 100644 --- a/extensions/git/src/repository.ts +++ b/extensions/git/src/repository.ts @@ -171,8 +171,9 @@ export class Resource implements SourceControlResourceState { } get decorations(): SourceControlResourceDecorations { - const light = { iconPath: this.getIconPath('light') }; - const dark = { iconPath: this.getIconPath('dark') }; + // TODO@joh + const light = { iconPath: this.getIconPath('light') } && undefined; + const dark = { iconPath: this.getIconPath('dark') } && undefined; const tooltip = this.tooltip; const strikeThrough = this.strikeThrough; const faded = this.faded; @@ -180,19 +181,71 @@ export class Resource implements SourceControlResourceState { return { strikeThrough, faded, tooltip, light, dark }; } - get resourceDecoration(): DecorationData | undefined { - const title = this.tooltip; + get letter(): string | undefined { switch (this.type) { + case Status.INDEX_MODIFIED: + case Status.MODIFIED: + return 'M'; + case Status.INDEX_ADDED: + return 'A'; + case Status.INDEX_DELETED: + case Status.DELETED: + return 'D'; + case Status.INDEX_RENAMED: + return 'R'; case Status.UNTRACKED: - return { priority: 1, title, abbreviation: localize('untracked, short', "U"), bubble: true, color: new ThemeColor('git.color.untracked') }; + return 'U'; + case Status.IGNORED: + return 'I'; + case Status.INDEX_COPIED: + case Status.BOTH_DELETED: + case Status.ADDED_BY_US: + case Status.DELETED_BY_THEM: + case Status.ADDED_BY_THEM: + case Status.DELETED_BY_US: + case Status.BOTH_ADDED: + case Status.BOTH_MODIFIED: + return 'C'; + default: + return undefined; + } + } + + get color(): ThemeColor | undefined { + switch (this.type) { case Status.INDEX_MODIFIED: case Status.MODIFIED: - return { priority: 2, title, abbreviation: localize('modified, short', "M"), bubble: true, color: new ThemeColor('git.color.modified') }; + return new ThemeColor('git.color.modified'); + case Status.INDEX_DELETED: + case Status.DELETED: + return new ThemeColor('git.color.deleted'); + case Status.INDEX_ADDED: // todo@joh - special color? + case Status.INDEX_RENAMED: // todo@joh - special color? + case Status.UNTRACKED: + return new ThemeColor('git.color.untracked'); + case Status.IGNORED: + return new ThemeColor('git.color.ignored'); + case Status.INDEX_COPIED: + case Status.BOTH_DELETED: + case Status.ADDED_BY_US: + case Status.DELETED_BY_THEM: + case Status.ADDED_BY_THEM: + case Status.DELETED_BY_US: + case Status.BOTH_ADDED: + case Status.BOTH_MODIFIED: + return new ThemeColor('git.color.conflict'); default: return undefined; } } + get resourceDecoration(): DecorationData | undefined { + const title = this.tooltip; + const abbreviation = this.letter; + const color = this.color; + return { bubble: true, title, abbreviation, color }; + } + constructor( private _resourceGroupType: ResourceGroupType, private _resourceUri: Uri, diff --git a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css index a20ef64cf68..d09006621d5 100644 --- a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css +++ b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css @@ -84,9 +84,7 @@ overflow: hidden; } -.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label { - width: 100%; - height: 100%; +.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label > a.label-name { overflow: hidden; text-overflow: ellipsis; } @@ -95,6 +93,10 @@ text-decoration: line-through; } +.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label::after { + padding: 0 4px; +} + .scm-viewlet .monaco-list-row > .resource > .decoration-icon { width: 16px; height: 100%; @@ -102,23 +104,26 @@ background-position: 50% 50%; } +.scm-viewlet .monaco-list .monaco-list-row > .resource > .name > .monaco-icon-label > .actions { + flex-grow: 100; +} .scm-viewlet .monaco-list .monaco-list-row > .resource-group > .actions, -.scm-viewlet .monaco-list .monaco-list-row > .resource > .actions { +.scm-viewlet .monaco-list .monaco-list-row > .resource > .name > .monaco-icon-label > .actions { display: none; } .scm-viewlet .monaco-list .monaco-list-row:hover > .resource-group > .actions, -.scm-viewlet .monaco-list .monaco-list-row:hover > .resource > .actions, +.scm-viewlet .monaco-list .monaco-list-row:hover > .resource > .name > .monaco-icon-label > .actions, .scm-viewlet .monaco-list .monaco-list-row.selected > .resource-group > .actions, .scm-viewlet .monaco-list .monaco-list-row.focused > .resource-group > .actions, -.scm-viewlet .monaco-list .monaco-list-row.selected > .resource > .actions, -.scm-viewlet .monaco-list .monaco-list-row.focused > .resource > .actions, +.scm-viewlet .monaco-list .monaco-list-row.selected > .resource > .name > .monaco-icon-label > .actions, +.scm-viewlet .monaco-list .monaco-list-row.focused > .resource > .name > .monaco-icon-label > .actions, .scm-viewlet .monaco-list:not(.selection-multiple) .monaco-list-row > .resource:hover > .actions { display: block; } -.scm-viewlet .monaco-list-row > .resource > .actions .action-label, +.scm-viewlet .monaco-list-row > .resource > .name > .monaco-icon-label > .actions .action-label, .scm-viewlet .monaco-list-row > .resource-group > .actions .action-label { width: 16px; height: 100%; @@ -153,4 +158,4 @@ .scm-viewlet .spacer { flex: 1; -} \ No newline at end of file +} diff --git a/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts b/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts index 990928f0af8..6b272185b6c 100644 --- a/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts +++ b/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts @@ -429,7 +429,7 @@ class ResourceRenderer implements IRenderer { const element = append(container, $('.resource')); const name = append(element, $('.name')); const fileLabel = this.instantiationService.createInstance(FileLabel, name, void 0); - const actionsContainer = append(element, $('.actions')); + const actionsContainer = append(fileLabel.element, $('.actions')); const actionBar = new ActionBar(actionsContainer, { actionItemProvider: this.actionItemProvider, actionRunner: new MultipleSelectionActionRunner(this.getSelectedResources) @@ -446,20 +446,23 @@ class ResourceRenderer implements IRenderer { } renderElement(resource: ISCMResource, index: number, template: ResourceTemplate): void { - template.fileLabel.setFile(resource.sourceUri); + + const theme = this.themeService.getTheme(); + const icon = theme.type === LIGHT ? resource.decorations.icon : resource.decorations.iconDark; + + template.fileLabel.setFile(resource.sourceUri, { fileDecorations: { colors: false, badges: !icon } }); template.actionBar.clear(); template.actionBar.context = resource; template.actionBar.push(this.scmMenus.getResourceActions(resource), { icon: true, label: false }); toggleClass(template.name, 'strike-through', resource.decorations.strikeThrough); toggleClass(template.element, 'faded', resource.decorations.faded); - const theme = this.themeService.getTheme(); - const icon = theme.type === LIGHT ? resource.decorations.icon : resource.decorations.iconDark; - if (icon) { + template.decorationIcon.style.display = ''; template.decorationIcon.style.backgroundImage = `url('${icon}')`; template.decorationIcon.title = resource.decorations.tooltip; } else { + template.decorationIcon.style.display = 'none'; template.decorationIcon.style.backgroundImage = ''; } } -- GitLab