1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 12:07:19 +00:00

Introduce "Info/Advanced/Stylesheets" tab to Control Panel

Makes it a bit easier to understand what the browser will see for each stylesheet tiddler
This commit is contained in:
Jermolene 2018-01-12 21:44:38 +00:00
parent 4e1f9bf5ed
commit 460a07ca03
3 changed files with 90 additions and 0 deletions

View File

@ -155,6 +155,10 @@ Settings/MissingLinks/Hint: Choose whether to link to tiddlers that do not exist
Settings/MissingLinks/Description: Enable links to missing tiddlers
StoryView/Caption: Story View
StoryView/Prompt: Current view:
Stylesheets/Caption: Stylesheets
Stylesheets/Expand/Caption: Expand All
Stylesheets/Hint: This is the rendered CSS of the current stylesheet tiddlers tagged with <<tag "$:/tags/Stylesheet">>
Stylesheets/Restore/Caption: Restore
Theme/Caption: Theme
Theme/Prompt: Current theme:
TiddlerFields/Caption: Tiddler Fields

View File

@ -0,0 +1,9 @@
title: $:/core/ui/ControlPanel/Stylesheets
tags: $:/tags/ControlPanel/Advanced
caption: {{$:/language/ControlPanel/Stylesheets/Caption}}
\define lingo-base() $:/language/ControlPanel/
<<lingo Stylesheets/Hint>>
{{$:/snippets/peek-stylesheets}}

View File

@ -0,0 +1,77 @@
title: $:/snippets/peek-stylesheets
\define expandable-stylesheets-list()
<ol>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
<$vars state=<<qualify "$:/config/peek-stylesheets/open/">>>
<$set name="state" value={{{ [<state>addsuffix<currentTiddler>] }}}>
<li>
<$reveal type="match" state=<<state>> text="yes" tag="span">
<$button set=<<state>> setTo="no" class="tc-btn-invisible">
{{$:/core/images/down-arrow}}
</$button>
</$reveal>
<$reveal type="nomatch" state=<<state>> text="yes" tag="span">
<$button set=<<state>> setTo="yes" class="tc-btn-invisible">
{{$:/core/images/right-arrow}}
</$button>
</$reveal>
<$link>
<$view field="title"/>
</$link>
<$reveal type="match" state=<<state>> text="yes" tag="div">
<$set name="source" tiddler=<<currentTiddler>>>
<$wikify name="styles" text=<<source>>>
<pre>
<code>
<$text text=<<styles>>/>
</code>
</pre>
</$wikify>
</$set>
</$reveal>
</li>
</$set>
</$vars>
</$list>
</ol>
\end
\define stylesheets-list()
<ol>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
<li>
<$link>
<$view field="title"/>
</$link>
<$set name="source" tiddler=<<currentTiddler>>>
<$wikify name="styles" text=<<source>>>
<pre>
<code>
<$text text=<<styles>>/>
</code>
</pre>
</$wikify>
</$set>
</li>
</$list>
</ol>
\end
<$vars modeState=<<qualify "$:/config/peek-stylesheets/mode/">>>
<$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div">
<$button set=<<modeState>> setTo="expanded" class="tc-btn-invisible">{{$:/core/images/chevron-right}} {{$:/language/ControlPanel/Stylesheets/Expand/Caption}}</$button>
</$reveal>
<$reveal type="match" state=<<modeState>> text="expanded" tag="div">
<$button set=<<modeState>> setTo="restored" class="tc-btn-invisible">{{$:/core/images/chevron-down}} {{$:/language/ControlPanel/Stylesheets/Restore/Caption}}</$button>
</$reveal>
<$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div">
<<expandable-stylesheets-list>>
</$reveal>
<$reveal type="match" state=<<modeState>> text="expanded" tag="div">
<<stylesheets-list>>
</$reveal>
</$vars>