Tiddler Title as Link with Small Handle

#1

TW allows to show tiddler title as link, but this is distracting specially for longer title.
One way is to use a small handle. To do so one core tiddler is required to be modified:

  • $:/core/ui/ViewTemplate/title

For example

Change $:/core/ui/ViewTemplate/title from

<div class="tc-tiddler-title">
<div class="tc-titlebar">
<span class="tc-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]] :filter[lookup[$:/config/ViewToolbarButtons/Visibility/]!match[hide]]" storyview="pop" variable="listItem"><$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]"><$transclude tiddler=<<listItem>>/></$set></$list>
</span>
<$set name="tv-wikilinks" value={{$:/config/Tiddlers/TitleLinks}}>
<$link>
<$list filter="[<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] +[!is[blank]]" variable="ignore">
<$let foregroundColor={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}>
<span class="tc-tiddler-title-icon" style=<<title-styles>>>
{{||$:/core/ui/TiddlerIcon}}
</span>
</$let>
</$list>
<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateTitleFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/title/default]] }}} />
</$link>
</$set>
</div>

To

<div class="tc-tiddler-title">
<div class="tc-titlebar">
<span class="tc-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]] :filter[lookup[$:/config/ViewToolbarButtons/Visibility/]!match[hide]]" storyview="pop" variable="listItem"><$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]"><$transclude tiddler=<<listItem>>/></$set></$list>
</span>
<$list filter="[<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] +[!is[blank]]" variable="ignore">
<$let foregroundColor={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}>
<span class="tc-tiddler-title-icon" style=<<title-styles>>>
{{||$:/core/ui/TiddlerIcon}}
</span>
</$let>
</$list>
<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateTitleFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/title/default]] }}} />&nbsp;
<$list filter="[{$:/config/Tiddlers/TitleLinks}match[yes]]" variable=ignore>
<span class="tc-tiddler-title-icon" style=<<title-styles>>>
<$link>{{$:/core/images/link}}</$link>
</span>
</$list>
</div>

Note to this change

<$list filter="[{$:/config/Tiddlers/TitleLinks}match[yes]]" variable=ignore>
<span class="tc-tiddler-title-icon" style=<<title-styles>>>
<$link>{{$:/core/images/link}}</$link>

Then if you turn on the setting Display Tiddler Titles as Link you will have

image
image888×326 18.2 KB

I think this change is even backward compatible.

By using some CSS you can keep the handle hidden or opack and on hover you will see it! This is more semantic and less distracting!

What do you think? Do you have a better solution? Can you propose styling to have a more beautiful handle here?

EDITED
See one solution without core tiddler modifying in Tiddler Title with Draggy Link (Focus, Permlink, Permview, Drag and Drop) - Tips & Tricks - Talk TW (tiddlywiki.org)

#2

I’m curious how the presence of the link is “distracting” (enough distracting to decide to add more GUI elements to avoid the link)?

For my projects, I do lots of linkstyle stuff, and titles often have distinctive color and other style – so I always enable the “show titles as links” setting in the Control Panel.

#3

You could also make a ViewToolbar button, avoid Core editing and still have drag-ability to move between wikis…

LinkViewToolbarButton
LinkViewToolbarButton591×903 141 KB

1 Like
#4

The UI element can be hidden and only on mouse hover or tap, the handle can be seen! Som it will stay away until you need it!
The handle can also be used to bring the tiddler to focus on the top of window
The same mechanism will be used as now, i.e., when you set tiddler title as link the handle will be added

1 Like
#5

Thanks @Brian_Radspinner. Yes, that’s another nice solution.
I thought one can use such button to

  1. used for permlink
  2. used for dragging
  3. used to bring the tiddler to the top of window
#6

If a tiddler is part of the story river, you can use the Open tab to drag and drop links. IMO it would be the same without the need to change anything.

#7

One use case for me is to drag the tiddler link into a specified folder under Favorites tab! In Tiddlywiki dragging to a tab does not open the tab!
May be you add this functionality to links-to-tab plugin :wink:

#8

I added a demo here with several functionalities.

See Tiddler Title with Draggy Link (Focus, Permlink, Permview, Drag and Drop) - Tips & Tricks - Talk TW (tiddlywiki.org)

1 Like
#9

hmm, That’s a good idea. I’ll create an issue at GH for this one. … but no promises

1 Like
#10

I really want this feature in the core, for the sidebar tabs.

IE Hover over tab and/or when dragging open tab.

The handle icon will suit some, but I too set the titles as links.

  • I have something similar in mind for bookmarklets though
1 Like