Add Switcher modal (#5089)

* Alternative switcher using a parameter via tm-show-switcher

* Add CSS class for centered modals

* Changed keyboardshortcut and removed transition CSS

* Resolved wording issues

core/language/en-GB/Misc.multids

@@ -40,6 +40,7 @@ Error/XMLHttpRequest: XMLHttpRequest error code
 InternalJavaScriptError/Title: Internal JavaScript Error
 InternalJavaScriptError/Hint: Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser
 InvalidFieldName: Illegal characters in field name "<$text text=<<fieldName>>/>". Fields can only contain lowercase letters, digits and the characters underscore (`_`), hyphen (`-`) and period (`.`)
+LayoutSwitcher/Description: Open the layout switcher
 LazyLoadingWarning: <p>Trying to load external content from ''<$text text={{!!_canonical_uri}}/>''</p><p>If this message doesn't disappear, either the tiddler content type doesn't match the type of the external content, or you may be using a browser that doesn't support external content for wikis loaded as standalone files. See https://tiddlywiki.com/#ExternalText</p>
 LoginToTiddlySpace: Login to TiddlySpace
 Manager/Controls/FilterByTag/None: (none)
@@ -63,6 +64,8 @@ MissingTiddler/Hint: Missing tiddler "<$text text=<<currentTiddler>>/>" -- click
 No: No
 OfficialPluginLibrary: Official ~TiddlyWiki Plugin Library
 OfficialPluginLibrary/Hint: The official ~TiddlyWiki plugin library at tiddlywiki.com. Plugins, themes and language packs are maintained by the core team.
+PageTemplate/Description: the default ~TiddlyWiki layout
+PageTemplate/Name: Default ~PageTemplate
 PluginReloadWarning: Please save {{$:/core/ui/Buttons/save-wiki}} and reload {{$:/core/ui/Buttons/refresh}} to allow changes to ~JavaScript plugins to take effect
 RecentChanges/DateFormat: DDth MMM YYYY
 Shortcuts/Input/AdvancedSearch/Hint: Open the ~AdvancedSearch panel from within the sidebar search field
@@ -74,6 +77,10 @@ Shortcuts/Input/Tab-Left/Hint: Select the previous Tab
 Shortcuts/Input/Tab-Right/Hint: Select the next Tab
 Shortcuts/Input/Up/Hint: Select the previous item
 Shortcuts/SidebarLayout/Hint: Change the sidebar layout
+Switcher/Subtitle/theme: Switch Theme
+Switcher/Subtitle/layout: Switch Layout
+Switcher/Subtitle/language: Switch Language
+Switcher/Subtitle/palette: Switch Palette
 SystemTiddler/Tooltip: This is a system tiddler
 SystemTiddlers/Include/Prompt: Include system tiddlers
 TagManager/Colour/Heading: Colour

core/modules/startup/rootwidget.js

@@ -25,6 +25,9 @@ exports.startup = function() {
 	$tw.rootWidget.addEventListener("tm-modal",function(event) {
 		$tw.modal.display(event.param,{variables: event.paramObject, event: event});
 	});
+	$tw.rootWidget.addEventListener("tm-show-switcher",function(event) {
+		$tw.modal.display("$:/core/ui/SwitcherModal",{variables: event.paramObject, event: event});
+	});	
 	// Install the notification  mechanism
 	$tw.notifier = new $tw.utils.Notifier($tw.wiki);
 	$tw.rootWidget.addEventListener("tm-notify",function(event) {

core/ui/KeyboardShortcuts/switcher.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/KeyboardShortcuts/switcher
+tags: $:/tags/KeyboardShortcut
+key: ((layout-switcher))
+
+<$action-sendmessage $message="tm-show-switcher" switch="layout"/>

core/ui/LayoutSwitcher.tid

@@ -0,0 +1,16 @@
+title: $:/snippets/LayoutSwitcher
+tags: $:/tags/ControlPanel/Appearance
+
+<$linkcatcher to="$:/layout">
+<div class="tc-chooser">
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/Layout]] [[$:/core/ui/PageTemplate]] +[sort[name]]">
+<$list filter="[{$:/layout}!has[text]]" variable="ignore" emptyMessage="""
+<$set name="cls" filter="[all[current]field:title{$:/layout}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>><$link to={{!!title}}>''<$transclude field="name"/>'' - <$transclude field="description"/></$link></div>
+</$set>
+""">
+<$set name="cls" filter="[all[current]field:title[$:/core/ui/PageTemplate]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>><$link to={{!!title}}>''<$transclude field="name"/>'' - <$transclude field="description"/></$link></div>
+</$set>
+</$list>
+</$list>
+</div>
+</$linkcatcher>

core/ui/PageTemplate.tid

@@ -1,4 +1,6 @@
 title: $:/core/ui/PageTemplate
+name: {{$:/language/PageTemplate/Name}}
+description: {{$:/language/PageTemplate/Description}}
 
 \whitespace trim
 \define containerClasses()

core/ui/SwitcherModal.tid

@@ -0,0 +1,11 @@
+title: $:/core/ui/SwitcherModal
+subtitle: <$text text={{{[<switch>lookup[$:/language/Switcher/Subtitle/]]}}}/>
+class: tc-modal-centered
+
+<$tiddler tiddler={{{[<switch>lookup[$:/config/SwitcherTargets/]]}}}>
+
+
+<$transclude/>
+
+
+</$tiddler>

core/wiki/config/ShortcutInfo.multids

@@ -22,6 +22,7 @@ input-tab-left: {{$:/language/Shortcuts/Input/Tab-Left/Hint}}
 input-tab-right: {{$:/language/Shortcuts/Input/Tab-Right/Hint}}
 input-up: {{$:/language/Shortcuts/Input/Up/Hint}}
 italic: {{$:/language/Buttons/Italic/Hint}}
+layout-switcher: {{$:/language/LayoutSwitcher/Description}}
 link: {{$:/language/Buttons/Link/Hint}}
 linkify: {{$:/language/Buttons/Linkify/Hint}}
 list-bullet: {{$:/language/Buttons/ListBullet/Hint}}

core/wiki/config/SwitcherTargets.multids

@@ -0,0 +1,6 @@
+title: $:/config/SwitcherTargets/
+
+layout: $:/snippets/LayoutSwitcher
+language: $:/snippets/languageswitcher
+palette: $:/core/ui/ControlPanel/Palette
+theme: $:/core/ui/ControlPanel/Theme

core/wiki/config/shortcuts/shortcuts.multids

@@ -21,6 +21,7 @@ input-down: Down
 input-tab-left: alt-Left
 input-tab-right: alt-Right
 input-up: Up
+layout-switcher: ctrl-shift-L
 link: ctrl-L
 linkify: alt-shift-L
 list-bullet: ctrl-shift-L

themes/tiddlywiki/vanilla/base.tid

@@ -1840,6 +1840,17 @@ html body.tc-body.tc-single-tiddler-window {
 	border-top: 1px solid <<colour modal-footer-border>>;
 }
 
+
+/*
+** Centered modals
+*/
+.tc-modal-centered .tc-modal {
+	width: auto;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) !important;
+}
+
 /*
 ** Notifications
 */