mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-28 15:08:46 +00:00
Add tour chooser
This commit is contained in:
Jeremy Ruston
parent
c7cac0f7ea
commit
6088fd7d95
@ -36,6 +36,31 @@ text: longer description of the tour
|
||||
<$transclude $tiddler={{$:/state/tour/step}} $field="enter-actions"/>
|
||||
\end
|
||||
|
||||
\procedure tour-chooser(filter:"[all[shadows+tiddlers]tag[$:/tags/Tour]]")
|
||||
\define choose-tour-actions()
|
||||
<$transclude $variable="tour-start" title=<<currentTiddler>>/>
|
||||
\end choose-tour-actions
|
||||
<div class="tc-tour-panel-chooser-wrapper">
|
||||
<$list filter=<<filter>>>
|
||||
<div class="tc-tour-panel-chooser-item">
|
||||
<div class="tc-tour-panel-chooser-item-text">
|
||||
<$transclude $field="description">
|
||||
<$text text=<<currentTiddler>>/>
|
||||
</$transclude>
|
||||
</div>
|
||||
<$button class="tc-btn-invisible tc-tour-panel-chooser-start-button" actions=<<choose-tour-actions>>>
|
||||
start {{$:/core/images/chevron-right}}
|
||||
</$button>
|
||||
</div>
|
||||
</$list>
|
||||
</div>
|
||||
\end tour-chooser
|
||||
|
||||
\procedure tour-start(title)
|
||||
<$action-setfield $tiddler="$:/config/CurrentTour" text=<<title>>/>
|
||||
<<tour-restart>>
|
||||
\end
|
||||
|
||||
\procedure tour-restart()
|
||||
<$action-setfield $tiddler="$:/config/ShowTour" text="show"/>
|
||||
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag<tour-current-tag>first[]] }}}/>
|
||||
@ -52,3 +77,8 @@ text: longer description of the tour
|
||||
<<tour-initialise-current-tour-step>>
|
||||
\end
|
||||
|
||||
\procedure tour-display-current-tour()
|
||||
<$transclude $tiddler={{$:/config/CurrentTour}} $field="description">
|
||||
<$text text={{$:/config/CurrentTour}}/>
|
||||
</$transclude>
|
||||
\end
|
||||
@ -36,9 +36,64 @@ tags: $:/tags/Stylesheet
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls-icon {
|
||||
fill: <<colour muted-foreground>>;
|
||||
vertical-align: middle;
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-button {
|
||||
padding: 2px 8px;
|
||||
border-radius: 1em;
|
||||
color: <<color very-muted-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-button.tc-selected {
|
||||
color: <<colour background>>;
|
||||
fill: <<colour background>>;
|
||||
background: <<color primary>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-button:hover {
|
||||
background: <<colour muted-foreground>>;
|
||||
color: <<colour background>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-popup .tc-drop-down {
|
||||
font-size: 1em;
|
||||
color: <<colour very-muted-foreground>>;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.tc-tour-panel-chooser-item {
|
||||
border: 1px solid <<colour muted-foreground>>;
|
||||
background: <<colour background>>;
|
||||
color: <<colour foreground>>;
|
||||
padding: 4px 4px 4px 8px;
|
||||
margin: 12px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 3px 3px 5px <<colour muted-foreground>>;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.tc-tour-panel-chooser-item .tc-tour-panel-chooser-start-button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 4px;
|
||||
font-size: 0.7em;
|
||||
vertical-align: baseline;
|
||||
border-radius: 1em;
|
||||
background: <<colour download-background>>;
|
||||
color: <<colour background>>;
|
||||
fill: <<colour background>>;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tc-tour-panel-chooser-wrapper button:hover {
|
||||
background: <<colour primary>>;
|
||||
color: <<colour background>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-fullscreen .tc-tour-panel-controls {
|
||||
|
||||
@ -17,15 +17,28 @@ next
|
||||
</div>
|
||||
\end
|
||||
|
||||
|
||||
<$list filter="[{$:/config/ShowTour}!is[blank]else[show]match[show]]" variable="ignore">
|
||||
<div class={{{ tc-tour-panel [{$:/state/tour/step}get[display-mode]else[normal]addprefix[tc-tour-panel-]] +[join[ ]] }}}>
|
||||
<$image class="tc-tour-panel-banner-image" source={{{ [{$:/config/CurrentTour}get[logo]] }}}/>
|
||||
<div class="tc-tour-panel-inner">
|
||||
<div class="tc-tiddler-controls tc-tour-panel-controls">
|
||||
<$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> <span class="tc-tour-panel-controls-icon">{{$:/plugins/tiddlywiki/tour/tour-button-icon}}</span> ''Tour'':
|
||||
<$transclude $tiddler={{$:/config/CurrentTour}} $field="description">
|
||||
<$text text={{$:/config/CurrentTour}}/>
|
||||
</$transclude>
|
||||
<$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button>
|
||||
<div class="tc-tour-panel-list-wrapper">
|
||||
<$button popup=<<qualify "$:/state/popup/tour-dropdown">> class="tc-btn-invisible tc-tour-panel-list-button" selectedClass="tc-selected">
|
||||
''Tour'': <<tour-display-current-tour>>
|
||||
</$button>
|
||||
<$reveal state=<<qualify "$:/state/popup/tour-dropdown">> type="popup" position="belowleft" animate="yes">
|
||||
<div class="tc-drop-down">
|
||||
<p>
|
||||
Choose a tour:
|
||||
</p>
|
||||
<p>
|
||||
<<tour-chooser>>
|
||||
</p>
|
||||
</div>
|
||||
</$reveal>
|
||||
</div>
|
||||
</div>
|
||||
<$transclude tiddler={{$:/state/tour/step}} mode="block"/>
|
||||
<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore">
|
||||
|
||||
@ -10,3 +10,7 @@ title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/finished
|
||||
<$confetti delay=500/>
|
||||
|
||||
You have completed the tour.
|
||||
|
||||
You can choose to take another tour:
|
||||
|
||||
<<tour-chooser filter:"[all[shadows+tiddlers]tag[$:/tags/Tour]] -[[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki]]">>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user