Declutter Aliases - show them only when needed (snippet for version 1.8 is in post #16)

Plugins and Custom CSS CSS
#1

image

Aliases are great, but once I started sprinkling Aliases all over the place, my notes started getting bloated with them. Then I realized that I really don’t have to see these Aliases rems all the time. I just need to be able to find when when I search for them. Also current flow already lists all the available aliases for a given reference when we try to link it.

One unavoidable situation in which I need a handle to these Aliases rems is when I have to edit the name of any of these. So the following snippet will hide these Aliases rems unless you zoom in on it’s parent. When you zoom in on its parent the the Aliases become visible. That way, there will be an option to edit them if there is a need. While searching, tagging etc. these aliases show up as usual.

/* Hide aliases unless parent of the alias is zoomed in */
.tree-node-container .tree-node-container .rem[data-rem-tags~="aliases"] {
   display : none;
}  

/* Hide aliases also inside full hover preview of references */
#document-hover-preview__popup .tree-node-container .rem[data-rem-tags~="aliases"] {
display: none;
}

If you zoom in like this, these Aliases become visible like this

image

16 Likes
[Wiki] CSS snippets to make things more compact and information dense and/or less visually obtrusive
Add an option to "Show a small preview on hover" in addition to the current "all descendants" one
#2

This is really good, @liberated_potato, thanks for sharing. I just implemented it and seems to work perfectly. Cheers!

1 Like
#3

Fantastic! Thanks for sharing!

1 Like
#4

Hi! Is there a chance to update the code for version 1.4? I really liked how it worked but it stopped working. Thanks!

1 Like
#5

Yes, I also really miss your feature, @liberated_potato !!

#6

@Dante_Gaxiola , @hugo
Not able to find the same class structure from previous version. So I came up with a different implementation. Not exactly sure if this new implementation is as clean as the previous one. For the current implementation, the Aliases must be in collapsed state, otherwise children of Aliases will remain visible until you manually hide it. Once you hide it, it won’t come back unless you zoom in on the parent rem.

/* Hide aliases unless parent of the alias is zoomed in */
.TreeNode .rem[data-rem-tags~="aliases"] {
   display : none;
}  
/* Hide aliases also inside full hover preview of references */
#document-hover-preview__popup .rem[data-rem-tags~="aliases"] {
   display : none;
}
3 Likes
#7

I really appreciate your help! Sadly, it’s not working for me:

Captura de pantalla 2021-10-26 015403
Captura de pantalla 2021-10-26 0154031396×281 55.5 KB

#8

@Dante_Gaxiola good catch. It failed to hide Aliases when the parent is tagged as document. I have updated the snippet in my previous post to take into account this scenario as well. Would you give it a try?
@hugo FYI

2 Likes
#9

Terrific! It is working perfectly!

1 Like
#10

Hi, again! It’s still not working for me, don’t know why…

Captura de pantalla 2021-10-26 133326
Captura de pantalla 2021-10-26 1333261537×262 50.2 KB

#11

Not sure what is going on in your case. I guess, you have selected the language of the code snippet as css right? What about the possibility of some higher checkbox disabling this particular snippet?
Is it not working in the case you have shown in your screenshot or is it not working at all?

1 Like
#12

I don’t know what happened, but started working after restarting the program. Thanks a lot! I really appreciate it!

1 Like
#13

@liberated_potato CSS from the first topic should work again:

Basic Hiding 
/* Hide aliases unless parent of the alias is zoomed in */
.tree-node-container .tree-node-container [data-rem-container-tags~="aliases"] {
   display : none;
}  

/* Hide aliases also inside full hover preview of references */
#document-hover-preview__popup .tree-node-container [data-rem-container-tags~="aliases"] {
display: none;
}

Some more variations

Single line 
[data-rem-container-tags~="aliases"] > .TreeNode {
  display: flex;
  flex-wrap: wrap;
}

image

New Icon 
[data-rem-container-tags~="aliases"] > .TreeNode .rem-powerup-icon svg {
  display: none;
}

[data-rem-container-tags~="aliases"] > .TreeNode .rem-powerup-icon::before {
  display: block;
  width: 18px;
  height: 24px;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml; utf8, <svg fill='%23444' xmlns='http://www.w3.org/2000/svg'  viewBox='-2 -1 20 20'><path d='M2.92 6.80688C3.68 6.80688 4.36 6.50688 4.88 6.03688L9.09 8.29688C9.04 8.52688 9 8.75688 9 8.99688C9 9.23688 9.04 9.46688 9.09 9.69688L5.04 12.31C4.5 11.81 3.79 11.5 3 11.5C1.34 11.5 0 12.84 0 14.5C0 16.16 1.34 17.5 3 17.5C4.66 17.5 6 16.16 6 14.5C6 14.26 5.96 14.03 5.91 13.8L9.96 11.1869C10.5 11.6869 11.21 11.9969 12 11.9969C13.66 11.9969 15 10.6569 15 8.99688C15 7.33688 13.66 5.99688 12 5.99688C11.21 5.99688 10.5 6.30688 9.96 6.80688L5.76 4.53688C5.81 4.32688 5.84 4.10688 5.84 3.88688C5.84 2.27688 4.53 0.9669 2.92 0.9669C1.31 0.9669 0 2.27688 0 3.88688C0 5.49688 1.31 6.80688 2.92 6.80688ZM3 15.5C2.45 15.5 2 15.05 2 14.5C2 13.95 2.45 13.5 3 13.5C3.55 13.5 4 13.95 4 14.5C4 15.05 3.55 15.5 3 15.5ZM12 7.99688C12.55 7.99688 13 8.44688 13 8.99688C13 9.54688 12.55 9.99688 12 9.99688C11.45 9.99688 11 9.54688 11 8.99688C11 8.44688 11.45 7.99688 12 7.99688ZM2.92 2.8669C3.47 2.8669 3.92 3.31688 3.92 3.86688C3.92 4.41688 3.47 4.86688 2.92 4.86688C2.37 4.86688 1.92 4.41688 1.92 3.86688C1.92 3.31688 2.37 2.8669 2.92 2.8669Z'></path><rect x='8.5' y='5.5' width='7' height='7' rx='3.5'></rect></svg>");
}

image

No numbers 
/* Hide the powerup icon before each Alias */
[data-rem-container-tags~="aliases"] > .TreeNode .rem-powerup-icon {
  display: none;
}

[data-rem-container-tags~="aliases"] > .TreeNode > .tree-node-container > .tree-node--parent .rem-bullet__number > div { display: none; }
[data-rem-container-tags~="aliases"] > .TreeNode > .tree-node-container > .tree-node--parent .rem-bullet__number::before {
  display: block;
  width: 18px;
  height: 24px;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml; utf8, <svg fill='%23444' xmlns='http://www.w3.org/2000/svg'  viewBox='-2 -1 20 20'><path d='M2.92 6.80688C3.68 6.80688 4.36 6.50688 4.88 6.03688L9.09 8.29688C9.04 8.52688 9 8.75688 9 8.99688C9 9.23688 9.04 9.46688 9.09 9.69688L5.04 12.31C4.5 11.81 3.79 11.5 3 11.5C1.34 11.5 0 12.84 0 14.5C0 16.16 1.34 17.5 3 17.5C4.66 17.5 6 16.16 6 14.5C6 14.26 5.96 14.03 5.91 13.8L9.96 11.1869C10.5 11.6869 11.21 11.9969 12 11.9969C13.66 11.9969 15 10.6569 15 8.99688C15 7.33688 13.66 5.99688 12 5.99688C11.21 5.99688 10.5 6.30688 9.96 6.80688L5.76 4.53688C5.81 4.32688 5.84 4.10688 5.84 3.88688C5.84 2.27688 4.53 0.9669 2.92 0.9669C1.31 0.9669 0 2.27688 0 3.88688C0 5.49688 1.31 6.80688 2.92 6.80688ZM3 15.5C2.45 15.5 2 15.05 2 14.5C2 13.95 2.45 13.5 3 13.5C3.55 13.5 4 13.95 4 14.5C4 15.05 3.55 15.5 3 15.5ZM12 7.99688C12.55 7.99688 13 8.44688 13 8.99688C13 9.54688 12.55 9.99688 12 9.99688C11.45 9.99688 11 9.54688 11 8.99688C11 8.44688 11.45 7.99688 12 7.99688ZM2.92 2.8669C3.47 2.8669 3.92 3.31688 3.92 3.86688C3.92 4.41688 3.47 4.86688 2.92 4.86688C2.37 4.86688 1.92 4.41688 1.92 3.86688C1.92 3.31688 2.37 2.8669 2.92 2.8669Z'></path><rect x='8.5' y='5.5' width='7' height='7' rx='3.5'></rect></svg>");
}

image

5 Likes
#14

Is there a way of making it work in RemNote 1.8?

1 Like
#15

Yes, would be great to make it work in 1.8, please!

#16

@hugo @Dante_Gaxiola
Here is the updated snippet for 1.8 version. I did some testing and it looks good. Let me know if you find any issues.


/* Hide the aliases container if it is inside a child */
.tree-node--children [data-rem-container-tags~="aliases"] {
    display : none;
 }  

  /* Hide the aliases container if it is inside a reference context menu (the one you get when you hover over a rem reference) */
 .rn-popup__content [data-rem-container-tags~="aliases"] {
    display : none;
 }
5 Likes
#17

Thanks a lot!!! It is working.

#18

Hi, man, it worked perfectly, thanks so much!

#19

Is there a newer version of these for the current version (1.8.x)? I was using all of these, but they do not seem to work anymore :frowning:

1 Like
#20

Thanks so much for this!
This was working for me in versions before 1.8.10, but doesn’t seem to be working in the newer versions.
Anyone else?

1 Like