Problem/Motivation

Via the Schema.org Blueprints module, some node edit forms have a lot of fields and would benefit from the sidebar being a little wider than the default width of 400px.

Steps to reproduce

Open ME sidebar.

Proposed resolution

Document how to change the sidebar's default width.

So far, I figured out via the below CSS I can change the default width but subsequently break the ability to resize the sidebar.

body {
  --me-dialog-dock-width: 600px
}

Remaining tasks

  • Determine if and how this can be done.
  • Decide how this should be documented.

User interface changes

N/A

API changes

TBD

Data model changes

N/A

CommentFileSizeAuthor
#5 mercury_editor-issue-3403159-comment-5.patch9.42 KBjrockowitz

Issue fork mercury_editor-3403159

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jrockowitz created an issue. See original summary.

sbubaron’s picture

sbubaron commented

In a similar vein, I'd love to be able to have a separate page/edit form for the non-mercury stuff. In our use case those fields are mainly meta-data related and editors rarely need to change both things at the same time. The sidebar is still useful for things like revision notes/publishing options etc, but everything else could be tucked away on a more traditional edit page.

pixelwhip’s picture

pixelwhip commented

There is currently no configuration for this. You could potentially alter the dialog data attributes on the local tasks similar to how mercury_editor_menu_local_tasks_alter creates them.

@Sbubaron Mercury Editor currently uses the default node edit form. You could achieve what you're looking for fairly simply by defining a custom form display, configuring it with just the fields you want, then defining a new route that points to that entity form display. See https://www.drupal.org/docs/drupal-apis/routing-system/structure-of-routes

jrockowitz’s picture

jrockowitz commented

I am stumped on how to do this via custom code.

I cannot find mercury_editor_menu_local_tasks_alter in the mercury_editor.module file.

If anyone can provide a code snippet, when you have a chance, I will owe you a Drupal beer.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new mercury_editor-issue-3403159-comment-5.patch9.42 KB

The attached patch is my best workaround to widening the sidebar to 480px because the 400px width is an internal property of the MercuryDialog class.

For example, the below code snippet does set the sidebar width, but the sidebar jumps back to 400px when resizing

  window.addEventListener('load', function load() {
    document.documentElement.style.setProperty('--me-dialog-dock-width', '600px');
  });

My issue with the 400px-wide sidebar is that the node edit form and field widgets are designed to work on mobile screens wider than 400px.

jrockowitz’s picture

jrockowitz commented
Title: How to change the default widget the sidebar » How to change the default width of the sidebar
jrockowitz’s picture

jrockowitz commented

For the problem/question #2 I created a proof-of-concept Mercury Editor Task experimental/sandbox module.

The module takes an MVP approach for only nodes and does not create a new form display but overrides the MercuryEditorHtmlEntityFormController to only applies ME to the dedicated 'entity.node.mercury_editor_task' route.

sethhill made their first commit to this issue’s fork.

sethhill opened merge request !77

sethhill’s picture

sethhill commented
Status: Active » Needs work

@justin2pin I created a new configuration option for setting the default width of the tray. I put that on the Dialog Settings form, but I'm not sure that's the right context. Do you think it's better on the main Mercury Editor Settings page?

I have some questions about the intended behavior of the saved tray width when a user manually resizes it. Is that supposed to persist after a refresh or on other edit pages? I wasn't sure about that, and this needs some more refinement anyway.

For example, I didn't want to mess with the settings array, because it looked like some of those options were being set directly in dialog.drupal.js. For the time being, I created an additional drupalSettings.mercuryEditorDefaults to get the value from the configuration and then merge that in with the existing settings.

Setting this to Needs Work while we deliberate.

sethhill’s picture

sethhill commented
Status: Needs work » Needs review

  • sethhill committed ab224764 on 2.1.x 
    Issue #3403159 by sethhill, jrockowitz, sbubaron, pixelwhip: How to...
sethhill’s picture

sethhill commented
Status: Needs review » Fixed

  • sethhill committed ab224764 on 2.2.x 
    Issue #3403159 by sethhill, jrockowitz, sbubaron, pixelwhip: How to...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.