mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
FEATURE: revamp full-page-search UI (#5703)
This is the first iteration of this revamp, a following iteration will focus on improving the controls in the advanced search sidebar.
This commit is contained in:
Joffrey JAFFEUX
Kris
@@ -174,7 +174,7 @@ export default Ember.Controller.extend({
|
||||
|
||||
@computed('expanded')
|
||||
searchAdvancedIcon(expanded) {
|
||||
return iconHTML(expanded ? "caret-down" : "caret-right");
|
||||
return iconHTML(expanded ? "caret-down fa-fw" : "caret-right fa-fw");
|
||||
},
|
||||
|
||||
@computed('page')
|
||||
|
||||
@@ -1,163 +1,188 @@
|
||||
{{#d-section pageClass="search" class="search-container"}}
|
||||
{{scroll-tracker name="full-page-search" tag=searchTerm}}
|
||||
<div class="search row clearfix">
|
||||
<div class="search-bar">
|
||||
{{search-text-field value=searchTerm class="full-page-search input-xxlarge search no-blur" action="search" hasAutofocus=hasAutofocus}}
|
||||
{{d-button action="search" icon="search" class="btn-primary" disabled=searching}}
|
||||
</div>
|
||||
<div class='search-advanced'>
|
||||
<button class="search-advanced-btn btn" {{action "toggleAdvancedSearch"}}>
|
||||
{{{searchAdvancedIcon}}}
|
||||
{{i18n "search.advanced.title"}}
|
||||
</button>
|
||||
{{scroll-tracker name="full-page-search" tag=searchTerm class="hidden"}}
|
||||
|
||||
{{#if expanded}}
|
||||
{{search-advanced-options searchTerm=searchTerm isExpanded=expanded}}
|
||||
<div class="search-advanced">
|
||||
{{#unless site.mobileView}}
|
||||
<div class="search-bar">
|
||||
{{search-text-field value=searchTerm class="full-page-search search no-blur search-query" action="search" hasAutofocus=hasAutofocus}}
|
||||
{{d-button action="search" icon="search" class="btn-primary search-cta" disabled=searching}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
<div class="search-notice">
|
||||
{{#if invalidSearch}}
|
||||
<div class="fps-invalid">
|
||||
{{i18n "search.too_short"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if hasResults}}
|
||||
{{create-topic-button canCreateTopic=canCreateTopic action=(action "createTopic" searchTerm)}}
|
||||
<div class='search-title'>
|
||||
{{#if hasResults}}
|
||||
{{create-topic-button canCreateTopic=canCreateTopic action=(action "createTopic" searchTerm)}}
|
||||
{{/if}}
|
||||
|
||||
{{#if canBulkSelect}}
|
||||
{{d-button icon="list" class="bulk-select" title="topics.bulk.toggle" action="toggleBulkSelect"}}
|
||||
{{bulk-select-button selected=selected action="search"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if bulkSelectEnabled}}
|
||||
<div class='fps-select'>
|
||||
<a {{action "selectAll"}}>{{i18n "search.select_all"}}</a>
|
||||
<a {{action "clearAll"}}>{{i18n "search.clear_all"}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class='search-info'>
|
||||
<div class='result-count'>
|
||||
{{{resultCountLabel}}}
|
||||
</div>
|
||||
<div class='sort-by'>
|
||||
<span class='desc'>
|
||||
{{i18n "search.sort_by"}}
|
||||
</span>
|
||||
{{combo-box value=sortOrder content=sortOrders castInteger=true}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if canBulkSelect}}
|
||||
{{d-button icon="list" class="bulk-select" title="topics.bulk.toggle" action="toggleBulkSelect"}}
|
||||
{{bulk-select-button selected=selected action="search"}}
|
||||
{{/if}}
|
||||
<div class="search-results">
|
||||
{{#load-more selector=".fps-result" action="loadMore"}}
|
||||
{{#each model.posts as |result|}}
|
||||
<div class='fps-result'>
|
||||
<div class='author'>
|
||||
<a href={{result.userPath}} data-user-card="{{unbound result.username}}">
|
||||
{{avatar result imageSize="large"}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class='fps-topic'>
|
||||
<div class='topic'>
|
||||
{{#if bulkSelectEnabled}}
|
||||
{{track-selected selectedList=selected selectedId=result.topic}}
|
||||
{{/if}}
|
||||
|
||||
<a class='search-link' href='{{unbound result.url}}' {{action "logClick" result.topic_id}}>
|
||||
{{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
|
||||
</a>
|
||||
|
||||
<div class='search-category'>
|
||||
{{#if result.topic.category.parentCategory}}
|
||||
{{category-link result.topic.category.parentCategory}}
|
||||
{{/if}}
|
||||
{{category-link result.topic.category hideParent=true}}
|
||||
{{#each result.topic.tags as |tag|}}
|
||||
{{discourse-tag tag}}
|
||||
{{/each}}
|
||||
{{plugin-outlet name="full-page-search-category" args=(hash result=result)}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='blurb container'>
|
||||
<span class='date'>
|
||||
{{format-age result.created_at}}
|
||||
{{#if result.blurb}}
|
||||
-
|
||||
{{/if}}
|
||||
</span>
|
||||
|
||||
{{#if result.blurb}}
|
||||
{{#highlight-text highlight=highlightQuery}}
|
||||
{{{unbound result.blurb}}}
|
||||
{{/highlight-text}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if showLikeCount}}
|
||||
{{#if result.like_count}}
|
||||
<span class='like-count'>
|
||||
{{result.like_count}} {{d-icon "heart"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#conditional-loading-spinner condition=loading }}
|
||||
{{#unless hasResults}}
|
||||
{{#if searchActive}}
|
||||
<h3>{{i18n "search.no_results"}}</h3>
|
||||
|
||||
{{#if showSuggestion}}
|
||||
<div class="no-results-suggestion">
|
||||
{{i18n "search.cant_find"}}
|
||||
{{#if canCreateTopic}}
|
||||
<a href {{action "createTopic" searchTerm}}>{{i18n "search.start_new_topic"}}</a>
|
||||
{{#unless siteSettings.login_required}}
|
||||
{{i18n "search.or_search_google"}}
|
||||
{{/unless}}
|
||||
{{else}}
|
||||
{{i18n "search.search_google"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{google-search searchTerm=searchTerm}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
{{#if hasResults}}
|
||||
{{#unless loading}}
|
||||
<h3 class="search-footer">
|
||||
{{#if model.grouped_search_result.more_full_page_results}}
|
||||
{{#if isLastPage }}
|
||||
{{i18n "search.more_results"}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{i18n "search.no_more_results"}}
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
{{/conditional-loading-spinner}}
|
||||
{{/load-more}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if bulkSelectEnabled}}
|
||||
<div class='fps-select'>
|
||||
<a {{action "selectAll"}}>{{i18n "search.select_all"}}</a>
|
||||
<a {{action "clearAll"}}>{{i18n "search.clear_all"}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if invalidSearch}}
|
||||
<div class='fps-invalid'>
|
||||
{{i18n "search.too_short"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if context}}
|
||||
<div class='fps-search-context'>
|
||||
<label>
|
||||
{{input type="checkbox" name="searchContext" checked=searchContextEnabled}} {{searchContextDescription}}
|
||||
</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if hasResults}}
|
||||
<div class='search-title clearfix'>
|
||||
<div class='result-count'>
|
||||
<span>
|
||||
{{{resultCountLabel}}}
|
||||
</span>
|
||||
<div class="search-advanced-sidebar">
|
||||
{{#if site.mobileView}}
|
||||
<div class="search-bar">
|
||||
{{search-text-field value=searchTerm class="full-page-search search no-blur search-query" action="search" hasAutofocus=hasAutofocus}}
|
||||
{{d-button action="search" icon="search" class="btn-primary search-cta" disabled=searching}}
|
||||
</div>
|
||||
<div class='sort-by'>
|
||||
<span class='desc'>
|
||||
{{i18n "search.sort_by"}}
|
||||
</span>
|
||||
{{combo-box value=sortOrder content=sortOrders castInteger=true}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#load-more selector=".fps-result" action="loadMore"}}
|
||||
{{#each model.posts as |result|}}
|
||||
<div class='fps-result'>
|
||||
<div class='author'>
|
||||
<a href={{result.userPath}} data-user-card="{{unbound result.username}}">
|
||||
{{avatar result imageSize="large"}}
|
||||
</a>
|
||||
{{#if site.mobileView}}
|
||||
<button class="search-advanced-title btn" {{action "toggleAdvancedSearch"}}>
|
||||
{{{searchAdvancedIcon}}} {{i18n "search.advanced.title"}}
|
||||
</button>
|
||||
{{else}}
|
||||
<span class="search-advanced-title">
|
||||
{{i18n "search.advanced.title"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if site.mobileView}}
|
||||
{{#if expanded}}
|
||||
<div class="search-advanced-filters">
|
||||
{{search-advanced-options searchTerm=searchTerm isExpanded=expanded}}
|
||||
</div>
|
||||
|
||||
<div class='fps-topic'>
|
||||
<div class='topic'>
|
||||
{{#if bulkSelectEnabled}}
|
||||
{{track-selected selectedList=selected selectedId=result.topic}}
|
||||
{{/if}}
|
||||
|
||||
<a class='search-link' href='{{unbound result.url}}' {{action "logClick" result.topic_id}}>
|
||||
{{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
|
||||
</a>
|
||||
|
||||
<div class='search-category'>
|
||||
{{#if result.topic.category.parentCategory}}
|
||||
{{category-link result.topic.category.parentCategory}}
|
||||
{{/if}}
|
||||
{{category-link result.topic.category hideParent=true}}
|
||||
{{#each result.topic.tags as |tag|}}
|
||||
{{discourse-tag tag}}
|
||||
{{/each}}
|
||||
{{plugin-outlet name="full-page-search-category" args=(hash result=result)}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='blurb container'>
|
||||
<span class='date'>
|
||||
{{format-age result.created_at}}
|
||||
{{#if result.blurb}}
|
||||
-
|
||||
{{/if}}
|
||||
</span>
|
||||
|
||||
{{#if result.blurb}}
|
||||
{{#highlight-text highlight=highlightQuery}}
|
||||
{{{unbound result.blurb}}}
|
||||
{{/highlight-text}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if showLikeCount}}
|
||||
{{#if result.like_count}}
|
||||
<span class='like-count'>
|
||||
{{result.like_count}} {{d-icon "heart"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#conditional-loading-spinner condition=loading }}
|
||||
{{#unless hasResults}}
|
||||
{{#if searchActive}}
|
||||
<h3>{{i18n "search.no_results"}}</h3>
|
||||
|
||||
{{#if showSuggestion}}
|
||||
<div class="no-results-suggestion">
|
||||
{{i18n "search.cant_find"}}
|
||||
{{#if canCreateTopic}}
|
||||
<a href {{action "createTopic" searchTerm}}>{{i18n "search.start_new_topic"}}</a>
|
||||
{{#unless siteSettings.login_required}}
|
||||
{{i18n "search.or_search_google"}}
|
||||
{{/unless}}
|
||||
{{else}}
|
||||
{{i18n "search.search_google"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{google-search searchTerm=searchTerm}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
{{#if hasResults}}
|
||||
{{#unless loading}}
|
||||
<h3 class="search-footer">
|
||||
{{#if model.grouped_search_result.more_full_page_results}}
|
||||
{{#if isLastPage }}
|
||||
{{i18n "search.more_results"}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{i18n "search.no_more_results"}}
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
{{/conditional-loading-spinner}}
|
||||
|
||||
{{/load-more}}
|
||||
{{else}}
|
||||
<div class="search-advanced-filters">
|
||||
{{search-advanced-options searchTerm=searchTerm isExpanded=true}}
|
||||
|
||||
{{d-button
|
||||
label="submit"
|
||||
action="search"
|
||||
icon="search"
|
||||
class="btn-primary search-cta"
|
||||
disabled=searching}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/d-section}}
|
||||
|
||||
Reference in New Issue
Block a user