eclipse-theiaGH-5175: Initial view container layout changes.

Signed-off-by: Akos Kitta <[email protected]>
logicmoo · Jul 5, 2019 · b33cd20 · b33cd20
1 parent 757af9e
commit b33cd20
Show file tree

Hide file tree

Showing 13 changed files with 1,103 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@types/sinon": "^2.3.5",
     "@types/temp": "^0.8.29",
     "@types/webdriverio": "^4.7.0",
+    "@types/uuid": "^3.4.3",
     "chai": "^4.1.0",
     "chai-string": "^1.4.0",
     "concurrently": "^3.5.0",
@@ -38,7 +39,7 @@
     "typedoc": "^0.15.0-0",
     "typedoc-plugin-external-module-map": "^1.0.0",
     "typescript": "^3.1.3",
-    "uuid": "^3.1.0",
+    "uuid": "^3.2.1",
     "wdio-mocha-framework": "0.6.4",
     "wdio-selenium-standalone-service": "0.0.12",
     "wdio-spec-reporter": "0.1.5",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -13,6 +13,7 @@
     "@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",
@@ -31,6 +32,7 @@
     "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
@@ -74,6 +74,8 @@ import { ResourceContextKey } from './resource-context-key';
 import { KeyboardLayoutService } from './keyboard/keyboard-layout-service';
 import { MimeService } from './mime-service';
 import { ApplicationShellMouseTracker } from './shell/application-shell-mouse-tracker';
+import { ViewContainer } from './view-container';
+import { Widget } from './widgets';
 
 export const frontendApplicationModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     const themeService = ThemeService.get();
@@ -167,7 +169,7 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
         bind(serviceIdentifier).toService(QuickCommandFrontendContribution)
     );
 
-    bind(QuickPickService).to(QuickPickServiceImpl).inSingletonScope().onActivation(({ container }, quickPickService) => {
+    bind(QuickPickService).to(QuickPickServiceImpl).inSingletonScope().onActivation(({ container }, quickPickService: QuickPickService) => {
         WebSocketConnectionProvider.createProxy(container, quickPickServicePath, quickPickService);
         return quickPickService;
     });
@@ -239,6 +241,25 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
 
     bind(ApplicationShellMouseTracker).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(ApplicationShellMouseTracker);
+
+    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 inputs: Array<{ widget: Widget, options?: ViewContainer.Factory.WidgetOptions }> = [];
+        for (const descriptor of descriptors) {
+            const { widget, options } = descriptor;
+            if (widget instanceof Widget) {
+                inputs.push({ widget, options });
+            } else {
+                inputs.push({ widget: container.get(widget), options });
+            }
+        }
+        return new ViewContainer(services, ...inputs);
+    });
 });
 
 export function bindMessageService(bind: interfaces.Bind): interfaces.BindingWhenOnSyntax<MessageService> {

diff --git a/packages/core/src/browser/shell/side-panel-toolbar.ts b/packages/core/src/browser/shell/side-panel-toolbar.ts
@@ -72,6 +72,7 @@ export class SidePanelToolbar extends Widget {
         this.titleContainer = document.createElement('div');
         this.titleContainer.classList.add('theia-sidepanel-title');
         this.titleContainer.classList.add('noWrapInfo');
+        this.titleContainer.classList.add('noselect');
         this.node.appendChild(this.titleContainer);
         this.node.classList.add('theia-sidepanel-toolbar');
         this.node.classList.add(`theia-${this.side}-side-panel`);

diff --git a/packages/core/src/browser/source-tree/source-tree-widget.tsx b/packages/core/src/browser/source-tree/source-tree-widget.tsx
@@ -74,7 +74,7 @@ export class SourceTreeWidget extends TreeWidget {
         if (TreeSourceNode.is(model.root) && model.root.children.length === 0) {
             const { placeholder } = model.root.source;
             if (placeholder) {
-                return <div className='theia-tree-source-node-placeholder'>{placeholder}</div>;
+                return <div className='theia-tree-source-node-placeholder noselect'>{placeholder}</div>;
             }
         }
         return super.renderTree(model);

diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -84,8 +84,7 @@ body {
 .theia-header {
   text-transform: uppercase;
   font-size: var(--theia-ui-font-size0);
-  font-weight: 800;
-  margin: 10px 0 5px 0;
+  font-weight: 450;
 }
 
 .p-Widget {

diff --git a/packages/core/src/browser/style/view-container.css b/packages/core/src/browser/style/view-container.css
@@ -18,31 +18,99 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding-left: var(--theia-ui-padding);
 }
 
-.theia-view-container-part {
-    display: block;
+.theia-view-container .split-panel {
+    height: 100%;
+    width: 100%;
+}
+
+.theia-view-container .split-panel .p-SplitPanel-child {
+    min-height: 22px;
+}
+
+.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 {
+    background-color: var(--theia-menu-color0);
+}
+
+.theia-view-container .part {
+    height: 100%;
 }
 
-.theia-view-container-part-head {
+.theia-view-container .part .header {
     cursor: pointer;
     display: flex;
     align-items: center;
+    background: var(--theia-menu-color0);
+    line-height: 22px;
+    z-index: 10;
+}
+
+.theia-view-container .part .header .theia-ExpansionToggle {
+    padding-left: 4px;
+}
+
+.theia-view-container .p-SplitPanel[data-orientation='horizontal'] .part .header .theia-ExpansionToggle::before {
+    display: none;
+    padding-left: 0px;
 }
 
-.theia-view-container-part-head .label {
+.theia-view-container .p-SplitPanel[data-orientation='horizontal'] .part .header .theia-ExpansionToggle {
+    padding-left: 0px;
+}
+
+.theia-view-container .part .header .label {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.theia-view-container-part-head .element {
+
+.theia-view-container .part .header .element {
     min-width: 16px;
     min-height: 16px;
-    padding-left: calc(var(--theia-ui-padding)*2)
+    padding-left: calc(var(--theia-ui-padding)*2);
+    display: none;
+}
+
+.theia-view-container .part:hover .element {
+    display: block;
+}
+
+.theia-view-container .body {
+    height: 100%;
+}
+
+.theia-view-container .body .theia-tree-source-node-placeholder {
+    padding-top: 4px;
+    height: 100%;
 }
 
-.theia-view-container-part-body {
+.theia-view-container .part:hover .body {
     display: block;
 }
+
+.theia-view-container .part.drop-target {
+    background: rgba(33, 150, 243, 0.1);
+    border: var(--theia-border-width) dashed var(--theia-brand-color1);
+    transition-property: top, left, right, bottom;
+    transition-duration: 150ms;
+    transition-timing-function: ease;
+}
+
+.theia-view-container-drag-image {
+    background: var(--theia-menu-color0);
+    line-height: 22px;
+    position: absolute;
+    color: var(--theia-ui-font-color1);
+    text-transform: uppercase;
+    font-size: var(--theia-ui-font-size0);
+    font-weight: 500;
+    padding: 0 var(--theia-ui-padding) 0 var(--theia-ui-padding);
+}