wip CSS

src/application/shell.ts

@@ -68,30 +68,27 @@ interface ISideAreaOptions {
  * The application shell for JupyterLab.
  */
 export
-class ApplicationShell extends Widget {
+class ApplicationShell extends BoxPanel {
   /**
    * Construct a new application shell.
    */
   constructor() {
     super();
     this.addClass(APPLICATION_SHELL_CLASS);
+    this.id = 'main';
+    this.direction = 'top-to-bottom';
+    this.spacing = 0;
 
-    let topPanel = new Panel();
-    let hboxPanel = new BoxPanel();
-    let dockPanel = new DockPanel();
-    let hsplitPanel = new SplitPanel();
-    let leftHandler = new SideBarHandler('left');
-    let rightHandler = new SideBarHandler('right');
-    let rootLayout = new BoxLayout();
-
-    this._topPanel = topPanel;
-    this._hboxPanel = hboxPanel;
-    this._dockPanel = dockPanel;
-    this._hsplitPanel = hsplitPanel;
-    this._leftHandler = leftHandler;
-    this._rightHandler = rightHandler;
+    let topPanel = this._topPanel = new Panel();
+    let hboxPanel = this._hboxPanel = new BoxPanel();
+    let dockPanel = this._dockPanel = new DockPanel();
+    let hsplitPanel = this._hsplitPanel = new SplitPanel();
+    let leftHandler = this._leftHandler = new SideBarHandler('left');
+    let rightHandler = this._rightHandler = new SideBarHandler('right');
 
     topPanel.id = 'jp-top-panel';
+    hboxPanel.id = 'jp-main-content-panel';
+    dockPanel.id = 'jp-main-dock-panel';
     hsplitPanel.id = 'jp-main-split-panel';
 
     leftHandler.sideBar.addClass(SIDEBAR_CLASS);
@@ -102,42 +99,36 @@ class ApplicationShell extends Widget {
     rightHandler.sideBar.addClass('jp-mod-right');
     rightHandler.stackedPanel.id = 'jp-right-stack';
 
-    dockPanel.id = 'jp-main-dock-panel';
-
+    hboxPanel.spacing = 0;
     dockPanel.spacing = 8;
+    hsplitPanel.spacing = 1;
 
+    hboxPanel.direction = 'left-to-right';
     hsplitPanel.orientation = 'horizontal';
-    hsplitPanel.spacing = 1;
 
     SplitPanel.setStretch(leftHandler.stackedPanel, 0);
     SplitPanel.setStretch(dockPanel, 1);
     SplitPanel.setStretch(rightHandler.stackedPanel, 0);
 
-    hsplitPanel.addWidget(leftHandler.stackedPanel);
-    hsplitPanel.addWidget(dockPanel);
-    hsplitPanel.addWidget(rightHandler.stackedPanel);
-
-    hboxPanel.direction = 'left-to-right';
-    hboxPanel.spacing = 0;
-
     BoxPanel.setStretch(leftHandler.sideBar, 0);
     BoxPanel.setStretch(hsplitPanel, 1);
     BoxPanel.setStretch(rightHandler.sideBar, 0);
 
+    hsplitPanel.addWidget(leftHandler.stackedPanel);
+    hsplitPanel.addWidget(dockPanel);
+    hsplitPanel.addWidget(rightHandler.stackedPanel);
+
     hboxPanel.addWidget(leftHandler.sideBar);
     hboxPanel.addWidget(hsplitPanel);
     hboxPanel.addWidget(rightHandler.sideBar);
 
-    rootLayout.direction = 'top-to-bottom';
-    rootLayout.spacing = 0;
-
-    BoxLayout.setStretch(topPanel, 0);
-    BoxLayout.setStretch(hboxPanel, 1);
-
-    rootLayout.addWidget(topPanel);
-    rootLayout.addWidget(hboxPanel);
+    BoxPanel.setStretch(this, 1);
+    BoxPanel.setStretch(topPanel, 0);
+    BoxPanel.setStretch(hboxPanel, 1);
 
-    this.layout = rootLayout;
+    this.addWidget(topPanel);
+    this.addWidget(hboxPanel);
+    this.update();
   }
 
   /**
@@ -241,10 +232,7 @@ class SideBarHandler {
    */
   constructor(side: string) {
     this._side = side;
-    this._sideBar = new TabBar({
-      orientation: 'vertical',
-      allowDeselect: true
-    });
+    this._sideBar = new TabBar({ allowDeselect: true });
     this._stackedPanel = new StackedPanel();
     this._sideBar.hide();
     this._stackedPanel.hide();

src/default-theme/commandpalette.css

@@ -3,7 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 .p-CommandPalette {
-  min-width: 300px;
   padding-bottom: 0px;
   color: #757575;
   background: #FAFAFA;

src/default-theme/index.css

@@ -28,11 +28,19 @@
 
 
 body {
+  background: #E0E0E0;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   margin: 0;
   padding: 0;
-  background: #E0E0E0;
   overflow: hidden;
-  font-family: sans-serif;
 }
 
 
@@ -58,12 +66,6 @@ body {
 }
 
 
-
-.jp-FileBrowser {
-  min-width: 300px;
-}
-
-
 .p-DockPanel-tabPanel {
   border-top: none;
 }

src/default-theme/shell.css

@@ -2,12 +2,9 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-.jp-ApplicationShell.p-Widget {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+
+#main {
+  flex: 1 1 auto;
   font-size: 14px;
 }
 
@@ -18,18 +15,13 @@
 }
 
 
-#jp-left-stack {
+#jp-left-stack, #jp-right-stack {
   border-right: 1px solid #BDBDBD;
 }
 
 
-#jp-right-stack {
-  border-left: 1px solid #BDBDBD;
-}
-
-
-#jp-main-dock-panel {
-  padding: 8px;
+#jp-left-stack > .p-Widget, #jp-right-stack > .p-Widget {
+  min-width: 300px;
 }
 
 
@@ -39,7 +31,7 @@
   font-size: 14px;
   max-width: 36px;
   max-height: none;
-  height: 100%;
+  overflow: visible;
 }
 
 

src/filebrowser/theme.css

@@ -3,7 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 .jp-FileBrowser {
-  min-width: 300px;
   color: #757575;
   background: #FAFAFA;
   font-size: 13px;