mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-08 02:49:56 +00:00
Add a settings pane giving a birds eye view of a tour
This commit is contained in:
Jeremy Ruston
parent
1c6fba6108
commit
b1eece2a93
@ -2,6 +2,6 @@
|
||||
"title": "$:/plugins/tiddlywiki/tour",
|
||||
"name": "Tour",
|
||||
"description": "A tour of TiddlyWiki",
|
||||
"list": "readme",
|
||||
"list": "readme settings",
|
||||
"dependents": ["$:/plugins/tiddlywiki/confetti","$:/plugins/tiddlywiki/dynannotate"]
|
||||
}
|
||||
|
||||
134
plugins/tiddlywiki/tour/settings.tid
Normal file
134
plugins/tiddlywiki/tour/settings.tid
Normal file
@ -0,0 +1,134 @@
|
||||
title: $:/plugins/tiddlywiki/tour/settings
|
||||
|
||||
\procedure button-expand-collapse-all(caption,text)
|
||||
<$button>
|
||||
<$list filter="[all[shadows+tiddlers]tag<currentTourTag>]" variable="currentStep">
|
||||
<$let
|
||||
collapseState={{{ [[$:/state/Tour/Settings/Tour/Visibility/]addsuffix<currentTour>addsuffix<currentStep>] }}}
|
||||
>
|
||||
<$action-setfield $tiddler=<<collapseState>> text=<<text>>/>
|
||||
</$let>
|
||||
</$list>
|
||||
<$text text=<<caption>>/>
|
||||
</$button>
|
||||
\end
|
||||
|
||||
\procedure display-tour-step-field-text(fieldName,fieldCaption)
|
||||
<$list filter="[<currentStep>has<fieldName>]" variable="ignore">
|
||||
<tr>
|
||||
<th>
|
||||
<$text text=<<fieldCaption>>/>
|
||||
</th>
|
||||
<td>
|
||||
<$text text={{{ [<currentStep>get<fieldName>] }}}/>
|
||||
</td>
|
||||
</tr>
|
||||
</$list>
|
||||
\end
|
||||
|
||||
<$let
|
||||
stateCurrentTour=<<qualify "$:/state/Tour/Settings/Current">>
|
||||
defaultTour={{{ [{$:/config/CurrentTour}] :else[all[shadows+tiddlers]tag[$:/tags/Tour]] }}}
|
||||
>
|
||||
|
||||
! Tour Overview
|
||||
|
||||
Select a tour:
|
||||
<$select tiddler=<<stateCurrentTour>> default=<<defaultTour>>>
|
||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Tour]]">
|
||||
<option value=<<currentTiddler>>>
|
||||
<$transclude $field="description">
|
||||
<$text text=<<currentTiddler>>/>
|
||||
</$transclude>
|
||||
</option>
|
||||
</$list>
|
||||
</$select>
|
||||
|
||||
<$let
|
||||
currentTour={{{ [<stateCurrentTour>get[text]] :else[<defaultTour>] }}}
|
||||
currentTourTag={{{ [<currentTour>get[tour-tag]] }}}
|
||||
>
|
||||
<table class="tc-tour-settings-tour-details">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
Tour title
|
||||
</th>
|
||||
<td>
|
||||
<$link to=<<currentTour>>><$text text=<<currentTour>>/></$link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Tour description
|
||||
</th>
|
||||
<td>
|
||||
<div class="tc-tour-settings-tour-details-description">
|
||||
<$transclude $tiddler=<<currentTour>>>
|
||||
(No description available)
|
||||
</$transclude>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Tour logo
|
||||
</th>
|
||||
<td>
|
||||
<div class="tc-tour-settings-tour-details-logo">
|
||||
<$image source={{{ [<currentTour>get[logo]] }}}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Tour step tag
|
||||
</th>
|
||||
<td>
|
||||
<$transclude $variable="tag" tag=<<currentTourTag>>/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
<<button-expand-collapse-all "Expand All" "show">>
|
||||
<<button-expand-collapse-all "Collapse All" "hide">>
|
||||
</p>
|
||||
<$list filter="[all[shadows+tiddlers]tag<currentTourTag>]" variable="currentStep" counter="stepNumber">
|
||||
<$let
|
||||
collapseState={{{ [[$:/state/Tour/Settings/Tour/Visibility/]addsuffix<currentTour>addsuffix<currentStep>] }}}
|
||||
>
|
||||
<div class="tc-tour-settings-tour-step">
|
||||
<$button class="tc-btn-invisible tc-tour-settings-tour-step-heading">
|
||||
<$action-setfield $tiddler=<<collapseState>> text={{{ [<collapseState>get[text]else[hide]match[show]then[hide]else[show]] }}}/>
|
||||
<$list filter="[<collapseState>get[text]else[hide]match[show]]" variable="ignore" emptyMessage="{{$:/core/images/right-arrow}}">
|
||||
{{$:/core/images/down-arrow}}
|
||||
</$list>
|
||||
<span class="tc-tour-settings-tour-step-heading-step-number">
|
||||
<$text text=<<stepNumber>>/>
|
||||
</span>
|
||||
<$text text=<<currentStep>>/>
|
||||
</$button>
|
||||
<$reveal state=<<collapseState>> text="show" type="match" default="hide" animate="yes">
|
||||
<table class="tc-tour-settings-tour-step-details">
|
||||
<tbody>
|
||||
<<display-tour-step-field-text "title" "Title">>
|
||||
<<display-tour-step-field-text "condition" "Condition">>
|
||||
<<display-tour-step-field-text "condition-var" "Condition Variable">>
|
||||
<<display-tour-step-field-text "display-mode" "Display Mode">>
|
||||
<<display-tour-step-field-text "enter-actions" "Enter Actions">>
|
||||
<<display-tour-step-field-text "selector" "Hint Selector">>
|
||||
<<display-tour-step-field-text "selector-fallback-1" "Hint Selector Fallback 1">>
|
||||
<<display-tour-step-field-text "selector-fallback-2" "Hint Selector Fallback 2">>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tc-tour-settings-tour-step-body">
|
||||
<$transclude $tiddler=<<currentStep>> $mode="block"/>
|
||||
</div>
|
||||
</$reveal>
|
||||
</div>
|
||||
</$let>
|
||||
</$list>
|
||||
</$let>
|
||||
|
||||
</$let>
|
||||
@ -133,3 +133,61 @@ tags: $:/tags/Stylesheet
|
||||
font-size: 1.5em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details,
|
||||
.tc-tour-settings-tour-step-details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details th,
|
||||
.tc-tour-settings-tour-step-details th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
font-weight: normal;
|
||||
width:10em;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details td,
|
||||
.tc-tour-settings-tour-step-details td {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details-description {
|
||||
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details-logo img {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step {
|
||||
border: 1px solid <<colour foreground>>;
|
||||
}
|
||||
|
||||
button.tc-tour-settings-tour-step-heading {
|
||||
background: <<colour muted-foreground>>;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0.25em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-heading-step-number {
|
||||
font-weight: bold;
|
||||
background: <<colour foreground>>;
|
||||
color: <<colour background>>;
|
||||
border-radius: 1em;
|
||||
font-size: 0.9em;
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-details {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-body {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished
|
||||
tags: $:/tags/Tour/IntroductionToTiddlyWiki
|
||||
|
||||
! Congratulations
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
title: $:/tags/Tour/IntroductionToTiddlyWiki
|
||||
list: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/welcome $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/links $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler
|
||||
list: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/welcome $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/links $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished
|
||||
|
||||
Loading…
Reference in New Issue
Block a user