From 6ebd8dd309a8bf4b87a681e5841d7d517a0a5aa8 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Mon, 23 Apr 2018 15:31:34 +0200 Subject: [PATCH] grid - some more title widget polish --- .../parts/editor2/nextEditorGroupView.ts | 47 ++++++++++++++++--- .../parts/editor2/nextEditorGroupsViewer.ts | 7 ++- .../browser/parts/editor2/nextEditorPart.ts | 2 +- 3 files changed, 47 insertions(+), 9 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts b/src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts index 6ae92723932..08f8fabc577 100644 --- a/src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts +++ b/src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts @@ -14,11 +14,15 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { addClass, addClasses, Dimension } from 'vs/base/browser/dom'; import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; -import { Disposable } from 'vs/base/common/lifecycle'; import { ITitleAreaControl } from 'vs/workbench/browser/parts/editor/titleControl'; import { TabsTitleControl } from 'vs/workbench/browser/parts/editor/tabsTitleControl'; +import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar'; +import { attachProgressBarStyler } from 'vs/platform/theme/common/styler'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from '../../../common/theme'; +import { editorBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; -export class NextEditorGroupView extends Disposable implements IView { +export class NextEditorGroupView extends Themable implements IView { private static readonly EDITOR_TITLE_HEIGHT = 35; @@ -34,12 +38,15 @@ export class NextEditorGroupView extends Disposable implements IView { private container: HTMLElement; private titleAreaControl: ITitleAreaControl; + private progressBar: ProgressBar; + private editorContainer: HTMLElement; constructor( @IInstantiationService private instantiationService: IInstantiationService, - @IContextKeyService private contextKeyService: IContextKeyService + @IContextKeyService private contextKeyService: IContextKeyService, + @IThemeService themeService: IThemeService ) { - super(); + super(themeService); this._group = this._register(instantiationService.createInstance(EditorGroup, 'Editor Group')); // TODO@grid group label? @@ -83,8 +90,36 @@ export class NextEditorGroupView extends Disposable implements IView { this.titleAreaControl.setContext(this._group); this.titleAreaControl.refresh(true /* instant */); - // TODO@grid progress bar - // TODO@grid editors container + // Progress Bar + this.progressBar = new ProgressBar(this.container); + this._register(attachProgressBarStyler(this.progressBar, this.themeService)); + this.progressBar.hide(); + + // Editor Container + this.editorContainer = document.createElement('div'); + addClass(this.editorContainer, 'editor-container'); + this.container.appendChild(this.editorContainer); + + // Update Styles + this.updateStyles(); + } + + protected updateStyles(): void { + super.updateStyles(); + + // Title control (TODO@grid respect tab options) + const titleContainer = this.titleAreaControl.getContainer(); + const borderColor = this.getColor(EDITOR_GROUP_HEADER_TABS_BORDER) || this.getColor(contrastBorder); + + titleContainer.style.backgroundColor = this.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND); + titleContainer.style.borderBottomWidth = borderColor ? '1px' : null; + titleContainer.style.borderBottomStyle = borderColor ? 'solid' : null; + titleContainer.style.borderBottomColor = borderColor; + + // Editor container background + this._element.style.backgroundColor = this.getColor(editorBackground); + + // TODO@grid Editor container border } openEditor(input: EditorInput, options?: EditorOptions): void { diff --git a/src/vs/workbench/browser/parts/editor2/nextEditorGroupsViewer.ts b/src/vs/workbench/browser/parts/editor2/nextEditorGroupsViewer.ts index 20c267e6ba7..35bae181acb 100644 --- a/src/vs/workbench/browser/parts/editor2/nextEditorGroupsViewer.ts +++ b/src/vs/workbench/browser/parts/editor2/nextEditorGroupsViewer.ts @@ -10,19 +10,22 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { Orientation } from 'vs/base/browser/ui/splitview/splitview'; import { EditorLocation } from 'vs/workbench/browser/parts/editor2/nextEditor'; import { Dimension, clearNode } from 'vs/base/browser/dom'; +import { Disposable } from 'vs/base/common/lifecycle'; export enum EditorGroupsOrientation { VERTICAL, HORIZONTAL } -export class NextEditorGroupsViewer { +export class NextEditorGroupsViewer extends Disposable { private _element: HTMLElement; private singletonTmpView: NextEditorGroupView; constructor( @IInstantiationService private instantiationService: IInstantiationService ) { + super(); + this._element = document.createElement('div'); } @@ -40,7 +43,7 @@ export class NextEditorGroupsViewer { split(location: EditorLocation, orientation: EditorGroupsOrientation): NextEditorGroupView { if (!this.singletonTmpView) { - this.singletonTmpView = this.instantiationService.createInstance(NextEditorGroupView); // TODO@grid hook into GridWidget + this.singletonTmpView = this._register(this.instantiationService.createInstance(NextEditorGroupView)); // TODO@grid hook into GridWidget const parent = this._element.parentElement; clearNode(parent); diff --git a/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts b/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts index e75c99edf47..57304a3dce2 100644 --- a/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts +++ b/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts @@ -44,7 +44,7 @@ export class NextEditorPart extends Part implements INextEditorPartService { // this.memento = this.getMemento(this.storageService, Scope.WORKSPACE); - this.viewer = this.instantiationService.createInstance(NextEditorGroupsViewer); + this.viewer = this._register(this.instantiationService.createInstance(NextEditorGroupsViewer)); this.initStyles(); } -- GitLab