Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine the Save modal design in site view #49832

Open
jameskoster opened this issue Apr 14, 2023 · 13 comments · May be fixed by #67792
Open

Refine the Save modal design in site view #49832

jameskoster opened this issue Apr 14, 2023 · 13 comments · May be fixed by #67792
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@jameskoster
Copy link
Contributor

jameskoster commented Apr 14, 2023

Screenshot 2023-05-18 at 11 59 07
  • Makes use of regular modal patterns (title, close button, bottom-actions).
  • Actions are sticky at the bottom of the modal. This may require a component-level update.
  • Current context highlighted above all other changes.
Original issueIn the lead up to the 6.2 release a global save button was added to the site editor. Clicking it invokes the following modal: Screenshot 2023-04-14 at 14 23 39

This is a essentially a clone of the multi-entity save panel, presented in a modal. It needs to retain the same functionality of course, but the design needs some refinement.

If we stick with the modal approach then it seems reasonable to at least use conventional anatomy (title, close button, actions at the bottom, etc), and be more accessible (#47885). There might be different formats to explore for the contents as well.

I don't know how committed we are to the modal, it could also be worth exploring other options like drilldowns.

@jameskoster jameskoster added Needs Design Needs design efforts. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Apr 14, 2023
@jameskoster jameskoster moved this to Needs issue in 6.3 Design Apr 14, 2023
@jameskoster jameskoster moved this from Needs issue to Needs design, or refresh in 6.3 Design Apr 14, 2023
@jasmussen
Copy link
Contributor

I don't know how committed we are to the modal, it could also be worth exploring other options like drilldowns.

The modal dialog has the benefit that it can be opened both from the save hub in the site view, and from the publish button in the edit view, and be the same interface.

One added gotcha to consider, if not design for, is revisions. We won't need them for 6.3, but at some point you should be able to make a long sequence of changes (change site title, logo, tagline, style, templates) and then schedule them to go live on a particular date, ideally even with a title for the incoming change, such as "Black Friday design".

@paaljoachim
Copy link
Contributor

paaljoachim commented Apr 30, 2023

It would be great to explore modal and drill down, so that we can look at advantages and disadvantages of both methods.
By doing so one would also gain a deeper knowledge for both methods.

@paaljoachim
Copy link
Contributor

I want to add in this older issue.
Improving multi-entity saving UI method.
#31456

@SaxonF
Copy link
Contributor

SaxonF commented May 18, 2023

Quick change here is to just use current modal patterns with actions on bottom.

One other suggestion, which ties into the save hub work, is promoting the current context to be the first thing listed in the modal. e.g. if on pages/my-page than any changes to that page will be highlighted.

Image

@jasmussen
Copy link
Contributor

Outside of some of the detail panel aspects in the background under the scrim, which are still works in progress, that modal design feels pretty good to me. Seems like we can update the main issue with this, what do you say?

@SaxonF
Copy link
Contributor

SaxonF commented May 18, 2023

@jasmussen yep fine with me. I don't think we currently have the ability to list out last modified time for each entity so can leave that off. We may also need to adapt modal to handle sticky footer unless it already handles that scenario. I'll update GH description tomorrow.

@paaljoachim
Copy link
Contributor

paaljoachim commented May 18, 2023

Got a quick question.
In general for modals is it possible to adjust the screen locations of where these show up to keep these closer to where they were activated? As it would be helpful to associate the initial click with the result.

@jameskoster
Copy link
Contributor Author

I tweaked the modal footer dimensions to be consistent with other modals and updated the OP.

@jameskoster jameskoster moved this from Needs design, or refresh to Needs dev in 6.3 Design May 18, 2023
@jameskoster jameskoster added Needs Dev Ready for, and needs developer efforts and removed Needs Design Needs design efforts. labels May 18, 2023
@annezazu annezazu moved this to Needs development in Polish Jul 25, 2023
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Jul 26, 2023
@SaxonF SaxonF moved this to In Progress in Design priorities Dec 7, 2023
@SaxonF SaxonF moved this from Now to Next in Design priorities Jan 15, 2024
@jasmussen
Copy link
Contributor

jasmussen commented Feb 5, 2024

Based on #57470 I did a little quick work to refine this a bit. One of the pieces to consider is multi entity saving as an interface you see also when switching themes, saving drafts, scheduling, etc. To that end, it may be worth not only having the single modal across site and edit views as already proposed, but expand the range of content that can be checked/unchecked. For example, you might want to switch to a new theme, but keep your colors and fonts, etc.

To that end, here are checkboxes and a list-view-esque expand/collapse for each section of content you can save:

Global Style changes, even longer term

The style changes based on the above are fairly minimal, a darker subheading style, and no separator. We can keep the "Current page" separation if that's a strong aspect of this.

Extrapolated from that is also here a nearer term version, that might be a stepping stone in implementation:

Global Style changes, longer term

@SaxonF
Copy link
Contributor

SaxonF commented Feb 15, 2024

There is an opportunity for this work to think through how post/page publishing may tie into the save modal. If a user modifies a post, and only the post, we can put far greater emphasis on publishing as the core action of the modal so you still get that sense of accomplishment.

@jasmussen
Copy link
Contributor

Noticed today that for the existing Save modal, if you click in the padding of the modal, it closes it. The area highlighted in green below.

Screenshot 2024-08-27 at 11 37 23

I assume this will be solved by moving this save modal to a proper modal component, but tracking here as something to capture.

@jasmussen jasmussen moved this from Next to Now in Design priorities Oct 29, 2024
@jasmussen jasmussen removed the Needs Dev Ready for, and needs developer efforts label Oct 30, 2024
@afercia
Copy link
Contributor

afercia commented Nov 28, 2024

Chming-in here from #67313 thanks to @jameskoster for pointing me at this issue.

Basically, the content of this modal dialog is the EntitiesSavedStates component that is also used in the 'Save' panel. In the screenshot below:

  • The site editor Save modal dialog.
  • The Theme preview 'Activate theme` modal dialog.
  • The Save panel.

Image

While the content structure of the EntitiesSavedStates component makes sense in the Save panel, it's less than ideal when used inside a modal dialog:

  • The order of the content isn't ideal.
  • As far as I can tell, this is the only case where a modal dialog renders the Cancel / Save buttons at the top as first thing. They should be the last thing, right aligned.
  • Any modal dialog should have a visible title at the top.
  • The labeling of the dialog may be improved. Current example: role="dialog" aria-label="Save site, content, and template changes".

As such, this is also an accessibility issue and I'd like to see some improvements here.
I'll try to work on small improvements here. Maybe not a full redesign as proposed in this issue but at least the order of the content and labeling should be fixed. It doesn't make much sense to just 'transplant' the EntitiesSavedStates content within this modal dialog because the content structure and semantics don't fit in the context of a modal dialog.

Related: #67354

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed [Type] Enhancement A suggestion for improvement. labels Nov 28, 2024
@afercia afercia self-assigned this Dec 9, 2024
@afercia
Copy link
Contributor

afercia commented Dec 10, 2024

Noticed today that for the existing Save modal, if you click in the padding of the modal, it closes it

For history: that's been fixed in #67313 / #67351

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
Status: Needs dev
Status: Now
Status: Needs development
Development

Successfully merging a pull request may close this issue.

6 participants