add drak-light UI elements
This commit is contained in:
pmario
parent
0c8df5d9c0
commit
adc7504627
|
|
@ -57,6 +57,9 @@ LayoutSwitcher/Caption: Layout
|
|||
LoadedModules/Caption: Loaded Modules
|
||||
LoadedModules/Hint: These are the currently loaded tiddler modules linked to their source tiddlers. Any italicised modules lack a source tiddler, typically because they were setup during the boot process.
|
||||
Palette/Caption: Palette
|
||||
Palette/Config/DefaultDark/Caption: Default Dark Palette
|
||||
Palette/Config/DefaultLight/Caption: Default Light Palette
|
||||
Palette/Config/Detection/Caption: Detect Browser Ligh/Dark Setting
|
||||
Palette/Editor/Clone/Caption: clone
|
||||
Palette/Editor/Clone/Prompt: It is recommended that you clone this shadow palette before editing it
|
||||
Palette/Editor/Delete/Hint: delete this entry from the current palette
|
||||
|
|
@ -65,8 +68,13 @@ Palette/Editor/Prompt/Modified: This shadow palette has been modified
|
|||
Palette/Editor/Prompt: Editing
|
||||
Palette/Editor/Reset/Caption: reset
|
||||
Palette/HideEditor/Caption: hide editor
|
||||
Palette/Picker/Prompt: The automatic mode detection is activated. The following settings will be used to switch between light and dark wiki palettes.<br><ul><li>The defaults can be changed using the palette {{$:/core/images/palette|16px}} button</li><li>For testing the palette-previews can be manually selected. (Will be changed by the browser if needed)</li></ul>
|
||||
Palette/Picker/Prompt/Info: If the browser Light/Dark detection is activated TW will switch palettes according to the browser ''appearance'' settings.
|
||||
Palette/Picker/Enable: Enable Browser Light/Dark Mode Detection
|
||||
Palette/Picker/Heading: Automatic Light/Dark Mode Configuraton
|
||||
Palette/Prompt: Current palette:
|
||||
Palette/ShowEditor/Caption: show editor
|
||||
Palette/Switcher/Heading: Switch Palette
|
||||
Parsing/Caption: Parsing
|
||||
Parsing/Hint: Here you can globally disable/enable wiki parser rules. For changes to take effect, save and reload your wiki. Disabling certain parser rules can prevent <$text text="TiddlyWiki"/> from functioning correctly. Use [[safe mode|https://tiddlywiki.com/#SafeMode]] to restore normal operation.
|
||||
Parsing/Block/Caption: Block Parse Rules
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ tags: $:/tags/ControlPanel/Appearance
|
|||
caption: {{$:/language/ControlPanel/Palette/Caption}}
|
||||
|
||||
\define lingo-base() $:/language/ControlPanel/Palette/
|
||||
\whitespace trim
|
||||
|
||||
{{$:/snippets/paletteswitcher}}
|
||||
|
||||
\define paletteEditorButton()
|
||||
<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
|
||||
|
||||
<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
|
||||
|
|
@ -18,4 +18,22 @@ caption: {{$:/language/ControlPanel/Palette/Caption}}
|
|||
{{$:/PaletteManager}}
|
||||
|
||||
</$reveal>
|
||||
\end
|
||||
|
||||
{{$:/core/ui/ControlPanel/Palette/LightDarkConfig}}
|
||||
|
||||
<$list filter="[{$:/config/palette/enable-light-dark-detection}match[yes]]" variable="ignore">
|
||||
|
||||
<<paletteEditorButton>>
|
||||
|
||||
</$list>
|
||||
|
||||
<$list filter="[{$:/config/palette/enable-light-dark-detection}!match[yes]]" variable="ignore">
|
||||
|
||||
!! <<lingo "Switcher/Heading">>
|
||||
|
||||
{{$:/snippets/paletteswitcher}}
|
||||
|
||||
<<paletteEditorButton>>
|
||||
|
||||
</$list>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
title: $:/core/ui/ControlPanel/Palette/LightDarkConfig
|
||||
|
||||
\define lingo-base() $:/language/ControlPanel/Palette/
|
||||
|
||||
\define config-dark-light() $:/config/palette/enable-light-dark-detection
|
||||
|
||||
\whitespace trim
|
||||
|
||||
!! <<lingo "Picker/Heading">>
|
||||
|
||||
<<lingo "Picker/Prompt/Info">>
|
||||
|
||||
<$checkbox tiddler=<<config-dark-light>>
|
||||
field="text"
|
||||
checked="yes"
|
||||
unchecked="no"
|
||||
default="no"
|
||||
>
|
||||
<span class="tc-tiny-gap-left tc-small-gap-right"><<lingo "Picker/Enable">></span>
|
||||
<$link to=<<config-dark-light>>>
|
||||
{{$:/core/images/open-window|12}}
|
||||
</$link>
|
||||
</$checkbox>
|
||||
|
||||
<!-- This section should be animated, so users do not loose focus -->
|
||||
<$reveal type="match" state=<<config-dark-light>> text="yes" retain="yes" animate="yes">
|
||||
|
||||
<<lingo "Picker/Prompt">>
|
||||
|
||||
|tc-first-col-min-width tc-first-link-nowrap|k
|
||||
|<$link to="$:/config/palette/default-light" >{{$:/config/palette/default-light!!caption}}</$link> |<$transclude $tiddler="$:/snippets/paletteswitcher" palette=<<tiddler>> postFilter="+[{$:/config/palette/default-light}]" /> | <<palette-picker tiddler:"$:/config/palette/default-light" postFilter:":filter[color-scheme[light]]" >> |
|
||||
|<$link to="$:/config/palette/default-dark">{{$:/config/palette/default-dark!!caption}} </$link>|<$transclude $tiddler="$:/snippets/paletteswitcher" palette=<<tiddler>> postFilter="+[{$:/config/palette/default-dark}]" /> | <<palette-picker tiddler:"$:/config/palette/default-dark" postFilter:":filter[color-scheme[dark]]">> |
|
||||
|
||||
</$reveal>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
caption: {{$:/language/ControlPanel/Palette/Config/DefaultDark/Caption}}
|
||||
title: $:/config/palette/default-dark
|
||||
|
||||
$:/palettes/GruvboxDark
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
caption: {{$:/language/ControlPanel/Palette/Config/DefaultLight/Caption}}
|
||||
title: $:/config/palette/default-light
|
||||
|
||||
$:/palettes/Vanilla
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
tags: $:/tags/Global
|
||||
title: $:/core/macros/palette-picker
|
||||
|
||||
\whitespace trim
|
||||
|
||||
\procedure palette-info(tiddler)
|
||||
\define tv-wikilinks() no
|
||||
<$tiddler tiddler={{{ [<tiddler>get[text]] }}} >
|
||||
''{{!!name}}'' <span class="tc-tiny-gap">-</span> {{!!description}}
|
||||
{{||$:/snippets/currpalettepreview}}
|
||||
</$tiddler>
|
||||
\end
|
||||
|
||||
\procedure palette-picker(tiddler, postFilter, style)
|
||||
<div class="tc-popup-keep" style="position:relative;">
|
||||
<$button
|
||||
popup=`$:/state/popup/$(tiddler)$`
|
||||
tooltip={{$:/language/Buttons/Palette/Hint}}
|
||||
aria-label={{$:/language/Buttons/Palette/Caption}}
|
||||
class=<<tv-config-toolbar-class>>
|
||||
selectedClass="tc-selected"
|
||||
>
|
||||
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
|
||||
{{$:/core/images/palette}}
|
||||
</$list>
|
||||
<$list filter="[<tv-config-toolbar-text>match[yes]]">
|
||||
<span class="tc-btn-text">
|
||||
<$text text={{$:/language/Buttons/Palette/Caption}}/>
|
||||
</span>
|
||||
</$list>
|
||||
</$button>
|
||||
<$reveal state=`$:/state/popup/$(tiddler)$`
|
||||
type="popup"
|
||||
position="belowleft"
|
||||
positionAllowNegative="yes"
|
||||
tag="div"
|
||||
class="tc-drop-down"
|
||||
style=`$(style)$`
|
||||
>
|
||||
<$transclude $tiddler="$:/snippets/paletteswitcher" config=<<tiddler>> postFilter=<<postFilter>> />
|
||||
</$reveal>
|
||||
</div>
|
||||
\end
|
||||
|
|
@ -1,19 +1,31 @@
|
|||
title: $:/snippets/paletteswitcher
|
||||
|
||||
\parameters (palette:"$:/palette" config:"" postFilter:"")
|
||||
\whitespace trim
|
||||
<$linkcatcher to="$:/palette">
|
||||
<div class="tc-chooser">
|
||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]]">
|
||||
<$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>
|
||||
|
||||
\define catchActions()
|
||||
<$action-setfield $tiddler=<<palette>> $field=text text=<<navigateTo>>/>
|
||||
|
||||
<$list filter="[<config>!is[blank]]">
|
||||
<$action-setfield $tiddler=<<config>> text=<<navigateTo>>/>
|
||||
</$filter>
|
||||
\end
|
||||
|
||||
<$linkcatcher actions=<<catchActions>>>
|
||||
<div class="tc-chooser">
|
||||
<$let pre={{{ [<palette>get[text]] }}} >
|
||||
<$list filter=`[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]] $(postFilter)$`>
|
||||
<$set name="class" filter="[all[current]prefix<pre>]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
|
||||
<div class=<<class>> >
|
||||
<$link to={{!!title}}>
|
||||
''<$view field="name" format="text"/>''
|
||||
 - 
|
||||
<$view field="description" format="text"/>
|
||||
{{||$:/snippets/currpalettepreview}}
|
||||
</$link>
|
||||
</div>
|
||||
</$set>
|
||||
</$list>
|
||||
</$let>
|
||||
</div>
|
||||
</$linkcatcher>
|
||||
|
|
|
|||
Loading…
Reference in New Issue