Differentiating Mirrors from standard Items? Fishing for ideas

Jerud

Currently the tally box is the only way to tell an item is a mirror. That works, but is a bit inelegant and doesn’t translate well to mobile. I have two ideas about how to handle this. They’re both terrible 😁. But I’d love to hear other folks’ ideas so we can maybe figure out some candidates to propose to Jay. Ideally there can be some default look for mirrors that 80% of us don’t hate – and ideally, there will be styling controls for mirrors (and links) in the theme editor, so 20% of us can do something about that.

Suggestion 1: I just found out there is a CSS property called text-shadow. Now, this could look really bad, but perhaps combined with good selection of colors and opacity, it could work?

Suggestion 2: “Shine” on-hover. When user mouses-over a mirrored item, play a quick, subtle, left-to-right animation that gives the impression of light reflecting off a sheet of glass. Like the flash of light you get off a car windshield as it passes you on a sunny day. Something like sequentially flashing the background color of each character to white. Pro: works with other formatting Cons: doesn’t work on mobile and does gives no “at a glance” information because it requires mouseover. Would not come through in screenshots so hard to troubleshoot.

Eik

How about a special colored bullet that indicates an item is a mirror. I mean, change the color of the existing bullet to a special color.

Jerud

Eik I think Workflowy does it that way but since Legend doesn’t force users to have bullets on every item like Workflowy does, just coloring the bullet won’t get the job done.

PeterFG The red border seems like a nice low-key solution though having it only work on-hover has the same weaknesses as my second idea. What if the border was always there, not just on mouseover? Or if the background were tinted subtly instead? Not sure if there’s a CSS property to easily apply a border to an item like that.

PeterFG

This is the way its done in Notion which I think is great

Eik

Jerud Workflowy has a special bullit for a mirrored item, a diamond. Maybe that’s an option to have an extra bullet on the left of the original bullet.

Jerud

Eik Hm, I don’t love the idea of adding a “second bullet” to be displayed along with the item’s prefix, but perhaps some modification to the existing prefixes – something that works with all 5 options (none, bullet, number, task, project)? For example, a circle or box drawn around the prefix, large enough that any prefix (even the task) will fit inside it without looking bad – but this would also stand alone even if there isn’t any prefix at all.

Might be hard to create something large enough to fully encompass a Task box without looking huge and weird when there is no prefix. But this would at least work in mobile, without taking up extra space.

yakinbozek

Eik Jerud @Jay

But it shouldn’t be adding a second bullet (a diamond) to the left of the normal bullet. The way some apps are doing it is to replace the circular normal bullet with a “diamond-shaped” bullet whenever the items have mirrors.

This way is great because, besides becoming the standard, it is a really subtle, almost imperceptible difference that doesn’t affect the way your outline looks, but still carries such meaningful distinctive information if you want to look at it.

Plus, you can expand that information by clicking on the mirrors “small 3 dots menu” that will appear when you hover over their bullet, and see how many mirrors that item has. Even where they are exactly located if you expand there for the detailed and clickable breadcrumb path.

See the image below:

Eik

Jerud What about a pipe symbol to the left of the bullet in the same color as the text.

Jerud

Eik That could work, I’d use that. Maybe a bit crowded for mobile, but looks workable on web/desktop.

yakinbozek

yakinbozek @Eik @Jerud

As in Legend, bullets can have many different icon prefixes (bullet icon changes depending on the type of node an item is), completely replacing the bullet for a diamond would make special nodes (projects, numebered lists, checkboxes) lose its visual identity cue.

In this case, maybe it would be better an approach as Roam Research does to indicate an item is a block reference. Just by adding a little superscript clickable number after the referenced item, indicating how many mirrors there are of that node in all your database.

When you click on that little number, a pop up will display where those mirrors are exactly located, you can even expand to see the complete path, and you can click on them to go there. The original item will also display the little superscript number indicating how many times it is referenced, but not just to its right, but at the rightmost margin at the of the line.

Note that:

In WorkFlowy there is no distinction between an original node and its mirrors, all mirrored items are simply just mirrors, and that makes sense because all those mirrored nodes are in fact the same item living in many different places, no need of keeping track which was the original one (all are the same).
In Roam, when you block reference a node, is different, there is still an original node, and then there are its references. But this is more complex because Roam has not only block references (that keep track of an original) but also has embeded blocks (which transclude all nodes children) and page references which can live in many places by having no original, all instances are treated as the same.

See images and link below:

Jerud

The existing “tally boxes” in the right margin of Legend do already indicate Mirrors in a way similar to the examples above.
And as already mentioned, I think “bullet”-based approaches are not compatible with Legend’s multiple options for bullets.

There are two reasons I find the “tally boxes” inadequate:
1) the right margin is easy to overlook especially when using narrower Panes with items that wrap the line
2) the tally boxes are not explicitly used for Mirrors; they also appear on Linked Items.

The tally box only appears on-hover for linked items, and linked items do have a unique visual style. So strictly speaking, it is always possible to identify a Mirror visually. But it’s a rather subtle set of distinctions.

Legend’s flexibility means it sees a lot of very different use cases. I can easily imagine that some users would actually want mirrors to blend in and be nearly indistinguishable from standard items. I can also imagine other users would want them to stand out very obviously. I personally would like them to be different in a clear but not “loud” way.

For these reasons I believe the best solution would be to include Mirrors in the user-configurable THEME settings. In this case the current behavior would be a sensible “default” configuration, but each user could define a visual style for mirrors that makes sense for them.

If this were available I would probably apply a CSS “shadow” effect to my mirrors – I really like the idea of a reflection effect but I’m not sure I could make that work since it’s a lot more complex!