fix: use 30/70 split for LeftNavSidecar

Fixes kubernetes-sigs#4454 this also improves ls -l rendering in narrower windows, which are going to happen more often, with a 30/70 split Fixes kubernetes-sigs#4455
starpit · May 4, 2020 · 0011edc · 0011edc
1 parent d66e71f
commit 0011edc
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 24 deletions.
diff --git a/plugins/plugin-bash-like/fs/src/lib/ls.ts b/plugins/plugin-bash-like/fs/src/lib/ls.ts
@@ -131,6 +131,9 @@ function nameOf(glob: GlobStats): string {
 const outerCSSSecondary = 'hide-with-sidecar'
 const cssSecondary = 'slightly-deemphasize'
 
+const outerCSSLesser = 'hide-with-narrow-window'
+const cssLesser = 'elide-with-narrow-window'
+
 function formatPermissions({ dirent }: GlobStats) {
   return dirent.permissions
 }
@@ -147,13 +150,19 @@ function attrs(entry: GlobStats, args: Arguments<LsOptions>) {
 
   const wide = args.parsedOptions.l
   const perms = wide ? [{ value: formatPermissions(entry), outerCSS: outerCSSSecondary }] : []
-  const uid = wide ? [{ value: formatUid(entry), outerCSS: '', css: cssSecondary }] : []
-  const gid = wide ? [{ value: formatGid(entry), outerCSS: '', css: cssSecondary }] : []
+  const uid = wide ? [{ value: formatUid(entry), outerCSS: outerCSSSecondary, css: cssSecondary }] : []
+  const gid = wide ? [{ value: formatGid(entry), outerCSS: outerCSSSecondary, css: cssSecondary }] : []
   const size = wide
     ? [{ value: prettyBytes(entry.stats.size).replace(/\s/g, ''), outerCSS: `${outerCSSSecondary} text-right` }]
     : []
   const lastMod = wide
-    ? [{ value: prettyTime(entry.stats.mtimeMs), outerCSS: 'badge-width', css: `${cssSecondary} pre-wrap` }]
+    ? [
+        {
+          value: prettyTime(entry.stats.mtimeMs),
+          outerCSS: outerCSSLesser,
+          css: `${cssLesser} ${cssSecondary} pre-wrap`
+        }
+      ]
     : []
 
   return perms
@@ -198,12 +207,11 @@ function toTable(entries: GlobStats[], args: Arguments<LsOptions>): HTMLElement
     container.appendChild(frag)
     return container
   } else {
-    const wide = args.parsedOptions.l
-    const perms = wide ? [{ value: 'PERMISSIONS', outerCSS: outerCSSSecondary }] : []
-    const uid = wide ? [{ value: 'USER', outerCSS: '' }] : []
-    const gid = wide ? [{ value: 'GROUP', outerCSS: '' }] : []
-    const size = wide ? [{ value: 'SIZE', outerCSS: `${outerCSSSecondary} text-right` }] : []
-    const lastMod = wide ? [{ value: 'LAST MODIFIED', outerCSS: 'badge-width' }] : []
+    const perms = [{ value: 'PERMISSIONS', outerCSS: outerCSSSecondary }]
+    const uid = [{ value: 'USER', outerCSS: outerCSSSecondary }]
+    const gid = [{ value: 'GROUP', outerCSS: outerCSSSecondary }]
+    const size = [{ value: 'SIZE', outerCSS: `${outerCSSSecondary} text-right` }]
+    const lastMod = [{ value: 'LAST MODIFIED', outerCSS: outerCSSLesser, css: cssLesser }]
 
     const header = {
       name: 'NAME',

diff --git a/plugins/plugin-client-common/src/components/Content/Table/TableHeader.tsx b/plugins/plugin-client-common/src/components/Content/Table/TableHeader.tsx
@@ -27,19 +27,24 @@ export default function renderHeader(kuiHeader: KuiRow, { getHeaderProps, header
   return (
     <TableHead>
       <TableRow>
-        {headers.map((header, cidx) => (
-          <TableHeader
-            key={header.key}
-            {...getHeaderProps({
-              header,
-              'data-key': header.key,
-              // isSortable: isSortable && (!radio || cidx > 0),
-              className: cidx === 0 ? kuiHeader.outerCSS : kuiHeader.attributes[cidx - 1].outerCSS
-            })}
-          >
-            {header.header}
-          </TableHeader>
-        ))}
+        {headers.map((header, cidx) => {
+          const outerCSS = cidx === 0 ? kuiHeader.outerCSS : kuiHeader.attributes[cidx - 1].outerCSS
+          const css = cidx === 0 ? kuiHeader.css : kuiHeader.attributes[cidx - 1].css
+
+          return (
+            <TableHeader
+              key={header.key}
+              {...getHeaderProps({
+                header,
+                'data-key': header.key,
+                // isSortable: isSortable && (!radio || cidx > 0),
+                className: outerCSS
+              })}
+            >
+              {css ? <span className={css}>{header.header}</span> : header.header}
+            </TableHeader>
+          )
+        })}
       </TableRow>
     </TableHead>
   )

diff --git a/plugins/plugin-client-common/src/components/Views/Sidecar/LeftNavSidecar.tsx b/plugins/plugin-client-common/src/components/Views/Sidecar/LeftNavSidecar.tsx
@@ -91,9 +91,9 @@ export default class LeftNavSidecar extends BaseSidecar<NavResponse, HistoryEntr
     return false
   }
 
-  /** matching the old `flex: 3.5` compared to `flex: 4` for the Terminal */
+  /** 30/70 split between the Terminal and the LeftNavSidecar */
   protected defaultWidth(): Width {
-    return Width.Split45
+    return Width.Split70
   }
 
   /** @return a `HistoryEntry` for the given `Response` */

diff --git a/plugins/plugin-client-common/src/components/Views/Sidecar/width.ts b/plugins/plugin-client-common/src/components/Views/Sidecar/width.ts
@@ -17,6 +17,7 @@
 const enum Width {
   Split45 = '45%',
   Split60 = '60%',
+  Split70 = '70%',
   Split75 = '75%',
   Maximized = '100%',
   Closed = '0%'

diff --git a/plugins/plugin-client-common/web/scss/components/common/_narrow-window.scss b/plugins/plugin-client-common/web/scss/components/common/_narrow-window.scss
@@ -10,4 +10,20 @@
   .page[data-zoom='10'] {
     @content;
   }
+
+  @media (max-width: 58rem) {
+    .sidecar-visible .hide-with-narrow-window {
+      display: none;
+    }
+  }
+
+  @media (max-width: 68rem) {
+    .sidecar-visible .elide-with-narrow-window {
+      display: inline-block;
+      max-width: 6em;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
 }