mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00
Code Issues Releases Wiki Activity

Menubar plugin: make sidebar-scrollable top margin adjust ... (#4974)

Browse Source 
* Menubar plugin: make sidebar-scrollable top margin adjust ...

... to height of menubar

* Update styles.tid

* Update styles.tid

* Update styles.tid

* Update styles.tid

* Update menu.tid

* Update styles.tid

* Update styles.tid

* Update styles.tid

* Update styles.tid

* Update menu.tid

* Update styles.tid

* Update styles.tid
This commit is contained in:
Simon Huber 2020-11-08 12:50:15 +01:00 committed by GitHub
parent e574cb4724
commit 98f67373b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/ui/TopRightBar/menu.tid
View File

@ -2,8 +2,8 @@ title: $:/core/ui/TopBar/menu
tags: $:/tags/TopRightBar
<$list filter="[[$:/state/sidebar]get[text]] +[else[yes]!match[no]]" variable="ignore">
<$button set="$:/state/sidebar" setTo="no" tooltip={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-right}}</$button>
<$button set="$:/state/sidebar" setTo="no" tooltip={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="tc-btn-invisible tc-hide-sidebar-btn">{{$:/core/images/chevron-right}}</$button>
</$list>
<$list filter="[[$:/state/sidebar]get[text]] +[else[yes]match[no]]" variable="ignore">
<$button set="$:/state/sidebar" setTo="yes" tooltip={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-left}}</$button>
<$button set="$:/state/sidebar" setTo="yes" tooltip={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="tc-btn-invisible tc-show-sidebar-btn">{{$:/core/images/chevron-left}}</$button>
</$list>

4
plugins/tiddlywiki/menubar/menu.tid
View File

@ -3,7 +3,7 @@ tags: $:/tags/PageTemplate
\define menubar-inner(size)
<ul class="tc-menubar-list">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]]">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/toprightbar]]">
<$list filter="[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]" variable="ignore">
<$list filter="[[$size$]match[wide]] ~[<currentTiddler>get[show-when]match[$size$]] ~[{$:/state/popup/menubar/hamburger}match[yes]]" variable="ignore">
<li style={{!!custom-menu-styles-$size$}} class={{{ [<currentTiddler>get[show-when]addprefix[tc-menubar-]] tc-menubar-item +[join[ ]] }}}>
@ -42,7 +42,7 @@ tags: $:/tags/PageTemplate
</ul>
\end
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]limit[1]]" variable="listItem">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/toprightbar]] +[limit[1]]" variable="listItem">
<nav class="tc-menubar tc-adjust-top-of-scroll">
<div class="tc-menubar-narrow">
<<menubar-inner narrow>>

60
plugins/tiddlywiki/menubar/styles.tid
View File

@ -5,6 +5,41 @@ tags: [[$:/tags/Stylesheet]]
<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] }}} />
\end
\define sidebarbreakpoint-minus-one()
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] }}} />
\end
\define set-sidebar-scrollable-top-if-hamburger()
<$list filter="[all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[$:/plugins/tiddlywiki/menubar/items/toprightbar]] -$:/plugins/tiddlywiki/menubar/items/hamburger +[limit[1]]">
.tc-sidebar-scrollable {
margin-top: 2em;
}
</$list>
\end
\define set-sidebar-scrollable-top()
<$list filter="[all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[$:/plugins/tiddlywiki/menubar/items/toprightbar]] +[limit[1]]">
.tc-sidebar-scrollable {
margin-top: 2em;
}
</$list>
<$reveal state="$:/state/popup/menubar/hamburger" type="match" text="yes">
<$set name="itemCount" value={{{ [all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/toprightbar]] +[count[]] }}}>
.tc-sidebar-scrollable {
margin-top: calc(<<itemCount>> * 2em);
}
</$set>
</$reveal>
\end
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
nav.tc-menubar {
@ -156,6 +191,10 @@ nav.tc-menubar .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
display: none;
}
nav.tc-menubar .tc-menubar-item .tc-show-sidebar-btn svg.tc-image-chevron-left, nav.tc-menubar .tc-menubar-item .tc-hide-sidebar-btn svg.tc-image-chevron-right {
transform: rotate(-90deg);
}
}
@media (min-width: <<breakpoint-plus-one>>) {
@ -167,4 +206,25 @@ nav.tc-menubar .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
}
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
<<set-sidebar-scrollable-top-if-hamburger>>
<<if-no-sidebar """
.tc-sidebar-header {
min-height: 0;
padding-top: 0;
padding-bottom: 0;
transition: min-height {{$:/config/AnimationDuration}}ms ease-in-out, padding-top {{$:/config/AnimationDuration}}ms ease-in-out, padding-bottom {{$:/config/AnimationDuration}}ms ease-in-out;
}
""">>
}
@media (max-width: {{$:/config/plugins/menubar/breakpoint}}) {
<<set-sidebar-scrollable-top>>
}