Align sidebar elements with breadcrumbs bar and toolbar

silx-kit · Mar 30, 2023 · df22d61 · df22d61
1 parent 64810c1
commit df22d61
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 67 deletions.
diff --git a/apps/storybook/src/Customization.stories.mdx b/apps/storybook/src/Customization.stories.mdx
@@ -81,8 +81,8 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 
 | Name                   | Default                                                    | Description                                                                                                                                                                        |
 | ---------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--h5w‑line‑‑color`    | `midnightblue`                                             | Color of main curve and error bars/caps                                                                                                                                            |
-| `--h5w‑line‑‑colorAux` | `orangered, forestgreen, crimson, mediumslateblue, sienna` | Color(s) of auxiliary curves. Accepts a comma-separated list of colors. If the number of colours is lower than the number of auxiliary curves, the last color in the list is used. |
+| `--h5w-line--color`    | `midnightblue`                                             | Color of main curve and error bars/caps                                                                                                                                            |
+| `--h5w-line--colorAux` | `orangered, forestgreen, crimson, mediumslateblue, sienna` | Color(s) of auxiliary curves. Accepts a comma-separated list of colors. If the number of colours is lower than the number of auxiliary curves, the last color in the list is used. |
 
 ##### Heatmap
 
@@ -117,6 +117,7 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 | Name                                     | Default              | Description                              |
 | ---------------------------------------- | -------------------- | ---------------------------------------- |
 | `--h5w-toolbar--bgColor`                 | `aliceblue`          | Background color of toolbar              |
+| `--h5w-toolbar--height`                  | `2.5rem`             | Height of toolbar                        |
 | `--h5w-toolbar-separator--color`         | `rgba(0, 0, 0, 0.2)` | Color of separators                      |
 | `--h5w-toolbar-label--color`             | `royalblue`          | Text color of control labels             |
 | `--h5w-toolbar-input--shadowColor`       | `dimgray`            | Box shadow color of text inputs          |
@@ -125,15 +126,16 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 
 ##### Buttons
 
-| Name                                  | Default                                            | Description                                  |
-| ------------------------------------- | -------------------------------------------------- | -------------------------------------------- |
-| `--h5w-btn-hover--bgColor`            | `whitesmoke`                                       | Background color of buttons on hover         |
-| `--h5w-btn-hover--shadowColor`        | `var(--h5w-btnRaised--shadowColor, gray)`          | Box shadow color of buttons on hover         |
-| `--h5w-btnPressed--bgColor`           | `white`                                            | Background color of pressed buttons          |
-| `--h5w-btnPressed--shadowColor`       | `var(--h5w-btnRaised--shadowColor, gray)`          | Box shadow color of pressed buttons          |
-| `--h5w‑btnPressed‑hover‑‑shadowColor` | `var(--h5w-btnRaised-hover--shadowColor, dimgray)` | Box shadow color of pressed buttons on hover |
-| `--h5w-btnRaised--shadowColor`        | `gray`                                             | Box shadow color of raised buttons           |
-| `--h5w-btnRaised-hover--shadowColor`  | `dimgray`                                          | Box shadow color of raised buttons on hover  |
+| Name                                  | Default                                            | Description                                               |
+| ------------------------------------- | -------------------------------------------------- | --------------------------------------------------------- |
+| `--h5w-btn--height`                   | `1.875rem`                                         | Visual height of buttons (clickable height fills toolbar) |
+| `--h5w-btn-hover--bgColor`            | `whitesmoke`                                       | Background color of buttons on hover                      |
+| `--h5w-btn-hover--shadowColor`        | `var(--h5w-btnRaised--shadowColor, gray)`          | Box shadow color of buttons on hover                      |
+| `--h5w-btnPressed--bgColor`           | `white`                                            | Background color of pressed buttons                       |
+| `--h5w-btnPressed--shadowColor`       | `var(--h5w-btnRaised--shadowColor, gray)`          | Box shadow color of pressed buttons                       |
+| `--h5w-btnPressed-hover--shadowColor` | `var(--h5w-btnRaised-hover--shadowColor, dimgray)` | Box shadow color of pressed buttons on hover              |
+| `--h5w-btnRaised--shadowColor`        | `gray`                                             | Box shadow color of raised buttons                        |
+| `--h5w-btnRaised-hover--shadowColor`  | `dimgray`                                          | Box shadow color of raised buttons on hover               |
 
 ##### Selectors
 

diff --git a/packages/app/src/App.module.css b/packages/app/src/App.module.css
@@ -27,6 +27,8 @@
   --sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
     'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
+  --toolbar-height: 2.875rem;
+  --toolbarBtn-height: 2rem;
 }
 
 .root {
@@ -37,9 +39,11 @@
   --h5w-matrix-anchorCell--bgColor: var(--primary-dark-bg);
   --h5w-btn-hover--bgColor: var(--secondary-lighter);
   --h5w-btnPressed--bgColor: var(--secondary-light);
+  --h5w-toolbar--height: var(--toolbar-height);
   --h5w-toolbar--bgColor: var(--secondary-light-bg);
   --h5w-toolbar-label--color: var(--secondary-dark);
   --h5w-toolbar-input-focus--shadowColor: var(--secondary-dark);
+  --h5w-toolbar-btn--height: var(--toolbarBtn-height);
   --h5w-domainSlider-track--bgColor: var(--secondary-dark-15);
   --h5w-domainSlider-dataTrack--bgColor: var(--secondary-dark);
   --h5w-domainSlider-dataTrack--shadowColor: var(--secondary-darker);
@@ -128,18 +132,18 @@
   flex-direction: column;
 }
 
-.fallback {
-  composes: fallback from global;
+.fallbackBar {
+  flex: none;
+  height: var(--toolbar-height);
+  background-color: var(--secondary-light-bg);
 }
 
 .fallbackBar[data-mode='inspect'] {
-  height: 2.875rem;
   background-color: var(--primary-bg);
 }
 
-.fallbackBar[data-mode='display'] {
-  height: 2.5rem;
-  background-color: var(--secondary-light-bg);
+.fallback {
+  composes: fallback from global;
 }
 
 .error {

diff --git a/packages/app/src/Sidebar.module.css b/packages/app/src/Sidebar.module.css
@@ -1,41 +1,26 @@
-.btnBar {
+.tabBar {
   display: flex;
-  height: 2.875rem;
+  height: var(--toolbar-height);
   font-size: 1.25rem;
   background-color: var(--primary-lighter);
 }
 
-.btn {
+.tab {
   composes: btnClean from global;
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding: 0 0.25rem;
+  width: var(--toolbar-height);
+  padding: 0.25rem 0 0.25rem;
+  border-bottom: solid 0.25rem transparent;
   background-color: var(--primary-lighter, aliceblue);
-  padding-bottom: 0.25rem;
-}
-
-.btn[aria-selected='true'] {
-  border-bottom: solid 0.25rem var(--primary-dark);
-  padding-bottom: 0rem;
 }
 
-.btn:hover {
+.tab:hover {
   background-color: var(--primary-light);
+  border-bottom-color: var(--primary);
 }
 
-.btnLike {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.875rem;
-  padding: 0 0.5rem;
-  border-radius: 0.5rem;
-  transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
-  white-space: nowrap;
-}
-
-.btn[data-small] > .btnLike {
-  height: 1.75rem;
-  border-radius: 0.875rem;
-  font-size: 0.875em;
+.tab[aria-selected='true'] {
+  border-bottom-color: var(--primary-dark);
 }
diff --git a/packages/app/src/Sidebar.tsx b/packages/app/src/Sidebar.tsx
@@ -31,28 +31,24 @@ function Sidebar(props: Props) {
 
   return (
     <div>
-      <div className={styles.btnBar}>
+      <div className={styles.tabBar}>
         <button
-          className={styles.btn}
+          className={styles.tab}
           type="button"
           role="tab"
           aria-selected={tab === Tab.Explore}
           onClick={() => setTab(Tab.Explore)}
         >
-          <span className={styles.btnLike}>
-            <FiList />
-          </span>
+          <FiList />
         </button>
         <button
-          className={styles.btn}
+          className={styles.tab}
           type="button"
           role="tab"
           aria-selected={tab === Tab.Search}
           onClick={() => setTab(Tab.Search)}
         >
-          <span className={styles.btnLike}>
-            <FiSearch />
-          </span>
+          <FiSearch />
         </button>
       </div>
       {tab === Tab.Explore && (

diff --git a/packages/app/src/breadcrumbs/BreadcrumbsBar.module.css b/packages/app/src/breadcrumbs/BreadcrumbsBar.module.css
@@ -1,9 +1,11 @@
 .bar {
+  flex: none; /* prevent shrinking when metadata viewer scrolls */
   display: flex;
   justify-content: space-between;
-  font-size: 0.875rem;
+  height: var(--toolbar-height);
+  padding: 0 0.5rem;
   background-color: var(--secondary-bg);
-  padding: calc(0.5rem - 1px) 0.75rem 0.5rem;
+  font-size: 0.875rem;
 }
 
 .breadCrumbs {

diff --git a/packages/app/src/explorer/Explorer.module.css b/packages/app/src/explorer/Explorer.module.css
@@ -19,6 +19,7 @@
   display: flex;
   align-items: center;
   width: 100%;
+  height: var(--toolbarBtn-height);
   padding: 0 1rem 0 calc(0.25rem + (var(--level) + 1) * 0.75rem);
 }
 
@@ -39,8 +40,9 @@
 
 .fileBtn {
   composes: btn;
+  height: var(--toolbar-height);
   margin: 0;
-  padding: 0.625rem 1rem;
+  padding: 0 1rem;
   font-weight: 600;
 }
 
@@ -59,7 +61,6 @@
 }
 
 .name {
-  padding: 0.375rem 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

diff --git a/packages/app/src/metadata-viewer/MetadataViewer.module.css b/packages/app/src/metadata-viewer/MetadataViewer.module.css
@@ -14,7 +14,8 @@
 }
 
 .table thead th {
-  padding: 0.675rem 1rem;
+  height: var(--toolbar-height);
+  padding: 0 1rem;
   background-color: var(--primary-bg);
   font-size: 1.25rem;
 }

diff --git a/packages/app/src/search/Search.module.css b/packages/app/src/search/Search.module.css
@@ -5,14 +5,24 @@
 
 .inputRow {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  height: var(--toolbar-height);
+  padding: 0 0.5rem;
 }
 
-.inputRow input {
+.input {
+  flex: 1 1 0%;
+  height: var(--toolbarBtn-height);
+  padding: 0 0.5rem;
+  border: none;
   border-radius: 0.5rem;
-  margin: 0.625rem;
-  padding: 0.25rem;
-  box-shadow: none;
+  box-shadow: 0 0 2px dimgray;
+  outline: none;
+}
+
+.input:hover,
+.input:focus {
+  box-shadow: 0 0 2px 1px dimgray;
 }
 
 .entries {

diff --git a/packages/app/src/visualizer/VisSelector.module.css b/packages/app/src/visualizer/VisSelector.module.css
@@ -7,7 +7,7 @@
   composes: btnClean from global;
   display: flex;
   align-items: center;
-  padding: 0.375rem 1rem;
+  padding: 0.125rem 1rem 0;
   border-bottom: 0.25rem solid transparent;
   line-height: 1;
   outline-offset: -1px;

diff --git a/packages/app/src/visualizer/Visualizer.module.css b/packages/app/src/visualizer/Visualizer.module.css
@@ -7,9 +7,10 @@
 }
 
 .visBar {
+  flex: none;
   display: flex;
   justify-content: space-between;
-  height: 2.5rem;
+  height: var(--toolbar-height);
   background-color: var(--secondary-light-bg);
 }
 

diff --git a/packages/lib/src/toolbar/Toolbar.module.css b/packages/lib/src/toolbar/Toolbar.module.css
@@ -4,7 +4,7 @@
   z-index: 1; /* for toolbar menus to appear above visualizations (overflow, selectors) */
   display: flex;
   min-width: 0;
-  height: 2.5rem;
+  height: var(--h5w-toolbar--height, 2.5rem);
   padding: 0 0.5rem;
   background-color: var(--h5w-toolbar--bgColor, aliceblue);
   font-size: 0.875rem;
@@ -56,15 +56,15 @@ a.btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 1.875rem;
+  height: var(--h5w-toolbar-btn--height, 1.875rem);
   padding: 0 0.5rem;
   border-radius: 0.5rem;
   transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
   white-space: nowrap;
 }
 
 .btn[data-small] > .btnLike {
-  height: 1.75rem;
+  height: calc(var(--h5w-toolbar-btn--height, 1.875rem) - 0.125rem);
   border-radius: 0.875rem;
   font-size: 0.875em;
 }