From 6088fd7d95da74846494c7698a35a071b4af9a30 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Thu, 21 Sep 2023 09:59:28 +0100 Subject: [PATCH] Add tour chooser --- plugins/tiddlywiki/tour/globals.tid | 30 +++++++++ plugins/tiddlywiki/tour/styles.tid | 61 ++++++++++++++++++- plugins/tiddlywiki/tour/tour-panel.tid | 49 +++++++++------ .../introduction-to-tiddlywiki/finished.tid | 4 ++ 4 files changed, 123 insertions(+), 21 deletions(-) diff --git a/plugins/tiddlywiki/tour/globals.tid b/plugins/tiddlywiki/tour/globals.tid index 190d79ddc..64308f84a 100644 --- a/plugins/tiddlywiki/tour/globals.tid +++ b/plugins/tiddlywiki/tour/globals.tid @@ -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=<>/> +\end choose-tour-actions +
+ <$list filter=<>> +
+
+ <$transclude $field="description"> + <$text text=<>/> + +
+ <$button class="tc-btn-invisible tc-tour-panel-chooser-start-button" actions=<>> + start {{$:/core/images/chevron-right}} + +
+ +
+\end tour-chooser + +\procedure tour-start(title) +<$action-setfield $tiddler="$:/config/CurrentTour" text=<>/> +<<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 \ No newline at end of file diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid index 9f0645926..447ddf2c2 100644 --- a/plugins/tiddlywiki/tour/styles.tid +++ b/plugins/tiddlywiki/tour/styles.tid @@ -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 { diff --git a/plugins/tiddlywiki/tour/tour-panel.tid b/plugins/tiddlywiki/tour/tour-panel.tid index 501e84dbf..d07007a63 100644 --- a/plugins/tiddlywiki/tour/tour-panel.tid +++ b/plugins/tiddlywiki/tour/tour-panel.tid @@ -17,23 +17,36 @@ 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> -</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> + <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> + <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"> + <$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> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/finished.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/finished.tid index 83ed5e71e..abff6152d 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/finished.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/finished.tid @@ -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]]">>