@mwater/visualization 5.2.0 → 5.3.1

package/src/dashboards/FontStyleEditor.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from "react"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import { expandFontFamily, FontStyle } from "./layoutOptions"
+import { default as ReactSelect } from "react-select"
+import { Select, FormGroup } from "@mwater/react-library/lib/bootstrap"
+import ColorComponent from "../ColorComponent"
+
+interface FontStyleEditorProps {
+  value: FontStyle
+  onChange: (value: FontStyle) => void
+}
+
+export const FontStyleEditor = ({ value, onChange }: FontStyleEditorProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleOpenModal = () => setIsModalOpen(true)
+  const handleCloseModal = () => setIsModalOpen(false)
+
+  const handleSave = (newValue: FontStyle) => {
+    onChange(newValue)
+    handleCloseModal()
+  }
+
+  return <>
+    <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', border: 'solid 1px #DDD', padding: '4px', borderRadius: '6px', justifyContent: 'space-between' }} onClick={handleOpenModal}>
+      <div style={{
+        fontFamily: expandFontFamily(value.family),
+        fontSize: `${value.size}px`,
+        fontWeight: value.weight,
+        color: value.color
+      }}>
+        Sample
+      </div>
+      <div style={{ fontSize: '10px', color: '#888', marginTop: '2px' }}>
+        {value.family}, {value.size}px
+      </div>
+    </div>
+    {isModalOpen && (
+      <FontEditorModal
+        initialValue={value}
+        onSave={handleSave}
+        onCancel={handleCloseModal}
+      />
+    )}
+  </>
+}
+
+interface FontEditorModalProps {
+  initialValue: FontStyle
+  onSave: (value: FontStyle) => void
+  onCancel: () => void
+}
+
+const FontEditorModal: React.FC<FontEditorModalProps> = ({ initialValue, onSave, onCancel }) => {
+  const [currentValue, setCurrentValue] = useState<FontStyle>(initialValue)
+
+  const handleChange = (field: keyof FontStyle, value: string | number) => {
+    if (field == "family") {
+      setCurrentValue(prev => ({ ...prev, [field]: value as string, weight: "400" }))
+    }
+    else {
+      setCurrentValue(prev => ({ ...prev, [field]: value }))
+    }
+  }
+
+  // Generate font size options from 5 to 48
+  const fontSizeOptions = Array.from({ length: 44 }, (_, i) => i + 5).map(size => ({
+    value: size,
+    label: `${size}px`
+  }))
+
+  // If the font is variable, then the font weight options are much wider
+  const fontWeightOptions: string[] = []
+  if (currentValue.family === "Roboto") {
+    fontWeightOptions.push("100", "300", "400", "500", "700", "900")
+  }
+  else if (currentValue.family === "Lora") {
+    fontWeightOptions.push("400", "500", "600", "700")
+  }
+  else if (currentValue.family === "Inter") {
+    fontWeightOptions.push("100", "200", "300", "400", "500", "600", "700", "800", "900")
+  }
+  else if (currentValue.family === "Merriweather") {
+    fontWeightOptions.push("300", "400", "700", "900")
+  }
+  else if (currentValue.family === "Lato") {
+    fontWeightOptions.push("100", "300", "400", "700", "900")
+  }
+  else {
+    fontWeightOptions.push("400", "700")
+  }
+
+  return (
+    <ActionCancelModalComponent
+      title="Edit Font"
+      onAction={() => onSave(currentValue)}
+      onCancel={onCancel}
+    >
+      <div style={{
+        border: '1px solid #ccc',
+        padding: '10px',
+        marginBottom: '15px',
+        borderRadius: '4px'
+      }}>
+        <div style={{
+          marginBottom: '10px',
+          fontSize: '14px',
+          fontWeight: 'bold'
+        }}>
+          Sample Text:
+        </div>
+        <div style={{
+          fontFamily: expandFontFamily(currentValue.family),
+          fontSize: `${currentValue.size}px`,
+          fontWeight: currentValue.weight,
+          color: currentValue.color
+        }}>
+          The quick brown fox jumps over the lazy dog.
+        </div>
+      </div>
+      <FormGroup label="Font Family">
+        <ReactSelect
+          value={{ value: currentValue.family, label: currentValue.family }}
+          onChange={(option) => handleChange('family', option?.value || '')}
+          options={[
+            { value: 'Helvetica Neue', label: 'Helvetica Neue' },
+            { value: 'Georgia', label: 'Georgia' },
+            { value: 'Inter', label: 'Inter' },
+            { value: 'Lato', label: 'Lato' },
+            { value: 'Lora', label: 'Lora' },
+            { value: 'Lucida Grande', label: 'Lucida Grande' },
+            { value: 'Merriweather', label: 'Merriweather' },
+            { value: 'Roboto', label: 'Roboto' },
+          ]}
+          formatOptionLabel={(option) => (
+            <span style={{ fontFamily: expandFontFamily(option.value) }}>{option.label}</span>
+          )}
+          isClearable={false}
+          menuPortalTarget={document.body}
+          styles={{ menuPortal: (style) => ({ ...style, zIndex: 2000 }) }}
+        />
+      </FormGroup>
+      <FormGroup label="Font Size:" horizontal>
+        <Select
+          value={currentValue.size}
+          onChange={(value) => handleChange('size', value || 12)}
+          options={fontSizeOptions}
+        />
+      </FormGroup>
+      <FormGroup label="Font Weight:" horizontal>
+        <Select
+          value={currentValue.weight}
+          onChange={(value) => handleChange('weight', value as string)}
+          options={fontWeightOptions.map(weight => ({ value: weight, label: weight }))}
+        />
+      </FormGroup>
+      <FormGroup label="Font Color:" horizontal>
+        <ColorComponent
+          color={currentValue.color}
+          onChange={(value) => handleChange('color', value!)}
+          disableReset
+        />
+      </FormGroup>
+    </ActionCancelModalComponent>
+  )
+}

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -1,14 +1,19 @@
+import _ from "lodash"
 import React, { ReactNode } from "react"
 import { useState } from "react"
-import { FormGroup, Select, Toggle } from "@mwater/react-library/lib/bootstrap"
+import { FormGroup, Toggle, Select, CollapsibleSection, Checkbox, CollapsiblePanel } from "@mwater/react-library/lib/bootstrap"
 import { DashboardDesign } from "./DashboardDesign"
 import {
   BlocksLayoutOptions,
   DashboardTheme,
   getDefaultLayoutOptions,
   getLayoutOptions,
-  WidthBucket
+  Spacing,
 } from "./layoutOptions"
+import ColorComponent from "../ColorComponent"
+import { FontStyleEditor } from "./FontStyleEditor"
+import produce from "immer"
+import FileSaver from "file-saver"
 
 interface Size {
   width: number
@@ -25,7 +30,6 @@ const sizeOptions: { value: Size; label: string }[] = [
 export function LayoutOptionsComponent(props: {
   design: DashboardDesign
   onDesignChange: (design: DashboardDesign) => void
-  onClose: () => void
 
   /** Dashboard view to preview*/
   dashboardView: ReactNode
@@ -40,78 +44,29 @@ export function LayoutOptionsComponent(props: {
     props.onDesignChange({ ...props.design, layoutOptions })
   }
 
-  function handleResetDefaults() {
-    props.onDesignChange({ ...props.design, layoutOptions: getDefaultLayoutOptions(props.design.style) })
-  }
+  const isCustomized = !_.isEqual(layoutOptions, getDefaultLayoutOptions(props.design.style))
 
   return (
-    <div style={{ display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "auto 1fr", height: "100%" }}>
-      <div style={{ padding: 5, gridRow: "1 / 3" }}>
-        <div key="back">
-          <button className="btn btn-sm btn-link" onClick={props.onClose}>
-            <i className="fa fa-arrow-left" /> Close
-          </button>
-        </div>
-        <br />
+    <div style={{ display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "360px 1fr", height: "100%" }}>
+      <div style={{ padding: "5px 10px 5px 0px", gridRow: "1 / 3", overflowY: "auto" }}>
+        <h5>Theme</h5>
         <ThemeToggle
           theme={props.design.style}
           onChange={(theme) => {
+            if (isCustomized) {
+              if (!confirm("Are you sure you want to change the theme? Your customizations will be lost.")) return
+            }
             props.onDesignChange({ ...props.design, style: theme, layoutOptions: getDefaultLayoutOptions(theme) })
           }}
+          isCustomized={isCustomized}
         />
         <br />
-        <h4>Advanced</h4>
-        <a className="btn btn-sm btn-link" style={{ float: "right" }} onClick={handleResetDefaults}>
-          Reset to Defaults
-        </a>
-        <FormGroup label="Collapse to Single Column">
-          <WidthSelector
-            value={layoutOptions.collapseColumnsWidth}
-            onChange={(collapseColumnsWidth) => {
-              setLayoutOptions({ ...layoutOptions, collapseColumnsWidth })
-            }}
-            sign="< "
-          />
-        </FormGroup>
-        <FormGroup label="Hide Quickfilters">
-          <WidthSelector
-            value={layoutOptions.hideQuickfiltersWidth}
-            onChange={(hideQuickfiltersWidth) => {
-              setLayoutOptions({ ...layoutOptions, hideQuickfiltersWidth })
-            }}
-            sign="< "
-          />
-        </FormGroup>
-        <FormGroup label="Minimum Width (before scrolling or scaling)">
-          <WidthSelector
-            value={layoutOptions.minimumWidth}
-            onChange={(minimumWidth) => {
-              setLayoutOptions({ ...layoutOptions, minimumWidth })
-            }}
-            sign="< "
+        <CollapsibleSection label={<h5 style={{ display: "inline-block" }}>Customize Layout</h5>} initiallyOpen={isCustomized}>
+          <CustomizeLayout
+            layoutOptions={layoutOptions}
+            onLayoutOptionsChange={setLayoutOptions}
           />
-          <FormGroup label="When Below Minimum Width">
-            <Toggle
-              value={layoutOptions.belowMinimumWidth}
-              onChange={(belowMinimumWidth) => {
-                setLayoutOptions({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth as "scale" | "scroll" })
-              }}
-              options={[
-                { value: "scroll", label: "Scroll" },
-                { value: "scale", label: "Scale" }
-              ]}
-            />
-          </FormGroup>
-        </FormGroup>
-        <FormGroup label="Maximum Width (before padding)">
-          <WidthSelector
-            value={layoutOptions.maximumWidth}
-            onChange={(maximumWidth) => {
-              setLayoutOptions({ ...layoutOptions, maximumWidth })
-            }}
-            sign="> "
-          />
-        </FormGroup>
+        </CollapsibleSection>
       </div>
       <div style={{ textAlign: "center", padding: 3 }}>
         <span className="text-muted">Preview As:&nbsp;</span>
@@ -151,9 +106,13 @@ export function LayoutOptionsComponent(props: {
   )
 }
 
-function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: DashboardTheme) => void }) {
+function ThemeToggle(props: {
+  theme?: DashboardTheme;
+  onChange: (theme: DashboardTheme) => void
+  isCustomized: boolean
+}) {
   function renderStyleItem(theme: string) {
-    const isActive = (props.theme || "default") == theme
+    const isActive = props.isCustomized ? theme == "custom" : (props.theme || "default") == theme
 
     if (theme == "default") {
       return (
@@ -191,17 +150,363 @@ function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: Dashboar
         </a>
       )
     }
+    if (theme == "custom") {
+      return (
+        <a
+          key={theme}
+          className={isActive ? "list-group-item active" : "list-group-item"}
+        >
+          <div>Custom</div>
+          <div style={{ opacity: 0.6 }}>Customized theme</div>
+        </a>
+      )
+    }
     return null
   }
 
   return (
-    <FormGroup label="Theme">
-      <div className="list-group">
-        {renderStyleItem("default")}
-        {renderStyleItem("greybg")}
-        {renderStyleItem("story")}
-      </div>
-    </FormGroup>
+    <div className="list-group">
+      {renderStyleItem("default")}
+      {renderStyleItem("greybg")}
+      {renderStyleItem("story")}
+      {props.isCustomized && renderStyleItem("custom")}
+    </div>
+  )
+}
+
+function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOptionsChange: (layoutOptions: BlocksLayoutOptions) => void }) {
+  const { layoutOptions, onLayoutOptionsChange } = props
+
+  const handleDownloadTheme = () => {
+    const blob = new Blob([JSON.stringify(layoutOptions, null, 2)], { type: "application/json" })
+    FileSaver.saveAs(blob, "custom_theme.theme")
+  }
+
+  const handleUploadTheme = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        try {
+          const uploadedTheme = JSON.parse(e.target?.result as string)
+          onLayoutOptionsChange(uploadedTheme)
+        } catch (error) {
+          alert("Invalid theme file")
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+
+  return (
+    <div>
+      <CollapsiblePanel title="Text">
+        <FormGroup label="Title">
+          <FontStyleEditor value={layoutOptions.titleWidgetFont} onChange={(titleWidgetFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, titleWidgetFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Heading H1">
+          <FontStyleEditor value={layoutOptions.textWidgetH1Font} onChange={(textWidgetH1Font) => {
+            onLayoutOptionsChange({ ...layoutOptions, textWidgetH1Font })
+          }} />
+          <div className="mt-1">
+            <FormGroup label="Top Margin:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetH1MarginTop}
+                onChange={(textWidgetH1MarginTop) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetH1MarginTop: textWidgetH1MarginTop! })
+                }}
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <FormGroup label="Heading H2">
+          <FontStyleEditor value={layoutOptions.textWidgetH2Font} onChange={(textWidgetH2Font) => {
+            onLayoutOptionsChange({ ...layoutOptions, textWidgetH2Font })
+          }} />
+          <div className="mt-1">
+            <FormGroup label="Top Margin:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetH2MarginTop}
+                onChange={(textWidgetH2MarginTop) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetH2MarginTop: textWidgetH2MarginTop! })
+                }}
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <FormGroup label="Text">
+          <FontStyleEditor value={layoutOptions.textWidgetFont} onChange={(textWidgetFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, textWidgetFont })
+          }} />
+          <div className="mt-1">
+            <FormGroup label="Line Height:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetLineHeight}
+                onChange={(textWidgetLineHeight) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetLineHeight: textWidgetLineHeight })
+                }}
+                allowDefault
+                defaultLabel="Default"
+              />
+            </FormGroup>
+            <FormGroup label="Paragraph Spacing:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetParagraphSpacing}
+                onChange={(textWidgetParagraphSpacing) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetParagraphSpacing: textWidgetParagraphSpacing! })
+                }}
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <FormGroup label="List Line Height:" horizontal>
+          <PixelsInput
+            value={layoutOptions.textWidgetListLineHeight}
+            onChange={(textWidgetListLineHeight) => {
+              onLayoutOptionsChange({ ...layoutOptions, textWidgetListLineHeight: textWidgetListLineHeight })
+            }}
+            allowDefault
+            defaultLabel="Default"
+          />
+        </FormGroup>
+        <FormGroup label="Chart Header Font">
+          <FontStyleEditor value={layoutOptions.widgetHeaderFont} onChange={(widgetHeaderFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, widgetHeaderFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Chart Footer Font">
+          <FontStyleEditor value={layoutOptions.widgetFooterFont} onChange={(widgetFooterFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, widgetFooterFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Chart Font">
+          <FontStyleEditor value={layoutOptions.chartFont} onChange={(chartFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, chartFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Table Font">
+          <FontStyleEditor value={layoutOptions.tableFont} onChange={(tableFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, tableFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Pivot Table Font">
+          <FontStyleEditor value={layoutOptions.pivotTableFont} onChange={(pivotTableFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, pivotTableFont })
+          }} />
+        </FormGroup>
+      </CollapsiblePanel>
+      <CollapsiblePanel title="Spacing">
+        <FormGroup label="Outer Padding:" horizontal>
+          <PixelsInput
+            value={layoutOptions.outerPadding}
+            onChange={(outerPadding) => {
+              onLayoutOptionsChange({ ...layoutOptions, outerPadding: outerPadding! })
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Block Margins">
+          <SpacingInput value={layoutOptions.blockMargin} onChange={(blockMargin) => {
+            onLayoutOptionsChange({ ...layoutOptions, blockMargin })
+          }} />
+        </FormGroup>
+        <FormGroup label="Block Padding">
+          <SpacingInput value={layoutOptions.blockPadding} onChange={(blockPadding) => {
+            onLayoutOptionsChange({ ...layoutOptions, blockPadding })
+          }} />
+        </FormGroup>
+        <FormGroup label="Block Border Radius:" horizontal>
+          <PixelsInput
+            value={layoutOptions.blockBorderRadius}
+            onChange={(blockBorderRadius) => {
+              onLayoutOptionsChange({ ...layoutOptions, blockBorderRadius: blockBorderRadius! })
+            }}
+          />
+        </FormGroup>
+      </CollapsiblePanel>
+      <CollapsiblePanel title="Colors">
+        <FormGroup label="Background Color:" horizontal>
+          <ColorComponent
+            color={layoutOptions.backgroundColor}
+            onChange={(backgroundColor) => {
+              onLayoutOptionsChange({ ...layoutOptions, backgroundColor: backgroundColor ?? "white" })
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Block Background Color:" horizontal>
+          <ColorComponent
+            color={layoutOptions.blockBackgroundColor}
+            onChange={(blockBackgroundColor) => {
+              onLayoutOptionsChange({ ...layoutOptions, blockBackgroundColor: blockBackgroundColor ?? "white" })
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Custom Colors">
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' }}>
+            {/* 18 colors, 3 rows of 6 */}
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((colorIndex) => (
+              <ColorComponent
+                key={colorIndex}
+                color={layoutOptions.customColors[colorIndex]}
+                onChange={(color) => {
+                  onLayoutOptionsChange(produce(layoutOptions, (draft) => {
+                    draft.customColors[colorIndex] = color
+                  }))
+                }}
+              />
+            ))}
+          </div>
+        </FormGroup>
+      </CollapsiblePanel>
+      <CollapsiblePanel title="Responsive Layout">
+        <FormGroup label="Collapse to Single Column">
+          <WidthSelector
+            value={layoutOptions.collapseColumnsWidth}
+            onChange={(collapseColumnsWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, collapseColumnsWidth })
+            }}
+            sign="< "
+          />
+        </FormGroup>
+        <FormGroup label="Hide Quickfilters">
+          <WidthSelector
+            value={layoutOptions.hideQuickfiltersWidth}
+            onChange={(hideQuickfiltersWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth })
+            }}
+            sign="< "
+          />
+        </FormGroup>
+        <FormGroup label="Minimum Width (before scrolling or scaling)">
+          <WidthSelector
+            value={layoutOptions.minimumWidth}
+            onChange={(minimumWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, minimumWidth })
+            }}
+            sign="< "
+          />
+          <FormGroup label="When Below Minimum Width">
+            <Toggle
+              value={layoutOptions.belowMinimumWidth}
+              onChange={(belowMinimumWidth) => {
+                onLayoutOptionsChange({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth as "scale" | "scroll" })
+              }}
+              size="sm"
+              options={[
+                { value: "scroll", label: "Scroll" },
+                { value: "scale", label: "Scale" }
+              ]}
+            />
+          </FormGroup>
+        </FormGroup>
+        <FormGroup label="Maximum Width (before padding)">
+          <WidthSelector
+            value={layoutOptions.maximumWidth}
+            onChange={(maximumWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, maximumWidth })
+            }}
+            sign="> "
+          />
+        </FormGroup>
+        <Checkbox value={layoutOptions.collapseSpacers} onChange={(collapseSpacers) => {
+          onLayoutOptionsChange({ ...layoutOptions, collapseSpacers })
+        }}>
+          Collapse Spacers on Mobile
+        </Checkbox>
+      </CollapsiblePanel>
+
+      <CollapsiblePanel title="Download/Upload Theme" initiallyClosed>
+        <div className="mb-2 text-muted">
+          Download or upload a custom theme to use for this dashboard.
+          This saves the current theme as a theme file that you can then use on other dashboards by uploading it there.
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", marginTop: "10px", gap: "10px" }}>
+          <button className="btn btn-sm btn-secondary" onClick={handleDownloadTheme}>
+            <i className="fas fa-download" /> Download Custom Theme
+          </button>
+          <label className="btn btn-sm btn-secondary">
+            <i className="fas fa-upload" /> Upload Custom Theme
+            <input
+              type="file"
+              accept=".theme"
+              style={{ display: "none" }}
+              onChange={handleUploadTheme}
+            />
+          </label>
+        </div>
+      </CollapsiblePanel>
+    </div>
+  )
+}
+
+function SpacingInput(props: { value: Spacing; onChange: (value: Spacing) => void }) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', width: '100%' }}>
+      <div>Top</div>
+      <div>Bottom</div>
+      <div>Left</div>
+      <div>Right</div>
+      <PixelsInput value={props.value.top} onChange={(top) => props.onChange({ ...props.value, top: top! })} />
+      <PixelsInput value={props.value.bottom} onChange={(bottom) => props.onChange({ ...props.value, bottom: bottom! })} />
+      <PixelsInput value={props.value.left} onChange={(left) => props.onChange({ ...props.value, left: left! })} />
+      <PixelsInput value={props.value.right} onChange={(right) => props.onChange({ ...props.value, right: right! })} />
+    </div>
+  )
+}
+
+function PixelsInput(props: {
+  value: number | null
+  onChange: (value: number | null) => void
+  allowDefault?: boolean
+  defaultLabel?: string
+}) {
+  const options = [
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40
+  ]
+
+  return (
+    <div className="dropdown">
+      <a
+        className="dropdown-toggle"
+        type="button"
+        id="pixelsInputDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        {props.value === null ? (props.defaultLabel || "Default") : `${props.value}px`}
+      </a>
+      <ul className="dropdown-menu" aria-labelledby="pixelsInputDropdown">
+        {props.allowDefault && (
+          <li key="default">
+            <a
+              className="dropdown-item"
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                props.onChange(null)
+              }}
+            >
+              {props.defaultLabel || "Default"}
+            </a>
+          </li>
+        )}
+        {options.map(option => (
+          <li key={option}>
+            <a
+              className="dropdown-item"
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                props.onChange(option)
+              }}
+            >
+              {option}px
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
   )
 }
 
@@ -226,4 +531,4 @@ function WidthSelector(props: {
       ]}
     />
   )
-}
+}