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

Refactor the sidebar items into separate tiddlers

With some better styling too
This commit is contained in:
Jermolene 2016-11-27 22:34:46 +00:00
parent e5af022bd3
commit 117bf0a0de
7 changed files with 106 additions and 37 deletions

View File

@ -74,48 +74,49 @@ Show raw text
<$list filter="[all{$:/config/Manager/Show}!is{$:/config/Manager/System}search{$:/config/Manager/Filter}tag:strict{$:/config/Manager/Tag}untagged:no{$:/config/Manager/Untagged}sort{$:/config/Manager/Sort}order{$:/config/Manager/Order}]">
<$vars transclusion=<<currentTiddler>>>
<div style="tc-manager-list-item">
<$button popup=<<qualify "$:/state/manager/popup">> class="tc-btn-invisible tc-manager-list-item-heading">
<$button popup=<<qualify "$:/state/manager/popup">> class="tc-btn-invisible tc-manager-list-item-heading" selectedClass="tc-manager-list-item-heading-selected">
<$text text=<<currentTiddler>>/>
</$button>
<$reveal state=<<qualify "$:/state/manager/popup">> type="nomatch" text="" default="" tag="div" class="tc-manager-list-item-content tc-popup-handle">
<div class="tc-manager-list-item-content-tiddler">
<div class="tc-manager-list-item-content-tiddler-item">
<$reveal state="$:/config/Manager/View" type="nomatch" text="plain">
<$transclude mode="block"/>
</$reveal>
<$reveal state="$:/config/Manager/View" type="match" text="plain">
<pre>
<code>
<$view/>
</code>
</pre>
</$reveal>
<$reveal state="$:/config/Manager/View" type="nomatch" text="plain" tag="div" class="tc-manager-list-item-content-tiddler-item">
<div class="tc-manager-list-item-content-item-heading">
Wikified text
</div>
<table class="tc-manager-list-item-content-tiddler-item tc-manager-list-item-content-tiddler-item-table">
<div class="tc-manager-list-item-content-item-body">
<$transclude mode="block"/>
</div>
</$reveal>
<$reveal state="$:/config/Manager/View" type="match" text="plain" tag="div" class="tc-manager-list-item-content-tiddler-item">
<div class="tc-manager-list-item-content-item-heading">
Raw text
</div>
<div class="tc-manager-list-item-content-item-body">
<pre><code><$view/></code></pre>
</div>
</$reveal>
<div class="tc-manager-list-item-content-tiddler-item">
<div class="tc-manager-list-item-content-item-heading">
Fields
</div>
<table class="tc-manager-list-item-content-item-body tc-manager-list-item-content-item-body-table">
<tbody>
<$list filter="[all[current]fields[]sort[title]] -text" template="$:/core/ui/TiddlerFieldTemplate" variable="listItem"/>
</tbody>
</table>
</div>
</div>
<div class="tc-manager-list-item-content-sidebar">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Manager/ItemSidebar]!has[draft.of]]" variable="listItem">
<div class="tc-manager-list-item-content-sidebar-item">
<$list filter="[is[current]tags[]] [list[$:/config/Manager/RecentTags]] +[sort[title]] " variable="tag">
<div>
<$checkbox tiddler=<<currentTiddler>> tag=<<tag>> actions=<<tag-checkbox-actions>>>
<$macrocall $name="tag-pill" tag=<<tag>>/>
</$checkbox>
<div class="tc-manager-list-item-content-item-heading">
<$transclude tiddler=<<listItem>> field="caption"/>
</div>
<div class="tc-manager-list-item-content-item-body">
<$transclude tiddler=<<listItem>>/>
</div>
</div>
</$list>
<$macrocall $name="tag-picker" actions=<<tag-picker-actions>>/>
</div>
<div class="tc-manager-list-item-content-sidebar-item">
<p>
<$button to=<<currentTiddler>>>{{$:/core/images/link}} open</$button>
</p>
<p>
<$button message="tm-edit-tiddler" param=<<currentTiddler>>>{{$:/core/images/edit-button}} edit</$button>
</p>
</div>
</div>
</$reveal>
</div>

View File

@ -0,0 +1,15 @@
title: $:/Manager/ItemSidebar/Colour
tags: $:/tags/Manager/ItemSidebar
caption: Colour
\define swatch-styles()
height: 1em;
background-color: $(colour)$
\end
<$vars colour={{!!color}}>
<p style=<<swatch-styles>>/>
</$vars>
<p>
<$edit-text field="color" tag="input" type="color"/> / <$edit-text field="color" tag="input" type="text" size="9"/>
</p>

View File

@ -0,0 +1,9 @@
title: $:/Manager/ItemSidebar/Icon
tags: $:/tags/Manager/ItemSidebar
caption: Icon
<p>
<$macrocall $name="image-picker-dropdown" image-tiddler={{!!icon}} fallback="(none)" actions="""
<$action-setfield $field="icon" $value=<<imageTitle>>/>
"""/>
</p>

View File

@ -0,0 +1,16 @@
title: $:/Manager/ItemSidebar/Tags
tags: $:/tags/Manager/ItemSidebar
caption: Tags
<p>
<$list filter="[is[current]tags[]] [list[$:/config/Manager/RecentTags]] +[sort[title]] " variable="tag">
<div>
<$checkbox tiddler=<<currentTiddler>> tag=<<tag>> actions=<<tag-checkbox-actions>>>
<$macrocall $name="tag-pill" tag=<<tag>>/>
</$checkbox>
</div>
</$list>
</p>
<p>
<$macrocall $name="tag-picker" actions=<<tag-picker-actions>>/>
</p>

View File

@ -0,0 +1,10 @@
title: $:/Manager/ItemSidebar/Tools
tags: $:/tags/Manager/ItemSidebar
caption: Tools
<p>
<$button to=<<currentTiddler>>>{{$:/core/images/link}} open</$button>
</p>
<p>
<$button message="tm-edit-tiddler" param=<<currentTiddler>>>{{$:/core/images/edit-button}} edit</$button>
</p>

View File

@ -0,0 +1,2 @@
title: $:/tags/Manager/ItemSidebar
list: $:/Manager/ItemSidebar/Tags $:/Manager/ItemSidebar/Colour $:/Manager/ItemSidebar/Icon $:/Manager/ItemSidebar/Tools

View File

@ -1768,6 +1768,10 @@ html body.tc-body.tc-single-tiddler-window {
padding: 3px;
}
.tc-manager-list-item-heading-selected {
font-weight: bold;
}
.tc-manager-list-item-heading:hover {
background: <<colour primary>>;
color: <<colour background>>;
@ -1785,9 +1789,21 @@ html body.tc-body.tc-single-tiddler-window {
white-space: nowrap;
}
.tc-manager-list-item-content-sidebar-item {
border-top: 0.5em solid <<colour muted-foreground>>;
padding: 0 0.5em 0 0.5em;
.tc-manager-list-item-content-item-heading {
background: <<colour muted-foreground>>;
text-transform: uppercase;
font-size: 0.6em;
font-weight: bold;
}
.tc-manager-list-item-content-item-body {
padding: 0 0.5em 0 0.5em;
}
.tc-manager-list-item-content-item-body > pre {
margin: 0.5em 0 0.5em 0;
border: none;
background: inherit;
}
.tc-manager-list-item-content-tiddler {
@ -1797,16 +1813,16 @@ html body.tc-body.tc-single-tiddler-window {
border-bottom: 0.5em solid <<colour muted-foreground>>;
}
.tc-manager-list-item-content-tiddler-item {
border-top: 0.5em solid <<colour muted-foreground>>;
padding: 0.5em;
}
.tc-manager-list-item-content-tiddler-item.tc-manager-list-item-content-tiddler-item-table {
.tc-manager-list-item-content-item-body.tc-manager-list-item-content-item-body-table {
border: none;
padding: 0;
margin: 0;
}
.tc-manager-list-item-content-item-body.tc-manager-list-item-content-item-body-table td {
border: none;
}
/*
** Alerts
*/