feat: Improve visibility of card commands button #2127 (#2147)

h2oai · Oct 6, 2023 · 913a7c4 · 913a7c4
1 parent 45afd23
commit 913a7c4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/ui/src/card_menu.tsx b/ui/src/card_menu.tsx
@@ -29,25 +29,26 @@ const
       top: 0, right: 0,
       $nest: {
         '>div:first-child': {
-          padding: 24,
+          padding: 12,
+          paddingTop: 10,
           fontSize: 16,
           color: cssVar('$text7')
         },
       },
     },
     icon: {
       userSelect: 'none',
-      marginRight: -6,
-    },
-    target: {
-      boxSizing: 'border-box',
-      cursor: 'pointer',
-      opacity: 0.5,
+      color: cssVar('$text'),
+      marginRight: -4,
       $nest: {
         '&:hover': {
-          opacity: 1,
+          color: cssVar('$themePrimary'),
         },
       },
+    },
+    target: {
+      boxSizing: 'border-box',
+      cursor: 'pointer',
     }
   })
 

diff --git a/ui/src/parts/styleConstants.ts b/ui/src/parts/styleConstants.ts
@@ -6,3 +6,6 @@ export const Z_INDEX = {
     TIME_PICKER: 4,
     NOTIFICATION_BAR: 5
 }
+
+export const CARD_TITLE_PADDING_TOP = 16
+export const CARD_TITLE_HEIGHT = 17
diff --git a/ui/src/plot.tsx b/ui/src/plot.tsx
@@ -22,6 +22,8 @@ import { Fmt, parseFormat } from './intl'
 import { cards, grid } from './layout'
 import { cssVarValue, cssVar, formItemWidth, themeB, themesB } from './theme'
 import { bond, wave } from './ui'
+import { Command } from './toolbar'
+import { CARD_TITLE_HEIGHT, CARD_TITLE_PADDING_TOP } from './parts/styleConstants'
 
 let
   cat10 = [
@@ -38,6 +40,7 @@ let
   ]
 
 
+
 type AnnotationOption = ArcOption | LineOption | TextOption | RegionOption | DataMarkerOption | DataRegionOption
 
 enum SpaceT { CC, DD, TT, CD, DC, TC, CT, TD, DT }
@@ -1192,13 +1195,16 @@ interface State {
   animate?: B
 }
 
-export const View = bond(({ name, state, changed }: Model<State>) => {
+export const View = bond(({ name, state, changed }: Model<State & { commands?: Command[] }>) => {
   const render = () => {
-    const { title = 'Untitled', plot, data, events, interactions, animate } = state
+    const { title = 'Untitled', plot, data, events, interactions, animate, commands } = state
     return (
       <div className={css.card}>
-        <div className='wave-s12 wave-w6'>{title}</div>
-        <div className={css.body}>
+        {title && <div className='wave-s12 wave-w6'>{title}</div>}
+        <div
+          className={css.body}
+          style={{ paddingTop: title ? CARD_TITLE_PADDING_TOP : commands?.length ? CARD_TITLE_PADDING_TOP + CARD_TITLE_HEIGHT : 0 }}
+        >
           <XVisualization model={{ name, plot, data, events, interactions, animate }} />
         </div>
       </div>

diff --git a/ui/src/vega.tsx b/ui/src/vega.tsx
@@ -19,6 +19,8 @@ import { Result } from 'vega-embed'
 import { cards } from './layout'
 import { formItemWidth } from './theme'
 import { bond, debounce } from './ui'
+import { Command } from './toolbar'
+import { CARD_TITLE_HEIGHT, CARD_TITLE_PADDING_TOP } from './parts/styleConstants'
 
 const
   css = stylesheet({
@@ -142,14 +144,17 @@ interface State {
 }
 
 export const
-  View = bond(({ name, state, changed }: Model<State>) => {
+  View = bond(({ name, state, changed }: Model<State & { commands?: Command[] }>) => {
     const
       render = () => {
-        const { specification, data, title, grammar = 'vega-lite' } = state
+        const { specification, data, title, grammar = 'vega-lite', commands } = state
         return (
           <div data-test={name} className={css.card}>
-            {title && <div className='wave-s12 wave-w6' style={{ marginBottom: 16 }}>{title}</div>}
-            <div className={css.body}>
+            {title && <div className='wave-s12 wave-w6'>{title}</div>}
+            <div
+              className={css.body}
+              style={{ paddingTop: title ? CARD_TITLE_PADDING_TOP : commands?.length ? CARD_TITLE_PADDING_TOP + CARD_TITLE_HEIGHT : 0 }}
+            >
               <XVegaVisualization model={{ specification, data, grammar }} />
             </div>
           </div>