Implement scaffolding for the left sidebar based on early wireframes for the UI design:

CommentFileSizeAuthor
#3 Experience Builder Early Mockup.png574.5 KBlauriii

Issue fork experience_builder-3456084

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

hooroomoo created an issue. See original summary.

hooroomoo opened merge request !70

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Issue summary: View changes
StatusFileSize
new Experience Builder Early Mockup.png574.5 KB

I'm adding an early version of the wireframes to bring more clarity on what is the direction in terms of UI design. There's no need to implement this pixel perfect, or try to derive capabilities from it. It's a mid-fi wireframe that is showcasing many future possibilities and making sure that the UI can sufficiently accommodate those.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Active » Needs work
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Priority: Normal » Critical
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Title: Create UI scaffolding for the primary panel (left sidebar) » Add initial implementation of primary menu
Assigned: hooroomoo » Unassigned
Status: Needs work » Needs review

hooroomoo credited jessebaker.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Status: Needs review » Fixed

hooroomoo credited larowlan.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Fixed » Needs work
Issue tags: +Needs followup

I don't see any issue for the follow-ups defined in the MR description? 😅

To be done in a followup(s):

  • Close the menu one drags a component from on drag so the menu is not taking up so much space on the canvas
  • Style the draggable components so they look draggable
  • Other styling/micro-interactions such as being able to also close the third level submenu on click.
  • SVG icon optimization
  • Search bar functionality
  • Test for dragging a component into the canvas
  • A11y check
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Status: Needs work » Fixed
Issue tags: -Needs followup
  1. Close the menu one drags a component from on drag so the menu is not taking up so much space on the canvas

    2. Addressed at #3458617: Close menu on drag in primary menu

  2. Style the draggable components so they look draggable

    3. Probably don't have to worry about this right now at this stage.

  3. Other styling/micro-interactions such as being able to also close the third level submenu on click.

    4. Addressed at #3458617: Close menu on drag in primary menu

  4. SVG icon optimization

    5. Created issue #3460039: Replace icons with optimized SVGs

  5. Search bar functionality

    6. Created issue #3460042: Implement search functionality to the insert menu

  6. Test for dragging a component into the canvas

    7. Test can be added when bug #3458858: Dragging in components that ship with xb doesn't load anymore is fixed, already marked with Needs tests

  7. A11y check

    8. This can come when XB is further along

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Related issues: +#3458617: Close menu on drag in primary menu, +#3460039: Replace icons with optimized SVGs, +#3460042: Implement search functionality to the insert menu, +#3458858: Dragging in components that ship with xb doesn't load anymore

Linking the follow-ups @hooroomoo created, for easier discoverability.

Status: Fixed » Closed (fixed)

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