Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Styling adjustments for filters page (#20768) 

Change styling of filter input & remove button.

This follows the same pattern of design we use for search. In the search dropdown we do not have a button to search. We rely on pressing enter. I've also provided an example of Github's PR filter UI at the bottom of this comment.

We also do not have buttons like this on any other topic-list header. On tag and category dropdowns, we also rely on pressing enter to filter the topic list by chosen categories & tags.

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
This commit is contained in:
Alan Guo Xiang Tan 2023-03-23 06:28:47 +08:00 committed by GitHub
parent 41ed4cac91
commit 4cb79ce8be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/components/d-navigation.hbs
View File

@ -1,17 +1,14 @@
{{#if this.isQueryFilterMode}}
<div class="topic-query-filter">
<div class="topic-query-filter__input">
{{d-icon "filter" class="topic-query-filter__icon"}}
<Input
class="topic-query-filter__input"
class="topic-query-filter__filter-term"
@value={{this.queryString}}
@enter={{action @updateTopicsListQueryParams this.queryString}}
@type="text"
/>
<DButton
@action={{action @updateTopicsListQueryParams this.queryString}}
@icon="filter"
@class="btn-primary topic-query-filter__button"
@label="filters.filter.button.label"
/>
</div>
</div>
{{else}}
<BreadCrumbs

35
app/assets/stylesheets/common/components/topic-query-filter.scss
View File

@ -3,8 +3,41 @@
flex-direction: row;
margin-right: auto;
margin-bottom: var(--nav-space);
min-width: 50%;
.topic-query-filter__input {
&__label {
background-color: var(--primary-low);
display: flex;
align-items: center;
padding: 0.25em 0.65em;
border: 1px solid var(--primary-low-mid);
border-right: 0;
}
&__input {
position: relative;
flex: 1 1;
}
&__icon {
position: absolute;
left: 0.5em;
top: 0.65em;
color: var(--primary-low-mid);
}
input.topic-query-filter__filter-term {
margin: 0 0.5em 0 0;
border-color: var(--primary-low-mid);
padding-left: 1.75em;
color: var(--primary);
width: 100%;
&:focus {
border-color: var(--tertiary);
outline: none;
outline-offset: 0;
box-shadow: inset 0px 0px 0px 1px var(--tertiary);
}
}
}

7
spec/system/page_objects/components/topic_query_filter.rb
View File

@ -4,12 +4,7 @@ module PageObjects
module Components
class TopicQueryFilter < PageObjects::Components::Base
def fill_in(text)
page.fill_in(class: "topic-query-filter__input", with: text)
page.click_button(
I18n.t("js.filters.filter.button.label"),
class: "topic-query-filter__button",
)
page.fill_in(class: "topic-query-filter__filter-term", with: "#{text}\n")
end
end
end