Merge pull request #5931 from ian-r-rose/statusbar-css-cleanup

Statusbar CSS cleanup

packages/notebook/src/truststatus.tsx

@@ -21,21 +21,21 @@ function cellTrust(
       `Notebook trusted: ${props.trustedCells} of ${
         props.totalCells
       } cells trusted.`,
-      'trusted-item'
+      'jp-StatusItem-trusted'
     ];
   } else if (props.activeCellTrusted) {
     return [
       `Active cell trusted: ${props.trustedCells} of ${
         props.totalCells
       } cells trusted. `,
-      'trusted-item'
+      'jp-StatusItem-trusted'
     ];
   } else {
     return [
       `Notebook not trusted: ${props.trustedCells} of ${
         props.totalCells
       } cells trusted.`,
-      'not-trusted-item'
+      'jp-StatusItem-untrusted'
     ];
   }
 }

packages/notebook/style/index.css

@@ -19,6 +19,7 @@
 |----------------------------------------------------------------------------*/
 
 @import './toolbar.css';
+@import './status.css';
 
 /*-----------------------------------------------------------------------------
 | Notebook

packages/notebook/style/status.css

@@ -0,0 +1,12 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-StatusItem-untrusted {
+  background-image: url('./not-trusted-icon.svg');
+}
+
+.jp-StatusItem-trusted {
+  background-image: url('./trusted-icon.svg');
+}

packages/statusbar-extension/src/index.ts

@@ -1,9 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-// Local CSS must be loaded prior to loading other libs.
-import '../style/index.css';
-
 import {
   ILabShell,
   JupyterFrontEnd,

packages/statusbar-extension/style/images/status-bar-icon.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
-<rect width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
-<path d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
-</svg>

packages/statusbar-extension/style/index.css

@@ -1,23 +0,0 @@
-.kernel-item {
-  background-image: url('./images/kernel-icon.svg');
-}
-
-.terminal-item {
-  background-image: url('./images/terminal-icon.svg');
-}
-
-.not-trusted-item {
-  background-image: url('./images/not-trusted-icon.svg');
-}
-
-.trusted-item {
-  background-image: url('./images/trusted-icon.svg');
-}
-
-.lineForm-enter-icon {
-  background-image: url('./images/line-form.svg');
-}
-
-.status-bar-icon {
-  background-image: url('./images/status-bar-icon.svg');
-}

packages/statusbar/src/defaults/index.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import '../../style/index.css';
+
 export * from './lineCol';
 export * from './kernelStatus';
 export * from './runningSessions';

packages/statusbar/src/defaults/lineCol.tsx

@@ -114,7 +114,7 @@ class LineFormComponent extends React.Component<
 
             <input
               type="submit"
-              className={classes(lineFormButton, 'lineForm-enter-icon')}
+              className={classes(lineFormButton, 'jp-StatusItem-line-form')}
               value=""
             />
           </div>

packages/statusbar/src/defaults/runningSessions.tsx

@@ -34,11 +34,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'terminal-item'} offset={{ x: 1, y: 3 }} />
+        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconItem source={'kernel-item'} offset={{ x: 0, y: 2 }} />
+        <IconItem source={'jp-StatusItem-kernel'} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );

packages/statusbar/style/index.css

@@ -0,0 +1,16 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-StatusItem-kernel {
+  background-image: url('./kernel-icon.svg');
+}
+
+.jp-StatusItem-terminal {
+  background-image: url('./terminal-icon.svg');
+}
+
+.jp-StatusItem-line-form {
+  background-image: url('./line-form.svg');
+}