From e2c5eea445b9ab27b9fac5e46abed909eb7eb948 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Wed, 21 May 2025 17:38:38 -0700 Subject: [PATCH 1/4] feat(issues): Avoid hiding unread indicator Moves the checkbox down below the unread indicator. --- static/app/components/stream/group.tsx | 38 ++++++++++++++------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx index a21af0f2d7ce3a..d1ff6f306dd884 100644 --- a/static/app/components/stream/group.tsx +++ b/static/app/components/stream/group.tsx @@ -110,6 +110,13 @@ function GroupCheckbox({ return ( + {group.hasSeen ? ( + + ) : ( + + + + )} - {group.hasSeen ? null : ( - - - - )} ); } @@ -645,15 +647,13 @@ function StreamGroup({ export default StreamGroup; const CheckboxLabel = styled('label')` - position: absolute; - top: 0; - left: 0; - bottom: 0; height: 100%; width: 32px; + padding-top: ${space(0.75)}; padding-left: ${space(2)}; - padding-top: 14px; margin: 0; + display: flex; + align-items: center; `; const UnreadIndicator = styled('div')` @@ -661,8 +661,14 @@ const UnreadIndicator = styled('div')` height: 8px; background-color: ${p => p.theme.purple400}; border-radius: 50%; + margin-top: ${space(0.25)}; + margin-left: ${space(2)}; +`; + +const UnreadIndicatorPlaceholder = styled('div')` + width: 8px; + height: 8px; margin-left: ${space(3)}; - margin-top: 10px; `; // Position for wrapper is relative for overlay actions @@ -681,13 +687,6 @@ const Wrapper = styled(PanelItem)<{ } } - &:hover, - &:focus-within { - ${UnreadIndicator} { - ${p => p.theme.visuallyHidden}; - } - } - [data-issue-title-link] { &::before { content: ''; @@ -757,7 +756,10 @@ const GroupCheckBoxWrapper = styled('div')` align-self: flex-start; width: 32px; display: flex; + flex-direction: column; align-items: center; + justify-content: center; + padding-top: ${space(1)}; z-index: 1; `; From 7aaefe4db72a79588e5f26e0ec846757d8c28e88 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Wed, 21 May 2025 17:59:22 -0700 Subject: [PATCH 2/4] break focus making checkbox appear --- static/app/components/stream/group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx index d1ff6f306dd884..e6c8d53ba08740 100644 --- a/static/app/components/stream/group.tsx +++ b/static/app/components/stream/group.tsx @@ -681,7 +681,7 @@ const Wrapper = styled(PanelItem)<{ padding: ${space(1)} 0; min-height: 82px; - &:not(:has(:hover)):not(:focus-within):not(:has(input:checked)) { + &:not(:hover):not(:has(input:checked)) { ${CheckboxLabel} { ${p => p.theme.visuallyHidden}; } From 600617a5a02a4341fbc8a3a08ecb940ac465f659 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Thu, 22 May 2025 11:17:48 -0700 Subject: [PATCH 3/4] click unread to toggle. min height group extra --- .../components/eventOrGroupExtraDetails.tsx | 1 + static/app/components/stream/group.tsx | 44 ++++++++++++------- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/static/app/components/eventOrGroupExtraDetails.tsx b/static/app/components/eventOrGroupExtraDetails.tsx index 0b601123624fd2..7182bf8f9dec3d 100644 --- a/static/app/components/eventOrGroupExtraDetails.tsx +++ b/static/app/components/eventOrGroupExtraDetails.tsx @@ -172,6 +172,7 @@ const GroupExtra = styled('div')` font-size: ${p => p.theme.fontSizeSmall}; white-space: nowrap; line-height: 1.2; + min-height: ${space(2)}; & > a { color: ${p => p.theme.subText}; diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx index e6c8d53ba08740..a99b296cb8b31d 100644 --- a/static/app/components/stream/group.tsx +++ b/static/app/components/stream/group.tsx @@ -95,11 +95,9 @@ function GroupCheckbox({ const {records: selectedGroupMap} = useLegacyStore(SelectedGroupStore); const isSelected = selectedGroupMap.get(group.id) ?? false; - const onChange = useCallback( - (evt: React.ChangeEvent) => { - const mouseEvent = evt.nativeEvent as MouseEvent; - - if (mouseEvent.shiftKey) { + const handleToggle = useCallback( + (isShiftClick: boolean) => { + if (isShiftClick) { SelectedGroupStore.shiftToggleItems(group.id); } else { SelectedGroupStore.toggleSelect(group.id); @@ -108,13 +106,26 @@ function GroupCheckbox({ [group.id] ); + const onChange = useCallback( + (evt: React.ChangeEvent) => { + const mouseEvent = evt.nativeEvent as MouseEvent; + handleToggle(mouseEvent.shiftKey); + }, + [handleToggle] + ); + return ( - {group.hasSeen ? ( - - ) : ( + {group.hasSeen && ( - + { + // Toggle checkbox on unread indicator misclick + e.stopPropagation(); + handleToggle(e.shiftKey); + }} + /> )} @@ -647,11 +658,15 @@ function StreamGroup({ export default StreamGroup; const CheckboxLabel = styled('label')` + position: absolute; + top: -1px; + left: 0; + bottom: 0; height: 100%; width: 32px; - padding-top: ${space(0.75)}; padding-left: ${space(2)}; margin: 0; + margin-top: -1px; display: flex; align-items: center; `; @@ -661,14 +676,9 @@ const UnreadIndicator = styled('div')` height: 8px; background-color: ${p => p.theme.purple400}; border-radius: 50%; - margin-top: ${space(0.25)}; + margin-top: 1px; margin-left: ${space(2)}; -`; - -const UnreadIndicatorPlaceholder = styled('div')` - width: 8px; - height: 8px; - margin-left: ${space(3)}; + z-index: 1; `; // Position for wrapper is relative for overlay actions From 769d81d7c00ac14d76176d43239fb3ebd0b1b1ff Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Thu, 22 May 2025 11:39:40 -0700 Subject: [PATCH 4/4] sad --- static/app/components/stream/group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx index a99b296cb8b31d..628748f1486cd2 100644 --- a/static/app/components/stream/group.tsx +++ b/static/app/components/stream/group.tsx @@ -116,7 +116,7 @@ function GroupCheckbox({ return ( - {group.hasSeen && ( + {!group.hasSeen && (