Hi @matt_qi
Thanks for the snipplet. It works as you describe.
But i use the Properties at the moment for Tags and my own Property “related”
This related Property contains Links to other notes.
With your code nether the tags nor the related are clickable.
Iam not very familiar with css. So i just ask. Is it possible to “enhance” your snipplet to make Links (and tags) clickable in Reading view?
Capo
Hello people, is there any way you can make it so the add property button is hidden in editing mode also? You can just right click on the properties title to add a property, so I don’t see a need to have a big button there, especially if you don’t add properties that much (like me, as I only add properties to a template once).
Yeah, so I think you can do it by taking the snippets provided here and just replacing
“.markdown-preview-view” with “.markdown-source-view”
That’s what I did!
Yes, here is the latested i’ve used currently.
Read-Only Property:
/*
Hide "Add property" button in in reading mode by default.
Add "show_add_property_btn" to `css_classes` property to show it.
=================================================================
*/
/* Hiding "Add property" button in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-add-button {
display: none;
}
/* Setting property key/type icons to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-key{
pointer-events: none;
}
/* Setting property value of displayed to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .multi-select-container .multi-select-pill-remove-button{
pointer-events: none;
width: 0px;
}
/* Setting property value of input boxes to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .multi-select-container .multi-select-input{
pointer-events: none;
display: none;
}
/* Setting property value of input boxes for text to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-input-longtext{
pointer-events: none;
display: contents;
}
/* Setting property value of input boxes for url to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-link{
pointer-events: none;
}
/* Setting property value of urls clickable in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-link .metadata-link-inner{
pointer-events: visible;
}
/* Setting property value of input boxes for date & time to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-input.metadata-input-text{
pointer-events: none;
}
Read-Only Title:
/*
Making the title of the note in reading view is not editable.
=================================================================
*/
/* View-Header-Title is read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.view-header
.view-header-title {
pointer-events: none;
}
/* Inline-Title is read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.mod-header
.inline-title {
pointer-events: none;
}
Yeah agreed, even in Edit mode the “Add Property” button doesn’t make sense when you can right-click on the Properties heading to add more properties. I don’t think people add properties frequently enough to justify it taking up such prominent spot in the UI. It’s something you’ll just do once while setting up a template and then forget about.
Here’s the CSS I used:
/* Hide "Add Property" button in VIEW-ONLY mode */
.markdown-preview-view .metadata-add-button
{
display: none;
}
/* Hide "Add Property" button in SOURCE (EDIT) mode */
.markdown-source-view .metadata-add-button
{
display: none;
}
And I put it in a file called “hide-add-property-button.css” in the Snippets folder so I can easily toggle it on/off.
Hi. By the time of me writing this, they have implemented a setting for it! Yay! It was pretty hard to find on the web though, between all the css workarounds that are now fortunately no longer needed. In case anyone else stumbled upon this old thread looking for the official way, here it is:
Editor in the sidebarDisplay portionProperties in document setting(I prefer source mode, so it doesn’t bother me while writing)
whoopsie - selecting source doesn’t make it so that it is only visible in source mode, it makes it displayed as raw YAML. Tbh, I hate this and I don’t understand why there isn’t the option to only show it in source mode??
In case anyone comes here from google - the following css snippet fixes this issue:
div.workspace-leaf-content[data-mode="preview"] .metadata-container {
display: none;
}
This will hide the properties in preview mode only. I hope a setting will be added, but for now, i hope this is helpful!
Cheers
Is there a way to hide the properties in all editor modes, except when it’s in read-only mode?