Issues with "nested" button, trying to list all tags and further click them

[Joc]

Hi. I am fairly new to TiddlyWiki5...

I am using topmenu plugin (http://tongerner.tiddlyspot.com/) and I would like to create a button, which, when clicked, would popup all tags and would allow me to click them and select specific tiddler...

I have no issue listing all tags:

<$list filter="[tags[]!is[system]sort[title]]" template="$:/plugins/tongerner/topmenu/menu-template" />

But when I try to "nest" them inside button, I have issue. When clicked, the list shows, however it is not further clickable (i.e. when clicking on certain tag, the button "closes")

<$button popup=<<qualify "$:/state/popup/tag">> class="tc-btn-invisible tc-untagged-label tc-tag-label">
Tags
</$button>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below">
<div class="tc-drop-down">
<$list filter="[tags[]!is[system]sort[title]]" template="$:/plugins/tongerner/topmenu/menu-template" />
</div>
</$reveal>

What would be the best way to make such (at least two level) "pop-up tree":

- level one, pop-up all tags (on button click)

- level two, pop-up tiddler (on tag click)

...of course, on tiddler click, I'd like to open it :)

Any help would be appreciated,

 Joc.

[Ton Gerner]

Hi Joc,

I don't know how to solve your 'nested' button, but as a workaround you can use a menu item in your top menu to open a tiddler - say ShowTags - which transcludes the Tag tab in the sidebar.

Tiddler ShowTags containing:

{{$:/core/ui/MoreSideBar/Tags}}

I used that workaround - for tags and extended for system tags as well - in my Top toolbar plugin

Cheers,

Ton

[Joc]

Hi Ton,

yes, thanks for this suggestion. I kind of also figured that out.

It looks like we could both benefit learning how to do this nicely inside menu :)

Cheers,

 Joc.

[Eric Shulman]

On Wednesday, April 27, 2016 at 8:38:53 AM UTC-7, Joc wrote:

I have no issue listing all tags:

<$list filter="[tags[]!is[system]sort[title]]" template="$:/plugins/tongerner/topmenu/menu-template" />

But when I try to "nest" them inside button, I have issue. When clicked, the list shows, however it is not further clickable (i.e. when clicking on certain tag, the button "closes")

<$button popup=<<qualify "$:/state/popup/tag">> class="tc-btn-invisible tc-untagged-label tc-tag-label">
Tags
</$button>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below">
<div class="tc-drop-down">
<$list filter="[tags[]!is[system]sort[title]]" template="$:/plugins/tongerner/topmenu/menu-template" />
</div>
</$reveal>

What would be the best way to make such (at least two level) "pop-up tree":

- level one, pop-up all tags (on button click)

- level two, pop-up tiddler (on tag click)

...of course, on tiddler click, I'd like to open it :)

<div class="tc-drop-down tc-popup-keep">

   <$list filter="[tags[]!is[system]sort[title]]">

      <$macrocall $name="tag" tag=<<currentTiddler>>/>
   </$list>
</div>

* by default, any click, whether inside or outside a popup, will dismiss the popup.  This works well when the popup contents is just simple links.  However, when further interaction is needed (i.e., when clicking a tag pill that shows a list of tags), you need to add "tc-popup-keep" to the drop-down class wrapper.  Clicks *inside* the popup will then no longer dismiss the popup.  Clicks *outside* the popup will still close it, as usual.

* To show the tag pills rather than links to the tags themselves, use the $macrocall widget to invoke the <<tag>> macro, passing in the <<currentTiddler>> value (as set by the surrounding $list widget) as the desired tag name.  The result is the display of a tag pill for each tag in your document.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

InsideTiddlyWiki: The Missing Manuals

[Ton Gerner]

Hi Eric,

<div class="tc-drop-down tc-popup-keep">
   <$list filter="[tags[]!is[system]sort[title]]">
      <$macrocall $name="tag" tag=<<currentTiddler>>/>
   </$list>
</div>

* by default, any click, whether inside or outside a popup, will dismiss the popup.  This works well when the popup contents is just simple links.  However, when further interaction is needed (i.e., when clicking a tag pill that shows a list of tags), you need to add "tc-popup-keep" to the drop-down class wrapper.  Clicks *inside* the popup will then no longer dismiss the popup.  Clicks *outside* the popup will still close it, as usual.

* To show the tag pills rather than links to the tags themselves, use the $macrocall widget to invoke the <<tag>> macro, passing in the <<currentTiddler>> value (as set by the surrounding $list widget) as the desired tag name.  The result is the display of a tag pill for each tag in your document.

 

Nice solution. Never thought of "tc-popup-keep".

Added a <br> after <$list filter ...> to get a vertical list of tags.

Thank you,

Ton

[Joc]

Eric, thanks. Works great.

Now I am struggling to specify the width of the popup that opens, so that tags would be "width-wrapped" (see "Tags button" tiddler). Any hints?

Thanks for the help and cheers,

 Joc.

p.s. If anybody else would be interested, I have very minimalistic top menu that works perfect.

It needs topmenu plugin (http://tongerner.tiddlyspot.com/)

<div class="tc-topmenu">
    {{Tags button}}
    {{Untagged button}}
    {{Menu button}}
    {{$:/core/ui/Buttons/new-tiddler}}
    {{$:/core/ui/Buttons/control-panel}}
    {{$:/core/ui/Buttons/close-all}}
    {{SearchBar}}
</div>

"Tags button" tiddler:

<$button popup=<<qualify "$:/state/popup/tag">> class="tc-btn-invisible tc-untagged-label tc-tag-label">
   Tags
</$button>
<$reveal state=<<qualify "$:/state/popup/tag">

> type="popup" position="below">
   <div class="tc-drop-down tc-popup-keep">

     <$list filter="[tags[]!is[system]sort[title]]">
        <$macrocall $name="tag" tag=<<currentTiddler>>/>
     </$list>
   </div>

</$reveal>

"Untagged button" tiddler:

<$button popup=<<qualify "$:/state/popup/tag">

> class="tc-btn-invisible tc-untagged-label tc-tag-label">
   untgd
</$button>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below">
   <div class="tc-drop-down">
      <$list filter="[untagged[]!is[system]] -[tags[]] +[sort[title]]" template="$:/core/ui/ListItemTemplate"/>
   </div>
</$reveal>

"Menu button" tiddler:

<$button popup=<<qualify "$:/state/popup/tag">

> class="tc-btn-invisible tc-untagged-label tc-tag-label">
   Menu
</$button>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below">
   <div class="tc-drop-down">
      {{Menu button content}}
   </div>
</$reveal>

[Joc]

On Thursday, April 28, 2016 at 6:02:03 PM UTC+2, Joc wrote:

Now I am struggling to specify the width of the popup that opens, so that tags would be "width-wrapped" (see "Tags button" tiddler). Any hints?

"Tags button" tiddler:

<$button popup=<<qualify "$:/state/popup/tag">> class="tc-btn-invisible tc-untagged-label tc-tag-label">
   Tags
</$button>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below">
   <div class="tc-drop-down tc-popup-keep">
     <$list filter="[tags[]!is[system]sort[title]]">
        <$macrocall $name="tag" tag=<<currentTiddler>>/>
     </$list>
   </div>
</$reveal>

I figured it out.

$:/tags/Stylesheet

.tc-drop-down { min-width: 400px; white-space: normal; }

This way the popup, opened with tags, gets wrapped (can be multi-line).

Cheers,

 Joc.