From 0181d6236d8b74c80adb62648fd6571431cf3210 Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Thu, 3 Aug 2023 22:15:06 -0700 Subject: feat: :lipstick: small ui tweaks, detached child process --- extension/react-app/src/components/ComboBox.tsx | 8 +++++ extension/react-app/src/components/PillButton.tsx | 4 +-- .../react-app/src/components/StepContainer.tsx | 12 +++++-- .../src/components/UserInputContainer.tsx | 4 ++- extension/react-app/src/pages/gui.tsx | 42 +++++++++++----------- extension/src/activation/environmentSetup.ts | 19 ++-------- extension/src/debugPanel.ts | 7 ++++ 7 files changed, 55 insertions(+), 41 deletions(-) diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index 982c42d1..5eada708 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -379,6 +379,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { Math.min(prev + 1, history.length) ); setCurrentlyInContextQuery(false); + } else if (event.key === "Escape") { + setCurrentlyInContextQuery(false); + if (downshiftProps.isOpen) { + downshiftProps.closeMenu(); + } else { + // Move cursor back over to the editor + postVscMessage("focusEditor", {}); + } } }, onClick: () => { diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 586c49f0..edef808e 100644 --- a/extension/react-app/src/components/PillButton.tsx +++ b/extension/react-app/src/components/PillButton.tsx @@ -103,8 +103,8 @@ const PillButton = (props: PillButtonProps) => { 
               `
   padding-right: 8px;
 `;
 
+const LeftHeaderSubDiv = styled.div`
+  margin: 8px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  grid-gap: 2px;
+`;
+
 const ContentDiv = styled.div<{ isUserInput: boolean }>`
   padding: 8px;
   background-color: ${(props) =>
@@ -167,7 +175,7 @@ function StepContainer(props: StepContainerProps) {
             loading={(props.historyNode.active as boolean) || false}
             error={props.historyNode.observation?.error ? true : false}
           >
-            

+            
               {!isUserInput &&
                 (props.open ? (
                   
@@ -176,7 +184,7 @@ function StepContainer(props: StepContainerProps) {
                 ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
-            

+            
             {/*  {
                 e.stopPropagation();
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index ae054947..7e964ad9 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -21,6 +21,8 @@ const StyledDiv = styled.div`
   align-items: center;
   border-bottom: 1px solid ${vscBackground};
   padding: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 `;
 
 const DeleteButtonDiv = styled.div`
@@ -35,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
       
       {/*  */}
       
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index d3a8f566..54897944 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  vscBackground,
+  secondaryDark,
   vscForeground,
 } from "../components";
 import Loader from "../components/Loader";
@@ -37,6 +37,24 @@ const TopGUIDiv = styled.div`
   overflow: hidden;
 `;
 
+const BottomMessageDiv = styled.div<{ displayOnBottom: boolean }>`
+  position: fixed;
+  bottom: ${(props) => (props.displayOnBottom ? "50px" : undefined)};
+  top: ${(props) => (props.displayOnBottom ? undefined : "50px")};
+  left: 0;
+  right: 0;
+  margin: 8px;
+  margin-top: 0;
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
+  border-radius: ${defaultBorderRadius};
+  padding: 12px;
+  z-index: 100;
+  box-shadow: 0px 0px 2px 0px ${vscForeground};
+  max-height: 50vh;
+  overflow: scroll;
+`;
+
 const UserInputQueueItem = styled.div`
   border-radius: ${defaultBorderRadius};
   color: gray;
@@ -463,7 +481,8 @@ function GUI(props: GUIProps) {
         />
         
       
-      
 {
           dispatch(setBottomMessageCloseTimeout(undefined));
         }}
@@ -472,27 +491,10 @@ function GUI(props: GUIProps) {
             dispatch(setBottomMessage(undefined));
           }
         }}
-        style={{
-          position: "fixed",
-          bottom: displayBottomMessageOnBottom ? "50px" : undefined,
-          top: displayBottomMessageOnBottom ? undefined : "50px",
-          left: "0",
-          right: "0",
-          margin: "8px",
-          marginTop: "0px",
-          backgroundColor: vscBackground,
-          color: vscForeground,
-          borderRadius: defaultBorderRadius,
-          padding: "12px",
-          zIndex: 100,
-          boxShadow: `0px 0px 4px 0px ${vscForeground}`,
-          maxHeight: "50vh",
-          overflow: "scroll",
-        }}
         hidden={!bottomMessage}
       >
         {bottomMessage}
-      

+