maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Multiple Views Per Panel V0 (#92294)

Browse source 
* multipanel start

* revert to horizontal headers

* prevent collapse

* prevent collapse

* remove patch, no longer necessary
This commit is contained in:
SteVen Batten 2020-03-09 14:34:49 -07:00 committed by GitHub
parent 7bcbf8d412
commit 990363f194
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/vs/base/browser/ui/splitview/paneview.ts
View file

@ -15,6 +15,7 @@ import { Color, RGBA } from 'vs/base/common/color';
import { SplitView, IView } from './splitview';
import { isFirefox } from 'vs/base/browser/browser';
import { DataTransfers } from 'vs/base/browser/dnd';
import { Orientation } from 'vs/base/browser/ui/sash/sash';
import { localize } from 'vs/nls';
export interface IPaneOptions {
@ -49,6 +50,7 @@ export abstract class Pane extends Disposable implements IView {
private body!: HTMLElement;
protected _expanded: boolean;
protected _preventCollapse?: boolean;
private expandedSize: number | undefined = undefined;
private _headerVisible = true;
@ -184,20 +186,23 @@ export abstract class Pane extends Disposable implements IView {
this.updateHeader();
const onHeaderKeyDown = Event.chain(domEvent(this.header, 'keydown'))
.map(e => new StandardKeyboardEvent(e));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null));
if (!this._preventCollapse) {
const onHeaderKeyDown = Event.chain(domEvent(this.header, 'keydown'))
.map(e => new StandardKeyboardEvent(e));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
.event(() => this.setExpanded(!this.isExpanded()), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
.event(() => this.setExpanded(false), null));
this._register(domEvent(this.header, 'click')
(() => this.setExpanded(!this.isExpanded()), null));
this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
.event(() => this.setExpanded(true), null));
this._register(domEvent(this.header, 'click')
(() => this.setExpanded(!this.isExpanded()), null));
}
this.body = append(this.element, $('.pane-body'));
this.renderBody(this.body);
@ -372,6 +377,7 @@ export class DefaultPaneDndController implements IPaneDndController {
export interface IPaneViewOptions {
dnd?: IPaneDndController;
orientation?: Orientation;
}
interface IPaneItem {
@ -387,6 +393,7 @@ export class PaneView extends Disposable {
private paneItems: IPaneItem[] = [];
private width: number = 0;
private splitview: SplitView;
private orientation: Orientation;
private animationTimer: number | undefined = undefined;
private _onDidDrop = this._register(new Emitter<{ from: Pane, to: Pane }>());
@ -398,8 +405,9 @@ export class PaneView extends Disposable {
super();
this.dnd = options.dnd;
this.orientation = options.orientation ?? Orientation.VERTICAL;
this.el = append(container, $('.monaco-pane-view'));
this.splitview = this._register(new SplitView(this.el));
this.splitview = this._register(new SplitView(this.el, { orientation: this.orientation }));
this.onDidSashChange = this.splitview.onDidSashChange;
}
@ -472,7 +480,7 @@ export class PaneView extends Disposable {
paneItem.pane.width = width;
}
this.splitview.layout(height);
this.splitview.layout(this.orientation === Orientation.HORIZONTAL ? width : height);
}
private setupAnimation(): void {

2
src/vs/workbench/browser/parts/compositeBar.ts
View file

@ -81,7 +81,7 @@ export class CompositeDragAndDrop implements ICompositeDragAndDrop {
if (targetCompositeId) {
const destinationContainer = viewContainerRegistry.get(targetCompositeId);
if (destinationContainer && !destinationContainer.rejectAddedViews) {
if (this.targetContainerLocation === ViewContainerLocation.Sidebar) {
if (this.targetContainerLocation === ViewContainerLocation.Sidebar || this.targetContainerLocation === ViewContainerLocation.Panel) {
this.viewDescriptorService.moveViewsToContainer([viewDescriptor], destinationContainer);
this.openComposite(targetCompositeId, true).then(composite => {
if (composite) {

26
src/vs/workbench/browser/parts/panel/media/panelpart.css
View file

@ -12,19 +12,19 @@
z-index: initial;
}
.monaco-workbench .part.panel .title {
.monaco-workbench .part.panel .composite.title {
height: 35px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.monaco-workbench .part.panel.bottom .title {
.monaco-workbench .part.panel.bottom .composite.title {
border-top-width: 1px;
border-top-style: solid;
}
.monaco-workbench.noeditorarea .part.panel.bottom .title {
.monaco-workbench.noeditorarea .part.panel.bottom .composite.title {
border-top-width: 0; /* no border when editor area is hiden */
}
@ -46,13 +46,13 @@
border-right-width: 0; /* no border when editor area is hiden */
}
.monaco-workbench .part.panel > .title > .title-actions .monaco-action-bar .action-item .action-label {
.monaco-workbench .part.panel > .composite.tit > .title-actions .monaco-action-bar .action-item .action-label {
outline-offset: -2px;
}
/** Panel Switcher */
.monaco-workbench .part.panel > .title > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.codicon-more {
.monaco-workbench .part.panel > .composite.tit > .panel-switcher-container.composite-bar > .monaco-action-bar .action-label.codicon-more {
display: flex;
align-items: center;
justify-content: center;
@ -66,16 +66,16 @@
width: 100px;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar {
line-height: 27px; /* matches panel titles in settings */
height: 35px;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:first-child {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item:first-child {
padding-left: 12px;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item {
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
@ -85,24 +85,24 @@
display: flex;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label{
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item .action-label{
margin-right: 0;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:last-child {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item:last-child {
padding-right: 10px;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label {
border-bottom: 1px solid;
margin-right: 0;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .badge {
margin-left: 8px;
}
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge .badge-content {
.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .badge .badge-content {
padding: 3px 5px;
border-radius: 11px;
font-size: 11px;

4
src/vs/workbench/browser/parts/views/media/paneviewlet.css
View file

@ -19,3 +19,7 @@
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
.monaco-pane-view .pane > .pane-header h3.title:first-child {
margin-left: 7px;
}

12
src/vs/workbench/browser/parts/views/viewPaneContainer.ts
View file

@ -43,6 +43,7 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
import { Button } from 'vs/base/browser/ui/button/button';
import { Link } from 'vs/platform/opener/browser/link';
import { LocalSelectionTransfer } from 'vs/workbench/browser/dnd';
import { Orientation } from 'vs/base/browser/ui/sash/sash';
export interface IPaneColors extends IColorMapping {
dropBackground?: ColorIdentifier;
@ -210,6 +211,8 @@ export abstract class ViewPane extends Pane implements IView {
this.title = options.title;
this.showActionsAlways = !!options.showActionsAlways;
this.focusedViewContextKey = FocusedViewContext.bindTo(contextKeyService);
this._preventCollapse = this.viewDescriptorService.getViewLocation(this.id) === ViewContainerLocation.Panel;
this._expanded = this._preventCollapse || this._expanded;
this.menuActions = this._register(instantiationService.createInstance(ViewMenuActions, this.id, options.titleMenuId || MenuId.ViewTitle, MenuId.ViewTitleContext));
this._register(this.menuActions.onDidChangeTitle(() => this.updateActions()));
@ -265,7 +268,9 @@ export abstract class ViewPane extends Pane implements IView {
protected renderHeader(container: HTMLElement): void {
this.headerContainer = container;
this.renderTwisties(container);
if (!this._preventCollapse) {
this.renderTwisties(container);
}
this.renderHeaderTitle(container, this.title);
@ -563,6 +568,8 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
}
create(parent: HTMLElement): void {
const options = this.options as IPaneViewOptions;
options.orientation = this.viewDescriptorService.getViewContainerLocation(this.viewContainer) === ViewContainerLocation.Panel ? Orientation.HORIZONTAL : Orientation.VERTICAL;
this.paneview = this._register(new PaneView(parent, this.options));
this._register(this.paneview.onDidDrop(({ from, to }) => this.movePane(from as ViewPane, to as ViewPane)));
this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, (e: MouseEvent) => this.showContextMenu(new StandardMouseEvent(e))));
@ -836,8 +843,7 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
{
id: viewDescriptor.id,
title: viewDescriptor.name,
expanded: !collapsed,
minimumBodySize: this.viewDescriptorService.getViewContainerLocation(this.viewContainer) === ViewContainerLocation.Panel ? 0 : 120
expanded: !collapsed
});
pane.render();