1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00

Addresses #1066 by moving the search results into a dropdown.

The dropdown can be summoned by clicking on the search field. It will
only appear if the search field is not empty. When the search field is
not empty the dropdown can be also be summoned by clicking on the arrow
or search result count.

There are still some wrinkles where the dropdown doesn’t appear when
expected; I’d appreciate feedback to help reproduce those cases.

This change should still work with custom search result tabs.
This commit is contained in:
Jermolene 2015-09-27 22:53:40 +01:00
parent b30126ec22
commit 72941f3e9a
4 changed files with 29 additions and 16 deletions

View File

@ -3,12 +3,6 @@ tags: $:/tags/SearchResults
caption: {{$:/language/Search/DefaultResults/Caption}}
\define searchResultList()
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/language/Search/Matches}}
</$set>
//<small>Title matches:</small>//
<$list filter="[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/>
@ -16,5 +10,6 @@ caption: {{$:/language/Search/DefaultResults/Caption}}
//<small>All matches:</small>//
<$list filter="[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/>
\end
<<searchResultList>>

View File

@ -7,7 +7,9 @@ title: $:/core/ui/SearchResults
<$transclude mode="block"/>
</$list>
""">
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SearchResults]!has[draft.of]]" default={{$:/config/SearchResults/Default}}/>
</$list>
</div>

View File

@ -2,8 +2,9 @@ title: $:/core/ui/SideBarLists
<div class="tc-sidebar-lists">
<$set name="searchTiddler" value="$:/temp/search">
<div class="tc-search">
<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}}/>
<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle"/>
<$reveal state="$:/temp/search" type="nomatch" text="">
<$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/>
@ -15,6 +16,11 @@ title: $:/core/ui/SideBarLists
<$action-setfield $tiddler="$:/temp/search" text="" />
{{$:/core/images/close-button}}
</$button>
<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/core/images/down-arrow}} {{$:/language/Search/Matches}}
</$set>
</$button>
</$reveal>
<$reveal state="$:/temp/search" type="match" text="">
<$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
@ -25,16 +31,20 @@ title: $:/core/ui/SideBarLists
<$reveal state="$:/temp/search" type="nomatch" text="">
<$set name="searchTiddler" value="$:/temp/search">
<$reveal state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">
<div class="tc-drop-down tc-search-drop-down tc-popup-handle">
{{$:/core/ui/SearchResults}}
</$set>
</div>
</$reveal>
<$reveal state="$:/temp/search" type="match" text="">
</$reveal>
</$set>
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" />
</$reveal>
</div>

View File

@ -617,10 +617,6 @@ button.tc-untagged-label {
vertical-align: middle;
}
.tc-search-results {
padding-top: 14px;
}
.tc-page-controls {
margin-top: 14px;
font-size: 1.5em;
@ -1195,6 +1191,8 @@ html body.tc-body.tc-single-tiddler-window {
}
.tc-drop-down {
position: absolute;
z-index: 1000;
min-width: 380px;
border: 1px solid <<colour dropdown-border>>;
background-color: <<colour dropdown-background>>;
@ -1205,6 +1203,10 @@ html body.tc-body.tc-single-tiddler-window {
line-height: 1.4;
}
.tc-search-drop-down {
margin-left: -12px;
}
.tc-drop-down .tc-drop-down {
margin-left: 14px;
}
@ -1526,6 +1528,8 @@ html body.tc-body.tc-single-tiddler-window {
}
.tc-sidebar-lists .tc-tab-buttons button {
display: inline;
width: auto;
background-color: <<colour sidebar-tab-background>>;
color: <<colour sidebar-tab-foreground>>;
border-left: 1px solid <<colour sidebar-tab-border>>;
@ -1538,6 +1542,8 @@ html body.tc-body.tc-single-tiddler-window {
}
.tc-more-sidebar .tc-tab-buttons button {
display: block;
width: 100%;
background-color: <<colour sidebar-tab-background>>;
border-top: none;
border-left: none;