diff options
Diffstat (limited to 'extension/react-app/src')
| -rw-r--r-- | extension/react-app/src/components/ComboBox.tsx | 53 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 2 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 11 |
3 files changed, 41 insertions, 25 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index 7ee5dc24..af673b42 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -79,7 +79,7 @@ const MainTextInput = styled.textarea` } `; -const UlMaxHeight = 400; +const UlMaxHeight = 300; const Ul = styled.ul<{ hidden: boolean; showAbove: boolean; @@ -94,13 +94,20 @@ const Ul = styled.ul<{ background-color: ${secondaryDark}; color: white; max-height: ${UlMaxHeight}px; - overflow: scroll; + overflow-y: scroll; + overflow-x: hidden; padding: 0; ${({ hidden }) => hidden && "display: none;"} border-radius: ${defaultBorderRadius}; - overflow: hidden; border: 0.5px solid gray; z-index: 2; + // Get rid of scrollbar and its padding + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + width: 0px; + background: transparent; /* make scrollbar transparent */ + } `; const Li = styled.li<{ @@ -108,7 +115,7 @@ const Li = styled.li<{ selected: boolean; isLastItem: boolean; }>` - ${({ highlighted }) => highlighted && "background: #aa0000;"} + ${({ highlighted }) => highlighted && "background: #ff000066;"} ${({ selected }) => selected && "font-weight: bold;"} padding: 0.5rem 0.75rem; display: flex; @@ -272,6 +279,12 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { event.key === "Enter" && (!isOpen || items.length === 0) ) { + setInputValue(""); + const value = event.currentTarget.value; + if (value !== "") { + setPositionInHistory(history.length + 1); + setHistory([...history, value]); + } // Prevent Downshift's default 'Enter' behavior. (event.nativeEvent as any).preventDownshiftDefault = true; @@ -280,33 +293,28 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { event.currentTarget.value = `/edit ${event.currentTarget.value}`; } if (props.onEnter) props.onEnter(event); - setInputValue(""); - const value = event.currentTarget.value; - if (value !== "") { - setPositionInHistory(history.length + 1); - setHistory([...history, value]); - } } else if (event.key === "Tab" && items.length > 0) { setInputValue(items[0].name); event.preventDefault(); } else if ( - event.key === "ArrowUp" || - (event.key === "ArrowDown" && - event.currentTarget.value.split("\n").length > 1) - ) { - (event.nativeEvent as any).preventDownshiftDefault = true; - } else if ( - event.key === "ArrowUp" && + (event.key === "ArrowUp" || event.key === "ArrowDown") && event.currentTarget.value.split("\n").length > 1 ) { + (event.nativeEvent as any).preventDownshiftDefault = true; + } else if (event.key === "ArrowUp") { + console.log("OWJFOIJO"); if (positionInHistory == 0) return; + else if ( + positionInHistory == history.length && + (history.length === 0 || + history[history.length - 1] !== event.currentTarget.value) + ) { + setHistory([...history, event.currentTarget.value]); + } setInputValue(history[positionInHistory - 1]); setPositionInHistory((prev) => prev - 1); - } else if ( - event.key === "ArrowDown" && - event.currentTarget.value.split("\n").length > 1 - ) { - if (positionInHistory < history.length - 1) { + } else if (event.key === "ArrowDown") { + if (positionInHistory < history.length) { setInputValue(history[positionInHistory + 1]); } setPositionInHistory((prev) => @@ -327,6 +335,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { {isOpen && items.map((item, index) => ( <Li + style={{ borderTop: index === 0 ? "none" : undefined }} key={`${item.name}${index}`} {...getItemProps({ item, index })} highlighted={highlightedIndex === index} diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 91d7b8ef..590b1166 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -206,7 +206,7 @@ function StepContainer(props: StepContainerProps) { e.stopPropagation(); props.onDelete(); }} - text={props.historyNode.active ? "Stop" : "Delete"} + text={props.historyNode.active ? "Stop (⌘⌫)" : "Delete"} > {props.historyNode.active ? ( <StopCircle size="1.6em" onClick={props.onDelete} /> diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index 3cce30de..ca369547 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -139,9 +139,16 @@ function GUI(props: GUIProps) { useEffect(() => { const listener = (e: any) => { - // Cmd + J to toggle fast model + // Cmd + i to toggle fast model if (e.key === "i" && e.metaKey && e.shiftKey) { setUsingFastModel((prev) => !prev); + // Cmd + backspace to stop currently running step + } else if ( + e.key === "Backspace" && + e.metaKey && + typeof history?.current_index !== "undefined" + ) { + client?.deleteAtIndex(history.current_index); } }; window.addEventListener("keydown", listener); @@ -149,7 +156,7 @@ function GUI(props: GUIProps) { return () => { window.removeEventListener("keydown", listener); }; - }, []); + }, [client, history]); useEffect(() => { client?.onStateUpdate((state: FullState) => { |