From a6e5bb82f8fdcc1dc6f07776f3a63d6b078d006c Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 17 Jul 2023 00:00:31 -0700
Subject: only show delete when only one range selected
---
extension/react-app/src/components/ComboBox.tsx | 2 ++
extension/react-app/src/components/PillButton.tsx | 34 +++++++++++++----------
2 files changed, 22 insertions(+), 14 deletions(-)
(limited to 'extension/react-app/src')
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 773fcf72..dbebd534 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -218,6 +218,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
? "Editing such a large range may be slow"
: undefined
}
+ onlyShowDelete={highlightedCodeSections.length <= 1}
editing={section.editing}
pinned={section.pinned}
index={idx}
@@ -334,6 +335,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
})}
showAbove={showAbove()}
ulHeightPixels={ulRef.current?.getBoundingClientRect().height || 0}
+ hidden={!downshiftProps.isOpen || items.length === 0}
>
{downshiftProps.isOpen &&
items.map((item, index) => (
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index d9d779d1..5a16516e 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -27,7 +27,6 @@ const GridDiv = styled.div`
height: 100%;
display: grid;
grid-gap: 0;
- grid-template-columns: 1fr 1fr;
align-items: center;
border-radius: ${defaultBorderRadius};
@@ -69,6 +68,7 @@ interface PillButtonProps {
editing: boolean;
pinned: boolean;
warning?: string;
+ onlyShowDelete?: boolean;
}
const PillButton = (props: PillButtonProps) => {
@@ -105,19 +105,25 @@ const PillButton = (props: PillButtonProps) => {
}}
>
{isHovered && (
- <GridDiv>
- <ButtonDiv
- data-tooltip-id={`edit-${props.index}`}
- backgroundColor={"#8800aa55"}
- onClick={() => {
- client?.setEditingAtIndices([props.index]);
- }}
- >
- <PaintBrush
- style={{ margin: "auto" }}
- width="1.6em"
- ></PaintBrush>
- </ButtonDiv>
+ <GridDiv
+ style={{
+ gridTemplateColumns: props.onlyShowDelete ? "1fr" : "1fr 1fr",
+ }}
+ >
+ {props.onlyShowDelete || (
+ <ButtonDiv
+ data-tooltip-id={`edit-${props.index}`}
+ backgroundColor={"#8800aa55"}
+ onClick={() => {
+ client?.setEditingAtIndices([props.index]);
+ }}
+ >
+ <PaintBrush
+ style={{ margin: "auto" }}
+ width="1.6em"
+ ></PaintBrush>
+ </ButtonDiv>
+ )}
{/* <ButtonDiv
data-tooltip-id={`pin-${props.index}`}
--
cgit v1.2.3-70-g09d2