Overview

When I click a component in the preview, I expect the component I selected to be highlighted in the layers panel.

Currently if the component I select is in a collapsed layer, I don't have that visual indication.

Proposed resolution

  • On load all layers should be expanded by default. This is a change compared to the current behaviour.
  • Collapsing a layer should add the uuid of the layer to a 'collapsed layers' array in local storage that remembers the layer has been collapsed.
  • On load, any layers that are in the local storage array should NOT be expanded.
  • Expanding a layer should remove it from the array in local storage.
  • When a component is selected (in the preview or on page load) all of the parents of the component should be expanded so that the selected component is visible.
  • Create a follow up to add "expand all" and "collapse all" buttons

User interface changes

CommentFileSizeAuthor
#4 Untitled Video November 20, 2024 3_25 PM.gif1.21 MBmanojmakrasu
Drupal_Experience_Builder.png78.06 KBjessebaker

Issue fork experience_builder-3479977

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

jessebaker created an issue. See original summary.

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

manojmakrasu opened merge request !421

manojmakrasu’s picture

manojmakrasu commented
StatusFileSize
new Untitled Video November 20, 2024 3_25 PM.gif1.21 MB

Demo Gif

Now Selecting a component in the preview will expand the layer in the layers panel.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue tags: +Usability
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Priority: Normal » Major

#4 is 🤩

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Issue tags: +Needs tests

Could we write an automated test for this? The MR also needs a rebase.

jessebaker’s picture

jessebaker commented
Title: Selecting a component in the preview should expand the layer in the layers panel » [PP-1] Selecting a component in the preview should expand the layer in the layers panel
Assigned: Unassigned » jessebaker
Issue summary: View changes
Status: Active » Postponed

Before spending time on a rebase, the code changed in this issue is being heavily refactored over in #3497648: Focus mode for global regions.

I think I can cherry pick the relevant code from this MR and add credit for @manojmakrasu over there. Or else, this should wait until that issue lands before being updated to save unnecessary work.

jessebaker’s picture

jessebaker commented
Title: [PP-1] Selecting a component in the preview should expand the layer in the layers panel » Selecting a component in the preview should expand the layer in the layers panel
Issue summary: View changes
Status: Postponed » Needs work

Unpostoned now that #3497648: Focus mode for global regions has landed. Will need quite a bit of work to re-factor since upstream has moved on a lot.

anjali rathod closed merge request !421

anjali rathod made their first commit to this issue’s fork.

parthbcharya’s picture

parthbcharya commented
Assigned: jessebaker » parthbcharya
parthbcharya’s picture

parthbcharya commented

refactored the code and enabled expanding of layers upon selecting the component. currently working on the test case.

parthbcharya opened merge request !728

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue tags: +stable blocker
parthbcharya’s picture

parthbcharya commented
Status: Needs work » Needs review
penyaskito’s picture

penyaskito
he/him
Primary language Spanish
Location 🧑🏽‍🌾 Seville 💃 Andalusia, UTC+2 🇪🇺
commented
Assigned: parthbcharya » jessebaker

@jessebaker Will this still be true with #3483485: Selecting multiple components?

jessebaker’s picture

jessebaker commented
Issue summary: View changes
Status: Needs review » Needs work
Parent issue: » #3517946: [Meta] Production ready drag and drop

I've updated the proposed resolution in the summary to have a lot more detail and improve the UX based on conversation with @callumharrod

jessebaker changed the visibility of the branch 3479977-tree-expand-logic to hidden.

jessebaker opened merge request !1106

jessebaker changed the visibility of the branch 3479977-expand-layers to hidden.

jessebaker’s picture

jessebaker commented

MR !1106 takes aspects of what was done before and refactors to account for multiple selection and also persists the expanded/collapsed state of the layers in local storage.

jessebaker’s picture

jessebaker commented
Assigned: jessebaker » Unassigned
Status: Needs work » Needs review
Issue tags: -Needs tests

  • jessebaker committed 051ca1d0 on 0.x 
    Issue #3479977 by manojmakrasu, jessebaker, parthbcharya, anjali rathod...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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