How to change the default widget the sidebar

Created on 21 November 2023, about 1 year ago

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

πŸ’¬ Support request
Status

Active

Version

2.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @jrockowitz
  • πŸ‡ΊπŸ‡ΈUnited States sbubaron

    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.

  • πŸ‡ΊπŸ‡ΈUnited States pixelwhip

    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 β†’

  • πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY

    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.

  • πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY

    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.

  • πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY
  • πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY

    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.

  • First commit to issue fork.
  • Merge request !77Add a configuration for default tray width. β†’ (Merged) created by sethhill
  • πŸ‡ΊπŸ‡ΈUnited States sethhill

    @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.

  • Status changed to Needs review 6 days ago
  • πŸ‡ΊπŸ‡ΈUnited States sethhill
  • Pipeline finished with Skipped
    3 days ago
    #346034
    • sethhill β†’ committed ab224764 on 2.1.x
      Issue #3403159 by sethhill, jrockowitz, sbubaron, pixelwhip: How to...
  • πŸ‡ΊπŸ‡ΈUnited States sethhill
    • sethhill β†’ committed ab224764 on 2.2.x
      Issue #3403159 by sethhill, jrockowitz, sbubaron, pixelwhip: How to...
Production build 0.71.5 2024