Modularize the sidebar

Fixes #2758
This commit is contained in:
Jermolene 2018-08-02 13:22:21 +01:00
parent 2d231a2e07
commit 097c87fa7b
8 changed files with 93 additions and 60 deletions

View File

@ -1,27 +1,25 @@
title: $:/core/ui/PageTemplate/sidebar
tags: $:/tags/PageTemplate
\define config-title()
$:/config/SideBarSegments/Visibility/$(listItem)$
\end
<$scrollable fallthrough="no" class="tc-sidebar-scrollable">
<div class="tc-sidebar-header">
<$reveal state="$:/state/sidebar" type="match" text="yes" default="yes" retain="yes" animate="yes">
<h1 class="tc-site-title">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/SideBarSegment]!has[draft.of]]" variable="listItem">
<$transclude tiddler="$:/SiteTitle" mode="inline"/>
<$reveal type="nomatch" state=<<config-title>> text="hide" tag="div">
</h1>
<$transclude tiddler=<<listItem>> mode="block"/>
<div class="tc-site-subtitle">
</$reveal>
<$transclude tiddler="$:/SiteSubtitle" mode="inline"/>
</div>
{{||$:/core/ui/PageTemplate/pagecontrols}}
<$transclude tiddler="$:/core/ui/SideBarLists" mode="inline"/>
</$list>
</$reveal>

View File

@ -1,53 +1,6 @@
title: $:/core/ui/SideBarLists
<div class="tc-sidebar-lists">
<$transclude tiddler="$:/core/ui/SideBarSegments/search"/>
<$set name="searchTiddler" value="$:/temp/search">
<div class="tc-search">
<$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}}/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
<$action-navigate $to="$:/AdvancedSearch"/>
{{$:/core/images/advanced-search-button}}
</$button>
<$button class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/search" text="" />
{{$:/core/images/close-button}}
</$button>
<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
{{$:/core/images/down-arrow}}
<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem">
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/language/Search/Matches}}
</$set>
</$list>
</$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">
{{$:/core/images/advanced-search-button}}
</$button>
</$reveal>
</div>
<$transclude tiddler="$:/core/ui/SideBarSegments/tabs"/>
<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" type="nomatch" text="">
<$reveal tag="div" class="tc-block-dropdown tc-search-drop-down tc-popup-handle" state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">
<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
{{$:/core/ui/SearchResults}}
</$list>
</$reveal>
</$reveal>
</$set>
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" />
</div>

View File

@ -0,0 +1,4 @@
title: $:/core/ui/SideBarSegments/page-controls
tags: $:/tags/SideBarSegment
{{||$:/core/ui/PageTemplate/pagecontrols}}

View File

@ -0,0 +1,52 @@
title: $:/core/ui/SideBarSegments/search
tags: $:/tags/SideBarSegment
<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}} 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}}/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
<$action-navigate $to="$:/AdvancedSearch"/>
{{$:/core/images/advanced-search-button}}
</$button>
<$button class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/search" text="" />
{{$:/core/images/close-button}}
</$button>
<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
{{$:/core/images/down-arrow}}
<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem">
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/language/Search/Matches}}
</$set>
</$list>
</$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">
{{$:/core/images/advanced-search-button}}
</$button>
</$reveal>
</div>
<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" type="nomatch" text="">
<$reveal tag="div" class="tc-block-dropdown tc-search-drop-down tc-popup-handle" state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">
<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
{{$:/core/ui/SearchResults}}
</$list>
</$reveal>
</$reveal>
</$set>
</div>

View File

@ -0,0 +1,8 @@
title: $:/core/ui/SideBarSegments/site-subtitle
tags: $:/tags/SideBarSegment
<div class="tc-site-subtitle">
<$transclude tiddler="$:/SiteSubtitle" mode="inline"/>
</div>

View File

@ -0,0 +1,8 @@
title: $:/core/ui/SideBarSegments/site-title
tags: $:/tags/SideBarSegment
<h1 class="tc-site-title">
<$transclude tiddler="$:/SiteTitle" mode="inline"/>
</h1>

View File

@ -0,0 +1,8 @@
title: $:/core/ui/SideBarSegments/tabs
tags: $:/tags/SideBarSegment
<div class="tc-sidebar-lists">
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" />
</div>

View File

@ -0,0 +1,2 @@
title: $:/tags/SideBarSegment
list: [[$:/core/ui/SideBarSegments/site-title]] [[$:/core/ui/SideBarSegments/site-subtitle]] [[$:/core/ui/SideBarSegments/page-controls]] [[$:/core/ui/SideBarSegments/search]] [[$:/core/ui/SideBarSegments/tabs]]