mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Add full-width "unfold" button for folded tiddlers

Browse Source 
And also a full-height “fold” button for unfolded tiddlers.

Trying to address #1908
This commit is contained in:
Jermolene 2015-09-18 19:45:18 +01:00
parent b641cb402d
commit cf00658ddf
3 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
core/ui/ViewTemplate/unfold.tid
View File

@ -1,7 +1,14 @@
title: $:/core/ui/ViewTemplate/unfold
tags: $:/tags/ViewTemplate
<$reveal tag="div" class="tc-tiddler-body" type="nomatch" state=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
<$reveal tag="div" type="nomatch" state=<<folded-state>> text="hide" default="show" retain="yes" animate="yes">
<$button tooltip={{$:/language/Buttons/Fold/Hint}} aria-label={{$:/language/Buttons/Fold/Caption}} class="tc-fold-banner">
<$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
{{$:/core/images/chevron-up}}
</$button>
</$reveal>
<$reveal tag="div" type="nomatch" state=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
<$button tooltip={{$:/language/Buttons/Unfold/Hint}} aria-label={{$:/language/Buttons/Unfold/Caption}} class="tc-unfold-banner">
<$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
{{$:/core/images/chevron-down}}

2
core/wiki/tags/ViewTemplate.tid
View File

@ -1,2 +1,2 @@
title: $:/tags/ViewTemplate
list: [[$:/core/ui/ViewTemplate/title]] [[$:/core/ui/ViewTemplate/subtitle]] [[$:/core/ui/ViewTemplate/tags]] [[$:/core/ui/ViewTemplate/classic]] [[$:/core/ui/ViewTemplate/body]] [[$:/core/ui/ViewTemplate/unfold]]
list: [[$:/core/ui/ViewTemplate/title]] [[$:/core/ui/ViewTemplate/unfold]] [[$:/core/ui/ViewTemplate/subtitle]] [[$:/core/ui/ViewTemplate/tags]] [[$:/core/ui/ViewTemplate/classic]] [[$:/core/ui/ViewTemplate/body]]

45
themes/tiddlywiki/vanilla/base.tid
View File

@ -435,29 +435,65 @@ button svg.tc-image-button, button .tc-image-button img {
}
.tc-unfold-banner {
position: absolute;
padding: 0;
margin: 0;
background: none;
border: none;
width: 100%;
width: calc(100% + 2px);
margin-left: -43px;
text-align: center;
border-top: 2px solid <<colour tiddler-controls-foreground>>;
margin-top: 8px;
border-top: 2px solid <<colour tiddler-info-background>>;
margin-top: 4px;
}
.tc-unfold-banner:hover {
background: <<colour tiddler-info-background>>;
border-top: 2px solid <<colour tiddler-info-border>>;
}
.tc-unfold-banner svg {
.tc-unfold-banner svg, .tc-fold-banner svg {
height: 0.75em;
fill: <<colour tiddler-controls-foreground>>;
}
.tc-unfold-banner:hover svg {
.tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {
fill: <<colour tiddler-controls-foreground-hover>>;
}
.tc-fold-banner {
position: absolute;
padding: 0;
margin: 0;
background: none;
border: none;
width: 23px;
text-align: center;
margin-left: -35px;
top: 6px;
bottom: 6px;
}
.tc-fold-banner:hover {
background: <<colour tiddler-info-background>>;
}
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
.tc-unfold-banner {
position: static;
width: calc(100% + 59px);
}
.tc-fold-banner {
width: 16px;
margin-left: -16px;
font-size: 0.75em;
}
}
/*
** Tags and missing tiddlers
*/
@ -704,6 +740,7 @@ button.tc-untagged-label {
*/
.tc-tiddler-frame {
position: relative;
margin-bottom: 28px;
background-color: <<colour tiddler-background>>;
border: 1px solid <<colour tiddler-border>>;