diff options
| author | Oskar <oskar@mullvad.net> | 2024-08-29 11:44:27 +0200 |
|---|---|---|
| committer | Oskar <oskar@mullvad.net> | 2024-08-29 15:06:48 +0200 |
| commit | ff6e93020aee26d8d769a3c3e538adb2f676946b (patch) | |
| tree | 2967d9a436018209fd879a05633abd2ed590daa1 | |
| parent | 695db070e3e2a426f7c0600ac749f4e4d1b4877e (diff) | |
| download | mullvadvpn-ff6e93020aee26d8d769a3c3e538adb2f676946b.tar.xz mullvadvpn-ff6e93020aee26d8d769a3c3e538adb2f676946b.zip | |
Render ellipsis as display none instead of not at all when expanded
| -rw-r--r-- | gui/src/renderer/components/main-view/FeatureIndicators.tsx | 26 |
1 files changed, 12 insertions, 14 deletions
diff --git a/gui/src/renderer/components/main-view/FeatureIndicators.tsx b/gui/src/renderer/components/main-view/FeatureIndicators.tsx index c6f4cefcac..a0a8091a5e 100644 --- a/gui/src/renderer/components/main-view/FeatureIndicators.tsx +++ b/gui/src/renderer/components/main-view/FeatureIndicators.tsx @@ -55,12 +55,13 @@ const StyledFeatureIndicatorLabel = styled.span<{ $expanded: boolean }>(tinyText visibility: props.$expanded ? 'visible' : 'hidden', })); -const StyledBaseEllipsis = styled.span(tinyText, { +const StyledBaseEllipsis = styled.span<{ $display: boolean }>(tinyText, (props) => ({ position: 'absolute', top: `${LINE_HEIGHT + GAP}px`, color: colors.white, padding: '2px 8px 2px 16px', -}); + display: props.$display ? 'inline' : 'none', +})); const StyledEllipsisSpacer = styled(StyledBaseEllipsis)({ right: 0, @@ -119,6 +120,7 @@ export default function FeatureIndicators(props: FeatureIndicatorsProps) { const indicatorElements = Array.from( featureIndicatorsContainerRef.current.getElementsByTagName('span'), ); + let lastVisibleIndex = 0; let hasHidden = false; indicatorElements.forEach((indicatorElement, i) => { @@ -177,18 +179,14 @@ export default function FeatureIndicators(props: FeatureIndicatorsProps) { </StyledFeatureIndicatorLabel> ))} </StyledFeatureIndicatorsWrapper> - {!props.expanded && ( - <> - <StyledEllipsis ref={ellipsisRef} /> - <StyledEllipsisSpacer ref={ellipsisSpacerRef}> - { - // Mock amount for the spacer ellipsis. This needs to be wider than the real - // ellipsis will ever be. - sprintf(ellipsis, { amount: 222 }) - } - </StyledEllipsisSpacer> - </> - )} + <StyledEllipsis $display={!props.expanded} ref={ellipsisRef} /> + <StyledEllipsisSpacer $display={!props.expanded} ref={ellipsisSpacerRef}> + { + // Mock amount for the spacer ellipsis. This needs to be wider than the real + // ellipsis will ever be. + sprintf(ellipsis, { amount: 222 }) + } + </StyledEllipsisSpacer> </StyledFeatureIndicators> </StyledFeatureIndicatorsContainer> </StyledAccordion> |