From f75e97f30857afee29b7d85e45dd5e123e01864d Mon Sep 17 00:00:00 2001
From: Adrian Morosanu <morosanuae@yahoo.com>
Date: Wed, 28 Jun 2017 19:44:15 +0300
Subject: [PATCH] Create the new "tree" global macro (#2925)

* Create the "tree" global macro file (tree.tid)

* Added styles for the new "tree" global macro

* Update Explorer tab

* Cleaning the macro of unneeded code

I have chosen to keep the slash suffix in the branch node titles to go along with the rest (e.g. root node), so the "clean-chunk" macro isn't needed anymore.

* Minor fix
---
 core/ui/MoreSideBar/Explorer.tid   | 51 ----------------------------
 core/wiki/macros/tree.tid          | 53 ++++++++++++++++++++++++++++++
 themes/tiddlywiki/vanilla/base.tid | 38 ++++++++++++++++++++-
 3 files changed, 90 insertions(+), 52 deletions(-)
 create mode 100644 core/wiki/macros/tree.tid

diff --git a/core/ui/MoreSideBar/Explorer.tid b/core/ui/MoreSideBar/Explorer.tid
index d8bd00703..ae0e8fe99 100644
--- a/core/ui/MoreSideBar/Explorer.tid
+++ b/core/ui/MoreSideBar/Explorer.tid
@@ -2,55 +2,4 @@ title: $:/core/ui/MoreSideBar/Explorer
 tags: $:/tags/MoreSideBar
 caption: {{$:/language/SideBar/Explorer/Caption}}
 
-\define cleanChunk()
-<$list filter="[[$(chunk)$]] +[removesuffix[/]]" variable="cleanChunk">
-<$text text=<<cleanChunk>>/>
-</$list>
-\end
-
-\define leafnode(prefix)
-<li>
-<$list filter="""[[$prefix$$(chunk)$]is[shadow]] [[$prefix$$(chunk)$]is[tiddler]] +[removeprefix[$prefix$]] +[limit[1]]""" 
-emptyMessage="""<$text text="$prefix$$(chunk)$"/>""">
-<button class="tc-btn-invisible" disabled>{{$:/core/images/blank}}</button> <$link to="""$prefix$$(chunk)$""">
-<$view field="title"/>
-</$link> 
-</$list>
-</li>
-\end
-
-\define branchnode(prefix)
-<$reveal type="nomatch" text="" default="""$(chunk)$""">
-<li>       
-<$list filter="""[all[shadows+tiddlers]prefix[$prefix$$(chunk)$]] -[[$prefix$$(chunk)$]] +[limit[1]]""">
-<$reveal type="nomatch" state="""$:/state/tree/$prefix$$(chunk)$""" text="show">
-<$button set="""$:/state/tree/$prefix$$(chunk)$""" setTo="show" class="tc-btn-invisible">{{$:/core/images/right-arrow}}</$button>
-</$reveal>
-<$reveal type="match" state="""$:/state/tree/$prefix$$(chunk)$""" text="show">
-<$button set="""$:/state/tree/$prefix$$(chunk)$""" setTo="hide" class="tc-btn-invisible">{{$:/core/images/down-arrow}}</$button>
-</$reveal>
-</$list>
-<<cleanChunk>>
-<$list filter="""[all[shadows+tiddlers]prefix[$prefix$$(chunk)$]] -[[$prefix$$(chunk)$]] +[limit[1]]""">(<$count filter="""[all[shadows+tiddlers]prefix[$prefix$$(chunk)$]] -[[$prefix$$(chunk)$]]"""/>)
-<$reveal type="match" state="""$:/state/tree/$prefix$$(chunk)$""" text="show">
-<$macrocall $name="tree" prefix="""$prefix$$(chunk)$"""/>
-</$reveal>
-</$list>
-</li>
-</$reveal>
-\end
-
-\define tree(prefix)
-<ol>
-<$list filter="[all[shadows+tiddlers]removeprefix[$prefix$]splitbefore[/]sort[title]] +[!suffix[/]]" variable="chunk">
-<<leafnode """$prefix$""">>
-</$list>
-<$list filter="[all[shadows+tiddlers]removeprefix[$prefix$]splitbefore[/]sort[title]] +[suffix[/]]" variable="chunk">
-<<branchnode """$prefix$""">>
-</$list>
-</ol>
-\end
-
-<div class="tc-table-of-contents">
 <<tree "$:/">>
-</div>
diff --git a/core/wiki/macros/tree.tid b/core/wiki/macros/tree.tid
new file mode 100644
index 000000000..efc5a0a46
--- /dev/null
+++ b/core/wiki/macros/tree.tid
@@ -0,0 +1,53 @@
+title: $:/core/macros/tree
+tags: $:/tags/Macro
+
+\define leaf-node(prefix)
+<li>
+<$list filter="""[[$prefix$$(chunk)$]is[shadow]] [[$prefix$$(chunk)$]is[tiddler]] +[removeprefix[$prefix$]] +[limit[1]]""" 
+emptyMessage="""<$text text="$prefix$$(chunk)$"/>""">
+<span>{{$:/core/images/file}}</span> <$link to="""$prefix$$(chunk)$""">
+<$view field="title"/>
+</$link> 
+</$list>
+</li>
+\end
+
+\define branch-node(prefix)
+<$reveal type="nomatch" text="" default="""$(chunk)$""">
+<li>      
+<$list filter="""[all[shadows+tiddlers]prefix[$prefix$$(chunk)$]] -[[$prefix$$(chunk)$]] +[limit[1]]""">
+<$reveal type="nomatch" state="""$:/state/tree/$prefix$$(chunk)$""" text="show">
+<$button set="""$:/state/tree/$prefix$$(chunk)$""" setTo="show" class="tc-btn-invisible">{{$:/core/images/folder}} """$(chunk)$"""</$button>
+</$reveal>
+<$reveal type="match" state="""$:/state/tree/$prefix$$(chunk)$""" text="show">
+<$button set="""$:/state/tree/$prefix$$(chunk)$""" setTo="hide" class="tc-btn-invisible">{{$:/core/images/folder}} """$(chunk)$"""</$button>
+</$reveal>
+</$list>
+<$list filter="""[all[shadows+tiddlers]prefix[$prefix$$(chunk)$]] -[[$prefix$$(chunk)$]] +[limit[1]]"""><span>(<$count filter="""[all[shadows+tiddlers]prefix[$prefix$$(chunk)$]] -[[$prefix$$(chunk)$]]"""/>)</span>
+<$reveal type="match" state="""$:/state/tree/$prefix$$(chunk)$""" text="show">
+<$macrocall $name="tree-node" prefix="""$prefix$$(chunk)$"""/>
+</$reveal>
+</$list>
+</li>
+</$reveal>
+\end
+
+\define tree-node(prefix)
+<ol>
+<$list filter="[all[shadows+tiddlers]removeprefix[$prefix$]splitbefore[/]sort[title]] +[!suffix[/]]" variable="chunk">
+<<leaf-node """$prefix$""">>
+</$list>
+<$list filter="[all[shadows+tiddlers]removeprefix[$prefix$]splitbefore[/]sort[title]] +[suffix[/]]" variable="chunk">
+<<branch-node """$prefix$""">>
+</$list>
+</ol>
+\end
+
+\define tree(prefix)
+<div class="tc-tree">
+<span><$text text="""$prefix$"""/></span>
+<div>
+<$macrocall $name="tree-node" prefix="""$prefix$"""/>
+</div>
+</div>
+\end
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 95af9a1eb..a5856d001 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -2381,4 +2381,40 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
 .tc-error {
 	background: #f00;
 	color: #fff;
-}
\ No newline at end of file
+}
+
+/*
+** Tree macro
+*/
+
+.tc-tree div {
+    	padding-left: 14px;
+}
+
+.tc-tree ol {
+    	list-style-type: none;
+    	padding-left: 0;
+    	margin-top: 0;
+}
+
+.tc-tree ol ol {
+    	padding-left: 1em;    
+}
+
+.tc-tree button { 
+    	color: #acacac;
+}
+
+.tc-tree svg {
+     	fill: #acacac;
+}
+
+.tc-tree span svg {
+    	width: 1em;
+    	height: 1em;
+    	vertical-align: baseline;
+}
+
+.tc-tree li span {
+    	color: lightgray;
+}