no more builder in title controls

This commit is contained in:
Benjamin Pasero 2016-06-15 11:07:36 +02:00
parent 26b0272bf3
commit 5473066970
4 changed files with 45 additions and 50 deletions

View file

@ -9,7 +9,6 @@ import 'vs/css!./media/notabstitle';
import {prepareActions} from 'vs/workbench/browser/actionBarRegistry';
import errors = require('vs/base/common/errors');
import arrays = require('vs/base/common/arrays');
import {Builder, $} from 'vs/base/browser/builder';
import {IEditorGroup, EditorInput} from 'vs/workbench/common/editor';
import DOM = require('vs/base/browser/dom');
import {ToolBar} from 'vs/base/browser/ui/toolbar/toolbar';
@ -24,10 +23,10 @@ import {IKeybindingService} from 'vs/platform/keybinding/common/keybindingServic
import {TitleControl} from 'vs/workbench/browser/parts/editor/titleControl';
export class NoTabsTitleControl extends TitleControl {
private titleContainer: Builder;
private titleLabel: Builder;
private titleDecoration: Builder;
private titleDescription: Builder;
private titleContainer: HTMLElement;
private titleLabel: HTMLElement;
private titleDecoration: HTMLElement;
private titleDescription: HTMLElement;
private editorActionsToolbar: ToolBar;
@ -56,53 +55,51 @@ export class NoTabsTitleControl extends TitleControl {
this.editorActionsToolbar.context = { group };
}
public create(parent: Builder): void {
this.titleContainer = $(parent);
public create(parent: HTMLElement): void {
this.titleContainer = parent;
// Pin on double click
parent.on(DOM.EventType.DBLCLICK, (e: MouseEvent) => {
this.toDispose.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.DBLCLICK, (e: MouseEvent) => {
DOM.EventHelper.stop(e);
this.onTitleDoubleClick();
});
}));
// Detect mouse click
parent.on(DOM.EventType.MOUSE_UP, (e: MouseEvent) => {
this.toDispose.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.MOUSE_UP, (e: MouseEvent) => {
DOM.EventHelper.stop(e, false);
this.onTitleClick(e);
});
}));
// Left Title Decoration
parent.div({
'class': 'title-decoration'
}, (div) => {
this.titleDecoration = div;
});
this.titleDecoration = document.createElement('div');
DOM.addClass(this.titleDecoration, 'title-decoration');
this.titleContainer.appendChild(this.titleDecoration);
// Left Title Label & Description
parent.div({
'class': 'title-label'
}, (div) => {
const labelContainer = document.createElement('div');
DOM.addClass(labelContainer, 'title-label');
// Label
this.titleLabel = $(div).a();
this.titleLabel = document.createElement('a');
labelContainer.appendChild(this.titleLabel);
// Description
this.titleDescription = $(div).span();
});
this.titleDescription = document.createElement('span');
labelContainer.appendChild(this.titleDescription);
this.titleContainer.appendChild(labelContainer);
// Right Actions Container
parent.div({
'class': 'title-actions'
}, (div) => {
const actionsContainer = document.createElement('div');
DOM.addClass(actionsContainer, 'title-actions');
// Editor actions
this.editorActionsToolbar = this.doCreateToolbar(div);
});
this.editorActionsToolbar = this.doCreateToolbar(actionsContainer);
this.titleContainer.appendChild(actionsContainer);
// Context Menu
this.titleContainer.on(DOM.EventType.CONTEXT_MENU, (e: Event) => this.onContextMenu({ group: this.context, editor: this.context.activeEditor }, e, this.titleContainer.getHTMLElement()));
this.toDispose.push(DOM.addDisposableListener(this.titleContainer, DOM.EventType.CONTEXT_MENU, (e: Event) => this.onContextMenu({ group: this.context, editor: this.context.activeEditor }, e, this.titleContainer)));
}
private onTitleDoubleClick(): void {
@ -156,16 +153,16 @@ export class NoTabsTitleControl extends TitleControl {
// Pinned state
if (isPinned) {
this.titleContainer.addClass('pinned');
DOM.addClass(this.titleContainer, 'pinned');
} else {
this.titleContainer.removeClass('pinned');
DOM.removeClass(this.titleContainer, 'pinned');
}
// Activity state
if (isActive) {
this.titleContainer.addClass('active');
DOM.addClass(this.titleContainer, 'active');
} else {
this.titleContainer.removeClass('active');
DOM.removeClass(this.titleContainer, 'active');
}
// Editor Title
@ -176,17 +173,17 @@ export class NoTabsTitleControl extends TitleControl {
verboseDescription = ''; // dont repeat what is already shown
}
this.titleLabel.safeInnerHtml(name);
this.titleLabel.title(verboseDescription);
this.titleLabel.innerText = name;
this.titleLabel.title = verboseDescription;
this.titleDescription.safeInnerHtml(description);
this.titleDescription.title(verboseDescription);
this.titleDescription.innerText = description;
this.titleDescription.title = verboseDescription;
// Editor Decoration
if (editor.isDirty()) {
this.titleDecoration.addClass('dirty');
DOM.addClass(this.titleDecoration, 'dirty');
} else {
this.titleDecoration.removeClass('dirty');
DOM.removeClass(this.titleDecoration, 'dirty');
}
// Update Editor Actions Toolbar

View file

@ -754,7 +754,7 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
const useTabs = !!this.configurationService.getConfiguration<IWorkbenchEditorConfiguration>().workbench.showEditorTabs;
this.titleAreaControl[position] = useTabs ? this.instantiationService.createInstance(TabsTitleControl) : this.instantiationService.createInstance(NoTabsTitleControl);
this.titleAreaControl[position].create($(this.titleContainer[position]));
this.titleAreaControl[position].create(this.titleContainer[position].getHTMLElement());
this.titleAreaControl[position].setContext(this.stacks.groupAt(position));
this.titleAreaControl[position].refresh();
}

View file

@ -14,7 +14,6 @@ import errors = require('vs/base/common/errors');
import URI from 'vs/base/common/uri';
import DOM = require('vs/base/browser/dom');
import {isMacintosh} from 'vs/base/common/platform';
import {Builder, $} from 'vs/base/browser/builder';
import {MIME_BINARY} from 'vs/base/common/mime';
import {Position} from 'vs/platform/editor/common/editor';
import {IEditorGroup, IEditorIdentifier, asFileEditorInput, EditorOptions} from 'vs/workbench/common/editor';
@ -74,8 +73,8 @@ export class TabsTitleControl extends TitleControl {
this.groupActionsToolbar.context = { group };
}
public create(parent: Builder): void {
this.titleContainer = parent.getHTMLElement();
public create(parent: HTMLElement): void {
this.titleContainer = parent;
// Tabs Container
this.tabsContainer = document.createElement('div');
@ -156,7 +155,7 @@ export class TabsTitleControl extends TitleControl {
const groupActionsContainer = document.createElement('div');
DOM.addClass(groupActionsContainer, 'group-actions');
this.titleContainer.appendChild(groupActionsContainer);
this.groupActionsToolbar = this.doCreateToolbar($(groupActionsContainer));
this.groupActionsToolbar = this.doCreateToolbar(groupActionsContainer);
}
public allowDragging(element: HTMLElement): boolean {

View file

@ -11,7 +11,6 @@ import {Registry} from 'vs/platform/platform';
import {Scope, IActionBarRegistry, Extensions} from 'vs/workbench/browser/actionBarRegistry';
import {IAction, Action} from 'vs/base/common/actions';
import errors = require('vs/base/common/errors');
import {Builder} from 'vs/base/browser/builder';
import DOM = require('vs/base/browser/dom');
import {TPromise} from 'vs/base/common/winjs.base';
import {BaseEditor, IEditorInputActionContext} from 'vs/workbench/browser/parts/editor/baseEditor';
@ -44,7 +43,7 @@ export interface IToolbarActions {
export interface ITitleAreaControl {
setContext(group: IEditorGroup): void;
allowDragging(element: HTMLElement): boolean;
create(parent: Builder): void;
create(parent: HTMLElement): void;
refresh(instant?: boolean): void;
update(instant?: boolean): void;
layout(): void;
@ -203,8 +202,8 @@ export abstract class TitleControl {
[this.showEditorsOfLeftGroup, this.showEditorsOfCenterGroup, this.showEditorsOfRightGroup, this.showAllEditorsAction].forEach(a => a.class = 'show-group-editors-action');
}
protected doCreateToolbar(container: Builder): ToolBar {
const toolbar = new ToolBar(container.getHTMLElement(), this.contextMenuService, {
protected doCreateToolbar(container: HTMLElement): ToolBar {
const toolbar = new ToolBar(container, this.contextMenuService, {
actionItemProvider: (action: Action) => this.actionItemProvider(action),
orientation: ActionsOrientation.HORIZONTAL,
ariaLabel: nls.localize('araLabelEditorActions', "Editor actions"),