mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-28 15:08:46 +00:00
Add tour chooser
This commit is contained in:
parent
c7cac0f7ea
commit
6088fd7d95
@ -36,6 +36,31 @@ text: longer description of the tour
|
|||||||
<$transclude $tiddler={{$:/state/tour/step}} $field="enter-actions"/>
|
<$transclude $tiddler={{$:/state/tour/step}} $field="enter-actions"/>
|
||||||
\end
|
\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()
|
\procedure tour-restart()
|
||||||
<$action-setfield $tiddler="$:/config/ShowTour" text="show"/>
|
<$action-setfield $tiddler="$:/config/ShowTour" text="show"/>
|
||||||
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag<tour-current-tag>first[]] }}}/>
|
<$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>>
|
<<tour-initialise-current-tour-step>>
|
||||||
\end
|
\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;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-tour-panel-controls-icon {
|
.tc-tour-panel-controls .tc-tour-panel-list-button {
|
||||||
fill: <<colour muted-foreground>>;
|
padding: 2px 8px;
|
||||||
vertical-align: middle;
|
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 {
|
.tc-tour-panel-fullscreen .tc-tour-panel-controls {
|
||||||
|
@ -17,23 +17,36 @@ next
|
|||||||
</div>
|
</div>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
|
|
||||||
<$list filter="[{$:/config/ShowTour}!is[blank]else[show]match[show]]" variable="ignore">
|
<$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[ ]] }}}>
|
<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]] }}}/>
|
<$image class="tc-tour-panel-banner-image" source={{{ [{$:/config/CurrentTour}get[logo]] }}}/>
|
||||||
<div class="tc-tour-panel-inner">
|
<div class="tc-tour-panel-inner">
|
||||||
<div class="tc-tiddler-controls tc-tour-panel-controls">
|
<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'':
|
<$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button>
|
||||||
<$transclude $tiddler={{$:/config/CurrentTour}} $field="description">
|
<div class="tc-tour-panel-list-wrapper">
|
||||||
<$text text={{$:/config/CurrentTour}}/>
|
<$button popup=<<qualify "$:/state/popup/tour-dropdown">> class="tc-btn-invisible tc-tour-panel-list-button" selectedClass="tc-selected">
|
||||||
</$transclude>
|
''Tour'': <<tour-display-current-tour>>
|
||||||
</div>
|
</$button>
|
||||||
<$transclude tiddler={{$:/state/tour/step}} mode="block"/>
|
<$reveal state=<<qualify "$:/state/popup/tour-dropdown">> type="popup" position="belowleft" animate="yes">
|
||||||
<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore">
|
<div class="tc-drop-down">
|
||||||
<$button class="tc-btn-big-green" style="background-color: green;">
|
<p>
|
||||||
<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[selector-fallback-2]] }}}/>
|
Choose a tour:
|
||||||
show me a hint
|
</p>
|
||||||
</$button>
|
<p>
|
||||||
</$list>
|
<<tour-chooser>>
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</$reveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<$transclude tiddler={{$:/state/tour/step}} mode="block"/>
|
||||||
|
<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore">
|
||||||
|
<$button class="tc-btn-big-green" style="background-color: green;">
|
||||||
|
<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[selector-fallback-2]] }}}/>
|
||||||
|
show me a hint
|
||||||
|
</$button>
|
||||||
|
</$list>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</$list>
|
</$list>
|
||||||
|
@ -10,3 +10,7 @@ title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/finished
|
|||||||
<$confetti delay=500/>
|
<$confetti delay=500/>
|
||||||
|
|
||||||
You have completed the tour.
|
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