mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-01-26 04:43:42 +00:00
Code Issues Releases Wiki Activity

Improve styling of task call-to-action and nav buttons

Browse Source
This commit is contained in:
Jeremy Ruston
2023-10-13 10:18:01 +01:00
parent 9eac359a5d
commit cd2b375d80
11 changed files with 66 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/tiddlywiki/tour/globals.tid
View File

@@ -87,4 +87,10 @@ These config tiddlers may be changed directly as required:
<$transclude $tiddler={{$:/config/CurrentTour}} $field="description">
<$text text={{$:/config/CurrentTour}}/>
</$transclude>
\end
\end
\procedure tour-task(text)
<div class="tc-tour-task">
{{$:/core/images/help}} <$transclude $variable="text" $mode="inline"/>
</div>
\end

21
plugins/tiddlywiki/tour/styles.tid
View File

@@ -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: <<colour background>>;
background: <<colour foreground>>;
}
.tc-tour-panel-fullscreen {
top: 0;
right: 0;
@@ -130,6 +136,21 @@ tags: $:/tags/Stylesheet
line-height: 1.1;
}
.tc-tour-task {
background: <<colour download-background>>;
color: <<colour download-foreground>>;
padding: 0.5em;
border-radius: 1em;
}
.tc-tour-task svg {
fill: <<colour download-foreground>>;
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%;

43
plugins/tiddlywiki/tour/tour-panel.tid
View File

@@ -29,6 +29,33 @@ tags: $:/tags/PageTemplate
</div>
\end
\procedure tour-step-no-condition()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<<tour-buttons>>
\end tour-step-no-condition
\procedure tour-step-condition-not-satisfied()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore">
<div class="tc-tour-panel-navigation">
<$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
</$button>
</div>
</$list>
\end tour-step-condition-not-satisfied
\procedure tour-step-condition-satisfied()
<$let tour-task="">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
</$let>
<$confetti/>
<p>
Congratulations, you may proceed
</p>
<<tour-buttons>>
\end tour-step-condition-satisfied
<$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[ ]] }}}>
@@ -60,25 +87,15 @@ tags: $:/tags/PageTemplate
</$list>
<!-- Handle steps without a condition -->
<$list filter="[<currentTourStep>!has[condition]]" variable="ignore">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<<tour-buttons>>
<<tour-step-no-condition>>
</$list>
<!-- Handle steps that have a condition -->
<$list filter="[<currentTourStep>has[condition]]" variable="ignore">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<$list filter={{{ [<currentTourStep>get[condition]] }}} limit="1" variable="ignore">
<$confetti/>
Congratulations, you may proceed
<<tour-buttons>>
<$list filter={{{ [<currentTourStep>get[condition]] }}} limit="1" variable="ignore" emptyMessage=<<tour-step-condition-not-satisfied>>>
<<tour-step-condition-satisfied>>
</$list>
</$list>
</$let>
<$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>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid
View File

@@ -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.
<<tour-task "Your task now is to close the control panel">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid
View File

@@ -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.
<<tour-task "Try closing both these tiddlers">>
<$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid
View File

@@ -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"
<<tour-task "Your task is to create and open a tiddler titled 'Congratulations'">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid
View File

@@ -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".
<<tour-task "Click the blue link to open the tiddler 'Saturn'">>
<$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid
View File

@@ -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.
<<tour-task "Your task is to open the control panel by clicking the icon that looks like a cog in the sidebar.">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid
View File

@@ -6,4 +6,4 @@ selector-fallback-1: .tc-sidebar-tabs-main button:nth-child(3)
condition: [list[$:/StoryList]match<condition-var>]
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.
<<tour-task "Your task is to use the "Recent" tab of the sidebar to open the most recently editted tiddler.">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid
View File

@@ -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".
<<tour-task "Your task is to search for the phrase 'help'">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid
View File

@@ -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.
<<tour-task "Use the tag dropdown to open the tiddler Saturn">>
<$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">