GH-5175: Finished view container layout changes

Signed-off-by: Miro Spönemann <miro.spoenemann@typefox.io>
eclipse-theia · Jun 25, 2019 · 2679e38 · 2679e38
1 parent 6756ef6
commit 2679e38
Show file tree

Hide file tree

Showing 13 changed files with 1,011 additions and 1,106 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -13,7 +13,6 @@
     "@types/express": "^4.16.0",
     "@types/lodash.debounce": "4.0.3",
     "@types/lodash.throttle": "^4.1.3",
-    "@types/p-queue": "^2.3.1",
     "@types/react": "^16.4.1",
     "@types/react-dom": "^16.0.6",
     "@types/react-virtualized": "^9.18.3",
@@ -32,7 +31,6 @@
     "lodash.throttle": "^4.1.1",
     "nsfw": "^1.2.2",
     "perfect-scrollbar": "^1.3.0",
-    "p-queue": "^2.4.2",
     "react": "^16.4.1",
     "react-autosize-textarea": "^7.0.0",
     "react-dom": "^16.4.1",

diff --git a/packages/core/src/browser/frontend-application-module.ts b/packages/core/src/browser/frontend-application-module.ts
@@ -242,13 +242,10 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
     bind(ApplicationShellMouseTracker).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(ApplicationShellMouseTracker);
 
+    bind(ViewContainer.Services).toSelf();
     bind(ViewContainer.Factory).toFactory(context => (...descriptors: ViewContainer.Factory.WidgetDescriptor[]) => {
         const { container } = context;
-        const services: ViewContainer.Services = {
-            contextMenuRenderer: container.get(ContextMenuRenderer),
-            commandRegistry: container.get(CommandRegistry),
-            menuRegistry: container.get(MenuModelRegistry)
-        };
+        const services = container.get(ViewContainer.Services);
         const inputs: Array<{ widget: Widget, options?: ViewContainer.Factory.WidgetOptions }> = [];
         for (const descriptor of descriptors) {
             const { widget, options } = descriptor;

diff --git a/packages/core/src/browser/index.ts b/packages/core/src/browser/index.ts
@@ -38,3 +38,4 @@ export * from './widget-open-handler';
 export * from './navigatable';
 export * from './diff-uris';
 export * from './core-preferences';
+export * from './view-container';
diff --git a/packages/core/src/browser/shell/split-panels.ts b/packages/core/src/browser/shell/split-panels.ts
@@ -19,7 +19,7 @@ import { SplitPanel, SplitLayout, Widget } from '@phosphor/widgets';
 
 export interface SplitPositionOptions {
     /** The side of the side panel that shall be resized. */
-    side: 'left' | 'right' | 'top' | 'bottom';
+    side?: 'left' | 'right' | 'top' | 'bottom';
     /** The duration in milliseconds, or 0 for no animation. */
     duration: number;
     /** When this widget is hidden, the animation is canceled. */
@@ -31,7 +31,7 @@ export interface MoveEntry extends SplitPositionOptions {
     index: number;
     started: boolean;
     ended: boolean;
-    targetSize: number;
+    targetSize?: number;
     targetPosition?: number;
     startPosition?: number;
     startTime?: number
@@ -45,6 +45,21 @@ export class SplitPositionHandler {
     private readonly splitMoves: MoveEntry[] = [];
     private currentMoveIndex: number = 0;
 
+    /**
+     * Set the position of a split handle asynchronously. This function makes sure that such movements
+     * are performed one after another in order to prevent the movements from overriding each other.
+     * When resolved, the returned promise yields the final position of the split handle.
+     */
+    setSplitHandlePosition(parent: SplitPanel, index: number, targetPosition: number, options: SplitPositionOptions): Promise<number> {
+        const move: MoveEntry = {
+            ...options,
+            parent, targetPosition, index,
+            started: false,
+            ended: false
+        };
+        return this.moveSplitPos(move);
+    }
+
     /**
      * Resize a side panel asynchronously. This function makes sure that such movements are performed
      * one after another in order to prevent the movements from overriding each other.
@@ -123,7 +138,7 @@ export class SplitPositionHandler {
     }
 
     protected startMove(move: MoveEntry, time: number): void {
-        if (move.targetPosition === undefined) {
+        if (move.targetPosition === undefined && move.targetSize !== undefined) {
             const { clientWidth, clientHeight } = move.parent.node;
             if (clientWidth && clientHeight) {
                 switch (move.side) {

diff --git a/packages/core/src/browser/style/view-container.css b/packages/core/src/browser/style/view-container.css
@@ -20,30 +20,31 @@
     flex-direction: column;
 }
 
-.theia-view-container .split-panel {
+.theia-view-container > .p-SplitPanel {
     height: 100%;
     width: 100%;
 }
 
-.theia-view-container .split-panel .p-SplitPanel-child {
+.theia-view-container > .p-SplitPanel > .p-SplitPanel-child {
+    min-width: 50px;
     min-height: 22px;
 }
 
-.theia-view-container .p-SplitPanel > .p-SplitPanel-handle:after {
+.theia-view-container > .p-SplitPanel > .p-SplitPanel-handle:after {
     background-color: var(--theia-menu-color0);
     min-height: 2px;
     min-width: 2px
 }
 
-.theia-view-container .p-SplitPanel-handle {
+.theia-view-container > .p-SplitPanel > .p-SplitPanel-handle {
     background-color: var(--theia-menu-color0);
 }
 
 .theia-view-container .part {
     height: 100%;
 }
 
-.theia-view-container .part .header {
+.theia-view-container .part > .header {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -52,47 +53,49 @@
     z-index: 10;
 }
 
-.theia-view-container .part .header .theia-ExpansionToggle {
+.theia-view-container .part > .header .theia-ExpansionToggle {
     padding-left: 4px;
 }
 
-.theia-view-container .p-SplitPanel[data-orientation='horizontal'] .part .header .theia-ExpansionToggle::before {
+.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .header .theia-ExpansionToggle::before {
     display: none;
     padding-left: 0px;
 }
 
-.theia-view-container .p-SplitPanel[data-orientation='horizontal'] .part .header .theia-ExpansionToggle {
+.theia-view-container > .p-SplitPanel[data-orientation='horizontal'] .part > .header .theia-ExpansionToggle {
     padding-left: 0px;
 }
 
-.theia-view-container .part .header .label {
+.theia-view-container .part > .header .label {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.theia-view-container .part .header .element {
+.theia-view-container .part > .header .element {
     min-width: 16px;
     min-height: 16px;
     padding-left: calc(var(--theia-ui-padding)*2);
     display: none;
 }
 
-.theia-view-container .part:hover .element {
+.theia-view-container .part:hover > .header .element {
     display: block;
 }
 
-.theia-view-container .body {
+.theia-view-container .part > .body {
     height: 100%;
+    min-width: 50px;
+    min-height: 50px;
 }
 
-.theia-view-container .body .theia-tree-source-node-placeholder {
+.theia-view-container .part > .body .theia-tree-source-node-placeholder {
     padding-top: 4px;
     height: 100%;
 }
 
-.theia-view-container .part:hover .body {
+.theia-view-container .part:hover > .body {
     display: block;
 }