Toggle full width

Author: jtpio

packages/notebook-extension/schema/full-width-notebook.json

@@ -0,0 +1,27 @@
+{
+  "title": "Jupyter Notebook Full Width Notebook",
+  "description": "Jupyter Notebook Full Width Notebook",
+  "jupyter.lab.menus": {
+    "main": [
+      {
+        "id": "jp-mainmenu-view",
+        "items": [
+          {
+            "command": "notebook:toggle-full-width",
+            "rank": 4
+          }
+        ]
+      }
+    ]
+  },
+  "properties": {
+    "fullWidthNotebook": {
+      "type": "boolean",
+      "title": "Full Width Notebook",
+      "description": "Whether to the notebook should take up the full width of the application",
+      "default": false
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

packages/notebook-extension/src/index.ts

@@ -64,6 +64,11 @@ const KERNEL_STATUS_FADE_OUT_CLASS = 'jp-NotebookKernelStatus-fade';
  */
 const SCROLLED_OUTPUTS_CLASS = 'jp-mod-outputsScrolled';
 
+/**
+ * The class for the full width notebook
+ */
+const FULL_WIDTH_NOTEBOOK_CLASS = 'jp-mod-fullwidth';
+
 /**
  * The command IDs used by the notebook plugins.
  */
@@ -72,6 +77,11 @@ namespace CommandIDs {
    * A command to open right sidebar for Editing Notebook Metadata
    */
   export const openEditNotebookMetadata = 'notebook:edit-metadata';
+
+  /**
+   * A command to toggle full width of the notebook
+   */
+  export const toggleFullWidth = 'notebook:toggle-full-width';
 }
 
 /**
@@ -202,6 +212,47 @@ const openTreeTab: JupyterFrontEndPlugin<void> = {
   },
 };
 
+/**
+ * A plugin to set the notebook to full width.
+ */
+const fullWidthNotebook: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-notebook/notebook-extension:full-width-notebook',
+  description: 'A plugin to set the notebook to full width.',
+  autoStart: true,
+  requires: [INotebookTracker],
+  optional: [ICommandPalette, ISettingRegistry, ITranslator],
+  activate: (
+    app: JupyterFrontEnd,
+    tracker: INotebookTracker,
+    palette: ICommandPalette | null,
+    settingRegistry: ISettingRegistry | null,
+    translator: ITranslator | null
+  ) => {
+    const trans = (translator ?? nullTranslator).load('notebook');
+
+    const toggleFullWidth = () => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return;
+      }
+      current.content.toggleClass(FULL_WIDTH_NOTEBOOK_CLASS);
+    };
+
+    // add a command to toggle full width
+    app.commands.addCommand(CommandIDs.toggleFullWidth, {
+      label: trans.__('Toggle Full Width'),
+      execute: toggleFullWidth,
+    });
+
+    if (palette) {
+      palette.addItem({
+        command: CommandIDs.toggleFullWidth,
+        category: 'Notebook Operations',
+      });
+    }
+  },
+};
+
 /**
  * The kernel logo plugin.
  */
@@ -597,6 +648,7 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   closeTab,
   openTreeTab,
   editNotebookMetadata,
+  fullWidthNotebook,
   kernelLogo,
   kernelStatus,
   notebookToolsWidget,

packages/notebook-extension/style/base.css

@@ -18,11 +18,20 @@
 
 /* Keep the notebook centered on the page */
 
+
 body[data-notebook='notebooks'] .jp-NotebookPanel-toolbar {
   padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
   padding-right: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
 }
 
+/* Make the notebook take up the full width of the page when jp-mod-fullwidth is set */
+body[data-notebook='notebooks'] .jp-Notebook.jp-mod-fullwidth .jp-WindowedPanel-outer {
+  padding-left: unset;
+  padding-right: unset !important;
+  width: unset;
+}
+
+/* Default notebook layout with a max-width */
 body[data-notebook='notebooks'] .jp-WindowedPanel-outer {
   width: unset !important;
   padding-top: unset;