apply minimap vscode colors

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>
eclipse-theia · Dec 27, 2019 · 55c0477 · 55c0477
1 parent 68a306e
commit 55c0477
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 116 deletions.
diff --git a/packages/editor/src/browser/decorations/editor-decoration.ts b/packages/editor/src/browser/decorations/editor-decoration.ts
@@ -77,14 +77,30 @@ export interface EditorDecorationOptions {
      * render this decoration in the overview ruler.
      */
     overviewRuler?: DecorationOverviewRulerOptions;
+    /**
+     * If set, render this decoration in the minimap.
+     */
+    minimap?: DecorationMinimapOptions;
 }
 
-export interface DecorationOverviewRulerOptions {
+export interface DecorationOptions {
     /**
      * color of the decoration in the overview ruler.
      * use `rgba` values to play well with other decorations.
      */
     color: string;
+}
+
+export enum MinimapPosition {
+    Inline = 1,
+    Gutter = 2
+}
+
+export interface DecorationMinimapOptions extends DecorationOptions {
+    position?: MinimapPosition;
+}
+
+export interface DecorationOverviewRulerOptions extends DecorationOptions {
     /**
      * position in the overview ruler.
      */

diff --git a/packages/git/src/browser/dirty-diff/dirty-diff-module.ts b/packages/git/src/browser/dirty-diff/dirty-diff-module.ts
@@ -19,8 +19,6 @@ import { FrontendApplicationContribution } from '@theia/core/lib/browser';
 import { DirtyDiffContribution } from './dirty-diff-contribution';
 import { DirtyDiffManager } from './dirty-diff-manager';
 
-import '../../../src/browser/style/dirty-diff.css';
-
 export function bindDirtyDiff(bind: interfaces.Bind): void {
     bind(DirtyDiffManager).toSelf().inSingletonScope();
     bind(DirtyDiffContribution).toSelf().inSingletonScope();

diff --git a/packages/git/src/browser/style/dirty-diff-decorator.css b/packages/git/src/browser/style/dirty-diff-decorator.css
diff --git a/packages/git/src/browser/style/dirty-diff.css b/packages/git/src/browser/style/dirty-diff.css
diff --git a/packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts b/packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts
@@ -22,7 +22,8 @@ import {
     EditorDecorationOptions,
     OverviewRulerLane,
     EditorDecorator,
-    TextEditor
+    TextEditor,
+    MinimapPosition
 } from '@theia/editor/lib/browser';
 import { DirtyDiff, LineRange } from './diff-computer';
 
@@ -35,25 +36,40 @@ export enum DirtyDiffDecorationType {
 const AddedLineDecoration = <EditorDecorationOptions>{
     linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-added-line',
     overviewRuler: {
-        color: 'rgba(0, 255, 0, 0.8)',
+        color: 'editorOverviewRuler.addedForeground',
         position: OverviewRulerLane.Left,
-    }
+    },
+    minimap: {
+        color: 'minimapGutter.addedBackground',
+        position: MinimapPosition.Gutter
+    },
+    isWholeLine: true
 };
 
 const RemovedLineDecoration = <EditorDecorationOptions>{
     linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-removed-line',
     overviewRuler: {
-        color: 'rgba(230, 0, 0, 0.8)',
+        color: 'editorOverviewRuler.deletedForeground',
         position: OverviewRulerLane.Left,
-    }
+    },
+    minimap: {
+        color: 'minimapGutter.deletedBackground',
+        position: MinimapPosition.Gutter
+    },
+    isWholeLine: false
 };
 
 const ModifiedLineDecoration = <EditorDecorationOptions>{
     linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-modified-line',
     overviewRuler: {
-        color: 'rgba(0, 100, 150, 0.8)',
+        color: 'editorOverviewRuler.modifiedForeground',
         position: OverviewRulerLane.Left,
-    }
+    },
+    minimap: {
+        color: 'minimapGutter.modifiedBackground',
+        position: MinimapPosition.Gutter
+    },
+    isWholeLine: true
 };
 
 export interface DirtyDiffUpdate extends DirtyDiff {

diff --git a/packages/scm/src/browser/scm-contribution.ts b/packages/scm/src/browser/scm-contribution.ts
@@ -31,6 +31,8 @@ import { ScmWidget } from '../browser/scm-widget';
 import URI from '@theia/core/lib/common/uri';
 import { ScmQuickOpenService } from './scm-quick-open-service';
 import { ScmRepository } from './scm-repository';
+import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
+import { ColorRegistry, Color } from '@theia/core/lib/browser/color-registry';
 
 export const SCM_WIDGET_FACTORY_ID = ScmWidget.ID;
 export const SCM_VIEW_CONTAINER_ID = 'scm-view-container';
@@ -52,7 +54,7 @@ export namespace SCM_COMMANDS {
 }
 
 @injectable()
-export class ScmContribution extends AbstractViewContribution<ScmWidget> implements FrontendApplicationContribution {
+export class ScmContribution extends AbstractViewContribution<ScmWidget> implements FrontendApplicationContribution, ColorContribution {
 
     @inject(StatusBar) protected readonly statusBar: StatusBar;
     @inject(ScmService) protected readonly scmService: ScmService;
@@ -180,4 +182,71 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
         this.statusBarDisposable.push(Disposable.create(() => this.statusBar.removeElement(id)));
     }
 
+    /**
+     * It should be aligned with https://github.com/microsoft/vscode/blob/0dfa355b3ad185a6289ba28a99c141ab9e72d2be/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts#L808
+     */
+    registerColors(colors: ColorRegistry): void {
+        const overviewRulerDefault = Color.rgba(0, 122, 204, 0.6);
+        colors.register(
+            {
+                id: 'editorGutter.modifiedBackground', defaults: {
+                    dark: Color.rgba(12, 125, 157),
+                    light: Color.rgba(102, 175, 224),
+                    hc: Color.rgba(0, 155, 249)
+                }, description: 'Editor gutter background color for lines that are modified.'
+            },
+            {
+                id: 'editorGutter.addedBackground', defaults: {
+                    dark: Color.rgba(88, 124, 12),
+                    light: Color.rgba(129, 184, 139),
+                    hc: Color.rgba(51, 171, 78)
+                }, description: 'Editor gutter background color for lines that are added.'
+            },
+            {
+                id: 'editorGutter.deletedBackground', defaults: {
+                    dark: Color.rgba(148, 21, 27),
+                    light: Color.rgba(202, 75, 81),
+                    hc: Color.rgba(252, 93, 109)
+                }, description: 'Editor gutter background color for lines that are deleted.'
+            },
+            {
+                id: 'minimapGutter.modifiedBackground', defaults: {
+                    dark: Color.rgba(12, 125, 157),
+                    light: Color.rgba(102, 175, 224),
+                    hc: Color.rgba(0, 155, 249)
+                }, description: 'Minimap gutter background color for lines that are modified.'
+            },
+            {
+                id: 'minimapGutter.addedBackground',
+                defaults: {
+                    dark: Color.rgba(88, 124, 12),
+                    light: Color.rgba(129, 184, 139),
+                    hc: Color.rgba(51, 171, 78)
+                }, description: 'Minimap gutter background color for lines that are added.'
+            },
+            {
+                id: 'minimapGutter.deletedBackground', defaults: {
+                    dark: Color.rgba(148, 21, 27),
+                    light: Color.rgba(202, 75, 81),
+                    hc: Color.rgba(252, 93, 109)
+                }, description: 'Minimap gutter background color for lines that are deleted.'
+            },
+            {
+                id: 'editorOverviewRuler.modifiedForeground', defaults: {
+                    dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
+                }, description: 'Overview ruler marker color for modified content.'
+            },
+            {
+                id: 'editorOverviewRuler.addedForeground', defaults: {
+                    dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
+                }, description: 'Overview ruler marker color for added content.'
+            },
+            {
+                id: 'editorOverviewRuler.deletedForeground', defaults: {
+                    dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
+                }, description: 'Overview ruler marker color for deleted content.'
+            }
+        );
+    }
+
 }
diff --git a/packages/scm/src/browser/scm-frontend-module.ts b/packages/scm/src/browser/scm-frontend-module.ts
@@ -14,6 +14,8 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import '../../src/browser/style/index.css';
+
 import { ContainerModule } from 'inversify';
 import {
     bindViewContribution, FrontendApplicationContribution,
@@ -22,9 +24,7 @@ import {
 } from '@theia/core/lib/browser';
 import { ScmService } from './scm-service';
 import { SCM_WIDGET_FACTORY_ID, ScmContribution, SCM_VIEW_CONTAINER_ID, SCM_VIEW_CONTAINER_TITLE_OPTIONS } from './scm-contribution';
-
 import { ScmWidget } from './scm-widget';
-import '../../src/browser/style/index.css';
 import { ScmQuickOpenService } from './scm-quick-open-service';
 import { bindDirtyDiff } from './dirty-diff/dirty-diff-module';
 import { NavigatorTreeDecorator } from '@theia/navigator/lib/browser';
@@ -33,6 +33,7 @@ import { ScmDecorationsService } from './decorations/scm-decorations-service';
 import { ScmAvatarService } from './scm-avatar-service';
 import { ScmContextKeyService } from './scm-context-key-service';
 import { ScmLayoutVersion3Migration } from './scm-layout-migrations';
+import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 
 export default new ContainerModule(bind => {
     bind(ScmContextKeyService).toSelf().inSingletonScope();
@@ -64,6 +65,7 @@ export default new ContainerModule(bind => {
     bind(ScmQuickOpenService).toSelf().inSingletonScope();
     bindViewContribution(bind, ScmContribution);
     bind(FrontendApplicationContribution).toService(ScmContribution);
+    bind(ColorContribution).toService(ScmContribution);
 
     bind(NavigatorTreeDecorator).to(ScmNavigatorDecorator).inSingletonScope();
     bind(ScmDecorationsService).toSelf().inSingletonScope();

diff --git a/packages/scm/src/browser/style/dirty-diff-decorator.css b/packages/scm/src/browser/style/dirty-diff-decorator.css
@@ -49,4 +49,4 @@
 	bottom: 0;
 	border-top-width: 0;
 	border-bottom-width: 0;
-}
+}
diff --git a/packages/scm/src/browser/style/dirty-diff.css b/packages/scm/src/browser/style/dirty-diff.css
@@ -16,23 +16,35 @@
 
 @import 'dirty-diff-decorator.css';
 
-.dirty-diff-added-line {
-	border-left: 3px solid var(--theia-added-color0);
+.monaco-editor .dirty-diff-added-line {
+	border-left: 3px solid var(--theia-editorGutter-addedBackground);
+	transition: opacity 0.5s;
 }
-.dirty-diff-added-line:before {
-	background: var(--theia-added-color0);
+.monaco-editor .dirty-diff-added-line:before {
+	background: var(--theia-editorGutter-addedBackground);
+}
+.monaco-editor .margin:hover .dirty-diff-added-line {
+    opacity: 1;
 }
 
-.dirty-diff-removed-line:after {
-	border-left: 4px solid var(--theia-removed-color0);
+.monaco-editor .dirty-diff-removed-line:after {
+	border-left: 4px solid var(--theia-editorGutter-deletedBackground);
+	transition: opacity 0.5s;
+}
+.monaco-editor .dirty-diff-removed-line:before {
+	background: var(--theia-editorGutter-deletedBackground);
 }
-.dirty-diff-removed-line:before {
-	background: var(--theia-removed-color0);
+.monaco-editor .margin:hover .dirty-diff-removed-line {
+    opacity: 1;
 }
 
-.dirty-diff-modified-line {
-	border-left: 3px solid var(--theia-modified-color0);
+.monaco-editor .dirty-diff-modified-line {
+	border-left: 3px solid var(--theia-editorGutter-modifiedBackground);
+	transition: opacity 0.5s;
+}
+.monaco-editor .dirty-diff-modified-line:before {
+	background: var(--theia-editorGutter-modifiedBackground);
 }
-.dirty-diff-modified-line:before {
-	background: var(--theia-modified-color0);
+.monaco-editor .margin:hover .dirty-diff-modified-line {
+    opacity: 1;
 }