feat(editor2): better appearance

Author: guansss

src/components/editor/NumericInput2.tsx

@@ -4,6 +4,7 @@ import {
   NumericInputProps,
 } from '@blueprintjs/core'
 
+import clsx from 'clsx'
 import { clamp, noop } from 'lodash-es'
 import {
   WheelEventHandler,
@@ -31,6 +32,7 @@ export const NumericInput2 = ({
   onFocus,
   onWheelFocused,
   wheelStepSize,
+  inputClassName,
   ...props
 }: NumericInput2Props) => {
   const allowNegative = min === undefined || min < 0
@@ -79,6 +81,11 @@ export const NumericInput2 = ({
       min={min}
       max={max}
       minorStepSize={minorStepSize}
+      inputClassName={clsx(
+        (wheelStepSize !== undefined || onWheelFocused !== undefined) &&
+          'focus:cursor-ns-resize',
+        inputClassName,
+      )}
       inputRef={inputRef}
       value={endsWithDot ? value + '.' : value}
       onFocus={(e) => {

src/components/editor2/EditorToolbar.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  ButtonProps,
   Callout,
   H2,
   Icon,
@@ -16,6 +17,7 @@ import { FC, useRef, useState } from 'react'
 import { i18n, useTranslation } from '../../i18n/i18n'
 import { formatError } from '../../utils/error'
 import { formatRelativeTime } from '../../utils/times'
+import { useCurrentSize } from '../../utils/useCurrenSize'
 import { RelativeTime } from '../RelativeTime'
 import { AppToaster } from '../Toaster'
 import { Settings } from './Settings'
@@ -40,8 +42,14 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({
   onSubmit,
 }) => {
   const t = useTranslation()
+  const { isLG } = useCurrentSize()
+  const buttonProps = {
+    minimal: true,
+    className: isLG ? undefined : 'min-w-10 h-10',
+  } satisfies ButtonProps
+
   return (
-    <div className="px-4 md:px-8 flex items-center flex-wrap bg-white dark:bg-[#383e47]">
+    <div className="px-4 md:px-8 flex items-center flex-wrap [&_.bp4-button-text]:leading-none bg-white dark:bg-[#383e47]">
       <Icon icon="properties" />
       <div className="ml-2 flex items-baseline">
         <H2 className="!text-base mb-0">
@@ -53,27 +61,32 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({
           </span>
         )}
       </div>
-      <div className="grow py-2 flex flex-wrap items-center">
+      <div className="grow py-1 flex flex-wrap items-center justify-end">
         <span className="grow" />
-        <Settings />
-        <AutoSaveButton />
-        <HistoryButtons />
-        <ErrorVisibleButton />
-        <ErrorButton />
-        <SourceEditorButton minimal />
-        <span className="grow max-w-6" />
+        <Settings {...buttonProps} />
+        <AutoSaveButton {...buttonProps} />
+        <HistoryButtons {...buttonProps} />
+        <ErrorVisibleButton {...buttonProps} />
+        <ErrorButton {...buttonProps} />
+        <SourceEditorButton {...buttonProps} />
+        <span className="grow max-w-4" />
         <SubmitButton submitAction={submitAction} onSubmit={onSubmit} />
       </div>
     </div>
   )
 }
 
-interface SubmitButtonProps {
+interface SubmitButtonProps extends ButtonProps {
   submitAction: string
   onSubmit: () => Promise<void | false> | false | void
 }
 
-const SubmitButton = ({ submitAction, onSubmit }: SubmitButtonProps) => {
+const SubmitButton = ({
+  submitAction,
+  onSubmit,
+  className,
+  ...buttonProps
+}: SubmitButtonProps) => {
   const [submitting, setSubmitting] = useState(false)
   const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle')
   const statusResetTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -102,14 +115,15 @@ const SubmitButton = ({ submitAction, onSubmit }: SubmitButtonProps) => {
   return (
     <Button
       large
+      {...buttonProps}
       intent={
         status === 'success'
           ? 'success'
           : status === 'error'
             ? 'danger'
             : 'primary'
       }
-      className="w-40"
+      className={clsx('w-40', className)}
       icon={status === 'success' ? 'tick' : 'upload'}
       loading={submitting}
       text={submitAction}
@@ -118,7 +132,7 @@ const SubmitButton = ({ submitAction, onSubmit }: SubmitButtonProps) => {
   )
 }
 
-const AutoSaveButton = () => {
+const AutoSaveButton = (buttonProps: ButtonProps) => {
   const t = useTranslation()
   const edit = useEdit()
   const archive = useAtomValue(editorArchiveAtom)
@@ -141,7 +155,6 @@ const AutoSaveButton = () => {
                 limit: AUTO_SAVE_LIMIT,
               })}
               <Button
-                minimal
                 icon="floppy-disk"
                 intent="primary"
                 className=""
@@ -195,33 +208,30 @@ const AutoSaveButton = () => {
       onClosed={() => setIsOpen(false)}
     >
       <Button
-        minimal
-        large
+        {...buttonProps}
         icon="projects"
         title={t.components.editor2.EditorToolbar.auto_save}
       />
     </Popover2>
   )
 }
 
-const HistoryButtons = () => {
+const HistoryButtons = (buttonProps: ButtonProps) => {
   const t = useTranslation()
   const { history, canRedo, canUndo } = useHistoryValue(historyAtom)
   const { undo, redo, checkout } = useHistoryControls(historyAtom)
   const [isOpen, setIsOpen] = useState(false)
   return (
     <>
       <Button
-        minimal
-        large
+        {...buttonProps}
         icon="undo"
         title={t.components.editor2.EditorToolbar.undo}
         disabled={!canUndo}
         onClick={undo}
       />
       <Button
-        minimal
-        large
+        {...buttonProps}
         icon="redo"
         title={t.components.editor2.EditorToolbar.redo}
         disabled={!canRedo}
@@ -274,7 +284,7 @@ const HistoryButtons = () => {
         onClosed={() => setIsOpen(false)}
       >
         <Button
-          minimal
+          {...buttonProps}
           icon="history"
           title={t.components.editor2.EditorToolbar.undo_history}
           text={history.index + 1 + '/' + history.stack.length}
@@ -284,7 +294,7 @@ const HistoryButtons = () => {
   )
 }
 
-const ErrorButton = () => {
+const ErrorButton = (buttonProps: ButtonProps) => {
   const t = useTranslation()
   const globalErrors = useAtomValue(editorAtoms.globalErrors)
   const entityErrors = useAtomValue(editorAtoms.entityErrors)
@@ -317,8 +327,7 @@ const ErrorButton = () => {
       onInteraction={(isOpen) => setIsOpen(allErrors.length > 0 && isOpen)}
     >
       <Button
-        minimal
-        large
+        {...buttonProps}
         icon={allErrors.length > 0 ? 'cross-circle' : 'tick-circle'}
         intent={allErrors.length > 0 ? 'danger' : 'success'}
         title={
@@ -332,13 +341,12 @@ const ErrorButton = () => {
   )
 }
 
-const ErrorVisibleButton = () => {
+const ErrorVisibleButton = (buttonProps: ButtonProps) => {
   const t = useTranslation()
   const [visible, setVisible] = useAtom(editorAtoms.errorsVisible)
   return (
     <Button
-      minimal
-      large
+      {...buttonProps}
       icon="eye-open"
       active={visible}
       onClick={() => setVisible(!visible)}

src/components/editor2/Settings.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  ButtonProps,
   Dialog,
   DialogBody,
   FormGroup,
@@ -13,7 +14,9 @@ import { useTranslation } from '../../i18n/i18n'
 import { NumericInput2 } from '../editor/NumericInput2'
 import { editorAtoms } from './editor-state'
 
-export const Settings = () => {
+interface SettingsProps extends ButtonProps {}
+
+export const Settings = (props: SettingsProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [config, setConfig] = useAtom(editorAtoms.config)
   const t = useTranslation()
@@ -22,7 +25,7 @@ export const Settings = () => {
     <>
       <Button
         icon="cog"
-        minimal
+        {...props}
         onClick={() => setIsOpen(true)}
         title={t.components.editor2.Settings.title}
       />

src/components/editor2/action/ActionItem.tsx

@@ -110,7 +110,7 @@ export const ActionItem: FC<ActionItemProps> = memo(
         <Card
           className={clsx(
             className,
-            '!p-0  !rounded-none',
+            '!p-0 !rounded overflow-hidden',
             typeInfo.accentText,
           )}
         >