mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 03:57:21 +00:00
Text-slicer: tweak interactive document display
* Add icon for view template segment * Muted background colour for view template segment * Include links to parent tiddlers in the view template segment * Fix logic for hiding/showing documents/headings (“open”/“close” were transposed)
This commit is contained in:
parent
e2d0b70fad
commit
6e4222e5e8
@ -41,11 +41,42 @@ tags: $:/tags/Stylesheet
|
||||
|
||||
.tc-document-preview-column .tc-sliced-document {
|
||||
margin-bottom: 3px;
|
||||
border-bottom: 2px solid <<colour muted-foreground>>;
|
||||
}
|
||||
|
||||
.tc-view-template-document-tiddler-wrapper {
|
||||
border-top: 2px solid #D6A2A2;
|
||||
margin-left: -42px;
|
||||
margin-right: -42px;
|
||||
margin-bottom: -42px;
|
||||
padding-left: 42px;
|
||||
padding-right: 42px;
|
||||
background: #FFE3E3;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tc-view-template-document-tiddler-heading a {
|
||||
border: 1px solid #D6A2A2;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tc-view-template-document-tiddler-heading-icon {
|
||||
width: 42px;
|
||||
text-align: center;
|
||||
margin-left: -42px;
|
||||
margin-right: -42px;
|
||||
position: absolute;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.tc-view-template-document-tiddler-heading-icon svg {
|
||||
fill: <<colour background>>;
|
||||
}
|
||||
|
||||
.tc-view-template-document-tiddler-heading {
|
||||
border-top: 2px solid <<colour muted-foreground>>;
|
||||
}
|
||||
|
||||
.tc-view-template-document-tiddler {
|
||||
|
@ -22,20 +22,20 @@ $:/state/plugins/tiddlywiki/text-slicer/heading-status/$(currentTiddler)$
|
||||
<div class="tc-sliced-document">
|
||||
<div class="tc-sliced-document-header">
|
||||
<div class="tc-document-tiddler-toolbar">
|
||||
<$reveal type="nomatch" state=<<config-document-status>> text="open" default="closed">
|
||||
<$button set=<<config-document-status>> setTo="open" class="tc-btn-invisible">
|
||||
<$reveal type="nomatch" state=<<config-document-status>> text="close" default="open">
|
||||
<$button set=<<config-document-status>> setTo="close" class="tc-btn-invisible">
|
||||
{{$:/core/images/down-arrow}}
|
||||
</$button>
|
||||
</$reveal>
|
||||
<$reveal type="match" state=<<config-document-status>> text="open" default="closed">
|
||||
<$button set=<<config-document-status>> setTo="close" class="tc-btn-invisible">
|
||||
<$reveal type="match" state=<<config-document-status>> text="close" default="open">
|
||||
<$button set=<<config-document-status>> setTo="open" class="tc-btn-invisible">
|
||||
{{$:/core/images/right-arrow}}
|
||||
</$button>
|
||||
</$reveal>
|
||||
</div>
|
||||
<h1 class="tc-sliced-document-title">''Document'': <$link><$view field="title"/></$link></h1>
|
||||
</div>
|
||||
<$reveal type="nomatch" state=<<config-document-status>> text="open" default="closed">
|
||||
<$reveal type="nomatch" state=<<config-document-status>> text="close" default="open">
|
||||
{{||$:/plugins/tiddlywiki/text-slicer/ui/document/header}}
|
||||
<div class='tc-sliced-document-body'>
|
||||
<$set name="tv-show-toolbar" value={{$(config-show-toolbar)$}}>
|
||||
|
@ -8,13 +8,13 @@ $(tv-heading-status-config-title)$/$(tv-heading-status-config-prefix)$/$(current
|
||||
<$set name="tv-heading-status-config-title" value=<<config-heading-status>>>
|
||||
<div class="tc-document-tiddler">
|
||||
<div class="tc-document-tiddler-toolbar">
|
||||
<$reveal type="nomatch" state=<<tv-heading-status-config-title>> text="open" default=<<tv-default-heading-state>>>
|
||||
<$button set=<<tv-heading-status-config-title>> setTo="open" class="tc-btn-invisible">
|
||||
<$reveal type="nomatch" state=<<tv-heading-status-config-title>> text="close" default=<<tv-default-heading-state>>>
|
||||
<$button set=<<tv-heading-status-config-title>> setTo="close" class="tc-btn-invisible">
|
||||
{{$:/core/images/down-arrow}}
|
||||
</$button>
|
||||
</$reveal>
|
||||
<$reveal type="match" state=<<tv-heading-status-config-title>> text="open" default=<<tv-default-heading-state>>>
|
||||
<$button set=<<tv-heading-status-config-title>> setTo="close" class="tc-btn-invisible">
|
||||
<$reveal type="match" state=<<tv-heading-status-config-title>> text="close" default=<<tv-default-heading-state>>>
|
||||
<$button set=<<tv-heading-status-config-title>> setTo="open" class="tc-btn-invisible">
|
||||
{{$:/core/images/right-arrow}}
|
||||
</$button>
|
||||
</$reveal>
|
||||
@ -22,7 +22,7 @@ $(tv-heading-status-config-title)$/$(tv-heading-status-config-prefix)$/$(current
|
||||
<$link tag="$level$" class="tc-document-tiddler-link">
|
||||
<$transclude/>
|
||||
</$link>
|
||||
<$reveal type="nomatch" state=<<tv-heading-status-config-title>> text="open" default=<<tv-default-heading-state>>>
|
||||
<$reveal type="nomatch" state=<<tv-heading-status-config-title>> text="close" default=<<tv-default-heading-state>>>
|
||||
<$list filter="[list<currentTiddler>!has[draft.of]]" template="$:/plugins/tiddlywiki/text-slicer/templates/interactive/tiddler"/>
|
||||
</$reveal>
|
||||
</div>
|
||||
|
@ -3,10 +3,16 @@ tags: $:/tags/AboveStory
|
||||
|
||||
<$scrollable fallthrough="no" class="tc-document-preview-column">
|
||||
|
||||
<$vars
|
||||
tv-default-heading-state="open"
|
||||
>
|
||||
|
||||
<$list filter="[toc-type[document]!has[draft.of]sort[title]limit[1]]" emptyMessage={{$:/plugins/tiddlywiki/text-slicer/ui/preview-column/empty}}>
|
||||
|
||||
<$list filter="[toc-type[document]!has[draft.of]sort[title]butfirst[1]limit[1]]" emptyMessage={{$:/plugins/tiddlywiki/text-slicer/ui/preview-column/single}} template="$:/plugins/tiddlywiki/text-slicer/ui/preview-column/multiple"/>
|
||||
|
||||
</$list>
|
||||
|
||||
</$vars>
|
||||
|
||||
</$scrollable>
|
||||
|
@ -1,19 +1,37 @@
|
||||
title: $:/plugins/tiddlywiki/text-slicer/ui/view-template-segment
|
||||
tags: $:/tags/ViewTemplate
|
||||
|
||||
\define config-heading-status()
|
||||
$:/state/plugins/tiddlywiki/text-slicer/heading-status/$(currentTiddler)$
|
||||
\end
|
||||
|
||||
<$reveal type="nomatch" state=<<folded-state>> text="hide" retain="yes" animate="yes">
|
||||
|
||||
<$reveal type="nomatch" state="!!toc-type" text="">
|
||||
|
||||
<div class="tc-view-template-document-tiddler-wrapper">
|
||||
|
||||
<div class="tc-view-template-document-tiddler-heading">
|
||||
|
||||
//This tiddler is part of a document. The content as it appears in the document appears below.//
|
||||
<div class="tc-view-template-document-tiddler-heading-icon">
|
||||
|
||||
{{$:/core/images/file}}
|
||||
|
||||
</div>
|
||||
|
||||
Parents: <$list filter="[all[current]listed[]!is[system]]" emptyMessage="None">
|
||||
<$link><$view field="title"/></$link>
|
||||
</$list>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tc-view-template-document-tiddler">
|
||||
|
||||
<$vars tv-default-heading-state="closed" tv-heading-status-config-prefix="view-template">
|
||||
<$vars
|
||||
tv-default-heading-state="close"
|
||||
tv-heading-status-config-prefix="view-template"
|
||||
tv-heading-status-config-title=<<config-heading-status>>
|
||||
>
|
||||
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/text-slicer/templates/interactive/tiddler"/>
|
||||
|
||||
@ -21,6 +39,8 @@ tags: $:/tags/ViewTemplate
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</$reveal>
|
||||
|
||||
</$reveal>
|
||||
|
Loading…
Reference in New Issue
Block a user