Hide block properties when block is collapsed

I have a love-hate relationship with page- and block-properties. I love them because they are a excellent help in organising my graph. Queries are such an easy way to bring back anything with the right properties asigned.

But they look so messy at the moment. They clutter everything. My example here is a list of poems:

With all that block properties, it really isn´t a list of block after all, it´s a mess. And mind you, these are collapsed blocks. The actual poem isn´t even showing.

I am helping myself with two workarounds at the moment, one being a child block with the same name:
grafik

and - mabye the better one - making the properties a child block and adding yet another property “title” to make the query useable.

grafik

I can not mix the two workarounds of course, because than my query looks something like that:

Hope you get what i am aiming for here. I love the properties, but they can take up a lot of room if they show up even when collapsed. There are some Feature Requests here to hide properties, but they don´t seem to get anywhere.

Greerings and Thank you for your help

3 Likes

To hide the properties of collapsed blocks, try adding this in file custom.css:

div[data-collapsed] div.block-properties {
    display: none;
}

There is an option in config.edn that should do what the OP wants but doesn’t.

 ;; By default, a block can only be collapsed if it has some children.
 ;; `:outliner/block-title-collapse-enabled? true` enables a block with a title
 ;; (multiple lines) can be collapsed too. For example:
 ;; - block title
 ;;   block content
:outliner/block-title-collapse-enabled? true

I guess this should apply to properies also I think.

Thanks for the effort, but this does not work.

Does this qualify as a bug-report then? I am surprised that it only seems to disturb me :slight_smile:

1 Like

It works to me and it is straightforward on what it does. Are you looking for something different? If you plan to report it, an accurate description is required.

Maybe i made a mistake in the custom.css. Here is how it looks:

But the block-properties still show. Here is an example of an open block vs a collapsed block:
grafik

I hope this example makes it more accurate. I want to hide the block-properties for the collapsed block.

Thank you so much for helping me on this one. Logseq Version is 0.9.20 fyi.

Sure. Each css rule should be separate. Your own custom.css should look like this:

/* Wrap text in query table */
td {
    white-space: pre-wrap !important;
}

/* Hide the properties of collapsed blocks */
div[data-collapsed] div.block-properties {
    display: none;
}
1 Like

This hides the block properties for both collapsed and expanded blocks, but for me this will totaly do it.
I can see (and edit) them when i click in the block. This declutters my pages tremendously. Thanks!

1 Like

Apparently this can’t be done reliably, the reason is described in this issue (in the comments): Show handle to collapse blocks and hide properties · Issue #7086 · logseq/logseq · GitHub

I have these in my custom.css, maybe they are of use to you:

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Styles for displaying block properties */
.block-properties {
  display: none;
  position: absolute;
  transform: translateX(0%); /* 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;
}

/* Override styles for block properties in right sidebar */
#right-sidebar .block-properties {
  display: block;
  position: relative;
}

I have the block properties always hidden for both collapsed and uncollapsed blocks but they will show on hover. To edit them one has anyways to enter edit mode on the block. Because most properties are also links (dates, tags, etc) I will have the block properties to always show if the block is opened in the right sidebar.

7 Likes

works like a charm. thanks!

1 Like

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?

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.

1 Like

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

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.

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;
}
2 Likes

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 …

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 :partying_face: as I really believed it can’t be done and left it behind…

2 Likes

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

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;
}

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.