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>