mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-29 07:20:47 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Tobias Beer 2018-04-06 18:26:54 +02:00 committed by Jeremy Ruston
parent 67bab83902
commit 02529a51d0
10 changed files with 126 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
core/ui/PageControls/language.tid
View File

@ -21,34 +21,7 @@ $(languagePluginTitle)$/icon
</$button> </$button>
</span> </span>
<$reveal state=<<qualify "$:/state/popup/language">> type="popup" position="below" animate="yes"> <$reveal state=<<qualify "$:/state/popup/language">> type="popup" position="below" animate="yes">
<div class="tc-drop-down tc-drop-down-language-chooser"> <div class="tc-drop-down">
<$linkcatcher to="$:/language"> {{$:/snippets/languageswitcher}}
<$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> </div>
</$reveal> </$reveal>

16
core/ui/PageControls/storyview.tid
View File

@ -20,20 +20,6 @@ $:/core/images/storyview-$(storyview)$
</span> </span>
<$reveal state=<<qualify "$:/state/popup/storyview">> type="popup" position="below" animate="yes"> <$reveal state=<<qualify "$:/state/popup/storyview">> type="popup" position="below" animate="yes">
<div class="tc-drop-down"> <div class="tc-drop-down">
<$linkcatcher to="$:/view"> {{$:/snippets/viewswitcher}}
<$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>
</div> </div>
</$reveal> </$reveal>

14
core/ui/PageControls/theme.tid
View File

@ -16,19 +16,7 @@ description: {{$:/language/Buttons/Theme/Hint}}
<$reveal state=<<qualify "$:/state/popup/theme">> type="popup" position="below" animate="yes"> <$reveal state=<<qualify "$:/state/popup/theme">> type="popup" position="below" animate="yes">
<div class="tc-drop-down"> <div class="tc-drop-down">
<$linkcatcher to="$:/theme"> <$linkcatcher to="$:/theme">
<$list filter="[plugin-type[theme]sort[title]]" variable="themeTitle"> {{$:/snippets/themeswitcher}}
<$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>
</$linkcatcher> </$linkcatcher>
</div> </div>
</$reveal> </$reveal>

25
core/wiki/currpalettepreview.tid
View File

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

30
core/wiki/languageswitcher.tid
View File

@ -1,7 +1,31 @@
title: $:/snippets/languageswitcher 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]]"> <$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> </$list>
</$select> </$transclude>
</$set>
</span>
<$view field="description">
<$view field="name">
<$view field="title"/>
</$view>
</$view>
</$link>
</div>
</$set>
</$list>
</div>
</$linkcatcher>

2
core/wiki/palettepreview.tid
View File

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

8
core/wiki/paletteswitcher.tid
View File

@ -1,12 +1,8 @@
title: $:/snippets/paletteswitcher title: $:/snippets/paletteswitcher
\define lingo-base() $:/language/ControlPanel/Palette/
<div class="tc-prompt">
<<lingo Prompt>> <$view tiddler={{$:/palette}} field="name"/>
</div>
<$linkcatcher to="$:/palette"> <$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> </$list>
</div> </div>
</$linkcatcher> </$linkcatcher>

7
core/wiki/themeswitcher.tid
View File

@ -1,9 +1,8 @@
title: $:/snippets/themeswitcher title: $:/snippets/themeswitcher
\define lingo-base() $:/language/ControlPanel/Theme/
<<lingo Prompt>> <$view tiddler={{$:/theme}} field="name"/>
<$linkcatcher to="$:/theme"> <$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> </$list>
</div>
</$linkcatcher> </$linkcatcher>

20
core/wiki/viewswitcher.tid
View File

@ -1,8 +1,18 @@
title: $:/snippets/viewswitcher title: $:/snippets/viewswitcher
\define lingo-base() $:/language/ControlPanel/StoryView/ \define icon()
<<lingo Prompt>> <$select tiddler="$:/view"> $:/core/images/storyview-$(storyview)$
<$list filter="[storyviews[]]"> \end
<option><$view field="title"/></option> <$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> </$list>
</$select> </div>
</$linkcatcher>

76
themes/tiddlywiki/vanilla/base.tid
View File

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