mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 00:50:28 +00:00
Add full-width "unfold" button for folded tiddlers
And also a full-height “fold” button for unfolded tiddlers. Trying to address #1908
This commit is contained in:
parent
b641cb402d
commit
cf00658ddf
@ -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}}
|
||||
|
@ -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]]
|
||||
|
@ -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>>;
|
||||
|
Loading…
Reference in New Issue
Block a user