Improve styling and reusability of palette, language, and theme switchers (#1954)

allows to override styles more easily via new class tc-chosen

----

updated all of storyview, theme, palette, language

» both in ControlPanel as well as PageControls
» removed "current ..." form switchers as it's redundant
» streamlined toolbar buttons in ControlPanel, especially less spacing

----

fixed dropdown hover colour override

if I wouldn't then it would go blank owed to default drop-down styles

----

polished styles

» chosen items now more emphasized while curspor not indicating a link
» removed underline when hovering, used highlighted border colours instead

----

use snippets languageswitcher for pagecontrols button, after all

----

wrap all switchers in tc-chooser

----

apply big font only to buttons, not reveals in pagecontrols

----

moved language switcher wrapper class to snippet

improved language switcher image alignment

----

make tiddler and ControlPanel view behave the same. add generic tc-check-list setting. add generic input type checklist, vertical alignment.

now using css rem to address drop-downs for pagecontrols

thanks @pmario

removed css artefacts in vanilla/base from before merging @pmario's PR

with comments being baked-in I don't think we want these in the code

css simplification for .tc-chosen and tc-chooser-item

core/ui/PageControls/language.tid

@@ -21,34 +21,7 @@ $(languagePluginTitle)$/icon
 </$button>
 </span>
 <$reveal state=<<qualify "$:/state/popup/language">> type="popup" position="below" animate="yes">
-<div class="tc-drop-down tc-drop-down-language-chooser">
-<$linkcatcher to="$:/language">
-<$list filter="[[$:/languages/en-GB]] [plugin-type[language]sort[description]]">
-<$link>
-<span class="tc-drop-down-bullet">
-<$reveal type="match" state="$:/language" text=<<currentTiddler>>>
-&bull;
-</$reveal>
-<$reveal type="nomatch" state="$:/language" text=<<currentTiddler>>>
-&nbsp;
-</$reveal>
-</span>
-<span class="tc-image-button">
-<$set name="languagePluginTitle" value=<<currentTiddler>>>
-<$transclude subtiddler=<<flag-title>>>
-<$list filter="[all[current]field:title[$:/languages/en-GB]]">
-<$transclude tiddler="$:/languages/en-GB/icon"/>
-</$list>
-</$transclude>
-</$set>
-</span>
-<$view field="description">
-<$view field="name">
-<$view field="title"/>
-</$view>
-</$view>
-</$link>
-</$list>
-</$linkcatcher>
+<div class="tc-drop-down">
+{{$:/snippets/languageswitcher}}
 </div>
 </$reveal>

core/ui/PageControls/storyview.tid

@@ -20,20 +20,6 @@ $:/core/images/storyview-$(storyview)$
 </span>
 <$reveal state=<<qualify "$:/state/popup/storyview">> type="popup" position="below" animate="yes">
 <div class="tc-drop-down">
-<$linkcatcher to="$:/view">
-<$list filter="[storyviews[]]" variable="storyview">
-<$link to=<<storyview>>>
-<span class="tc-drop-down-bullet">
-<$reveal type="match" state="$:/view" text=<<storyview>>>
-&bull;
-</$reveal>
-<$reveal type="nomatch" state="$:/view" text=<<storyview>>>
-&nbsp;
-</$reveal>
-</span>
-<$transclude tiddler=<<icon>>/>
-<$text text=<<storyview>>/></$link>
-</$list>
-</$linkcatcher>
+{{$:/snippets/viewswitcher}}
 </div>
 </$reveal>

core/ui/PageControls/theme.tid

@@ -16,19 +16,7 @@ description: {{$:/language/Buttons/Theme/Hint}}
 <$reveal state=<<qualify "$:/state/popup/theme">> type="popup" position="below" animate="yes">
 <div class="tc-drop-down">
 <$linkcatcher to="$:/theme">
-<$list filter="[plugin-type[theme]sort[title]]" variable="themeTitle">
-<$link to=<<themeTitle>>>
-<span class="tc-drop-down-bullet">
-<$reveal type="match" state="$:/theme" text=<<themeTitle>>>
-&bull;
-</$reveal>
-<$reveal type="nomatch" state="$:/theme" text=<<themeTitle>>>
-&nbsp;
-</$reveal>
-</span>
-<$view tiddler=<<themeTitle>> field="name"/>
-</$link>
-</$list>
+{{$:/snippets/themeswitcher}}
 </$linkcatcher>
 </div>
 </$reveal>

core/wiki/currpalettepreview.tid

@@ -3,17 +3,16 @@ title: $:/snippets/currpalettepreview
 \define swatchStyle()
 background-color: $(swatchColour)$;
 \end
-\define swatch(colour)
-<$set name="swatchColour" value={{##$colour$}}>
-<div class="tc-swatch" style=<<swatchStyle>>/>
-</$set>
+\define swatch()
+<$set name="swatchColour" value={{##$(colour)$}}
+><div class="tc-swatch" style=<<swatchStyle>> title=<<colour>>/></$set>
 \end
-<div class="tc-swatches-horiz">
-<<swatch foreground>>
-<<swatch background>>
-<<swatch muted-foreground>>
-<<swatch primary>>
-<<swatch page-background>>
-<<swatch tab-background>>
-<<swatch tiddler-info-background>>
-</div>
+<div class="tc-swatches-horiz"><$list filter="
+foreground
+background
+muted-foreground
+primary
+page-background
+tab-background
+tiddler-info-background
+" variable="colour"><<swatch>></$list></div>

core/wiki/languageswitcher.tid

@@ -1,7 +1,31 @@
 title: $:/snippets/languageswitcher
 
-{{$:/language/ControlPanel/Basics/Language/Prompt}} <$select tiddler="$:/language">
+\define flag-title()
+$(languagePluginTitle)$/icon
+\end
+
+<$linkcatcher to="$:/language">
+<div class="tc-chooser tc-language-chooser">
 <$list filter="[[$:/languages/en-GB]] [plugin-type[language]sort[description]]">
-<option value=<<currentTiddler>>><$view field="description"><$view field="name"><$view field="title"/></$view></$view></option>
+<$set name="cls" filter="[all[current]field:title{$:/language}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>>
+<$link>
+<span class="tc-image-button">
+<$set name="languagePluginTitle" value=<<currentTiddler>>>
+<$transclude subtiddler=<<flag-title>>>
+<$list filter="[all[current]field:title[$:/languages/en-GB]]">
+<$transclude tiddler="$:/languages/en-GB/icon"/>
 </$list>
-</$select>
+</$transclude>
+</$set>
+</span>
+<$view field="description">
+<$view field="name">
+<$view field="title"/>
+</$view>
+</$view>
+</$link>
+</div>
+</$set>
+</$list>
+</div>
+</$linkcatcher>

core/wiki/palettepreview.tid

@@ -1,5 +1,5 @@
 title: $:/snippets/palettepreview
 
 <$set name="currentTiddler" value={{$:/palette}}>
-<$transclude tiddler="$:/snippets/currpalettepreview"/>
+{{||$:/snippets/currpalettepreview}}
 </$set>

core/wiki/paletteswitcher.tid

@@ -1,12 +1,8 @@
 title: $:/snippets/paletteswitcher
 
-\define lingo-base() $:/language/ControlPanel/Palette/
-<div class="tc-prompt">
-<<lingo Prompt>> <$view tiddler={{$:/palette}} field="name"/>
-</div>
-
 <$linkcatcher to="$:/palette">
-<div class="tc-chooser"><$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[description]]"><div class="tc-chooser-item"><$link to={{!!title}}><div><$reveal state="$:/palette" type="match" text={{!!title}}>&bull;</$reveal><$reveal state="$:/palette" type="nomatch" text={{!!title}}>&nbsp;</$reveal> ''<$view field="name" format="text"/>'' - <$view field="description" format="text"/></div><$transclude tiddler="$:/snippets/currpalettepreview"/></$link></div>
+<div class="tc-chooser"><$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[description]]"><$set name="cls" filter="[all[current]prefix{$:/palette}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>><$link to={{!!title}}>''<$view field="name" format="text"/>'' - <$view field="description" format="text"/>{{||$:/snippets/currpalettepreview}}</$link>
+</div></$set>
 </$list>
 </div>
 </$linkcatcher>

core/wiki/themeswitcher.tid

@@ -1,9 +1,8 @@
 title: $:/snippets/themeswitcher
 
-\define lingo-base() $:/language/ControlPanel/Theme/
-<<lingo Prompt>> <$view tiddler={{$:/theme}} field="name"/>
-
 <$linkcatcher to="$:/theme">
-<$list filter="[plugin-type[theme]sort[title]]"><div><$reveal state="$:/theme" type="match" text={{!!title}}>&bull;</$reveal><$reveal state="$:/theme" type="nomatch" text={{!!title}}>&nbsp;</$reveal> <$link to={{!!title}}>''<$view field="name" format="text"/>'' <$view field="description" format="text"/></$link></div>
+<div class="tc-chooser"><$list filter="[plugin-type[theme]sort[title]]"><$set name="cls" filter="[all[current]field:title{$:/theme}] [[$:/theme]!has[text]addsuffix[s/tiddlywiki/vanilla]field:title<currentTiddler>] +[limit[1]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>><$link to={{!!title}}>''<$view field="name" format="text"/>'' <$view field="description" format="text"/></$link></div>
+</$set>
 </$list>
+</div>
 </$linkcatcher>

core/wiki/viewswitcher.tid

@@ -1,8 +1,18 @@
 title: $:/snippets/viewswitcher
 
-\define lingo-base() $:/language/ControlPanel/StoryView/
-<<lingo Prompt>> <$select tiddler="$:/view">
-<$list filter="[storyviews[]]">
-<option><$view field="title"/></option>
+\define icon()
+$:/core/images/storyview-$(storyview)$
+\end
+<$linkcatcher to="$:/view">
+<div class="tc-chooser">
+<$list filter="[storyviews[]]" variable="storyview">
+<$set name="cls" filter="[<storyview>prefix{$:/view}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>>
+<$link to=<<storyview>>>
+<$transclude tiddler=<<icon>>/>
+<$text text=<<storyview>>/>
+</$link>
+</div>
+</$set>
 </$list>
-</$select>
+</div>
+</$linkcatcher>

themes/tiddlywiki/vanilla/base.tid

@@ -185,6 +185,10 @@ input:not([type]) {
 	background: <<colour background>>;
 }
 
+input[type="checkbox"] {
+  vertical-align: middle;
+}
+
 .tc-muted {
 	color: <<colour muted-foreground>>;
 }
@@ -702,6 +706,10 @@ button.tc-untagged-label {
 	font-size: 1.5em;
 }
 
+.tc-page-controls .tc-drop-down {
+  font-size: 1rem;
+}
+
 .tc-page-controls button {
 	margin-right: 0.5em;
 }
@@ -1397,11 +1405,6 @@ html body.tc-body.tc-single-tiddler-window {
 	width: 1em;
 }
 
-.tc-drop-down-language-chooser img {
-	width: 2em;
-	vertical-align: baseline;
-}
-
 .tc-drop-down a, .tc-drop-down button {
 	display: block;
 	padding: 0 14px 0 14px;
@@ -2062,6 +2065,14 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
 	padding: 1em 1em 1em 1em;
 }
 
+.tc-check-list {
+	line-height: 2em;
+}
+
+.tc-check-list .tc-image-button {
+	height: 1.5em;
+}
+
 /*
 ** Message boxes
 */
@@ -2104,25 +2115,62 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
 */
 
 .tc-chooser {
-	border: 1px solid <<colour table-border>>;
+	border-right: 1px solid <<colour table-header-background>>;
+	border-left: 1px solid <<colour table-header-background>>;
 }
 
+
 .tc-chooser-item {
-	border: 8px;
-	padding: 2px 4px;
+	border-bottom: 1px solid <<colour table-header-background>>;
+	border-top: 1px solid <<colour table-header-background>>;
+	padding: 2px 4px 2px 14px;
 }
 
-.tc-chooser-item a.tc-tiddlylink {
+.tc-drop-down .tc-chooser-item {
+	padding: 2px;
+}
+
+.tc-chosen,
+.tc-chooser-item:hover {
+	background-color: <<colour table-header-background>>;
+	border-color: <<colour table-footer-background>>;
+}
+
+.tc-chosen .tc-tiddlylink {
+	cursor:default;
+}
+
+.tc-chooser-item .tc-tiddlylink {
 	display: block;
 	text-decoration: none;
-	color: <<colour tiddler-link-foreground>>;
-	background-color: <<colour tiddler-link-background>>;
+	background-color: transparent;
 }
 
-.tc-chooser-item a.tc-tiddlylink:hover {
+.tc-chooser-item:hover .tc-tiddlylink:hover {
 	text-decoration: none;
-	color: <<colour tiddler-link-background>>;
-	background-color: <<colour tiddler-link-foreground>>;
+}
+
+.tc-drop-down .tc-chosen .tc-tiddlylink,
+.tc-drop-down .tc-chooser-item .tc-tiddlylink:hover {
+	color: <<colour foreground>>;
+}
+
+.tc-chosen > .tc-tiddlylink:before {
+	margin-left: -10px;
+	position: relative;
+	content: "» ";
+}
+
+.tc-chooser-item svg,
+.tc-chooser-item img{
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+}
+
+.tc-language-chooser .tc-image-button img {
+	width: 2em;
+	vertical-align: -0.15em;
 }
 
 /*