Properties: Prevent/Lock Changes in Reading Mode

Use case or problem
While in reading mode, changes can still be made to the properties section.

It is easy to accidentally click “x” on a tag or list item for example and thus unintentionally change note content. I could see this being a larger issue on mobile with accidental touches.

Proposed solution
Locking the fields while in reading mode would prevent this.

6 Likes

Css quasi-workaround below for anyone interested. This removes the “Add property” button and “x” from tags. It doesn’t prevent the tags from being backspaced but it makes it look more polished.

Only affects the inline Properties pane. The sidebar properties remains unchanged.

Targeting with css class “lock-metadata”:

/* Remove add properties button */
.lock-metadata .metadata-container > .metadata-content > .metadata-add-button {
  display: none
}

/* X button on tags and lists */
.lock-metadata .metadata-container .multi-select-pill-remove-button {
    display: none
}
  
/* X button on tags and lists */
.lock-metadata .metadata-container .multi-select-pill {
    padding-right: 0.7em;
}

Alternatively apply to all notes:

/* Remove add properties button */
.mod-header .metadata-container > .metadata-content > .metadata-add-button {
  display: none
}

/* X button on tags and lists */
.mod-header .metadata-container .multi-select-pill-remove-button {
    display: none
}
  
/* X button on tags and lists */
.mod-header .metadata-container .multi-select-pill {
    padding-right: 0.7em;
}
1 Like

It would be great if this becomes a core feature.

Another option applying to reading mode only (Hides add property and tag X while in reading mode)

/* Remove add properties button */
.markdown-preview-view .mod-header .metadata-container > .metadata-content > .metadata-add-button {
  display: none
}

/* X button on tags and lists */
.markdown-preview-view .mod-header .metadata-container .multi-select-pill-remove-button {
    display: none
}
  
/* X button on tags and lists */
.markdown-preview-view .mod-header .metadata-container .multi-select-pill {
    padding-right: 0.7em;
}

I agree it’s a worry on mobile to accidentally e.g. delete a tag when you just wanted to scroll down.

And it makes sense to make properties read-only in Reading view because the content is read-only, so why not the properties?

Perhaps make it a setting to “Make Properties read-only when in Reading view”.