wip

lama_cleaner/app/src/components/shared/Button.scss

@@ -4,6 +4,7 @@
   display: grid;
   grid-auto-flow: column;
   column-gap: 1rem;
+  background-color: var(--page-bg);
   color: var(--btn-text-color);
   font-family: 'WorkSans', sans-serif;
   width: max-content;
@@ -25,6 +26,13 @@
 }
 
 .btn-primary-disabled {
+  background-color: var(--page-bg);
   pointer-events: none;
   opacity: 0.5;
 }
+
+.btn-border {
+  border-color: var(--btn-border-color);
+  border-width: 1px;
+  border-style: solid;
+}

lama_cleaner/app/src/components/shared/Button.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 
 interface ButtonProps {
+  border?: boolean
   disabled?: boolean
   children?: ReactNode
   className?: string
@@ -17,6 +18,7 @@ interface ButtonProps {
 const Button: React.FC<ButtonProps> = props => {
   const {
     children,
+    border,
     className,
     disabled,
     icon,
@@ -55,6 +57,7 @@ const Button: React.FC<ButtonProps> = props => {
         toolTip ? 'info-tooltip' : '',
         tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
         className,
+        border ? `btn-border` : '',
       ].join(' ')}
     >
       {icon}
@@ -65,6 +68,7 @@ const Button: React.FC<ButtonProps> = props => {
 
 Button.defaultProps = {
   disabled: false,
+  border: false,
 }
 
 export default Button

lama_cleaner/app/src/components/shared/Input.tsx

@@ -0,0 +1,42 @@
+import React, { FocusEvent, InputHTMLAttributes } from 'react'
+import { useRecoilState } from 'recoil'
+import { appState } from '../../store/Atoms'
+
+const TextInput = React.forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement>
+>((props: InputHTMLAttributes<HTMLInputElement>, forwardedRef) => {
+  const { onFocus, onBlur, ...itemProps } = props
+  const [_, setAppState] = useRecoilState(appState)
+
+  const handleOnFocus = (evt: FocusEvent<any>) => {
+    setAppState(old => {
+      return { ...old, disableShortCuts: true }
+    })
+    onFocus?.(evt)
+  }
+
+  const handleOnBlur = (evt: FocusEvent<any>) => {
+    setAppState(old => {
+      return { ...old, disableShortCuts: false }
+    })
+    onBlur?.(evt)
+  }
+
+  return (
+    <input
+      {...itemProps}
+      ref={forwardedRef}
+      type="text"
+      onFocus={handleOnFocus}
+      onBlur={handleOnBlur}
+      onKeyDown={e => {
+        if (e.key === 'Escape') {
+          e.currentTarget.blur()
+        }
+      }}
+    />
+  )
+})
+
+export default TextInput

lama_cleaner/app/src/components/shared/Modal.tsx

@@ -1,7 +1,9 @@
 import { XIcon } from '@heroicons/react/outline'
 import React, { ReactNode } from 'react'
+import { useRecoilState } from 'recoil'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import Button from './Button'
+import { appState } from '../../store/Atoms'
 
 export interface ModalProps {
   show: boolean
@@ -16,10 +18,14 @@ const Modal = React.forwardRef<
   ModalProps
 >((props, forwardedRef) => {
   const { show, children, onClose, className, title } = props
+  const [_, setAppState] = useRecoilState(appState)
 
   const onOpenChange = (open: boolean) => {
     if (!open) {
       onClose?.()
+      setAppState(old => {
+        return { ...old, disableShortCuts: false }
+      })
     }
   }
 

lama_cleaner/app/src/components/shared/NumberInput.scss

@@ -5,8 +5,13 @@
   padding: 0 0.8rem;
   outline: 1px solid var(--border-color);
   height: 32px;
+  text-align: right;
 
   &:focus-visible {
     outline: 1px solid var(--yellow-accent);
   }
+
+  &:disabled {
+    color: var(--border-color);
+  }
 }

lama_cleaner/app/src/components/shared/NumberInput.tsx

@@ -1,31 +1,44 @@
-import React, { FormEvent, InputHTMLAttributes } from 'react'
+import React, { FormEvent, InputHTMLAttributes, useState } from 'react'
+import TextInput from './Input'
 
 interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string
+  allowFloat?: boolean
   onValue?: (val: string) => void
 }
 
 const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
   (props: NumberInputProps, forwardedRef) => {
-    const { value, onValue, ...itemProps } = props
+    const { value, allowFloat, onValue, ...itemProps } = props
+    const [innerValue, setInnerValue] = useState(value)
 
     const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
       const target = evt.target as HTMLInputElement
-      const val = target.value.replace(/\D/g, '')
-      onValue?.(val)
+      let val = target.value
+      if (allowFloat) {
+        val = val.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1')
+        onValue?.(val)
+      } else {
+        val = val.replace(/\D/g, '')
+        onValue?.(val)
+      }
+      setInnerValue(val)
     }
 
     return (
-      <input
-        value={value}
+      <TextInput
+        value={innerValue}
         onInput={handleOnInput}
         className="number-input"
         {...itemProps}
         ref={forwardedRef}
-        type="text"
       />
     )
   }
 )
 
+NumberInput.defaultProps = {
+  allowFloat: false,
+}
+
 export default NumberInput

lama_cleaner/app/src/components/shared/Selector.tsx

@@ -51,6 +51,7 @@ const Selector = (props: Props) => {
         className="select-trigger"
         style={{ width }}
         ref={contentRef}
+        onKeyDown={e => e.preventDefault()}
       >
         <Select.Value />
         <Select.Icon>

lama_cleaner/app/src/components/shared/Switch.tsx

@@ -12,6 +12,7 @@ const Switch = React.forwardRef<
       {...itemProps}
       ref={forwardedRef}
       className={`switch-root ${className}`}
+      onKeyDown={e => e.preventDefault()}
     />
   )
 })

lama_cleaner/app/src/components/shared/Toast.scss

@@ -1,7 +1,7 @@
 .toast-viewpoint {
   position: fixed;
-  top: 48px;
-  right: 0;
+  bottom: 48px;
+  right: 1.5rem;
   display: flex;
   flex-direction: row;
   padding: 25px;