From a3dffc430cf41075a75be03de2d1681aa9968ea0 Mon Sep 17 00:00:00 2001
From: Jeremy Tuloup <jeremy.tuloup@gmail.com>
Date: Sun, 6 Dec 2020 21:34:26 +0100
Subject: [PATCH] Add wrapper widgets to look closer to classic

---
 packages/application-extension/src/index.ts |  4 +--
 packages/application/src/shell.ts           | 22 +++++++++++-----
 packages/application/style/base.css         | 29 ++++++++++++++++-----
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/packages/application-extension/src/index.ts b/packages/application-extension/src/index.ts
index 1fa53f23e..d716c5679 100644
--- a/packages/application-extension/src/index.ts
+++ b/packages/application-extension/src/index.ts
@@ -386,7 +386,7 @@ const title: JupyterFrontEndPlugin<void> = {
             h.textContent = result.path;
             if (router) {
               // TODO: better handle this
-              router.navigate(`/classic/tree/${result.path}`, {
+              router.navigate(`/classic/notebooks/${result.path}`, {
                 skipRouting: true
               });
             }
@@ -448,7 +448,7 @@ const tree: JupyterFrontEndPlugin<void> = {
   requires: [IRouter],
   activate: (app: JupyterFrontEnd, router: IRouter): void => {
     const { commands } = app;
-    const treePattern = new RegExp('/tree/(.*)');
+    const treePattern = new RegExp('/notebooks/(.*)');
 
     const command = 'router:tree';
     commands.addCommand(command, {
diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index 737c1beb1..403bec6aa 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -49,16 +49,25 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell {
     this._menuHandler.panel.id = 'menu-panel';
     this._main.id = 'main-panel';
 
-    BoxLayout.setStretch(this._topHandler.panel, 0);
-    BoxLayout.setStretch(this._menuHandler.panel, 0);
+    // create wrappers around the top and menu areas
+    const topWrapper = (this._topWrapper = new Panel());
+    topWrapper.id = 'top-panel-wrapper';
+    topWrapper.addWidget(this._topHandler.panel);
+
+    const menuWrapper = new Panel();
+    menuWrapper.id = 'menu-panel-wrapper';
+    menuWrapper.addWidget(this._menuHandler.panel);
+
+    BoxLayout.setStretch(topWrapper, 0);
+    BoxLayout.setStretch(menuWrapper, 0);
     BoxLayout.setStretch(this._main, 1);
 
     const spacer = new Widget();
     spacer.node.style.minHeight = '16px';
 
     rootLayout.spacing = 0;
-    rootLayout.addWidget(this._topHandler.panel);
-    rootLayout.addWidget(this._menuHandler.panel);
+    rootLayout.addWidget(topWrapper);
+    rootLayout.addWidget(menuWrapper);
     rootLayout.addWidget(spacer);
     rootLayout.addWidget(this._main);
 
@@ -115,10 +124,10 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell {
   }
 
   /**
-   * Get the top area panel
+   * Get the top area wrapper panel
    */
   get top(): Widget {
-    return this._topHandler.panel;
+    return this._topWrapper;
   }
 
   /**
@@ -136,6 +145,7 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell {
     return iter(this._main.widgets);
   }
 
+  private _topWrapper: Panel;
   private _topHandler: Private.PanelHandler;
   private _menuHandler: Private.PanelHandler;
   private _main: Panel;
diff --git a/packages/application/style/base.css b/packages/application/style/base.css
index 0208f1413..c29b804e2 100644
--- a/packages/application/style/base.css
+++ b/packages/application/style/base.css
@@ -21,30 +21,45 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1200px;
 }
 
-#top-panel {
-  display: flex;
+#top-panel-wrapper {
+  min-height: calc(1.5 * var(--jp-private-topbar-height));
   border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
   background: var(--jp-layout-color1);
+}
+
+#top-panel {
+  display: flex;
   min-height: calc(1.5 * var(--jp-private-topbar-height));
   padding-left: 5px;
   padding-right: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
 }
 
-#menu-panel {
-  display: flex;
+#menu-panel-wrapper {
   min-height: var(--jp-private-topbar-height);
   background: var(--jp-layout-color1);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
   box-shadow: var(--jp-elevation-z1);
+}
+
+#menu-panel {
+  display: flex;
+  min-height: var(--jp-private-topbar-height);
+  background: var(--jp-layout-color1);
   padding-left: 5px;
   padding-right: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
 }
 
 #main-panel {
   box-shadow: var(--jp-elevation-z4);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
 }