From cd2b375d80875e1cd7fc12804143fe2f5962d628 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Fri, 13 Oct 2023 10:18:01 +0100 Subject: [PATCH] Improve styling of task call-to-action and nav buttons --- plugins/tiddlywiki/tour/globals.tid | 8 +++- plugins/tiddlywiki/tour/styles.tid | 21 +++++++++ plugins/tiddlywiki/tour/tour-panel.tid | 43 +++++++++++++------ .../steps/close-control-panel.tid | 2 +- .../steps/closing-tiddlers.tid | 2 +- .../steps/create-tiddler.tid | 2 +- .../steps/links.tid | 2 +- .../steps/open-control-panel.tid | 2 +- .../steps/recent.tid | 2 +- .../steps/search.tid | 2 +- .../introduction-to-tiddlywiki/steps/tags.tid | 2 +- 11 files changed, 66 insertions(+), 22 deletions(-) diff --git a/plugins/tiddlywiki/tour/globals.tid b/plugins/tiddlywiki/tour/globals.tid index 0b56304d2..1de164527 100644 --- a/plugins/tiddlywiki/tour/globals.tid +++ b/plugins/tiddlywiki/tour/globals.tid @@ -87,4 +87,10 @@ These config tiddlers may be changed directly as required: <$transclude $tiddler={{$:/config/CurrentTour}} $field="description"> <$text text={{$:/config/CurrentTour}}/> -\end \ No newline at end of file +\end + +\procedure tour-task(text) +
+{{$:/core/images/help}} <$transclude $variable="text" $mode="inline"/> +
+\end diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid index 9f6f665e9..60056d415 100644 --- a/plugins/tiddlywiki/tour/styles.tid +++ b/plugins/tiddlywiki/tour/styles.tid @@ -22,9 +22,15 @@ tags: $:/tags/Stylesheet } .tc-tour-panel-navigation .tc-btn-big-green { + border-radius: 0.25em; margin: 0 1em 0 0; } +.tc-tour-panel-navigation .tc-btn-big-green:hover { + color: <>; + background: <>; +} + .tc-tour-panel-fullscreen { top: 0; right: 0; @@ -130,6 +136,21 @@ tags: $:/tags/Stylesheet line-height: 1.1; } +.tc-tour-task { + background: <>; + color: <>; + padding: 0.5em; + border-radius: 1em; +} + +.tc-tour-task svg { + fill: <>; + vertical-align: middle; + width: 1.2em; + height: 1.2em; + margin-right: 0.5em; +} + .tc-tour-settings-tour-details, .tc-tour-settings-tour-step-details { width: 100%; diff --git a/plugins/tiddlywiki/tour/tour-panel.tid b/plugins/tiddlywiki/tour/tour-panel.tid index f8a35b6cb..6a1317f23 100644 --- a/plugins/tiddlywiki/tour/tour-panel.tid +++ b/plugins/tiddlywiki/tour/tour-panel.tid @@ -29,6 +29,33 @@ tags: $:/tags/PageTemplate \end +\procedure tour-step-no-condition() +<$transclude tiddler=<> mode="block"/> +<> +\end tour-step-no-condition + +\procedure tour-step-condition-not-satisfied() +<$transclude tiddler=<> mode="block"/> +<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore"> +
+ <$button class="tc-btn-big-green" style="background-color: red;"> + <$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 + +
+ +\end tour-step-condition-not-satisfied + +\procedure tour-step-condition-satisfied() +<$let tour-task=""> + <$transclude tiddler=<> mode="block"/> + +<$confetti/> +

+ Congratulations, you may proceed +

+<> +\end tour-step-condition-satisfied <$list filter="[{$:/config/ShowTour}!is[blank]else[show]match[show]]" variable="ignore">
@@ -60,25 +87,15 @@ tags: $:/tags/PageTemplate <$list filter="[!has[condition]]" variable="ignore"> - <$transclude tiddler=<> mode="block"/> - <> + <> <$list filter="[has[condition]]" variable="ignore"> - <$transclude tiddler=<> mode="block"/> - <$list filter={{{ [get[condition]] }}} limit="1" variable="ignore"> - <$confetti/> - Congratulations, you may proceed - <> + <$list filter={{{ [get[condition]] }}} limit="1" variable="ignore" emptyMessage=<>> + <> - <$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 - -
diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid index b70f6ec95..e702175e1 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid @@ -4,4 +4,4 @@ tags: $:/tags/Tour/IntroductionToTiddlyWiki selector: .tc-story-river div[data-tiddler-title='$:/ControlPanel'] .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fclose condition: [[$:/StoryList]!contains[$:/ControlPanel]] -Your task now is to close the control panel. +<> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid index 4026675e9..031ffcda0 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid @@ -9,7 +9,7 @@ condition: [list[$:/temp/Tour/DemoStoryList]count[]match[0]] In the top right corner of each tiddler there is a button marked {{$:/core/images/close-button|0.65em}} that can be used to close them when you are finished with them. Closing a tiddler does not delete it or alter it in any way. It just removes it from the display. -Try closing both these tiddlers. +<> <$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below"> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid index 22def452f..26e4c76cd 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid @@ -6,4 +6,4 @@ selector-fallback-1: .tc-story-river div[data-tiddler-title='Draft of \'New Tidd selector-fallback-2: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fnew-tiddler condition: [list[$:/StoryList]match[Congratulations]] -Your task is to create and open a tiddler titled "Congratulations" +<> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid index 622a2829f..a4d8bde1e 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid @@ -7,7 +7,7 @@ condition: [[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/intr Links allow you to decide if you want more information on a particular area or term as you go. -Try clicking the link to "Saturn". +<> <$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below"> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid index 78f1889d2..51f4663d3 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid @@ -4,4 +4,4 @@ tags: $:/tags/Tour/IntroductionToTiddlyWiki selector: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fcontrol-panel condition: [[$:/StoryList]contains[$:/ControlPanel]] -Your task is to open the control panel by clicking the icon that looks like a cog in the sidebar. +<> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid index a9670f079..56c72968c 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid @@ -6,4 +6,4 @@ selector-fallback-1: .tc-sidebar-tabs-main button:nth-child(3) condition: [list[$:/StoryList]match] condition-var: [all[tiddlers]!is[system]!sort[modified]] -Your task is to use the "Recent" tab of the sidebar to open the most recently editted tiddler. +<> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid index 0843397c0..68791eb15 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid @@ -4,4 +4,4 @@ tags: $:/tags/Tour/IntroductionToTiddlyWiki selector: .tc-sidebar-search .tc-popup-handle condition: [{$:/temp/search}match[help]] -Your task is to search for the phrase "help". +<> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid index 59ae5d359..24a25b732 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid @@ -12,7 +12,7 @@ Click on a tag to display a menu with: * A link to the tiddler with the same title as the tag * A list of links to the other tiddlers with the same tag -Use the tag dropdown to open the tiddler Saturn. +<> <$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">