From 939d26801ad134567981d332b660eca2f243c30d Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Tue, 14 Sep 2021 14:47:39 +0800 Subject: [PATCH 1/4] Wunderbar: re-arrange static buttons to the top ## Issue 7075 Move "explore tags" to a stable position ## Changes Move the buttons in the suggestions popup to the top row so that it's position won't be constantly changing depending on the number of results. --- ui/component/wunderbarSuggestions/view.jsx | 22 ++++++++++++---------- ui/scss/component/_wunderbar.scss | 11 +++++++++++ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/ui/component/wunderbarSuggestions/view.jsx b/ui/component/wunderbarSuggestions/view.jsx index b2f7003c4..68a23d37d 100644 --- a/ui/component/wunderbarSuggestions/view.jsx +++ b/ui/component/wunderbarSuggestions/view.jsx @@ -321,16 +321,6 @@ export default function WunderBarSuggestions(props: Props) { className={classnames('wunderbar__suggestions', { 'wunderbar__suggestions--mobile': isMobile })} > - {uriFromQueryIsValid && !noTopSuggestion ? : null} - -
{__('Search Results')}
- - {showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? : null} - - {!showPlaceholder && results - ? results.slice(0, isMobile ? 20 : 5).map((uri) => ) - : null} - {!noBottomLinks && (
@@ -344,6 +334,18 @@ export default function WunderBarSuggestions(props: Props) {
)} + +
+ + {uriFromQueryIsValid && !noTopSuggestion ? : null} + +
{__('Search Results')}
+ + {showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? : null} + + {!showPlaceholder && results + ? results.slice(0, isMobile ? 20 : 5).map((uri) => ) + : null} )} diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss index 6d88871da..0645b6de7 100644 --- a/ui/scss/component/_wunderbar.scss +++ b/ui/scss/component/_wunderbar.scss @@ -264,6 +264,17 @@ :first-child { flex: 1; } + + .wunderbar__more-results { + margin-top: 0; + margin-left: var(--spacing-xxs); + margin-bottom: 0; + + @media (min-width: $breakpoint-small) { + margin-top: var(--spacing-xxs); + margin-bottom: 0; + } + } } [data-reach-combobox-option] { -- 2.45.3 From 9d1ff4e8aec05d733cdfa58159268a25ab7cf09f Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Tue, 14 Sep 2021 15:06:52 +0800 Subject: [PATCH 2/4] Wunderbar: fix popup dismissed despite a child is in focus ## Issue 1. Type something in the wunderbar. 2. While the spinner is running, press Tab to focus on "View results" button. 3. If the spinner is still running, the entire popup gets dismissed (it should not). If the spinner isn't running, the popup stays active. ## Change It was explicitly dismissed when the loses focus. It shouldn't do that if any child of the popup is in focus. --- ui/component/wunderbarSuggestions/view.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/component/wunderbarSuggestions/view.jsx b/ui/component/wunderbarSuggestions/view.jsx index 68a23d37d..79510c3fa 100644 --- a/ui/component/wunderbarSuggestions/view.jsx +++ b/ui/component/wunderbarSuggestions/view.jsx @@ -64,7 +64,11 @@ export default function WunderBarSuggestions(props: Props) { customSelectAction, } = props; const inputRef: ElementRef = React.useRef(); - const isFocused = inputRef && inputRef.current && inputRef.current === document.activeElement; + const viewResultsRef: ElementRef = React.useRef(); + const exploreTagRef: ElementRef = React.useRef(); + + const isRefFocused = (ref) => ref && ref.current && ref.current === document.activeElement; + const isFocused = isRefFocused(inputRef) || isRefFocused(viewResultsRef) || isRefFocused(exploreTagRef); const { push, @@ -324,10 +328,10 @@ export default function WunderBarSuggestions(props: Props) { {!noBottomLinks && (
- -- 2.45.3 From e6f895f2b6b414b55d3a00d3f22e1994964b2390 Mon Sep 17 00:00:00 2001 From: Alexander Schrier Date: Tue, 14 Sep 2021 16:42:03 -0500 Subject: [PATCH 3/4] Move dropdown caret away from edge --- ui/scss/component/_claim-list.scss | 2 ++ ui/scss/component/_claim-search.scss | 3 ++- ui/scss/component/_form-field.scss | 4 ++-- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 724c8f331..ecd5d83e9 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -19,6 +19,8 @@ .claim-list__dropdown { padding: 0 var(--spacing-m); + padding-right: 2.75rem; + background-position: right var(--spacing-m) center; @media (max-width: $breakpoint-small) { margin-left: 0; diff --git a/ui/scss/component/_claim-search.scss b/ui/scss/component/_claim-search.scss index f2db0239d..9b6e7b391 100644 --- a/ui/scss/component/_claim-search.scss +++ b/ui/scss/component/_claim-search.scss @@ -26,9 +26,10 @@ .claim-search__dropdown { padding: 0 var(--spacing-m); - padding-right: var(--spacing-l); + padding-right: 2.75rem; font-size: var(--font-body); background-color: var(--color-card-background); + background-position: right var(--spacing-m) center; } .claim-search__dropdown--selected { diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 4398d9858..ee422ef52 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -45,10 +45,10 @@ select { select { background-image: var(--select-toggle-background); - background-position: 99% center; + background-position: right var(--spacing-s) center; background-repeat: no-repeat; background-size: 1rem; - padding-right: var(--spacing-l); + padding-right: 2.25rem; padding-left: var(--spacing-s); font-weight: bold; } -- 2.45.3 From 47cc1768042439e9d9dc37e24c3b8c856308872c Mon Sep 17 00:00:00 2001 From: Alexander Schrier Date: Wed, 15 Sep 2021 13:53:14 -0500 Subject: [PATCH 4/4] Set dropdown padding-right to spacing-xl --- ui/scss/component/_claim-list.scss | 2 +- ui/scss/component/_claim-search.scss | 2 +- ui/scss/component/_form-field.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index ecd5d83e9..aece45bcb 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -19,7 +19,7 @@ .claim-list__dropdown { padding: 0 var(--spacing-m); - padding-right: 2.75rem; + padding-right: var(--spacing-xl); background-position: right var(--spacing-m) center; @media (max-width: $breakpoint-small) { diff --git a/ui/scss/component/_claim-search.scss b/ui/scss/component/_claim-search.scss index 9b6e7b391..246b4d2e9 100644 --- a/ui/scss/component/_claim-search.scss +++ b/ui/scss/component/_claim-search.scss @@ -26,7 +26,7 @@ .claim-search__dropdown { padding: 0 var(--spacing-m); - padding-right: 2.75rem; + padding-right: var(--spacing-xl); font-size: var(--font-body); background-color: var(--color-card-background); background-position: right var(--spacing-m) center; diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index ee422ef52..0933a87be 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -48,7 +48,7 @@ select { background-position: right var(--spacing-s) center; background-repeat: no-repeat; background-size: 1rem; - padding-right: 2.25rem; + padding-right: var(--spacing-xl); padding-left: var(--spacing-s); font-weight: bold; } -- 2.45.3