diff options
Diffstat (limited to 'extension/react-app/src/components')
5 files changed, 73 insertions, 63 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index ace0605e..2b140567 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -113,6 +113,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { (event.nativeEvent as any).preventDownshiftDefault = true; if (props.onEnter) props.onEnter(event); setInputValue(""); + } else if (event.key === "Tab" && items.length > 0) { + setInputValue(items[0].name); + event.preventDefault(); } }, ref: ref as any, diff --git a/extension/react-app/src/components/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx index 11ec2fe2..30f38779 100644 --- a/extension/react-app/src/components/DebugPanel.tsx +++ b/extension/react-app/src/components/DebugPanel.tsx @@ -17,39 +17,15 @@ interface DebugPanelProps { }[]; } -const GradientContainer = styled.div` - // Uncomment to get gradient border - /* background: linear-gradient( - 101.79deg, - #12887a 0%, - #87245c 37.64%, - #e12637 65.98%, - #ffb215 110.45% - ); */ - /* padding: 10px; */ - background-color: ${secondaryDark}; - margin: 0; - height: 100%; - /* border: 1px solid white; */ - border-radius: ${defaultBorderRadius}; -`; - -const MainDiv = styled.div` - height: 100%; - border-radius: ${defaultBorderRadius}; - scrollbar-base-color: transparent; - background-color: ${vscBackground}; -`; - const TabBar = styled.div<{ numTabs: number }>` display: grid; grid-template-columns: repeat(${(props) => props.numTabs}, 1fr); `; const TabsAndBodyDiv = styled.div` - display: grid; - grid-template-rows: auto 1fr; height: 100%; + border-radius: ${defaultBorderRadius}; + scrollbar-base-color: transparent; `; function DebugPanel(props: DebugPanelProps) { @@ -76,42 +52,43 @@ function DebugPanel(props: DebugPanelProps) { const [currentTab, setCurrentTab] = useState(0); return ( - <GradientContainer> - <MainDiv> - <TabsAndBodyDiv> - {props.tabs.length > 1 && ( - <TabBar numTabs={props.tabs.length}> - {props.tabs.map((tab, index) => { - return ( - <div - key={index} - className={`p-2 cursor-pointer text-center ${ - index === currentTab - ? "bg-secondary-dark" - : "bg-vsc-background" - }`} - onClick={() => setCurrentTab(index)} - > - {tab.title} - </div> - ); - })} - </TabBar> - )} + <TabsAndBodyDiv> + {props.tabs.length > 1 && ( + <TabBar numTabs={props.tabs.length}> {props.tabs.map((tab, index) => { return ( <div key={index} - hidden={index !== currentTab} - style={{ scrollbarGutter: "stable both-edges" }} + className={`p-2 cursor-pointer text-center ${ + index === currentTab + ? "bg-secondary-dark" + : "bg-vsc-background" + }`} + onClick={() => setCurrentTab(index)} > - {tab.element} + {tab.title} </div> ); })} - </TabsAndBodyDiv> - </MainDiv> - </GradientContainer> + </TabBar> + )} + {props.tabs.map((tab, index) => { + return ( + <div + key={index} + hidden={index !== currentTab} + style={{ + scrollbarGutter: "stable both-edges", + minHeight: "100%", + display: "grid", + gridTemplateRows: "1fr auto", + }} + > + {tab.element} + </div> + ); + })} + </TabsAndBodyDiv> ); } diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx new file mode 100644 index 00000000..c4f22211 --- /dev/null +++ b/extension/react-app/src/components/HeaderButtonWithText.tsx @@ -0,0 +1,30 @@ +import React, { useState } from "react"; + +import { HeaderButton } from "."; + +interface HeaderButtonWithTextProps { + text: string; + onClick?: (e: any) => void; + children: React.ReactNode; +} + +const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => { + const [hover, setHover] = useState(false); + return ( + <HeaderButton + style={{ padding: "3px" }} + onMouseEnter={() => setHover(true)} + onMouseLeave={() => { + setTimeout(() => { + setHover(false); + }, 100); + }} + onClick={props.onClick} + > + <span hidden={!hover}>{props.text}</span> + {props.children} + </HeaderButton> + ); +}; + +export default HeaderButtonWithText; diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 48f970d7..480f517f 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -21,9 +21,7 @@ import { } from "@styled-icons/heroicons-outline"; import { HistoryNode } from "../../../schema/HistoryNode"; import ReactMarkdown from "react-markdown"; -import ContinueButton from "./ContinueButton"; -import InputAndButton from "./InputAndButton"; -import ToggleErrorDiv from "./ToggleErrorDiv"; +import HeaderButtonWithText from "./HeaderButtonWithText"; interface StepContainerProps { historyNode: HistoryNode; @@ -152,23 +150,25 @@ function StepContainer(props: StepContainerProps) { </HeaderButton> */} <> - <HeaderButton + <HeaderButtonWithText onClick={(e) => { e.stopPropagation(); props.onDelete(); }} + text="Delete" > <XMark size="1.6em" onClick={props.onDelete} /> - </HeaderButton> + </HeaderButtonWithText> {props.historyNode.observation?.error ? ( - <HeaderButton + <HeaderButtonWithText + text="Retry" onClick={(e) => { e.stopPropagation(); props.onRetry(); }} > <ArrowPath size="1.6em" onClick={props.onRetry} /> - </HeaderButton> + </HeaderButtonWithText> ) : ( <></> )} @@ -193,7 +193,7 @@ function StepContainer(props: StepContainerProps) { ) : ( <ReactMarkdown key={1} - className="overflow-scroll" + className="overflow-x-scroll" components={ { // pre: ({ node, ...props }) => { diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index 525989af..d99b4d96 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -48,7 +48,7 @@ export const Pre = styled.pre` max-height: 150px; overflow-y: scroll; margin: 0; - background-color: ${secondaryDark}; + background-color: ${vscBackground}; border: none; /* text wrapping */ |