How to make a more convenient method for selecting tags?

[Mike Andyl]

Now the usual view is very inconvenient when you have a lot of tags and need to scroll and scroll down the page. Plus, the selected tags are still on the list and continue to distract.

This raises two questions?

1. How can I make the selection of tags more compact so that I don't have to scroll down the page?

2. And how to mark tags that are already assigned. Ideally remove from the list, but it's probably difficult. Maybe you can at least change the color to a less noticeable?

Any ideas?

Nice option with checkboxes here
https://i.imgur.com/gxJm0Tw.jpg
http://zemox.tiddlyspot.com/

But I didn't understand how he did it, I installed his plugins and nothing changed.

[PMario]

Hi,

You could use my "Multi-column Dropdown" plugin. https://wikilabs.github.io/editions/multicol-dropdown/

The plugin only changes some CSS styles.

For an easy way to import and update my plugins you can have a look at https://wikilabs.github.io/  and watch the video.

have fun!

mario

PS - If you USE it: Support it :)

[PMario]

Hi,

This plugin will only help you with your issue no. 1)

-m

[TW Tones]

Miket,

Good questions we should collect answers to, the fact is Tags are such a useful concept that we can "run away with them" and overuse them. These questions of yours indicate you seem to be in  a common phase we all pass through with tiddlywiki.

However it exposes something us "seasoned" tiddlywiki enthusiasts learn. An over reliance on tags causes something we sometimes refer to as "tag pollution" or "tag saturation". Fortunately there are plenty of strategies we can adopt.

Let me pass on a little from my experience of more than a decade with tiddlywiki and three decades with Information technology.

• Personally I came across this tag pollution very early in my tiddlywiki journey, the result is I have a special approach now that serves me well, my approach is to use as few tags as possible leaving the "tags space" as "empty as possible". I tend to reserve tags for system functions (behind the scenes eg system tags etc...)  or "ad hoc" use.
• I achieve this by "moving tags into fields" whereever possible. 
  • An example would be rather than have a tag to indicate a task, I have a field called object-type with a value of task (and other values), to indicate a status of a task rather than a status tag have a status field. 
• When moving from a tag to a field we get to craft the way they behave differently, for example in the aforementioned object-type and status fields we can ensure a given tiddler only has one value at a time, so we do not need to put the effort into removing a tag. Just change the field value.
  
• Of course like tags sometimes we want more than one value at a time on a specific tiddler, I use tags initially, they make this easy, however as you start to have too many tags, new tags simply "pollute the tag space further".
  
  • I may not want to change what plugins and other tools use tags for but I can control what I do with ones I create.
  • Using the listops, list and other operators we can manage fields that contain multiple values.
    • I tend to avoid spaces in the names of such values so space delimited is sufficient but you can make use of the [[title with spaces]] methods and look at enlist and other operators.
  • The alt-tags (gen tags) plugin allows you to make use of multiple-tags fields if you want.
• The trick is tags are a form of generic indicators, you can quickly use to achieve an outcome, but with experience you discover on moving them into a field that there are different organisational methods you can easily enforce when using a field. For example you can ensure a tiddler belongs only to one category or one or more subjects.
  
• Fields can 
  
  • Exist but contain nothing see [has[fieldname]] (field exists and has value) and [[has:field[fieldname]]  (field exists with or without a value)
    • Thus the existence of a field can itself be a condition or switch
  • Contain wiki text or transclusions
    
  • be managed with common suffixes or prefixes eg; anything-link  else-link 

Finally;

• In coming versions the limitations of field naming are to be removed and we expect a lot of innovation ultimately occurring around this.
• Eventually one becomes aware of the subtle qualities of different ways to define either a tag or field. So lets say I decided to give many tiddlers a "domain" eg work/personal/health/family I may decide a given tiddler should only belong to one domain, then I would use a field with a single value.

Regards

Tones

[Mike Andyl]

To remove unnecessary tags from tag-picker that already exist, find two filters nonSystemTagsFilter & systemTagsFilter in $:/core/macros/tag-picker and add this to them at the end: -[all[current]tags[]]

суббота, 10 июля 2021 г. в 01:49:47 UTC+3, TW Tones:

[Mike Andyl]

And another useful custom CSS edit. More tags on the screen line by line in the block!

.tc-block-tags-dropdown{
    white-space: normal;
    min-width: 620px !important;
    }
.tc-block-tags-dropdown a {
    display: inline-block !important;
    padding: 4px 4px 4px 4px !important;
    }

воскресенье, 11 июля 2021 г. в 00:54:02 UTC+3, Mike Andyl:

[David Gifford]

Here is an easy way, just a simple stylesheet. https://giffmex.org/gifts/documenting.tw.html#Tag%20editor%20dropdown

[Mike Andyl]

Okay, but the last problem remains.
How to make popup tag-picker not move after clicking on the tag, only in the vertical direction. It doesn't have to jump to a different place every time!
This is how it works
http://tw5magick.tiddlyspot.com/

This is very convenient when you do not need to search for the next tag every time. It is strange that such an important part is in such a terrible state!

воскресенье, 11 июля 2021 г. в 02:29:12 UTC+3, David Gifford:

[Mike Andyl]

I don't know why your post was deleted. Possibly a spam error! I also had this a couple of days ago :(
You wrote about CSS

.tc-edit-tags .tc-block-dropdown.tc-block-tags-dropdown {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: 30em;
}

I changed and now I really like it!

.tc-edit-tags .tc-block-dropdown.tc-block-tags-dropdown {
   position: fixed;
   top: 100px;
   right: 40px;
   bottom: 200px;
   width: 30em;
}

Now you can just poke at the tags, the already selected ones are hidden and do not distract, and the window does not jump. And you don't have to search again every time.
Not bad and very convenient!

воскресенье, 11 июля 2021 г. в 02:56:13 UTC+3, Mike Andyl:

[Mike Andyl]

and may be add overflow: scroll;  :))

воскресенье, 11 июля 2021 г. в 14:30:31 UTC+3, Mike Andyl:

[Mike Andyl]

or even overflow-y: auto;

воскресенье, 11 июля 2021 г. в 14:37:08 UTC+3, Mike Andyl:

[Mike Andyl]

Everything would be fine, but I discovered a new problem. This tags window is covered by other entries. It can be fixed? I've experimented with z-index but to no avail.
https://i.imgur.com/CZOVn6A.jpg

воскресенье, 11 июля 2021 г. в 16:48:00 UTC+3, Mike Andyl:

[Brian Radspinner]

That's interesting. Testing at TW.com and in my own TW, the menu floats above other tiddlers.

Do you have any other CSS positioning for .tc-tiddler-frame, .tc-tiddler-view-frame, or .tc-tiddler-edit-frame?

[Mike Andyl]

https://i.imgur.com/Q1wXDdQ.jpg

Turn on Sticky titles  -  yes

/* TAG SELECTOR */

.tc-block-tags-dropdown{
    white-space: normal;
    min-width: 620px !important;
    }
.tc-block-tags-dropdown a {
    display: inline-block !important;
    padding: 4px 4px 4px 4px !important;
    }

.tc-edit-tags .tc-block-dropdown.tc-block-tags-dropdown {
   position: fixed;
   top: 100px;
   right: 40px;
   bottom: 200px;
   width: 30em;

   overflow-y: auto;
}

вторник, 13 июля 2021 г. в 03:15:23 UTC+3, Brian Radspinner:

[Brian Radspinner]

I don't think that simple CSS can solve this, since each tiddler frame is given a higher z-index as you go up the story river; so no matter what you set, each child will overlap all the tiddler elements farther down the river. You may have to just size the menu to not overlap with the story river, give the width a % to re-size with the window.

[TW Tones]

I believe  z index of 1000 or 1500 should stop this.

Tones

[Mike Andyl]

"I believe  z index of 1000"

No, there is already 1000 in the parent element.

------
Let's take a look at the other side.

/* TAG SELECTOR */
.tc-block-tags-dropdown{
    white-space: normal;
    min-width: 620px !important;
    }
.tc-block-tags-dropdown a {
    display: inline-block !important;
    padding: 4px 4px 4px 4px !important;
    }
.tc-edit-tags .tc-block-dropdown.tc-block-tags-dropdown {

   position: sticky;
   height: 30em;
   overflow-y: auto;
}
Almost not bad, but the first line of the first tag is always twitching.
https://i.imgur.com/aYCj77Z.jpg
https://i.imgur.com/uRy5uDx.jpg
Maybe try to get rid of this?
I fiddled with the CSS for a long time, but nothing came of it better. Any ideas?

среда, 14 июля 2021 г. в 00:58:50 UTC+3, TW Tones:

[Brian Radspinner]

Try bumping up the z-index of the tiddler being edited:

.tc-tiddler-edit-frame { z-index: 1000 !important; }

The tiddler being edited will have a higher much higher z-index than all the other tiddlers still in view mode with z-index around 200.

[Mike Andyl]

and how can I do it?

среда, 14 июля 2021 г. в 03:32:14 UTC+3, Brian Radspinner:

[Brian Radspinner]

Put the following code in your stylesheet:

.tc-tiddler-edit-frame { z-index: 1000 !important; }

When a tiddler goes in draft mode, it will have this class automatically included. Putting the edit-frame to a z-index of 1000 should keep it above any other tiddlers in view mode with z-indexes around 200.

[Mike Andyl]

Cool! Thank you! To avoid conflict with MenuBar (z 850), it is better to set slightly smaller.

среда, 14 июля 2021 г. в 18:34:58 UTC+3, Brian Radspinner: