[4.0 alpha] Move the "Showing your unsaved changes" and discard button to the top in slideouts

[mmikkel]

Curious what others think about this one, but in my opinion it's a bit odd that the new "Showing your unsaved changes" message (and the "Discard changes" button) sits at the bottom of the slideout panels, instead of at the top, like it does on edit pages.

Specifically, my worry is that

a) The message is kinda hidden at the bottom of the panel, and probably more likely to go unnoticed by editors (the light blue color against the gray background doesn't exactly help it stand out, either)

b) Since the position isn't consistent between standalone edit pages and slideouts, the "unsaved changes" in slideouts might be interpreted by some authors as specifically "scoped" to the slideout panel.

I'll admit these aren't huge issues by any means – but considering that the "unsaved changes" message (and discard button) refers to the same provisional draft, regardless of context (i.e. slideout vs. edit page), I think it'd make a lot of sense to have them render in roughly the same position within the respective UIs.

[thupsi]

Hmm, maybe the whole UI for saving etc could be moved to the top? It would be weird to separate the notification/discard UI from the rest.

[mmikkel]

Maybe! ...the fact that the "Cancel" and "Save" buttons is at the bottom is perhaps why the "Showing your unsaved changes" UI was placed at the bottom as well – i.e. to keep all the "actions" in the same general area, like they are on the edit page.

Somehow though, in terms of consistency and intuitiveness I feel like keeping all of these elements in the same general area is less of a concern than the ones I outlined above. To me, the slideout's "Cancel" and "Save" actions feel like they belong in their current position, probably because that's a pretty typical UI pattern for modals – which technically the slideouts still are. And while true that edit pages have both the "Unsaved changes" message and the entry actions at the top of the pages, visually they're clearly separate. So, I'm pretty sure moving the "Unsaved changes" part to the top bar, whilst keeping the Cancel/Save buttons at the bottom, would hit the sweet spot in terms of consistency and intuitiveness.

[brandonkelly]

The space you’re pointing to is where the tabs go, so if we move the message up there, we’re talking about doubling the height of the header, which would suck on mobile, unless we also move the Save and Cancel buttons up to the top as well.

I think it’s good to have the message / Discard button close to the other action buttons, so moving them all is probably my preference. But it would be a break in consistency with all other modals/slideouts/HUDs where the action buttons are always at the bottom.

[mmikkel]

Good point, I didn’t consider tabs!

[brandonkelly]

If the main concern is just that the message will go unnoticed, we could explore making it stand out a bit more… something like:

[mmikkel]

It going unnoticed was definitely my main concern - so giving it a bit more visual weight could absolutely go a long way.

[brandonkelly]

Done (33a3dec). Pretty happy with it:

[mmikkel]

That should help! Thanks.