diff --git a/packages/editor/src/browser/decorations/editor-decoration.ts b/packages/editor/src/browser/decorations/editor-decoration.ts index fb29be22d3cd0..701495be2b51c 100644 --- 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 index 75b5765800544..1a4ed606c4e6c 100644 --- 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 deleted file mode 100644 index 520eb9894c607..0000000000000 --- a/packages/git/src/browser/style/dirty-diff-decorator.css +++ /dev/null @@ -1,52 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -.dirty-diff-glyph { - margin-left: 5px; - cursor: pointer; -} - -.dirty-diff-removed-line:after { - content: ''; - position: absolute; - bottom: -4px; - box-sizing: border-box; - width: 4px; - height: 0; - z-index: 9; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - transition: border-top-width 80ms linear, border-bottom-width 80ms linear, bottom 80ms linear; -} - -.dirty-diff-glyph:before { - position: absolute; - content: ''; - height: 100%; - width: 0; - left: -2px; - transition: width 80ms linear, left 80ms linear; -} - -.dirty-diff-removed-line:before { - margin-left: 3px; - height: 0; - bottom: 0; - transition: height 80ms linear; -} - -.margin-view-overlays > div:hover > .dirty-diff-glyph:before { - position: absolute; - content: ''; - height: 100%; - width: 9px; - left: -6px; -} - -.margin-view-overlays > div:hover > .dirty-diff-removed-line:after { - bottom: 0; - border-top-width: 0; - border-bottom-width: 0; -} \ No newline at end of file diff --git a/packages/git/src/browser/style/dirty-diff.css b/packages/git/src/browser/style/dirty-diff.css deleted file mode 100644 index 6acd1022be73c..0000000000000 --- a/packages/git/src/browser/style/dirty-diff.css +++ /dev/null @@ -1,38 +0,0 @@ -/******************************************************************************** - * Copyright (C) 2018 TypeFox and others. - * - * This program and the accompanying materials are made available under the - * terms of the Eclipse Public License v. 2.0 which is available at - * http://www.eclipse.org/legal/epl-2.0. - * - * This Source Code may also be made available under the following Secondary - * Licenses when the conditions for such availability set forth in the Eclipse - * Public License v. 2.0 are satisfied: GNU General Public License, version 2 - * with the GNU Classpath Exception which is available at - * https://www.gnu.org/software/classpath/license.html. - * - * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 - ********************************************************************************/ - -@import 'dirty-diff-decorator.css'; - -.dirty-diff-added-line { - border-left: 3px solid var(--theia-added-color0); -} -.dirty-diff-added-line:before { - background: var(--theia-added-color0); -} - -.dirty-diff-removed-line:after { - border-left: 4px solid var(--theia-removed-color0); -} -.dirty-diff-removed-line:before { - background: var(--theia-removed-color0); -} - -.dirty-diff-modified-line { - border-left: 3px solid var(--theia-modified-color0); -} -.dirty-diff-modified-line:before { - background: var(--theia-modified-color0); -} diff --git a/packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts b/packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts index 12ed9c39f1f08..617fd5fd03c79 100644 --- 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 = { 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 = { 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 = { 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 index afee96b6b60fd..e715aa973cecb 100644 --- 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 implements FrontendApplicationContribution { +export class ScmContribution extends AbstractViewContribution implements FrontendApplicationContribution, ColorContribution { @inject(StatusBar) protected readonly statusBar: StatusBar; @inject(ScmService) protected readonly scmService: ScmService; @@ -180,4 +182,71 @@ export class ScmContribution extends AbstractViewContribution 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 index d81c645961edc..a2187f09b4347 100644 --- 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 index 520eb9894c607..1b630c3ba07ac 100644 --- 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; -} \ No newline at end of file +} diff --git a/packages/scm/src/browser/style/dirty-diff.css b/packages/scm/src/browser/style/dirty-diff.css index 6acd1022be73c..1f27f060dcaba 100644 --- 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; }