Collapse/Hide Properties Easily

[sheeponmeth]

I’ve made a bit of use of the :block-hidden-properties configuration, but I find that it’s not always the right approach. I often want to hide properties (like tags and categories) that are unsightly, but also be able to conveniently edit them.

I’ve tried using the below, but sometimes the property is displaced and popped out above the hidden block and when that doesn’t happen, the property doesn’t seem to be applied.

#+BEGIN_HIDDEN
myproperty: myValue
#+END_HIDDEN

I think it would be convenient to be able to collapse properties almost like a child block or to be able to syntactically designate them as hidden when in view mode, but editable when in edit mode.

[Leech]

That would be great.
But I’ve seen videos where people already have this feature: How I'm Using Logseq For My DevLog & Technical Notes 👨🏻‍💻️ - YouTube

[mlanza]

My Style Carousel plugin can be configured to toggle visibility, including properties.

Here’s are the custom settings you might use:

{
  "buttons": {
    "props": {
      "refreshRate": 5,
      "hits": ["text-decoration: underline;", ""],
      "styles": [{
        "char": "\\eeaf",
        "style": ".pre-block {display: none}",
        "hits": ".pre-block"
      },{
        "char": "\\eeb0",
        "style": "div#main-content-container:hover .pre-block {text-decoration: underline wavy;}",
        "hits": ".pre-block"
      }]
    }
  }
}

Basically, you just have to figure out your CSS selectors. Find your selectors and you can hide/unhide anything.

Here is another selector you could use:

div.block-properties.page-properties

[hulalala]

@mlanza

page-properties

Thank you! I have solved this with your plugin. Following is my configuration. Switch show/hide on block properties (not page properties).
The plugin .json file is as follows

{
  "disabled": false,
  "buttons": {
    "props": {
      "desc": "Toggles the visibility of block properties",
      "disabled": false,
      "refreshRate": 5,
      "hits": [
        "text-decoration: underline;",
        ""
      ],
      "styles": [
        {
          "tooltip": "Hover block properties",
          "char": "\\ee88",
          "status": "hover-props",
          "hits": "div.block-properties:not(.page-properties)"
        },
        {
          "tooltip": "With block properties",
          "char": "\\eeb0",
          "status": "with-props",
          "hits": "div.block-properties:not(.page-properties)"
        },
        {
          "tooltip": "Without block properties",
          "char": "\\eeaf",
          "status": "without-props",
          "hits": "div.block-properties:not(.page-properties)"
        }
      ]
    }
  }
}

And add following to custom.css

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Now the properties' tags can be clicked too */
body[data-sc-props="hover-props"] .block-properties:not(.page-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 */
body[data-sc-props="hover-props"] .block-main-container:has(.block-properties:not(.page-properties)):hover .block-properties {
/* body[data-sc-props="hover-props"] .block-content-inner:hover~.block-properties { */
      display: block;
      opacity: 1;
      z-index: 999;
}

/* Keep Showing block properties on hovering .block-properties */
body[data-sc-props="hover-props"] .block-properties:not(.page-properties):hover {
      display: block;
      opacity: 1;
      z-index: 999;
}

body[data-sc-props="hover-props"] .block-content-inner:has(+.block-properties:not(.page-properties))::after {
      /* padding-left: 10px; */
      /* color: hsl(var(--ct-accent-color)); */
      /* font-family: var(--ls-font-family-code); */
      /* font-weight: bold; */
      content: "·";
      color: var(--ls-primary-text-color);
}

body[data-sc-props="with-props"] div#main-content-container:hover .block-properties:not(.page-properties) {
      text-decoration: underline wavy;
}

body[data-sc-props="without-props"] .block-properties:not(.page-properties) {
      display: none;
}

body[data-sc-props="without-props"] .block-content-inner:has(+.block-properties:not(.page-properties))::after {
      content: "·";
      color: var(--ls-primary-text-color);
}

Reference:

Hide block properties when block is collapsed

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); f…

Hide block properties when block is collapsed

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 …

Block Properties UI: Auto-Hiding/Revealing-on-Hover

For interested people, I managed to work out the CSS code for when there is a SCHEDULED or DEADLINE setup for the block, which would break my prevois code and Properties DIV wouldn’t show on Hover. The new updated and improved code is: /* 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: 10…

[hulalala]

I have updated custom.css, fixed some issues:

1. Put the dot label in the vertical center when the block content covers multiple lines.
2. Ensure the exact popup for property of hovered block in context of block reference and block embed (only the hovered block popups property rather than all blocks in block reference or block embed).
3. Add transition animation to popup

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Now the properties' tags can be clicked too */
body[data-sc-props="hover-props"] .block-properties:not(.page-properties) {
      display: none;
      position: absolute;
      transform: translate(0%, -10%);
      /* transform: translate(0, -8px); */
      /* 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.inline:has(.inline:hover) */
/* exclude setting .block-properties in .references-blocks-item */
/* 把空格改成>，避免在block embed中鼠标悬停时，全部冒出来 */
body[data-sc-props="hover-props"] .block-main-container .block-content.inline:has(.inline:hover, :is(h1,h2,h3,h4,h5,h6):hover)>.block-properties:not(.page-properties) {
      /* body[data-sc-props="hover-props"] .block-content-inner:hover~.block-properties { */
      display: block;
      /* opacity: 1; */
      z-index: 999;
      animation: anim 500ms step-end;
      transition: opacity 500ms;

      @starting-style {
            opacity: 0;
      }
      @keyframes anim {
            0% {
                  display: none;
            }
      
            100% {
                  display: block;
            }
      }
}

/* Keep Showing block properties on hovering .block-properties */
body[data-sc-props="hover-props"] .block-properties:not(.page-properties):hover {
      display: block;
      opacity: 1;
      z-index: 999;
}

/* 选中后面紧跟着block-properties的.block-content-inner */
body[data-sc-props="hover-props"] .block-content-inner:has(+.block-properties:not(.page-properties))::after {
      /* padding-left: 10px; */
      /* color: hsl(var(--ct-accent-color)); */
      /* font-family: var(--ls-font-family-code); */
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      content: "·";
      color: var(--ls-primary-text-color);
}

body[data-sc-props="with-props"] div#main-content-container:hover .block-properties:not(.page-properties) {
      text-decoration: underline wavy;
}

body[data-sc-props="without-props"] .block-properties:not(.page-properties) {
      display: none;
}

body[data-sc-props="without-props"] .block-content-inner:has(+.block-properties:not(.page-properties))::after {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      content: "·";
      color: var(--ls-primary-text-color);
}

[daviddelven]

How can I use that json code for that plugin?

[hulalala]

Follow the instructions in Collapse/Hide Properties Easily - #3 by mlanza, Collapse/Hide Properties Easily - #4 by hulalala, Collapse/Hide Properties Easily - #5 by hulalala

1. Download that plugin and paste .json into the setting of that plugin (the first json in Collapse/Hide Properties Easily - #4 by hulalala)
2. Paste another .json into the custom.css of Logseq (json in Collapse/Hide Properties Easily - #5 by hulalala)

[daviddelven]

I’ve done both, following your 1 and 2 steps.
I works perfectly.
Thanks!!!