Zui Polish

apps/zui/src/app/core/icons/index.ts

@@ -43,6 +43,7 @@ import show from "./show"
 import hide from "./hide"
 import SortAsc from "./sort-asc"
 import SortDesc from "./sort-desc"
+import RightSidebarToggle from "./right-sidebar-toggle"
 
 export default {
   check,
@@ -73,6 +74,7 @@ export default {
   query,
   run,
   "sidebar-toggle": sidebarToggle,
+  "right-sidebar-toggle": RightSidebarToggle,
   "file-border": fileBorder,
   "file-filled": fileFilled,
   "doc-plain": docPlain,

apps/zui/src/app/core/icons/right-sidebar-toggle.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+const RightSidebarToggle = (props: any) => {
+  return (
+    <svg width="22" height="22" viewBox="0 0 22 22" {...props}>
+      <path
+        d="M18.8624316,20 L3.13756836,20 C1.09213294,20 0,18.9544008 0,16.9803818 L0,6.02863203 C0,4.05461294 1.09213294,3 3.13756836,3 L18.8624316,3 C20.9078671,3 22,4.05461294 22,6.02863203 L22,16.9803818 C22,18.9544008 20.9078671,20 18.8624316,20 Z M18.6865797,17.9989396 C19.5010517,17.9989396 19.9360538,17.5933192 19.9360538,16.7640509 L19.9360538,6.2359491 C19.9360538,5.40668081 19.5010517,5.01007423 18.6865797,5.01007423 L14.4106016,5.01007423 L14.4106016,17.9989396 L18.6865797,17.9989396 Z M3.31342028,5.01007423 C2.50820362,5.01007423 2.06394615,5.40668081 2.06394615,6.2359491 L2.06394615,16.7640509 C2.06394615,17.5933192 2.50820362,17.9989396 3.31342028,17.9989396 L12.4854859,17.9989396 L12.4854859,5.01007423 L3.31342028,5.01007423 Z M16.252419,8.28207847 C15.8822045,8.28207847 15.5860328,7.98462354 15.5860328,7.65111347 C15.5860328,7.31760339 15.8822045,7.02916225 16.252419,7.02916225 L18.0849811,7.02916225 C18.4459403,7.02916225 18.7513673,7.31760339 18.7513673,7.65111347 C18.7513673,7.98462354 18.4459403,8.28207847 18.0849811,8.28207847 L16.252419,8.28207847 Z M16.252419,10.7518558 C15.8822045,10.7518558 15.5860328,10.4634146 15.5860328,10.1208908 C15.5860328,9.7873807 15.8822045,9.49893955 16.252419,9.49893955 L18.0849811,9.49893955 C18.4459403,9.49893955 18.7513673,9.7873807 18.7513673,10.1208908 C18.7513673,10.4634146 18.4459403,10.7518558 18.0849811,10.7518558 L16.252419,10.7518558 Z M16.252419,13.2216331 C15.8822045,13.2216331 15.5860328,12.9422057 15.5860328,12.5996819 C15.5860328,12.2661718 15.8822045,11.9777306 16.252419,11.9777306 L18.0849811,11.9777306 C18.4459403,11.9777306 18.7513673,12.2661718 18.7513673,12.5996819 C18.7513673,12.9422057 18.4459403,13.2216331 18.0849811,13.2216331 L16.252419,13.2216331 Z"
+        fill="currentColor"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  )
+}
+
+export default RightSidebarToggle

apps/zui/src/app/features/sidebar/index.tsx

@@ -8,7 +8,7 @@ import PoolsSection from "./pools-section"
 import {QueriesSection} from "./queries-section"
 import Header from "./header"
 import {Menu} from "./menu"
-import SidebarToggleButton from "./sidebar-toggle-button"
+import {SidebarToggleButton} from "./sidebar-toggle-button"
 import AppErrorBoundary from "src/js/components/AppErrorBoundary"
 import {Body} from "./body"
 

apps/zui/src/app/features/sidebar/sidebar-toggle-button.tsx

@@ -1,40 +1,26 @@
 import React from "react"
 import {useDispatch} from "src/app/core/state"
 import Appearance from "src/js/state/Appearance"
-import styled from "styled-components"
-import Icon from "../../core/icon-temp"
+import {IconButton} from "src/components/icon-button"
 
-const Button = styled.button`
-  display: flex;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-  -webkit-app-region: no-drag;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
-    transition: background-color 300ms;
-  }
-
-  &:active {
-    background-color: rgba(0, 0, 0, 0.12);
-    transition: background-color 0ms;
-  }
-`
-
-const SidebarToggleButton = () => {
+export const SidebarToggleButton = () => {
   const dispatch = useDispatch()
   return (
-    <Button onClick={() => dispatch(Appearance.toggleSidebar())}>
-      <Icon size={16} name="sidebar-toggle" />
-    </Button>
+    <IconButton
+      iconName="sidebar-toggle"
+      iconSize={16}
+      click={() => dispatch(Appearance.toggleSidebar())}
+    />
   )
 }
 
-export default SidebarToggleButton
+export const RightSidebarToggleButton = () => {
+  const dispatch = useDispatch()
+  return (
+    <IconButton
+      iconName="right-sidebar-toggle"
+      iconSize={16}
+      click={() => dispatch(Appearance.toggleSecondarySidebar())}
+    />
+  )
+}

apps/zui/src/app/query-home/search-area/zed-editor.tsx

@@ -56,6 +56,9 @@ export function ZedEditor(props: {
         minimap: {enabled: false},
         renderLineHighlightOnlyWhenFocus: true,
         renderControlCharacters: false,
+        fontSize: "14px",
+        fontFamily: "var(--mono-font)",
+        fontVariations: "inherit",
       }}
       onMount={(editor) => {
         ref.current = editor

apps/zui/src/components/zed-table/config.ts

@@ -1,7 +1,8 @@
 export const config = {
-  rowHeight: 20,
-  lineHeight: 20,
-  headerHeight: 28,
+  rowHeight: 26,
+  lineHeight: 26,
+  headerHeight: 34,
   defaultCellWidth: 80,
+  maxCellAutoWidth: 700,
   placeholderHeaderHeight: 28,
 }

apps/zui/src/components/zed-table/utils.ts

@@ -2,6 +2,7 @@ import {max} from "lodash"
 import React, {useEffect} from "react"
 import {config} from "./config"
 import {useZedTable} from "./context"
+import {bounded} from "src/util/bounded"
 
 export function useListStyle(style: React.CSSProperties) {
   const api = useZedTable()
@@ -32,7 +33,10 @@ export function getMaxCellSizes(container: HTMLDivElement, ids: string[]) {
     cells.forEach((el) => (el.style.width = "auto"))
     const widths = cells.map((cell) => cell.scrollWidth + 8)
     cells.forEach((el, i) => (el.style.width = oldWidths[i]))
-    const maxWidth = Math.max(config.defaultCellWidth, max(widths))
+    const maxWidth = bounded(max(widths), [
+      config.defaultCellWidth,
+      config.maxCellAutoWidth,
+    ])
     if (isNaN(maxWidth)) continue
     maxWidths[id] = maxWidth
   }

apps/zui/src/css/_zed-table.scss

@@ -6,8 +6,8 @@
   width: 100%;
   font-family: var(--mono-font);
 
-  --header-height: 28px;
-  --row-height: 20px;
+  --header-height: 34px;
+  --row-height: 26px;
 }
 
 .zed-table__header {
@@ -17,7 +17,6 @@
   left: 0;
   background: white;
   z-index: 1;
-  font-family: var(--body-font);
 }
 
 .zed-table__header-group {
@@ -42,19 +41,17 @@
   height: 100%;
   white-space: nowrap;
   text-align: left;
-  font-weight: 700;
-  font-size: 11px;
+  font-size: 14px;
+  font-weight: 500;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
   border-right: 1px solid transparent;
-  transition: border-right-color 200ms;
-
-  &:hover {
-    border-right-color: var(--border-color)
-  }
+  color: var(--foreground-color-light);
+  background: var(--chrome-color);
+  border-right-color: var(--border-color);
 
   &:not(.isPlaceholder).hasChildren {
     border-bottom: 1px solid var(--border-color);
@@ -102,7 +99,7 @@
   bottom: 0;
   right: -8px;
   z-index: 2;
-  border: 1px solid white;
+  border: none;
 }
 
 .zed-table__cell {
@@ -117,7 +114,8 @@
   white-space: nowrap;
   padding: 0 10px;
   padding-right: 0;
-  border-right: 2px solid white;
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 
   a {
     display: flex;
@@ -148,14 +146,15 @@
   border-radius: 6px;
   border: none;
   z-index: 1;
-  opacity: 0;
   background: none;
-  transition: all 200ms;
-  position: sticky;
+  position: absolute;
   right: 10px;
+  opacity: 0;
+  background: var(--chrome-color);
+  border: 1px solid var(--border-color);
 
-  &:hover {
-    background: rgba(0, 0, 0, 0.08);
+  &:active {
+    background: var(--chrome-color-dark);
   }
 
   .zed-table__header-cell:hover & {

apps/zui/src/css/_zed-view.scss

@@ -1,7 +1,7 @@
 .zed-list-view {
-    font-size: 13px;
+    font-size: 14px;
     font-family: var(--mono-font), sans-serif;
-    line-height: 20px;
+    line-height: 22px;
 }
 
 .zed-view {

apps/zui/src/css/settings/_colors.scss

@@ -31,8 +31,8 @@
   --alert-1: #d0250b;
 
   // backgrounds
-  --hover-dark: rgba(0, 0, 0, 0.04);
-  --active-dark: rgba(0, 0, 0, 0.06);
+  --hover-dark: rgba(0, 0, 0, 0.06);
+  --active-dark: rgba(0, 0, 0, 0.09);
 
   --hover-light-bg: var(--hover-dark);
   --table-stripe-bg: rgba(0, 0, 0, 0.02);

apps/zui/src/js/components/TabBar/AddTab.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "src/app/core/icon-temp"
+import {IconButton} from "src/components/icon-button"
 import styled from "styled-components"
 
 const BG = styled.div`
@@ -10,42 +10,15 @@ const BG = styled.div`
   height: 100%;
 `
 
-const Button = styled.button`
-  display: flex;
-  width: 28px;
-  height: 28px;
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 50%;
-  border-width: 0;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-  align-items: center;
-  justify-content: center;
-  margin-left: 8px;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
-    transition: background-color 300ms;
-  }
-
-  &:active {
-    background-color: rgba(0, 0, 0, 0.12);
-    transition: background-color 0ms;
-  }
-`
-
 type Props = {
-  onClick: (e: React.MouseEvent) => void
+  onClick: () => void
   left: number
 }
 
 export default function AddTab({onClick, left}: Props) {
   return (
     <BG style={{transform: `translateX(${left}px)`}}>
-      <Button onClick={onClick}>
-        <Icon size={18} name="plus" fill="var(--foreground-color)" />
-      </Button>
+      <IconButton iconName="plus" iconSize={18} click={onClick} />
     </BG>
   )
 }

apps/zui/src/js/components/TabBar/TabBar.tsx

@@ -14,7 +14,10 @@ import useTabLayout from "./useTabLayout"
 import {useLocation} from "react-router"
 import styled from "styled-components"
 import Appearance from "src/js/state/Appearance"
-import SidebarToggleButton from "src/app/features/sidebar/sidebar-toggle-button"
+import {
+  SidebarToggleButton,
+  RightSidebarToggleButton,
+} from "src/app/features/sidebar/sidebar-toggle-button"
 import tab from "src/js/models/tab"
 import useLakeId from "src/app/router/hooks/use-lake-id"
 import {bounded} from "src/util/bounded"
@@ -25,6 +28,8 @@ const MAX_WIDTH = 200
 const BG = styled.div`
   background: var(--tab-background);
   display: flex;
+  align-items: center;
+  padding-right: 16px;
   height: 100%;
   grid-area: tabs;
   -webkit-app-region: drag;
@@ -101,6 +106,7 @@ export default function TabBar() {
         })}
         <AddTab onClick={ctl.onAddClick} left={width * count} />
       </Container>
+      <RightSidebarToggleButton />
     </BG>
   )
 }

apps/zui/src/views/columns-pane/columns-toolbar.tsx

@@ -11,7 +11,7 @@ export function ColumnsToolbar() {
   return (
     <Toolbar>
       <ButtonMenu items={menu.items} label={menu.label} />
-      <p>
+      <p style={{whiteSpace: "nowrap"}}>
         {table.columnCount} Columns / {table.hiddenColumnCount} Hidden
       </p>
     </Toolbar>

apps/zui/src/zui-kit/react/list-view.tsx

@@ -19,6 +19,7 @@ import classNames from "classnames"
 import {useParentSize} from "src/app/core/hooks/use-parent-size"
 import {TopShadow, useScrollShadow} from "src/views/load-pane/scroll-shadow"
 import {call} from "src/util/call"
+import {config} from "src/components/zed-table/config"
 
 const padding = 8
 
@@ -109,7 +110,7 @@ export const ListView = forwardRef(function ListView(
       width={props.width ?? width}
       outerRef={outerRef}
       itemCount={list.count}
-      itemSize={20}
+      itemSize={config.rowHeight}
       itemData={[...list.rows]}
       itemKey={(i) => i.toString()}
       innerElementType={InnerElement}