From 02529a51d0be47477e62cd52dd5e4989a4993663 Mon Sep 17 00:00:00 2001 From: Tobias Beer Date: Fri, 6 Apr 2018 18:26:54 +0200 Subject: [PATCH] Improve styling and reusability of palette, language, and theme switchers (#1954) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 31 +----------- core/ui/PageControls/storyview.tid | 16 +------ core/ui/PageControls/theme.tid | 14 +----- core/wiki/currpalettepreview.tid | 25 +++++----- core/wiki/languageswitcher.tid | 30 ++++++++++-- core/wiki/palettepreview.tid | 2 +- core/wiki/paletteswitcher.tid | 8 +--- core/wiki/themeswitcher.tid | 7 ++- core/wiki/viewswitcher.tid | 20 ++++++-- themes/tiddlywiki/vanilla/base.tid | 76 ++++++++++++++++++++++++------ 10 files changed, 126 insertions(+), 103 deletions(-) diff --git a/core/ui/PageControls/language.tid b/core/ui/PageControls/language.tid index becbf2363..c0e7123df 100644 --- a/core/ui/PageControls/language.tid +++ b/core/ui/PageControls/language.tid @@ -21,34 +21,7 @@ $(languagePluginTitle)$/icon <$reveal state=<> type="popup" position="below" animate="yes"> -
-<$linkcatcher to="$:/language"> -<$list filter="[[$:/languages/en-GB]] [plugin-type[language]sort[description]]"> -<$link> - -<$reveal type="match" state="$:/language" text=<>> -• - -<$reveal type="nomatch" state="$:/language" text=<>> -  - - - -<$set name="languagePluginTitle" value=<>> -<$transclude subtiddler=<>> -<$list filter="[all[current]field:title[$:/languages/en-GB]]"> -<$transclude tiddler="$:/languages/en-GB/icon"/> - - - - -<$view field="description"> -<$view field="name"> -<$view field="title"/> - - - - - +
+{{$:/snippets/languageswitcher}}
\ No newline at end of file diff --git a/core/ui/PageControls/storyview.tid b/core/ui/PageControls/storyview.tid index 43076c639..acdb08d12 100644 --- a/core/ui/PageControls/storyview.tid +++ b/core/ui/PageControls/storyview.tid @@ -20,20 +20,6 @@ $:/core/images/storyview-$(storyview)$ <$reveal state=<> type="popup" position="below" animate="yes">
-<$linkcatcher to="$:/view"> -<$list filter="[storyviews[]]" variable="storyview"> -<$link to=<>> - -<$reveal type="match" state="$:/view" text=<>> -• - -<$reveal type="nomatch" state="$:/view" text=<>> -  - - -<$transclude tiddler=<>/> -<$text text=<>/> - - +{{$:/snippets/viewswitcher}}
\ No newline at end of file diff --git a/core/ui/PageControls/theme.tid b/core/ui/PageControls/theme.tid index bbe73e97b..e5574eabf 100644 --- a/core/ui/PageControls/theme.tid +++ b/core/ui/PageControls/theme.tid @@ -16,19 +16,7 @@ description: {{$:/language/Buttons/Theme/Hint}} <$reveal state=<> type="popup" position="below" animate="yes">
<$linkcatcher to="$:/theme"> -<$list filter="[plugin-type[theme]sort[title]]" variable="themeTitle"> -<$link to=<>> - -<$reveal type="match" state="$:/theme" text=<>> -• - -<$reveal type="nomatch" state="$:/theme" text=<>> -  - - -<$view tiddler=<> field="name"/> - - +{{$:/snippets/themeswitcher}}
\ No newline at end of file diff --git a/core/wiki/currpalettepreview.tid b/core/wiki/currpalettepreview.tid index 56914cc25..b80748737 100644 --- a/core/wiki/currpalettepreview.tid +++ b/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$}}> -
>/> - +\define swatch() +<$set name="swatchColour" value={{##$(colour)$}} +>
> title=<>/> \end -
-<> -<> -<> -<> -<> -<> -<> -
+
<$list filter=" +foreground +background +muted-foreground +primary +page-background +tab-background +tiddler-info-background +" variable="colour"><>
\ No newline at end of file diff --git a/core/wiki/languageswitcher.tid b/core/wiki/languageswitcher.tid index 9b61f0e87..8df13bf31 100644 --- a/core/wiki/languageswitcher.tid +++ b/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"> +
<$list filter="[[$:/languages/en-GB]] [plugin-type[language]sort[description]]"> - +<$set name="cls" filter="[all[current]field:title{$:/language}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
>> +<$link> + +<$set name="languagePluginTitle" value=<>> +<$transclude subtiddler=<>> +<$list filter="[all[current]field:title[$:/languages/en-GB]]"> +<$transclude tiddler="$:/languages/en-GB/icon"/> - \ No newline at end of file + + + +<$view field="description"> +<$view field="name"> +<$view field="title"/> + + + +
+ + +
+ \ No newline at end of file diff --git a/core/wiki/palettepreview.tid b/core/wiki/palettepreview.tid index baf5a25b9..e3debf8d6 100644 --- a/core/wiki/palettepreview.tid +++ b/core/wiki/palettepreview.tid @@ -1,5 +1,5 @@ title: $:/snippets/palettepreview <$set name="currentTiddler" value={{$:/palette}}> -<$transclude tiddler="$:/snippets/currpalettepreview"/> +{{||$:/snippets/currpalettepreview}} diff --git a/core/wiki/paletteswitcher.tid b/core/wiki/paletteswitcher.tid index f3f08713a..14c647b55 100644 --- a/core/wiki/paletteswitcher.tid +++ b/core/wiki/paletteswitcher.tid @@ -1,12 +1,8 @@ title: $:/snippets/paletteswitcher -\define lingo-base() $:/language/ControlPanel/Palette/ -
-<> <$view tiddler={{$:/palette}} field="name"/> -
- <$linkcatcher to="$:/palette"> -
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[description]]">
<$link to={{!!title}}>
<$reveal state="$:/palette" type="match" text={{!!title}}>•<$reveal state="$:/palette" type="nomatch" text={{!!title}}>  ''<$view field="name" format="text"/>'' - <$view field="description" format="text"/>
<$transclude tiddler="$:/snippets/currpalettepreview"/>
+
<$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">
>><$link to={{!!title}}>''<$view field="name" format="text"/>'' - <$view field="description" format="text"/>{{||$:/snippets/currpalettepreview}} +
\ No newline at end of file diff --git a/core/wiki/themeswitcher.tid b/core/wiki/themeswitcher.tid index b7b7bd029..4e8f8d759 100644 --- a/core/wiki/themeswitcher.tid +++ b/core/wiki/themeswitcher.tid @@ -1,9 +1,8 @@ title: $:/snippets/themeswitcher -\define lingo-base() $:/language/ControlPanel/Theme/ -<> <$view tiddler={{$:/theme}} field="name"/> - <$linkcatcher to="$:/theme"> -<$list filter="[plugin-type[theme]sort[title]]">
<$reveal state="$:/theme" type="match" text={{!!title}}>•<$reveal state="$:/theme" type="nomatch" text={{!!title}}>  <$link to={{!!title}}>''<$view field="name" format="text"/>'' <$view field="description" format="text"/>
+
<$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] +[limit[1]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
>><$link to={{!!title}}>''<$view field="name" format="text"/>'' <$view field="description" format="text"/>
+ +
\ No newline at end of file diff --git a/core/wiki/viewswitcher.tid b/core/wiki/viewswitcher.tid index fc6d74c59..73544ed30 100644 --- a/core/wiki/viewswitcher.tid +++ b/core/wiki/viewswitcher.tid @@ -1,8 +1,18 @@ title: $:/snippets/viewswitcher -\define lingo-base() $:/language/ControlPanel/StoryView/ -<> <$select tiddler="$:/view"> -<$list filter="[storyviews[]]"> - +\define icon() +$:/core/images/storyview-$(storyview)$ +\end +<$linkcatcher to="$:/view"> +
+<$list filter="[storyviews[]]" variable="storyview"> +<$set name="cls" filter="[prefix{$:/view}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
>> +<$link to=<>> +<$transclude tiddler=<>/> +<$text text=<>/> + +
+ - \ No newline at end of file +
+ \ No newline at end of file diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index a3f2160ab..c39a3e05b 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -185,6 +185,10 @@ input:not([type]) { background: <>; } +input[type="checkbox"] { + vertical-align: middle; +} + .tc-muted { color: <>; } @@ -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 <>; + border-right: 1px solid <>; + border-left: 1px solid <>; } + .tc-chooser-item { - border: 8px; - padding: 2px 4px; + border-bottom: 1px solid <>; + border-top: 1px solid <>; + 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: <>; + border-color: <>; +} + +.tc-chosen .tc-tiddlylink { + cursor:default; +} + +.tc-chooser-item .tc-tiddlylink { display: block; text-decoration: none; - color: <>; - background-color: <>; + background-color: transparent; } -.tc-chooser-item a.tc-tiddlylink:hover { +.tc-chooser-item:hover .tc-tiddlylink:hover { text-decoration: none; - color: <>; - background-color: <>; +} + +.tc-drop-down .tc-chosen .tc-tiddlylink, +.tc-drop-down .tc-chooser-item .tc-tiddlylink:hover { + color: <>; +} + +.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; } /*