Make status bar accessible at 400% zoom by hiding items with priority…

… of zero (default) (jupyterlab#14854) * added @media query with max-width of 320px and added className. * implementing feedback * uncommented css file * Update Playwright Snapshots * changes max-width to width<= n to fix lint test error * Update Playwright Snapshots * took out unneeded line * Update Playwright Snapshots * Update Playwright Snapshots * Update Playwright Snapshots * Update Playwright Snapshots * Update Playwright Snapshots * implementation of feeback * fixed file conflict * Update packages/statusbar/src/statusbar.ts Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> * Update packages/statusbar/src/statusbar.ts Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> * Update packages/statusbar/src/tokens.ts Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> * Update packages/statusbar/src/statusbar.ts Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> * moved items to where they are defined. * fixed device pixel ratio issue. * Update packages/statusbar/src/statusbar.ts Co-authored-by: gabalafou <gabriel@fouasnon.com> * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update packages/statusbar/src/statusbar.ts Co-authored-by: gabalafou <gabriel@fouasnon.com> * Update packages/statusbar/src/statusbar.ts Co-authored-by: gabalafou <gabriel@fouasnon.com> --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> Co-authored-by: gabalafou <gabriel@fouasnon.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
m158261 · Dec 20, 2023 · 9956d5c · 9956d5c
1 parent 6a86d8f
commit 9956d5c
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 4 deletions.
diff --git a/...tebook-markdown.test.ts-snapshots/render-mermaid-flowchart-jupyterlab-linux.png b/...tebook-markdown.test.ts-snapshots/render-mermaid-flowchart-jupyterlab-linux.png
diff --git a/packages/application-extension/src/index.tsx b/packages/application-extension/src/index.tsx
@@ -1246,6 +1246,7 @@ const modeSwitchPlugin: JupyterFrontEndPlugin<void> = {
     modeSwitch.label = trans.__('Simple');
 
     statusBar.registerStatusItem(modeSwitchPlugin.id, {
+      priority: 1,
       item: modeSwitch,
       align: 'left',
       rank: -1

diff --git a/packages/apputils-extension/src/statusbarplugin.ts b/packages/apputils-extension/src/statusbarplugin.ts
@@ -101,6 +101,7 @@ export const kernelStatus: JupyterFrontEndPlugin<IKernelStatusModel> = {
     }
 
     statusBar.registerStatusItem(kernelStatus.id, {
+      priority: 1,
       item,
       align: 'left',
       rank: 1,

diff --git a/packages/codemirror-extension/src/index.ts b/packages/codemirror-extension/src/index.ts
@@ -47,6 +47,7 @@ export const lineColItem: JupyterFrontEndPlugin<IPositionModel> = {
     if (statusBar) {
       // Add the status item to the status bar.
       statusBar.registerStatusItem(lineColItem.id, {
+        priority: 1,
         item,
         align: 'right',
         rank: 2,

diff --git a/packages/notebook-extension/src/index.ts b/packages/notebook-extension/src/index.ts
@@ -432,6 +432,7 @@ export const commandEditItem: JupyterFrontEndPlugin<void> = {
     });
 
     statusBar.registerStatusItem('@jupyterlab/notebook-extension:mode-status', {
+      priority: 1,
       item,
       align: 'right',
       rank: 4,

diff --git a/packages/statusbar/src/statusbar.ts b/packages/statusbar/src/statusbar.ts
@@ -51,7 +51,7 @@ export class StatusBar extends Widget implements IStatusBar {
       ...Private.statusItemDefaults,
       ...statusItem
     } as Private.IFullItem;
-    const { align, item, rank } = fullStatusItem;
+    const { align, item, rank, priority } = fullStatusItem;
 
     // Connect the activeStateChanged signal to refreshing the status item,
     // if the signal was provided.
@@ -62,7 +62,7 @@ export class StatusBar extends Widget implements IStatusBar {
       fullStatusItem.activeStateChanged.connect(onActiveStateChanged);
     }
 
-    const rankItem = { id, rank };
+    const rankItem = { id, rank, priority };
 
     fullStatusItem.item.addClass('jp-StatusBar-Item');
     this._statusItems[id] = fullStatusItem;
@@ -112,6 +112,14 @@ export class StatusBar extends Widget implements IStatusBar {
     super.dispose();
   }
 
+  private _isWindowNarrow = () => {
+    // The value for 630px was chosen by trial and error.
+    // When the screen width drops below 630px, there is no
+    // longer enough space for all the items in the status bar
+    // (with notebook open), and items become clipped.
+    return window.innerWidth <= 630;
+  };
+
   /**
    * Handle an 'update-request' message to the status bar.
    */
@@ -129,7 +137,10 @@ export class StatusBar extends Widget implements IStatusBar {
 
   private _refreshItem(id: string) {
     const statusItem = this._statusItems[id];
-    if (statusItem.isActive()) {
+    if (
+      statusItem.isActive() &&
+      !(statusItem.priority === 0 && this._isWindowNarrow())
+    ) {
       statusItem.item.show();
       statusItem.item.update();
     } else {
@@ -163,6 +174,7 @@ namespace Private {
   export const statusItemDefaults: Omit<IStatusBar.IItem, 'item'> = {
     align: 'left',
     rank: 0,
+    priority: 0,
     isActive: () => true,
     activeStateChanged: undefined
   };
@@ -173,9 +185,10 @@ namespace Private {
   export interface IRankItem {
     id: string;
     rank: number;
+    priority?: number;
   }
 
-  export type DefaultKeys = 'align' | 'rank' | 'isActive';
+  export type DefaultKeys = 'align' | 'rank' | 'isActive' | 'priority';
 
   /**
    * Type of statusbar item with defaults filled in.

diff --git a/packages/statusbar/src/tokens.ts b/packages/statusbar/src/tokens.ts
@@ -55,6 +55,11 @@ export namespace IStatusBar {
      */
     rank?: number;
 
+    /**
+     *  Displaying Items based on zoom priority -- higher zoom priority gets prioritised when zoom levels increase
+     */
+    priority?: number;
+
     /**
      * Whether the item is shown or hidden.
      */