mirror of
https://github.com/discourse/discourse.git
synced 2025-06-06 13:06:56 +08:00
UX: header search mobile support - follow up (#32306)
### Changes made #### Styling 1. added `4px` spacing between search input and cancel button 2. increased cancel button size (with padding) to match input height 3. decreased search panel padding by 1/2 from 16px to 8px 4. animation show/hide changed (from vertical to horizontal) and made it quicker (300ms->200ms) 5. set html unscrollable when search panel is open #### Dev 1. changed `data-test-` value to be consistent with other element's attrs values 2. clear search action tag changed from `<a>` to `<DButton>`
This commit is contained in:
Yuriy Kurant
@ -116,6 +116,7 @@ export default class GlimmerHeader extends Component {
|
||||
handleAnimationComplete() {
|
||||
this.hasClosingAnimation = false;
|
||||
this.search.visible = false;
|
||||
this.toggleBodyScrolling(false);
|
||||
}
|
||||
|
||||
@action
|
||||
@ -169,9 +170,11 @@ export default class GlimmerHeader extends Component {
|
||||
}
|
||||
|
||||
if (this.site.mobileView && this.search.visible) {
|
||||
// hide is delayed for the duration of `search-slide-out` animation
|
||||
this.hasClosingAnimation = true;
|
||||
} else {
|
||||
this.search.visible = !this.search.visible;
|
||||
this.toggleBodyScrolling(true);
|
||||
}
|
||||
|
||||
if (!this.search.visible) {
|
||||
|
||||
@ -188,9 +188,7 @@ export default class SearchMenu extends Component {
|
||||
}
|
||||
|
||||
@bind
|
||||
clearSearch(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
clearSearch() {
|
||||
this.search.activeGlobalSearchTerm = "";
|
||||
this.search.focusSearchInput();
|
||||
this.triggerSearch();
|
||||
@ -471,8 +469,8 @@ export default class SearchMenu extends Component {
|
||||
<DButton
|
||||
@action={{this.cancelMobileSearch}}
|
||||
@translatedLabel={{i18n "cancel_value"}}
|
||||
class="btn-flat"
|
||||
data-test-button="cancel-search-mobile"
|
||||
class="btn-flat btn-cancel-mobile-search"
|
||||
data-test-button="cancel-mobile-search"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ import { i18n } from "discourse-i18n";
|
||||
|
||||
<template>
|
||||
<DButton
|
||||
class="show-advanced-search btn-transparent"
|
||||
class="btn-transparent show-advanced-search"
|
||||
data-test-button="show-advanced-search"
|
||||
title={{i18n "search.open_advanced"}}
|
||||
@action={{@openAdvancedSearch}}
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
import { on } from "@ember/modifier";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
<template>
|
||||
<a
|
||||
class="clear-search"
|
||||
data-test-anchor="clear-search-input"
|
||||
<DButton
|
||||
class="btn-transparent clear-search"
|
||||
data-test-button="clear-search-input"
|
||||
aria-label="clear_input"
|
||||
title={{i18n "search.clear_search"}}
|
||||
href
|
||||
{{on "click" @clearSearch}}
|
||||
>
|
||||
{{icon "xmark"}}
|
||||
</a>
|
||||
@action={{@clearSearch}}
|
||||
@icon="xmark"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -15,7 +15,7 @@ export default modifier(
|
||||
(
|
||||
element,
|
||||
posArgs,
|
||||
{ animate = false, onComplete = () => {}, elementSelector, delay = 300 }
|
||||
{ animate = false, onComplete = () => {}, elementSelector, delay = 200 }
|
||||
) => {
|
||||
if (animate) {
|
||||
const targetEl = elementSelector
|
||||
|
||||
@ -52,7 +52,7 @@ acceptance("Search - Mobile", function (needs) {
|
||||
"search results are listed on search value present"
|
||||
);
|
||||
|
||||
await click('[data-test-anchor="clear-search-input"]');
|
||||
await click('[data-test-button="clear-search-input"]');
|
||||
|
||||
assert
|
||||
.dom('[data-test-selector="search-menu-results"]')
|
||||
@ -64,7 +64,7 @@ acceptance("Search - Mobile", function (needs) {
|
||||
test("with empty input search", async function (assert) {
|
||||
await visit("/");
|
||||
await click("#search-button");
|
||||
await click('[data-test-button="cancel-search-mobile"]');
|
||||
await click('[data-test-button="cancel-mobile-search"]');
|
||||
|
||||
assert
|
||||
.dom('[data-test-selector="menu-panel"]')
|
||||
@ -82,7 +82,7 @@ acceptance("Search - Mobile", function (needs) {
|
||||
"search results are listed on search value present"
|
||||
);
|
||||
|
||||
await click('[data-test-button="cancel-search-mobile"]');
|
||||
await click('[data-test-button="cancel-mobile-search"]');
|
||||
await click("#search-button");
|
||||
|
||||
assert.dom('[data-test-input="search-term"]').hasNoValue();
|
||||
|
||||
@ -242,36 +242,44 @@
|
||||
&.search-menu-panel {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
transform-origin: 66%;
|
||||
transition: height 0.2s ease-in;
|
||||
|
||||
&.empty-panel {
|
||||
height: auto;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
&.slide-in {
|
||||
animation: search-slidein 0.3s ease-out forwards;
|
||||
animation: search-slide-in 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
&.is-destroying {
|
||||
animation: search-slideout 0.3s ease-in forwards;
|
||||
animation: search-slide-out 0.2s ease-in forwards;
|
||||
}
|
||||
|
||||
@keyframes search-slidein {
|
||||
@keyframes search-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search-slideout {
|
||||
80% {
|
||||
@keyframes search-slide-out {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel-mobile-search {
|
||||
padding: 1rem 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,6 +24,19 @@ $search-pad-horizontal: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
--search-input-wrapper-padding: 0.5rem;
|
||||
position: fixed;
|
||||
left: var(--search-input-wrapper-padding);
|
||||
right: var(--search-input-wrapper-padding);
|
||||
top: var(--search-input-wrapper-padding);
|
||||
width: calc(100dvw - calc(var(--search-input-wrapper-padding) * 2));
|
||||
padding-bottom: var(--search-input-wrapper-padding);
|
||||
background-color: var(--secondary);
|
||||
z-index: z("base");
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@ -113,6 +126,13 @@ $search-pad-horizontal: 0.5em;
|
||||
padding-top: $search-pad-vertical;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
&,
|
||||
&.with-search-term {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
min-width: 100px;
|
||||
|
||||
@ -403,18 +423,14 @@ $search-pad-horizontal: 0.5em;
|
||||
align-items: center;
|
||||
|
||||
.spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-width: 2px;
|
||||
margin: 0 0.5em 0.25em 0;
|
||||
margin-top: 2px;
|
||||
width: 0.75rem; // 12px
|
||||
height: 0.75rem; // 12px
|
||||
border-width: 0.125rem; // 2px
|
||||
margin: 0 $hpad 0 0;
|
||||
}
|
||||
|
||||
.show-advanced-search,
|
||||
a.clear-search {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
|
||||
.clear-search {
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
@ -427,8 +443,12 @@ $search-pad-horizontal: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
a.clear-search {
|
||||
margin-right: 3px;
|
||||
.clear-search {
|
||||
padding-right: 0.25rem; // 4px
|
||||
}
|
||||
|
||||
.show-advanced-search {
|
||||
padding-left: 0.375rem; // 6px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
justify-content: flex-end;
|
||||
|
||||
.show-advanced-search,
|
||||
a.clear-search {
|
||||
.clear-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user