Hide block properties when block is collapsed

David_Ye1 · January 24, 2024, 12:28pm

works like a charm. thanks!

Hugh_D · February 6, 2024, 11:30pm

This worked really well for me! I especially liked how the block properties in the right side bar always show. Do you think there is a way to have similar behavior for page properties? i.e. the first block on the page (if it is properties) is still shown?

razcore-rad · February 26, 2024, 7:35am

Thanks a lot, I took your solution and expanded to:

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/src/palettes/one-dark-pro.css");

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
.block-content-inner:has(+.block-properties)::after {
  padding-left: 10px;
  color: hsl(var(--ct-accent-color));
  font-family: var(--ls-font-family-code);
  font-weight: bold;
  content: "P";
}

.block-properties {
  display: none;
}

.block-properties:hover {
  display: block;
}

.block-content-inner:hover~.block-properties {
  display: block;
}

#right-sidebar .block-properties {
  display: block;
}

Which gives me the following look:

There’s that P at the end reminding me this block has properties and when hovering over the property list they remain visible because sometimes we have links and such in there.

Note: I have no idea if the css variables come from logseq or the custom theme I use.

FlorianF · February 27, 2024, 3:54pm

so now you can click those links in Properties? :-o that would be huge improvement … my only drawback that hurts me every time…

razcore-rad · February 28, 2024, 9:10am

Yes. I simplified your CSS quite a bit, I kept the default look and I’m pretty much just toggling the visibility on/off of the default panel. So yea when hovering over the properties panel it also remains visible so you can click links or on it to edit like usual.

You might have to move the pointer a bit faster on the properties panel, there’s a bit of a small gap at least in my theme so I have to be quick about it :), but other than that I can’t complain. Also works fine on mobile from what I can see.

razcore-rad · February 28, 2024, 1:06pm

Actually I was rather bugged that the gap to .block-properties is preventing from easily hovering over the properties so I updated the solution with this:

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/src/palettes/one-dark-pro.css");

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
.block-content-inner:has(+.block-properties)::after {
  padding-left: 10px;
  color: hsl(var(--ct-accent-color));
  font-family: var(--ls-font-family-code);
  font-weight: bold;
  content: "P";
}

.block-properties {
  display: none;
}

/* Display Block Properties when hovering over the entire Block element, not just its text */
.block-main-container:has(.block-properties):hover .block-properties,
#right-sidebar .block-properties {
  display: block;
}

FlorianF · March 27, 2024, 2:41pm

I tested your code and, while it does “revealing the properties” and they can be hovered by the mouse and the links inside can be clicked, I would like to somehow retain the position of the block without sliding it down when the properties are revealed -which is done with the position:absolute …

I don’t know much CSS so I don’t know if it’s at all possible to have the properties not disappear while I hover both .block-content-inner and the .block-properties but the block-properties should disappear when i exit my mouse below the properties box …

FlorianF · March 27, 2024, 2:51pm

I got lucky and managed to get what I needed:

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Now the properties' tags can be clicked too */
.block-properties {
  display: none;
  position: absolute;
  transform: translate(0%, -10%); /* Move the properties horizontally aligned with the ".block-content-inner" DIV Left Margin */
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--ls-secondary-border-color); /* Add custom border color from pre-defied variables */
  background: var(--ls-primary-background-color)
}
/* Show block properties on hovering .block-content-inner */
.block-content-inner:hover ~ .block-properties {
  display: block;
  opacity: 1;
  z-index: 999;
}
/* Keep Showing block properties on hovering .block-properties */
.block-properties:hover {
  display: block;
  opacity: 1;
  z-index: 999;
}

.block-properties {
  display: none;
}

I basically moved up the properties DIV ( transform: translate(0%, -10%) ) so there is no gap between the heading of the block and itself and made it so that the div display is of type block when hovering it. I also added a .block-properties:hover CSS rule to make the priperties DIV stay ontop while hovering the mouse over it.

This way, the content of the block doesn’t slide down when the properties DIV show up and I can hover the block heading to reveal the properties and I can also move my mouse over the properties without it disappearing so now I can click any links / tags inside the properties while the properties disappear once I exit the header or properties areas.

I am super happy about this, thanks @razcore-rad for driving this forward as I really believed it can’t be done and left it behind…

tombara · April 3, 2024, 6:17am

To just hide block-properties when the block is collapsed, this works for me (lets hope, that the block-class doesn’t get renamed

In custom.css, simply add:

/* Hide block-properties of collapsed blocks */
.ls-block:not([data-collapsed="false"]) .block-properties {
  display: none;
}

EDIT: The above example hides also page-properties - this should leave the page-properties as-is:

.ls-block[data-collapsed]:not([data-collapsed="false"]) .block-properties {
  display: none;
}

BradyJames · April 17, 2024, 10:09pm

Just wanted to say Thank You, to everyone who worked on a solution to this problem. I am new to Logseq, and realized that properties was best for my use case, but were so intrusive when being displayed so prominently near what was the important info for me. I just pasted your code in and voila, life was good once again.

FlorianF · April 18, 2024, 8:39am

To be fair, if Blocks are collapsed, having the properties show up on hover is a nice way to get a glimpse of what’s inside, if the Title of the Block is not helpful enough. But I wish there was a way to add a timing to the hover so that just scrolling would not flash on screen all properties of the traversed collapsed blocks.

Is it maybe possible somehow to say: if I hover over a block title and the block is collapsed and if my mouse stays there for 2seconds then show the properties div?

mentaloid · April 18, 2024, 8:51am

This is possible with css attribute transition and its delay value.

Whiskeyclone · April 18, 2024, 10:51am

Can someone make the transition delay in a code snippet that i (a total rookie) can copy and paste?

I too want the delay to be a bit longer, cause i dislike the hover over linked sites to show up so soon.

FlorianF · April 18, 2024, 12:22pm

I haven’t managed to make it work …

mentaloid · April 18, 2024, 7:39pm

If we use e.g. @FlorianF’s code, we can do either:

a transition:
- inside rule .block-content-inner:hover ~ .block-properties {
  - add these lines:
```
  transition: opacity 2s step-end;
  @starting-style {
    opacity: 0;
  }
```
an animation:
- define the following animation:
```
@keyframes anim {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}
```
- then inside rule .block-content-inner:hover ~ .block-properties {
  - add this line: animation: anim 2s step-end;

FlorianF · April 19, 2024, 7:50pm

I don’t know why or if I have any conflicting CSS but I tried so many variations from web and your suggestion also and I don’t see any difference…

mentaloid · April 19, 2024, 8:11pm

Most probably you have conflicting code. Try in an empty graph without customizations.

Whiskeyclone · April 23, 2024, 11:57am

I have noticed that sometimes a custom css only workes if i put it in another place in my custom.css. Is there a specific order that one has to comply with?

For examples: I recently added some new custom.css and suddenly my hide-block-properties stopped working. If i put it back on the very top of my custom.css it starts working again…

mentaloid · April 23, 2024, 12:08pm

The later/lower a css rule is placed in the file, the higher its priority (i.e. it trumps previous rules).
Ideally, should merge similar rules to a single desired one, so as to avoid such issues.

hulalala · May 10, 2024, 3:42am

Thanks. It works for me. But it also hides page properties. Are there any configurations to show page properties while hide block properties?

UPDATE: I have solved this by adding :not(.page-properties)

my implementation: Collapse/Hide Properties Easily - #4 by hulalala