Fine tune Link-to-Tabs plugin icon display

Tips & Tricks
#1

I use @pmario Link-toTabs a lot. It happens to fit well within my TiddlyWiki UI designs as it allows the ability of users to easily select a tiddler from a <<tabs>> macro to be edited.

I would be a big fan to add Link-to-Tabs as a part of the core TiddlyWiki package (maybe as a separate marcro?) - as right now the plugin has to modify $:/core/macros/tabs which is not ideal from a maintenance point-of-view.

The settings of Link-to-Tabs are simple and global for all <<tabs>> - which I like, as it does not get one buried in details. Mine are generally :

[x] Show internal tab link for selected tabs
[x] Clicking a tab-link opens non-shadow tiddlers in edit mode

The rest are unchecked.

These settings will show a Link-to-Tabs icon on the sidebar tabs. For my users, I prefer a more traditional, vanilla sidebar - so in a stylesheet tiddler (tagged: $:/tags/Stylesheet) can add:

/* Do not display Link-to-Tabs 'paperclip' on sidebar tabs */
.tc-sidebar-tabs .wltc-link-to-tab {
    display: none;
}

Sidebar tabs will no longer display the Link-to-Tabs icon.

There are also tiddlers with the <<tabs>> macro which I do not wish to display the Link-to-Tabs icon - as a user would not generally edit these tiddlers. To remove the Link-to-Tabs icon - tag the tiddler containing the <<tabs>> macro - in this case tag: ‘Projectsdocs’

/* Do not display 'paperclip' on <<tabs>> in tiddlers tagged 'Projectdocs' */
[data-tags*="Projectdocs"].tc-tiddler-view-frame .tc-tab-selected + .wltc-link-to-tab {
    display: none;
}

If you wish to modify how the ‘paperclip’ is displayed in <<tabs>> macro in certain tiddlers - can do the following - this makes the Link-to-Tabs icon larger in tiddlers containing the <<tabs>> macro that are tagged ‘Projects’ :

/* Display 'paperclip' larger on <<tabs>> in tiddlers tagged 'Projects' */
[data-tags*="Projects"].tc-tiddler-view-frame .tc-tab-selected + .wltc-link-to-tab svg {
  width: 2.0em;
  height: 2.0em;
}

Note that when using selector [data-tags*="xxx"] it will always be [data-tags*="xxx"].tc-tiddler-view-frame as that is where tiddler tags are assigned in the DOM - then refine display attributes of sub-classes from there.

By playing around with the styles can do fine tuning of how/when//where Link-to-Tabs plugin displays on your TiddlyWiki UI.

#2

Hi poc2go
I do like your tips and tricks. I may include some of your concepts into the plugin documentation. I think it may even be possible to add some new classes to the plugin code. So the configuration CSS could be even simpler. – No promises :wink:

Me too. The main problem is, that I did not find a sensible way to implement the functionality without modifying the core macro.

I also want to be able to drag & drop that macro from my browser bookmarks bar into eg: tiddlywiki.com
So it has to replace the core, otherwise there would be no effect. It’s very handy for development, since the plugin does not need a tab reload.

I did not consider a usecase you described in the OP. It is an interesting one. As I wrote I may give your concept some thoughts.