Page MenuHome

UI: Visual Changes to Save Close Dialog
ClosedPublic

Authored by Harley Acheson (harley) on Jun 25 2019, 11:45 PM.
Tokens
"Like" token, awarded by Zoot."Like" token, awarded by amonpaike."Like" token, awarded by elbox01."Like" token, awarded by duarteframos."Love" token, awarded by jenkm."Like" token, awarded by billreynish.

Details

Summary

This patch make only visual changes to the dialog that prompts users to save changes.

  • Icon changed from "Info" to "Warning"
  • "Discard Changes" -> "Don't Save" for clearer opposite options and better match to OS versions.
  • Shows filename if previously saved
  • Nicer proportions

For Windows, these changes are illustrated here. Top pair is before, bottom is after:

For Mac the gap between the buttons is left in. Top pair is before, bottom is after.

Diff Detail

Repository
rB Blender

Event Timeline

The revision fixes an error where I had used the wrong var.

Brecht Van Lommel (brecht) requested changes to this revision.Jun 26 2019, 3:05 AM
  • Filename and Don't Save is fine with me.
  • The choice of info instead of warning icon was intentional. Using warnings for this type of thing is not so common anymore I think.
  • The dialog is not wide enough for longer filenames, and longer warnings messages related to image saving that can also include filenames.
  • As far as I know some empty space to the left of the buttons is still standard on Windows, I don't know why this was changed.
This revision now requires changes to proceed.Jun 26 2019, 3:05 AM
  • The choice of info instead of warning icon was intentional. Using warnings for this type of thing is not so common anymore I think.

Prompt to save is definitely a warning, while the current icon used is to provide information. For Windows it is the
currently recommended icon specifically for this purpose. Their current guidelines basically say to use warning icon for almost all purposes.

https://docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/dialog-boxes-overview

And used in the current version of Word:

Used on Macs too...

  • The dialog is not wide enough for longer filenames, and longer warnings messages related to image saving that can also include filenames.

It could certainly be made wider, although any width can potentially be too narrow. At some point an arbitrary choice must be taken.

Here is the dialog with a name so long it must be truncated, the middle of it replace the the dreaded "two-dot leader". LOL

  • As far as I know some empty space to the left of the buttons is still standard on Windows, I don't know why this was changed.

Because it looks dumb. The OS version has a large space held out on the left to accommodate a large icon, but we don't have that. So the Windows (and mac) dialogs look nicely balanced and proportional while ours looks a bit lopsided and silly with the text all off to the left, tiny icon, and buttons scrunched to the right. This balance issue doesn't exist on the Mac version though because the "Don't Save" is on the left side, so aligned with the text.

This revision changes the following:

  • The dialog is a bit wider
  • Forces clipping of long filenames so can't overflow
  • Uses ICON_INFO for Mac
  • Small changes to button heights and dialog padding

In the capture below, Windows on top, Mac below...

Seems nice enough to me. But:

  • I don't understand why the buttons are bigger on Windows. Why not just add the spacer on the left side so they match more?
  • Doesn't make sense to me to use different warning icons on the different platforms - that just seems arbitrary.

Mac apps tend to either use the app icon or a warning symbol:

  • I don't understand why the buttons are bigger on Windows. Why not just add the spacer on the left side so they match more?

Because there is absolutely no need or advantage to scrunching them up. I'm not sure what the bottom give you extra over the top version?

I'm not sure why there'd be a need to "match" in any way. If you Mac guys like your gap in there, that seems fine.

  • Doesn't make sense to me to use different warning icons on the different platforms - that just seems arbitrary.

Mac apps tend to either use the app icon or a warning symbol:

Yes, was just trying to find a way to make Brecht happy, who seemed under the (wrong) impression that warning icons aren't used.

This revision just changes back to using the same "Warning" icon for both Window and Apple.

Seems good to me now.

The better solution is text wrapping. (for long file names)
Or you can just put the filename or path on the second line.

In some languages, this phrase will be longer:

  • Save changes to "Untitled" before closing?
  • Сохранить изменения в файле "Untitled" перед закрытием?

And of course the warning icon is most appropriate.
Or "question mark" icon as an alternative.

The better solution is text wrapping. (for long file names)...

  • Сохранить изменения в файле "Untitled" перед закрытием?

Good point. I know we have text wrapping code around somewhere so will look into that

Because there is absolutely no need or advantage to scrunching them up. I'm not sure what the bottom give you extra over the top version?


I'm not sure why there'd be a need to "match" in any way. If you Mac guys like your gap in there, that seems fine.

Windows never use stretched buttons on dialogs, IMO the proposal at bottom seems better and makes Blender less different between OS

@Matias Mendiola (mendio) - Windows never use stretched buttons on dialogs, IMO the proposal at bottom seems better and makes Blender less different between OS

Thanks for the input!

What bothers me personally about that is the funny alignment with the text aligned left and buttons to the right. What helps *me* with this is to add a rule in between like the following. It mimics the way the buttons are in a differently-colored area on the OS version.

What do you think? Hate it? Like? Harmless? Unnecessary?

That line needs to go imho. Everything else looks fine, even though I still prefer the "Yes | No | Cancel" scheme. 😉

Another problem here is the checkbox next to the icon.
This is an important checkbox but it is lost, it looks like a simple informing icon.

As an option, do not use the icon:

"Save modified image."
Here for clarity, it is necessary to add something like "as well" or "also".

Changes in this revision:

  • All buttons on the right for the Windows version
  • Uses "Untitled" to indicate unsaved file name
  • Adds " as well" to message about saving images
  • Adjusts width of dialog to account for translations and length of file name

The following (showing Windows version only) illustrates how it changes the width of the dialog to account for file name length and translated text. The top is the minimum width, showing unsaved state ("Untitled") and also with images to be saved. The bottom shows a wider dialog because of the long file name - the width is not unlimited as the filename is truncated over a maximum (dots in middle).

Small tweaks to the layout of the dialogs, mostly in making the buttons larger. And altering the left-hand gap on the Windows version.

Current state looks like the following (at 2X scale), Mac on top, Windows on the bottom:

This is an improvement over what we have, although the layout still isn't great. There isn't enough padding all around, ans especially on either sides.

But since this doesn't seem to be trivial to do, this small improvement can be added anyway.

@Harley Acheson (harley) @William Reynish (billreynish)

I have some changes for this patch.

Patch with changes:

Screenshots:

The x2 scale:

source/blender/windowmanager/intern/wm_files.c
3055

Personally, I prefer to have the same margins on top and bottom. So I suggest that you leave a zero value here.

3059

Remove this uiItemS(layout).

3107

Set scale for split not layout to avoid scaling the checkbox, otherwise the checkbox is not aligned with the icon above.

I prefer the scale of 1.2f.

3144

Increase the bounds and take into account the UI scale.

Change to UI_block_bounds_set_centered(block, 14 * U.dpi_fac);.

@Yevgeny Makarov (jenkm) - I have some changes for this patch.

Absolutely love every change.

I had no idea that UI_block_bounds_set_centered() was the source of our non-scaled outer padding. That has been a surprisingly large source of frustration for us.

Thank you so much!

Excellent that you managed to get the margins sorted out. This is now a solid improvement.

  • Make wider again to fit image saving warning messages
  • Use font style for computing width, and don't copy font style by value
  • Other code style changes

The dialog must remain wider for this problem. Only after that is solved can it be made less wide, that can be in a separate patch.

This revision is now accepted and ready to land.Fri, Aug 23, 6:40 PM

Updated patch to incorporate the changes by Yevgeny Makarov (jenkm)

What about the idea of adding "as well" to the message about saving images?

"as well" sounds wrong to me, I don't remember ever seeing that in a user interface.