Skip to content

Commit

Permalink
joao/table (#117026)
Browse files Browse the repository at this point in the history
* 💄

* table: intro

* 💄

* more table progress

* table: layout

* table widget: fix overflow behavior

* table: fix initial cell sizing

* table: css

* simplify ITunnelViewModel

* further TunnelViewModel simplification

* splitview: getSashOrthogonalSize

* table: use getSashOrthogonalSize

* table: styles, domFocus

* tunnel view: start to adopt table

* Improve tunnel label and process description

* table: rename

* workbench table

* adopt WorkbenchTable in tunnel view

* Rendering for local address and label

* More actions on cells

* cleanup workbench lists

* reenable more tunnel view functionality

* reenable tunnel view list options

* tunnel view: enable context menu clicking

* update comment

* remove unused imports

* privacy and source columns

* Use container in renderTemplate

* Hide privacy column

* Some clean up in naming

* Show detected ports and add input box

* Source -> Origin and added a menu

* table: fix weights

* table: column header tooltip

* table: column size constraints

* Add tooltips to port cells and some cleanup

* Add port header tooltips

* Use column weight in ports table

* More clean up and fix icons

* table: optional tooltip

* table hover feedback

* Fix hygiene issue in breakpoints view

* Add padding-right to port cell icon

* Add tooltip to icon in ports view

* Add icon column

Co-authored-by: João Moreno <joao.moreno@microsoft.com>
  • Loading branch information
alexr00 and joaomoreno authored Feb 19, 2021
2 parents c523e48 + 2efcd2b commit a8a04eb
Show file tree
Hide file tree
Showing 20 changed files with 1,146 additions and 455 deletions.
2 changes: 1 addition & 1 deletion src/vs/base/browser/ui/list/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface IListVirtualDelegate<T> {
}

export interface IListRenderer<T, TTemplateData> {
templateId: string;
readonly templateId: string;
renderTemplate(container: HTMLElement): TTemplateData;
renderElement(element: T, index: number, templateData: TTemplateData, height: number | undefined): void;
disposeElement?(element: T, index: number, templateData: TTemplateData, height: number | undefined): void;
Expand Down
12 changes: 11 additions & 1 deletion src/vs/base/browser/ui/list/listWidget.ts
Original file line number Diff line number Diff line change
Expand Up @@ -831,6 +831,14 @@ export class DefaultStyleController implements IStyleController {
content.push(`.monaco-list-type-filter { box-shadow: 1px 1px 1px ${styles.listMatchesShadow}; }`);
}

if (styles.tableColumnsBorder) {
content.push(`
.monaco-table:hover > .monaco-split-view2,
.monaco-table:hover > .monaco-split-view2 .monaco-sash.vertical::before {
border-color: ${styles.tableColumnsBorder};
}`);
}

this.styleElement.textContent = content.join('\n');
}
}
Expand Down Expand Up @@ -886,6 +894,7 @@ export interface IListStyles {
listFilterWidgetNoMatchesOutline?: Color;
listMatchesShadow?: Color;
treeIndentGuidesStroke?: Color;
tableColumnsBorder?: Color;
}

const defaultStyles: IListStyles = {
Expand All @@ -897,7 +906,8 @@ const defaultStyles: IListStyles = {
listInactiveSelectionBackground: Color.fromHex('#3F3F46'),
listHoverBackground: Color.fromHex('#2A2D2E'),
listDropBackground: Color.fromHex('#383B3D'),
treeIndentGuidesStroke: Color.fromHex('#a9a9a9')
treeIndentGuidesStroke: Color.fromHex('#a9a9a9'),
tableColumnsBorder: Color.fromHex('#cccccc').transparent(0.2)
};

const DefaultOptions: IListOptions<any> = {
Expand Down
24 changes: 11 additions & 13 deletions src/vs/base/browser/ui/splitview/splitview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export interface ISplitViewOptions<TLayoutContext = undefined> {
readonly inverseAltBehavior?: boolean;
readonly proportionalLayout?: boolean; // default true,
readonly descriptor?: ISplitViewDescriptor<TLayoutContext>;
readonly scrollbarVisibility?: ScrollbarVisibility;
readonly getSashOrthogonalSize?: () => number;
}

/**
Expand Down Expand Up @@ -200,7 +202,7 @@ export namespace Sizing {
export function Invisible(cachedVisibleSize: number): InvisibleSizing { return { type: 'invisible', cachedVisibleSize }; }
}

export interface ISplitViewDescriptor<TLayoutContext> {
export interface ISplitViewDescriptor<TLayoutContext = undefined> {
size: number;
views: {
visible?: boolean;
Expand All @@ -227,6 +229,7 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
private state: State = State.Idle;
private inverseAltBehavior: boolean;
private proportionalLayout: boolean;
private readonly getSashOrthogonalSize: { (): number } | undefined;

private _onDidSashChange = this._register(new Emitter<number>());
readonly onDidSashChange = this._onDidSashChange.event;
Expand Down Expand Up @@ -298,6 +301,7 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
this.inverseAltBehavior = !!options.inverseAltBehavior;
this.proportionalLayout = types.isUndefined(options.proportionalLayout) ? true : !!options.proportionalLayout;
this.getSashOrthogonalSize = options.getSashOrthogonalSize;

this.el = document.createElement('div');
this.el.classList.add('monaco-split-view2');
Expand All @@ -309,8 +313,8 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {

this.scrollable = new Scrollable(125, scheduleAtNextAnimationFrame);
this.scrollableElement = this._register(new SmoothScrollableElement(this.viewContainer, {
vertical: this.orientation === Orientation.VERTICAL ? ScrollbarVisibility.Auto : ScrollbarVisibility.Hidden,
horizontal: this.orientation === Orientation.HORIZONTAL ? ScrollbarVisibility.Auto : ScrollbarVisibility.Hidden
vertical: this.orientation === Orientation.VERTICAL ? (options.scrollbarVisibility ?? ScrollbarVisibility.Auto) : ScrollbarVisibility.Hidden,
horizontal: this.orientation === Orientation.HORIZONTAL ? (options.scrollbarVisibility ?? ScrollbarVisibility.Auto) : ScrollbarVisibility.Hidden
}, this.scrollable));

this._register(this.scrollableElement.onScroll(e => {
Expand Down Expand Up @@ -706,17 +710,11 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {

// Add sash
if (this.viewItems.length > 1) {
let opts = { orthogonalStartSash: this.orthogonalStartSash, orthogonalEndSash: this.orthogonalEndSash };

const sash = this.orientation === Orientation.VERTICAL
? new Sash(this.sashContainer, { getHorizontalSashTop: (sash: Sash) => this.getSashPosition(sash) }, {
orientation: Orientation.HORIZONTAL,
orthogonalStartSash: this.orthogonalStartSash,
orthogonalEndSash: this.orthogonalEndSash
})
: new Sash(this.sashContainer, { getVerticalSashLeft: (sash: Sash) => this.getSashPosition(sash) }, {
orientation: Orientation.VERTICAL,
orthogonalStartSash: this.orthogonalStartSash,
orthogonalEndSash: this.orthogonalEndSash
});
? new Sash(this.sashContainer, { getHorizontalSashTop: s => this.getSashPosition(s), getHorizontalSashWidth: this.getSashOrthogonalSize }, { ...opts, orientation: Orientation.HORIZONTAL })
: new Sash(this.sashContainer, { getVerticalSashLeft: s => this.getSashPosition(s), getVerticalSashHeight: this.getSashOrthogonalSize }, { ...opts, orientation: Orientation.VERTICAL });

const sashEventMapper = this.orientation === Orientation.VERTICAL
? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY, alt: e.altKey })
Expand Down
66 changes: 66 additions & 0 deletions src/vs/base/browser/ui/table/table.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.monaco-table {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
width: 100%;
white-space: nowrap;
}

.monaco-table > .monaco-split-view2 {
border-bottom: 1px solid transparent;
}

.monaco-table > .monaco-list {
flex: 1;
}

.monaco-table-tr {
display: flex;
}

.monaco-table-th {
width: 100%;
height: 100%;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
}

.monaco-table-th,
.monaco-table-td {
box-sizing: border-box;
padding-left: 10px;
flex-shrink: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.monaco-table-th[data-col-index="0"],
.monaco-table-td[data-col-index="0"] {
padding-left: 20px;
}

.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
content: "";
position: absolute;
left: calc(var(--sash-size) / 2);
width: 0;
border-left: 1px solid transparent;
}

.monaco-table > .monaco-split-view2,
.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
transition: border-color 0.2s ease-out;
}
/*
.monaco-table:hover > .monaco-split-view2,
.monaco-table:hover > .monaco-split-view2 .monaco-sash.vertical::before {
border-color: rgba(204, 204, 204, 0.2);
} */
40 changes: 40 additions & 0 deletions src/vs/base/browser/ui/table/table.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { IListContextMenuEvent, IListEvent, IListGestureEvent, IListMouseEvent, IListRenderer, IListTouchEvent } from 'vs/base/browser/ui/list/list';
import { Event } from 'vs/base/common/event';

export interface ITableColumn<TRow, TCell> {
readonly label: string;
readonly tooltip?: string;
readonly weight: number;
readonly templateId: string;

readonly minimumWidth?: number;
readonly maximumWidth?: number;
readonly onDidChangeWidthConstraints?: Event<void>;

project(row: TRow): TCell;
}

export interface ITableVirtualDelegate<TRow> {
readonly headerRowHeight: number;
getHeight(row: TRow): number;
}

export interface ITableRenderer<TCell, TTemplateData> extends IListRenderer<TCell, TTemplateData> { }

export interface ITableEvent<TRow> extends IListEvent<TRow> { }
export interface ITableMouseEvent<TRow> extends IListMouseEvent<TRow> { }
export interface ITableTouchEvent<TRow> extends IListTouchEvent<TRow> { }
export interface ITableGestureEvent<TRow> extends IListGestureEvent<TRow> { }
export interface ITableContextMenuEvent<TRow> extends IListContextMenuEvent<TRow> { }

export class TableError extends Error {

constructor(user: string, message: string) {
super(`TableError [${user}] ${message}`);
}
}
Loading

0 comments on commit a8a04eb

Please sign in to comment.