Skip to content

Commit

Permalink
separate editor actions from group actions (#7058, #7059, #7060)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpasero
bpasero committed Jun 6, 2016
1 parent 1d3ddca commit b3ebbf5
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 93 deletions.
6 changes: 3 additions & 3 deletions src/vs/workbench/browser/media/part.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label a {
text-decoration: none;
font-size: 13px;
cursor: pointer;
cursor: default;
}

.monaco-workbench > .part > .title > .title-actions {
Expand All @@ -56,11 +56,11 @@
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-actions {
display: flex;
flex: initial;
}

.monaco-workbench > .part > .title > .title-actions .action-label,
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label-actions .action-label,
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-actions .action-label {
display: block;
height: 35px;
Expand Down Expand Up @@ -96,5 +96,5 @@
}

.monaco-workbench > .part > .status {
display: none; /* Parts have to opt in to show title area */
display: none; /* Parts have to opt in to show status area */
}
44 changes: 29 additions & 15 deletions src/vs/workbench/browser/parts/editor/media/sidebyside.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,32 +82,50 @@

/* Editor Title Styles */

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label-actions .action-label {
width: 12px; /* move the actions close to the label */
.monaco-workbench > .part.editor > .content .inactive .title .title-actions {
opacity: 0.5;
}

.monaco-workbench > .part.editor > .content .inactive .title .title-actions,
.monaco-workbench > .part.editor > .content .inactive .title .title-label-actions {
opacity: 0.5;
.monaco-workbench > .part.editor > .content > .one-editor-container > .title {
padding-right: 0px;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label {
padding-left: 0; /* remove padding because we have the title label actions to the left */
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-actions .editor-group-toolbar {
padding-left: 4px;
background-color: rgba(128, 128, 128, 0.2);
}

.monaco-workbench > .part.editor > .content .inactive .title {
cursor: pointer;
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-actions .editor-group-toolbar.has-primary-actions {
padding-left: 8px;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label {
font-style: italic;
padding-left: 1px; /* we need to push the label a bit to accomodate for the italic style */
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title.pinned .title-label {
font-style: normal;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-decoration {
width: 16px;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-decoration.dirty {
background-size: 16px;
background-position: left center;
background-repeat: no-repeat;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-decoration.dirty {
background: url('close-dirty.svg') center center no-repeat;
}

.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-decoration.dirty,
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-decoration.dirty {
background: url('close-dirty-inverse.svg') center center no-repeat;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label a {
color: #333333;
}
Expand All @@ -127,7 +145,7 @@
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label span {
margin-left: 0.5em;
font-size: 0.9em;
cursor: pointer;
cursor: default;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label span {
Expand Down Expand Up @@ -216,10 +234,6 @@
background: none;
}

.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title .title-label-actions .action-label {
width: 24px;
}

.hc-black .monaco-workbench .show-group-editors-action:before {
content: url('stackView_dark.svg');
position: absolute;
Expand Down
164 changes: 89 additions & 75 deletions src/vs/workbench/browser/parts/editor/sideBySideEditorControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,11 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti

private titleContainer: Builder[];
private titleLabel: Builder[];
private titleDecoration: Builder[];
private titleDescription: Builder[];
private progressBar: ProgressBar[];

private editorTitleToolbar: ToolBar[];
private groupActionsToolbar: ToolBar[];
private editorActionsToolbar: ToolBar[];

private mapActionsToEditors: { [editorId: string]: IEditorActions; }[];
Expand Down Expand Up @@ -169,8 +170,9 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti

this.titleContainer = [];
this.titleLabel = [];
this.titleDecoration = [];
this.titleDescription = [];
this.editorTitleToolbar = [];
this.groupActionsToolbar = [];
this.editorActionsToolbar = [];
this.progressBar = [];

Expand Down Expand Up @@ -1027,19 +1029,15 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
}
});

// Left Title Label Actions
// Left Title Decoration
parent.div({
'class': 'title-label-actions'
'class': 'title-decoration'
}, (div) => {
const toolbar = this.doCreateToolbar(div, position);
this.editorTitleToolbar[position] = toolbar;
this.editorTitleToolbar[position].setActions([this.closeEditorActions[position]])();
this.titleDecoration[position] = div;

const group = this.editorGroupService.getStacksModel().groupAt(position);
this.editorTitleToolbar[position].context = { group };
});

// Left Title Labe
// Left Title Label
parent.div({
'class': 'title-label'
}, (div) => {
Expand All @@ -1055,16 +1053,68 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
parent.div({
'class': 'title-actions'
}, (div) => {
const toolbar = this.doCreateToolbar(div, position);
this.editorActionsToolbar[position] = toolbar;

const group = this.editorGroupService.getStacksModel().groupAt(position);

// Editor actions
this.editorActionsToolbar[position] = this.doCreateToolbar(div, position);
this.editorActionsToolbar[position].context = { group };
this.editorActionsToolbar[position].setActions([this.closeEditorActions[position]])();

// Group actions
this.groupActionsToolbar[position] = this.doCreateToolbar(div, position);
this.groupActionsToolbar[position].context = { group };
this.groupActionsToolbar[position].getContainer().addClass('editor-group-toolbar');
this.groupActionsToolbar[position].setActions(this.getPrimaryGroupActions(position), this.getSecondaryGroupActions(position))();
});
}

private getPrimaryGroupActions(position: Position, groupCount?: number, canSplit?: boolean, isOverflowing?: boolean): Action[] {
const actions: Action[] = [];

if (isOverflowing) {
let actionPosition = position;
if (groupCount === 2 && position === Position.CENTER) {
actionPosition = Position.RIGHT; // with 2 groups, CENTER === RIGHT
}

let overflowAction: Action;
if (groupCount === 1) {
overflowAction = this.showAllEditorsAction;
} else {
overflowAction = this.showEditorsOfGroup[actionPosition];
}

overflowAction.class = 'show-group-editors-action';
overflowAction.enabled = true;
actions.push(overflowAction);
}

if (canSplit) {
actions.push(this.splitEditorAction);
}

return actions;
}

private getSecondaryGroupActions(position: Position): Action[] {

// Make sure enablement is good
this.moveGroupLeftActions[Position.LEFT].enabled = false;
this.moveGroupRightActions[Position.LEFT].enabled = this.getVisibleEditorCount() > 1;
this.moveGroupRightActions[Position.CENTER].enabled = this.getVisibleEditorCount() > 2;
this.moveGroupRightActions[Position.RIGHT].enabled = false;

// Return actions
return [
this.moveGroupLeftActions[position],
this.moveGroupRightActions[position],
new Separator(),
this.closeEditorsInGroupActions[position]
];
}

private targetInToolbar(target: HTMLElement, position: Position): boolean {
return DOM.isAncestor(target, this.editorActionsToolbar[position].getContainer().getHTMLElement()) || DOM.isAncestor(target, this.editorTitleToolbar[position].getContainer().getHTMLElement());
return DOM.isAncestor(target, this.editorActionsToolbar[position].getContainer().getHTMLElement()) || DOM.isAncestor(target, this.groupActionsToolbar[position].getContainer().getHTMLElement());
}

private doCreateToolbar(container: Builder, position: Position): ToolBar {
Expand Down Expand Up @@ -1190,7 +1240,11 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
if (input && editor) {

// Dirty
this.closeEditorActions[state.position].class = input.isDirty() ? 'close-editor-dirty-action' : 'close-editor-action';
if (input.isDirty()) {
this.titleDecoration[state.position].addClass('dirty');
} else {
this.titleDecoration[state.position].removeClass('dirty');
}

// Pinned
const isPinned = !input.matches(state.preview);
Expand Down Expand Up @@ -1218,7 +1272,7 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti

states.forEach(state => {
const group = this.editorGroupService.getStacksModel().groupAt(state.position);
this.editorTitleToolbar[state.position].context = { group };
this.groupActionsToolbar[state.position].context = { group };
this.editorActionsToolbar[state.position].context = { group };

let editor = this.visibleEditors[state.position];
Expand Down Expand Up @@ -1286,41 +1340,19 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
// Editor Title (Status + Label + Description)
this.setTitleLabel(position, input, isPinned, isActive);

// Support split editor action if visible editor count is < 3 and editor supports it
if (isActive && this.getVisibleEditorCount() < 3 && this.lastActiveEditor.supportsSplitEditor()) {
primaryActions.unshift(this.splitEditorAction);
}

if (isOverflowing) {
let actionPosition = position;
if (groupCount === 2 && position === Position.CENTER) {
actionPosition = Position.RIGHT; // with 2 groups, CENTER === RIGHT
}

let overflowAction: Action;
if (groupCount === 1) {
overflowAction = this.showAllEditorsAction;
} else {
overflowAction = this.showEditorsOfGroup[actionPosition];
}

overflowAction.class = 'show-group-editors-action';
overflowAction.enabled = true;
primaryActions.unshift(overflowAction);
}

// Secondary Actions
if (secondaryActions.length) {
secondaryActions.push(new Separator());
}

secondaryActions.push(...this.getSecondaryActions(position));

// Set Primary/Secondary Actions
// Update Editor Actions Toolbar
this.editorActionsToolbar[position].setActions(primaryActions, secondaryActions)();

// Update title actions accordingly
this.closeEditorActions[position].class = input.isDirty() ? 'close-editor-dirty-action' : 'close-editor-action';
this.editorActionsToolbar[position].addPrimaryAction(this.closeEditorActions[position])();

// Update Group Actions Toolbar
const canSplit = isActive && this.getVisibleEditorCount() < 3 && this.lastActiveEditor.supportsSplitEditor();
const primaryGroupActions = this.getPrimaryGroupActions(position, groupCount, canSplit, isOverflowing);
this.groupActionsToolbar[position].setActions(primaryGroupActions, this.getSecondaryGroupActions(position))();
if (primaryGroupActions.length) {
this.groupActionsToolbar[position].getContainer().addClass('has-primary-actions');
} else {
this.groupActionsToolbar[position].getContainer().removeClass('has-primary-actions');
}
}

public setTitleLabel(position: Position, input: EditorInput, isPinned: boolean, isActive: boolean): void {
Expand Down Expand Up @@ -1354,36 +1386,18 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti

this.titleDescription[position].safeInnerHtml(description);
this.titleDescription[position].title(verboseDescription);
}

private getSecondaryActions(position: Position): Action[] {

// Make sure enablement is good
this.updateActionsEnablement();

// Return actions
return [
this.moveGroupLeftActions[position],
this.moveGroupRightActions[position],
new Separator(),
this.closeEditorsInGroupActions[position]
];
}

private updateActionsEnablement(): void {

// Move Group Left
this.moveGroupLeftActions[Position.LEFT].enabled = false;

// Move Group Right
this.moveGroupRightActions[Position.LEFT].enabled = this.getVisibleEditorCount() > 1;
this.moveGroupRightActions[Position.CENTER].enabled = this.getVisibleEditorCount() > 2;
this.moveGroupRightActions[Position.RIGHT].enabled = false;
if (input.isDirty()) {
this.titleDecoration[position].addClass('dirty');
} else {
this.titleDecoration[position].removeClass('dirty');
}
}

public clearTitleArea(position: Position): void {

// Editor Title
this.titleDecoration[position].removeClass('dirty');
this.titleLabel[position].safeInnerHtml('');
this.titleDescription[position].safeInnerHtml('');

Expand Down Expand Up @@ -1728,7 +1742,7 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
});

// Toolbars
this.editorTitleToolbar.forEach((toolbar) => {
this.groupActionsToolbar.forEach((toolbar) => {
toolbar.dispose();
});
this.editorActionsToolbar.forEach((toolbar) => {
Expand Down

0 comments on commit b3ebbf5

Please sign in to comment.