Redesign of sidebars and buttons (#5117)

* Adding icons for sidebars and filebrowser. * Update icon urls. * Further update to icon URLs. * Updating icon css classes. * Adding more icons for sidebar. * Icon css work. * Get sidebar to work with new icons. * Improved styling for new sidebar design. * Sidebar styling. * Fixing left broder of last current tab. * Main sidebar design work is done! * CSS style fix... * Update sibar panel styling to go with tab bars. * Work on buttons, mostly in toolbars... * Format. * Refactored, functional toolbar buttons - but not styled. * More styling of buttons. * Formatting changes. * Make search icon always white. * Fix styling of extension manager panel. * Styling of filebrowser. * Fix play button of default toolbar. * Fix extension manager button width. * Beginning to style running sidebar. * Core toolbar updates. * Formatting... * Fix kernel name toolbar item. * Move default sidebars to L. * Final running tab extension. * Formatting... * Fix advanced settings editor buttons. * Fix dialog button styling. * Starting to fix the tests. * Toolbar tests passing. * Notebook tests fixed.
jupyterlab · Aug 15, 2018 · a2c5f68 · a2c5f68
1 parent 45f3298
commit a2c5f68
Show file tree

Hide file tree

Showing 61 changed files with 942 additions and 851 deletions.
diff --git a/examples/filebrowser/src/index.ts b/examples/filebrowser/src/index.ts
@@ -88,7 +88,7 @@ function createApp(manager: ServiceManager.IManager): void {
 
   // Add a creator toolbar item.
   let creator = new ToolbarButton({
-    className: 'jp-AddIcon',
+    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
     onClick: () => {
       docManager
         .newUntitled({
@@ -100,7 +100,6 @@ function createApp(manager: ServiceManager.IManager): void {
         });
     }
   });
-  creator.addClass('jp-MaterialIcon');
   fbWidget.toolbar.insertItem(0, 'create', creator);
 
   let panel = new SplitPanel();

diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
@@ -13,6 +13,32 @@
   background-position: center;
 }
 
+.jp-Icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin: auto;
+}
+
+.jp-Icon-16 {
+  min-width: 16px;
+  min-height: 16px;
+  background-size: 16px;
+}
+
+.jp-Icon-18 {
+  min-width: 18px;
+  min-height: 18px;
+  background-size: 18px;
+}
+
+.jp-Icon-20 {
+  min-width: 20px;
+  min-height: 20px;
+  background-size: 20px;
+}
+
 .jp-AddIcon {
   background-image: var(--jp-icon-add);
 }
@@ -21,6 +47,10 @@
   background-image: var(--jp-icon-bug);
 }
 
+.jp-BuildIcon {
+  background-image: var(--jp-icon-build);
+}
+
 .jp-ChatIcon {
   background-image: var(--jp-icon-chat);
 }
@@ -45,6 +75,10 @@
   background-image: var(--jp-icon-cut);
 }
 
+.jp-DirectionsRunIcon {
+  background-image: var(--jp-icon-directions-run);
+}
+
 .jp-DownCaretIcon {
   background-image: var(--jp-ui-select-caret);
 }
@@ -73,6 +107,10 @@
   background-image: var(--jp-icon-expand-more);
 }
 
+.jp-ExtensionIcon {
+  background-image: var(--jp-icon-extension);
+}
+
 .jp-FileIcon {
   background-image: var(--jp-icon-file);
 }
@@ -81,8 +119,8 @@
   background-image: var(--jp-icon-circle);
 }
 
-.jp-newFolderIcon {
-  background-image: var(--jp-icon-new-directory);
+.jp-FolderIcon {
+  background-image: var(--jp-icon-folder);
 }
 
 .jp-HomeIcon {
@@ -139,6 +177,10 @@
   background-image: var(--jp-icon-more);
 }
 
+.jp-NewFolderIcon {
+  background-image: var(--jp-icon-new-folder);
+}
+
 .jp-NotebookIcon {
   background-image: var(--jp-icon-book);
 }
@@ -147,6 +189,10 @@
   background-image: var(--jp-icon-directory);
 }
 
+.jp-PaletteIcon {
+  background-image: var(--jp-icon-palette);
+}
+
 .jp-PasteIcon {
   background-image: var(--jp-icon-paste);
 }
@@ -183,6 +229,10 @@
   background-image: var(--jp-icon-stop);
 }
 
+.jp-TabIcon {
+  background-image: var(--jp-icon-tab);
+}
+
 .jp-TerminalIcon {
   background-image: var(--jp-icon-terminal);
 }
@@ -195,8 +245,8 @@
   background-image: var(--jp-icon-undo);
 }
 
-.jp-UploadIcon {
-  background-image: var(--jp-icon-upload);
+.jp-FileUploadIcon {
+  background-image: var(--jp-icon-file-upload);
 }
 
 .jp-YamlIcon {

diff --git a/packages/application/style/sidepanel.css b/packages/application/style/sidepanel.css
@@ -31,14 +31,6 @@
   display: block;
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
-}
-
-.jp-SideBar.p-TabBar.jp-mod-right {
-  border-left: var(--jp-border-width) solid var(--jp-border-color1);
-}
-
 .jp-SideBar .p-TabBar-content,
 .jp-SideBar .p-TabBar-content {
   margin: 0;
@@ -50,18 +42,8 @@
   transform-origin: 0 0 0;
 }
 
-.jp-SideBar.jp-mod-left .p-TabBar-content {
-  flex-direction: row-reverse;
-  transform: rotate(-90deg) translateX(-100%);
-}
-
-.jp-SideBar.jp-mod-right .p-TabBar-content {
-  flex-direction: row;
-  transform: rotate(90deg) translateY(-100%);
-}
-
 .jp-SideBar .p-TabBar-tab {
-  padding: 0 18px;
+  padding: 0 16px;
   border: none;
   overflow: visible;
 }
@@ -73,13 +55,23 @@
   max-height: calc(
     var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
   );
-  transform: translateY(var(--jp-border-width));
+  /* transform: translateY(var(--jp-border-width)); */
 }
 
 .jp-SideBar .p-TabBar-tab:not(.p-mod-current) {
   background: var(--jp-layout-color2);
 }
 
+.jp-SideBar .p-TabBar-tabIcon.jp-SideBar-tabIcon {
+  min-width: 20px;
+  min-height: 20px;
+  background-size: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .jp-SideBar .p-TabBar-tabLabel {
   line-height: var(--jp-private-sidebar-tab-width);
 }
@@ -88,14 +80,100 @@
   background: var(--jp-layout-color1);
 }
 
-.jp-SideBar.jp-mod-left .p-TabBar-tab {
+/* Left */
+
+/* Borders */
+
+.jp-SideBar.p-TabBar.jp-mod-left {
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab + .p-TabBar-tab {
+  border-right: var(--jp-border-width) solid var(--jp-layout-color2);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab.p-mod-current + .p-TabBar-tab {
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab + .p-TabBar-tab.p-mod-current {
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab.p-mod-current:last-child {
   border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.jp-mod-right .p-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-border-color1);
+/* Transforms */
+
+.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-content {
+  flex-direction: row-reverse;
+  transform: rotate(-90deg) translateX(-100%);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-left
+  .p-TabBar-tab:not(.p-mod-current)
+  .p-TabBar-tabIcon {
+  transform: rotate(90deg);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab.p-mod-current .p-TabBar-tabIcon {
+  transform: rotate(90deg)
+    translate(
+      calc(-0.5 * var(--jp-border-width)),
+      calc(-0.5 * var(--jp-border-width))
+    );
+}
+
+/* Right */
+
+/* Borders */
+
+.jp-SideBar.p-TabBar.jp-mod-right {
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab + .p-TabBar-tab {
+  border-left: var(--jp-border-width) solid var(--jp-layout-color2);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab.p-mod-current + .p-TabBar-tab {
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
+.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab + .p-TabBar-tab.p-mod-current {
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab.p-mod-current:last-child {
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+/* Transforms */
+
+.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-content {
+  flex-direction: row;
+  transform: rotate(90deg) translateY(-100%);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-right
+  .p-TabBar-tab:not(.p-mod-current)
+  .p-TabBar-tabIcon {
+  transform: rotate(-90deg);
+}
+
+.jp-SideBar.p-TabBar.jp-mod-right
+  .p-TabBar-tab.p-mod-current
+  .p-TabBar-tabIcon {
+  transform: rotate(-90deg)
+    translate(
+      calc(0.5 * var(--jp-border-width)),
+      calc(-0.5 * var(--jp-border-width))
+    );
+}
+
+/* Stack panels */
+
 #jp-left-stack > .p-Widget,
 #jp-right-stack > .p-Widget {
   min-width: 300px;

diff --git a/packages/apputils-extension/src/palette.ts b/packages/apputils-extension/src/palette.ts
@@ -28,6 +28,9 @@ class Palette implements ICommandPalette {
    */
   constructor(palette: CommandPalette) {
     this._palette = palette;
+    this._palette.title.iconClass = 'jp-PaletteIcon jp-SideBar-tabIcon';
+    this._palette.title.label = '';
+    this._palette.title.caption = 'Command Palette';
   }
 
   /**
@@ -80,7 +83,7 @@ export function activatePalette(app: JupyterLab): ICommandPalette {
 
   palette.inputNode.placeholder = 'SEARCH';
 
-  shell.addToLeftArea(palette);
+  shell.addToLeftArea(palette, { rank: 300 });
 
   return new Palette(palette);
 }