Polish Open/Save dialogs
Open, Needs TriagePublic

Description

KDE's Open/Save dialogs are widely considered to be the best in the Linux world, but there's far more we can do to make them truly exceptional. Here are some ideas.

Design goal 1: Optimize view modes for common use cases

We identify two common use search modes for locating files or directories: 1) based on their filenames or metadata, and 2) based on their content or appearance. For the former, a compact optimized list-style view with columns of additional information is ideal. For the latter, a large-icons-style view with previews is ideal. Implementing this will require the following changes:

  • Always perfectly size and align column widths so that Detailed View and Detailed Tree View are actually usable: D11993
  • Improve grid spacing so that Short View with "Icons on Top" is actually usable at medium and large sizes: D12306
  • Show buttons on the toolbar to allow easily toggling between Short View and Detailed Tree View: D12077
  • Fix previews to apply to all supported file types (fixes https://bugs.kde.org/show_bug.cgi?id=318493): D12389
  • Make Previews only show up for icons (in any view mode) larger then 24px or so, as they are unusable and useless at such small sizes: D12321
  • Turn on previews by default: D12328
  • Make the view modes match the ones in Dolphin (e.g. Icons, Compact, and Details, with an option for "Allow expansion" in the settings menu: D21315
  • Make KDirOperator display Detailed Tree View by default: D12327

Design goal 2: improve efficiency and safety of overwrite behavior

(Relevant information: D12346#249638)

  • Allow the file dialog to trigger overwrite on double click (irrespective of the click setting) without having to additionally click the Save button afterwards (fixes https://bugs.kde.org/show_bug.cgi?id=267749): D12538
  • Make Kate delegate overwrite behavior to the dialog, rather than handling it itself D21401 D21402
  • When a file is overwritten using the Save dialog, display a notification with an undo button in it that will undo the overwrite operation and restore the overwritten file

Generally improve polish and usability

  • Add column view navigation: D7929
  • When the dialog displays a combobox of file type options, display the string "File type:" instead of "Filter:" D20964
  • Move the Filter functionality into KDirOperator itself, allowing clients to use it and visually connecting it with the view--while also matching Dolphin's Filter UI (Fixes https://bugs.kde.org/show_bug.cgi?id=179483)
  • Move the sorting functionality from the Settings button to a dropdown menu button on the toolbar to expose this otherwise-mostly-hidden functionality: D12337 (On file-dialog-improvements branch)
  • Make the toolbar editable (fixes https://bugs.kde.org/show_bug.cgi?id=137837)
  • Allow drag-and-drop to the KDirOperator part of the dialog, not just to the filename field: D20838 (only one file is supported, might want to expand the feature to multiple files drop when dialog is in multi selection mode)
  • Add an option to the Settings menu to return focus to the filename field when the user starts to type (fixes https://bugs.kde.org/show_bug.cgi?id=207750)
  • Allow rubber band selection in list-style views (fixes https://bugs.kde.org/show_bug.cgi?id=271399)
  • Move the New Folder button to the bottom row of buttons to match where it is in the "select a directory" chooser
  • Improve default width of embedded Places panel
  • Make sure the return/enter keys are almost always bound to the Save or Open button (fixes https://bugs.kde.org/show_bug.cgi?id=385189)
  • Improve thumbnail quality (fixes https://bugs.kde.org/show_bug.cgi?id=345578): D12385
  • Don't include filename extension when auto-selecting the filename: D12544
  • Re-word some menu items per T8552#140370 done in D20827

Add requested features

Fix bugs

Details

Differential Revisions
D22763: [KDirOperator] Use more human-readable sort order descriptions
D21459: Always save view settings when switching from one view mode to another
D21401: Use native dialog overwrite check
D21315: Dolphin-style view modes in the file dialog
D20838: Allow to drop one file or one folder on KDirOperator
D20964: [FileWidget] Replace "Filter:" with "File type:" when saving with a limited list of mimetypes
D12647: Move the inline preview button into the menu
D12591: KFileWidget: Provide faster access to the icon position setting
D12545: Set focus on the filename line edit when a file is selected
D12544: Don't select file extension
D12538: Allow accepting by double-click in save dialog
D7929: [WIP] Add new Column View option to KDirOperator
D12389: Filepicker reads thumbs preview from Dolphin settings
D12385: Thumbnail smooth scaling in filepicker
D12333: Put the open/save dialog's toolbar above all other widgets, like Dolphin does
D12337: Give the file dialogs a "Sort by" menu button on the toolbar
D12240: Save the dialog view settings when closing the dialog without hitting the cancel button
D12227: Save the dialog view settings even when canceling
D12215: Add a "Reload" menu item to KDirOperator's context menu
D12077: Show view mode buttons in the open/save dialog's toolbar
D12306: Improve grid icon layout in filepicker dialog
D11993: Tweak column widths in tree view of file open/save dialogs
D12328: Enable preview by default in the filepicker dialog
D12327: [KDirOperator] Show Detailed Tree View by default
D12321: Hide file preview when icon is too small
Commits
D12594 / R241:d5f67b07b5ce: KFileWidget: Perfectly align filename widget with icon view
D12593 / R241:0bcc7eadf5ca: KFileWidget: Save places panel width also after hiding panel
D12592 / R241:302c70b39723: KFileWidget: Prevent places panel width from growing 1px iteratively
D12590 / R241:00d8a78f5696: KFileWidget: Disable zoom buttons once reached minimum or maximum
D12588 / R241:e4f4c66f96d8: KFileWidget: Set minimum size for zoom slider

Related Objects

Mentioned In
R241:10b6d83bbc4c: [KDirOperator] Use more human-readable sort order descriptions
R241:69754bfed154: Always save view settings when switching from one view mode to another
R241:d3098ed7205a: Dolphin-style view modes in the file dialog
R39:fb2ea92822d2: Use native dialog overwrite check
D21315: Dolphin-style view modes in the file dialog
D21283: Replace Simple View and Tree view by an icon view and compact view
R241:25eb17ffa666: Allow to drop one file or one folder on KDirOperator
R241:f0668888660f: [FileWidget] Replace "Filter:" with "File type:" when saving with a limited…
R241:f17749e70c09: Reword some text, a couple clean ups, add a separator
D20827: Reword some text, a couple clean ups, add a separator
R241:4dc2a7048e71: [KDirOperator] Show Detailed Tree View by default
R241:057de57a7c0d: Give the file dialogs a "Sort by" menu button on the toolbar
D12337: Give the file dialogs a "Sort by" menu button on the toolbar
D12848: Set fix steps for icon sizes
R241:c537a717363c: Allow accepting by double-click in save dialog
R241:bec7f9d6a1ef: Enable preview by default in the filepicker dialog
R241:2559a2873962: Hide file preview when icon is too small
R241:a2759a5fe7b2: Revert "Show view mode buttons in the open/save dialog's toolbar"
R241:1e6b1ce01d4c: Revert "Show view mode buttons in the open/save dialog's toolbar"
D12077: Show view mode buttons in the open/save dialog's toolbar
R241:1b721c4b25e4: Thumbnail smooth scaling in filepicker
D12647: Move the inline preview button into the menu
T8621: sprint for usability and productivity goal
R241:6f15b9de84e4: Don't select file extension
R241:f472f5490125: Hide file preview when icon is too small
D12591: KFileWidget: Provide faster access to the icon position setting
D12538: Allow accepting by double-click in save dialog
T7841: Revamp buttons on the bottom to solve various usability issues
R241:bbc262674a56: Improve grid icon layout in filepicker dialog
D12321: Hide file preview when icon is too small
R241:b9a2ec685e7f: Filepicker reads thumbs preview from Dolphin settings
D7929: [WIP] Add new Column View option to KDirOperator
R241:5a2c49ae1580: Add a "Reload" menu item to KDirOperator's context menu
D12328: Enable preview by default in the filepicker dialog
R241:e839d47fa095: Show view mode buttons in the open/save dialog's toolbar
D12333: Put the open/save dialog's toolbar above all other widgets, like Dolphin does
D12327: [KDirOperator] Show Detailed Tree View by default
T7682: Proposed look-and-feel changes
Mentioned Here
D21459: Always save view settings when switching from one view mode to another
D21402: Avoid double overwrite check
D21401: Use native dialog overwrite check
D21315: Dolphin-style view modes in the file dialog
D17597: Use newly-upstreamed rename dialog from KIO
D20838: Allow to drop one file or one folder on KDirOperator
D20964: [FileWidget] Replace "Filter:" with "File type:" when saving with a limited list of mimetypes
D17595: Upstream Dolphin's file rename dialog
D17596: [KDirOperator] Allow renaming files from the context menu
D20827: Reword some text, a couple clean ups, add a separator
D19849: [KFileWidget] When saving, highlight filename after clicking existing file also when using double-click
D12647: Move the inline preview button into the menu
D12588: KFileWidget: Set minimum size for zoom slider
D12590: KFileWidget: Disable zoom buttons once reached minimum or maximum
D12593: KFileWidget: Save places panel width also after hiding panel
D12594: KFileWidget: Perfectly align filename widget with icon view
D12591: KFileWidget: Provide faster access to the icon position setting
D12592: KFileWidget: Prevent places panel width from growing 1px iteratively
D12544: Don't select file extension
D12545: Set focus on the filename line edit when a file is selected
D12538: Allow accepting by double-click in save dialog
D7929: [WIP] Add new Column View option to KDirOperator
D12389: Filepicker reads thumbs preview from Dolphin settings
D12385: Thumbnail smooth scaling in filepicker
D12346: Remove duplicate overwrite confirmation dialog
D12337: Give the file dialogs a "Sort by" menu button on the toolbar
D12333: Put the open/save dialog's toolbar above all other widgets, like Dolphin does
D12328: Enable preview by default in the filepicker dialog
D12327: [KDirOperator] Show Detailed Tree View by default
D12326: In Short View, display icons on top and increase icon size
D12321: Hide file preview when icon is too small
D12130: Use the more user-friendly string "File type" in the save dialogs
D12215: Add a "Reload" menu item to KDirOperator's context menu
D11993: Tweak column widths in tree view of file open/save dialogs
D12218: Remove Reload button from the file dialogs' toolbar
D12227: Save the dialog view settings even when canceling
D12240: Save the dialog view settings when closing the dialog without hitting the cancel button
D12077: Show view mode buttons in the open/save dialog's toolbar
D12306: Improve grid icon layout in filepicker dialog
There are a very large number of changes, so older changes are hidden. Show Older Changes
ngraham added a comment.EditedMay 1 2018, 2:17 PM
In T8552#140229, @rkflx wrote:

Could you detail how the final result should look like similar to how I did this in my previous comment, i.e. not only the big picture, but every detail? Otherwise it's a bit hard to understand what you have in mind exactly.

Okay, how about this?

Toolbar:
Back Forward Reload (maybe) [vertical separator] Icons view Compact view Details view [vertical separator] "Sort & View options" [flexible space] size slider & buttons

URL bar:
up URL bar

The New Folder button is moved to the bottom.

The Sort & View options button shows a dropdown menu with the following items in it:

( ) Sort by name
( ) Sort by size
( ) Sort by date
( ) sort by type
[separator]
[X] Descending
[ ] Folders First
[separator]
[] Allow expansion in Details view
[separator] 
[ ] Show hidden files
[X] Show Places navigation panel
[X] Show inline preview
[ ] Show aside preview

Question: do we actually need Show Bookmarks? Doesn't the Places panel contain all that functionality?

Also, I feel like we will be able to save space on the toolbar by moving the Show Preview button to the menu because:

  1. With this idea, the menu becomes much more discoverable
  2. With our changes to the preview code for small icons and once we turn them on by default, there are fewer reasons to want to turn them off

The toolbar would look somewhat like this:

rkflx added a comment.EditedMay 1 2018, 2:25 PM

You are asking some more unrelated questions which I'll look into later, but you missed to answer my most important question: How will the view modes work?

Currently there are six five modes, your suggestion has only three.

In T8552#140322, @rkflx wrote:

You are asking some more unrelated questions which I'll look into later, but you missed to answer my most important question: How will the view modes work?

Currently there are six five modes, your suggestion has only three.

I agreed with your proposal to match what dolphin does. So we'd have Icons View, Compact View, and {Details View}, with a checkbox for "Allow expansion".

rkflx added a comment.May 1 2018, 2:49 PM

Okay, I see you edited your original comment to also include Allow expansion in Details view. Makes sense, but to match what we currently have my suggestion would be to make this affect Compact View too (currently Tree View).

Question: do we actually need Show Bookmarks? Doesn't the Places panel contain all that functionality?

To me that's a different type of use case, because you can have a detailed hierarchy of bookmarks, but perhaps don't want them displayed in Dolphin. The places panel also only supports a linear list, but none of the rich editing options of the bookmarks.

Of course by default they should be hidden, but I don't think we should kill them just yet.

The Sort & View options button shows a dropdown menu

Nice idea, but having text is a no-go. I already discussed my general reasons for the Sorting button text, but here we even have another problem: For other languages this combined text will become so long it will look absolutely ridiculous, make the toolbar much too wide and draw too much attention.

Also, I'd make the location more standards-compliant: Chromium, Firefox and Thunderbird all have their settings button aligned on the very right (and I'd recommend to do the same for Dolphin eventually). It would be a standard location for users to remember.

Maybe just swap the settings button and the zoom widget?

moving the Show Preview button to the menu

Makes sense to me, but might be controversial with others.


Rest looks good ;)

In T8552#140332, @rkflx wrote:

Okay, I see you edited your original comment to also include Allow expansion in Details view. Makes sense, but to match what we currently have my suggestion would be to make this affect Compact View too (currently Tree View).

I don't think we need to show Tree View in the file dialogs at all. Its only advantage over Detailed Tree View is that it can fit in very narrow spaces. We don't have that limitation in the file dialogs. It's basically made for vertical file browser panels embedded within apps (all of which currently use it as their view mode).

An Allow expansion in Details view checkbox would essentially toggle the view between Detailed view and Detailed Tree View. So we would wind up with the exact same three views as Dolphin:

  • Icons View: large icons, label below icon
  • Compact View: the current default view for file dialogs
  • Detailed View, with the option to allow expansion if desired: just like Dolphin

I thought this was what you were proposing before. If it is... then I approve!


Question: do we actually need Show Bookmarks? Doesn't the Places panel contain all that functionality?

To me that's a different type of use case, because you can have a detailed hierarchy of bookmarks, but perhaps don't want them displayed in Dolphin. The places panel also only supports a linear list, but none of the rich editing options of the bookmarks.

Of course by default they should be hidden, but I don't think we should kill them just yet.

OK, let's forget about it for now.


The Sort & View options button shows a dropdown menu

Nice idea, but having text is a no-go. I already discussed my general reasons for the Sorting button text, but here we even have another problem: For other languages this combined text will become so long it will look absolutely ridiculous, make the toolbar much too wide and draw too much attention.

The reason why I keep bringing up text and downward-pointing arrows is because I believe we need something to make the settings menu more discoverable. An alternative is if we make it less important by removing the sorting settings and giving them their own menu, which it seems like you and I now agree on. I could accept a text-less menu button if we get a really good icon and the button has a downward-pointing arrow.


Seems like we're here now:

Toolbar:
Back Forward Reload (maybe?) [vertical separator] Icons view Compact view Details view [vertical separator] Sort [flexible space] size slider & buttons Settings

The Sort and Settings buttons are menu buttons with downward-pointing arrows but no text

URL bar:
up URL bar

The New Folder button is moved to the bottom.

The Sort button shows a dropdown menu with the following items in it:

( ) Sort by name
( ) Sort by size
( ) Sort by date
( ) sort by type
[separator]
[X] Descending
[ ] Folders First

The Settings button shows a dropdown menu with the following items in it:

[] Allow expansion in Details view
[separator] 
[ ] Show hidden files
[X] Show Places navigation panel
[X] Show inline preview
[ ] Show aside preview
[ ] Show Bookmarks
rkflx added a comment.May 1 2018, 7:32 PM

I thought this was what you were proposing before. If it is... then I approve!

Well, initially I simply wanted to keep all modes, but I could also agree with your reasoning and find the dialog would get even better this way. It should only be made very clear by whomever implements this that one mode will be gone for good (instead of sneaking in a change just like that).

Seems like we're here now:

Sounds good :) As you know I agree with making dropdown menu buttons more discoverable, but the fact that this needs work should not lead to workarounds when designing the file dialog.

Another point for having two buttons is that each won't contain so many items anymore.

The Settings button shows a dropdown menu

Maybe move Show hidden files and Show inline preview in another separated group, as both settings also pertain to what's shown inside the file widget? Then the last group would be strictly about panel/button configuration:

[] Allow expansion in Details view
[separator] 
[X] Show inline preview
[ ] Show hidden files
[separator] 
[X] Show Places navigation panel
[ ] Show aside preview
[ ] Show Bookmarks

+1, sounds like we are in full agreement now. I'd also like to change the wording on some of the entries in the last section, so we'd wind up with this:

[] Allow expansion in Details view
[separator] 
[X] Show icon previews
[ ] Show hidden files
[separator] 
[X] Show Places panel
[ ] Show Preview panel
[ ] Show Bookmarks button
rkflx added a comment.May 1 2018, 7:48 PM

+1 on the wording changes.

Frameworks @elvisangelaccio @anemeth Any objections to this? Any help with implementing?

ngraham updated the task description. (Show Details)May 1 2018, 7:52 PM
ngraham updated the task description. (Show Details)May 1 2018, 8:09 PM
ngraham updated the task description. (Show Details)May 1 2018, 8:23 PM
ngraham updated the task description. (Show Details)May 1 2018, 8:26 PM
rkflx updated the task description. (Show Details)May 1 2018, 8:33 PM
ngraham updated the task description. (Show Details)May 1 2018, 11:27 PM
abetts added a subscriber: abetts.May 2 2018, 3:13 AM

I wanted to also propose a bit of separation between areas for the dialog. Maybe Dolphin can also follow suit. Take a look.

ngraham added a subscriber: broulik.May 2 2018, 3:29 AM

I've felt for quite a while that we need a line to separate toolbars from content beneath them, but that would ideally need to be done in Breeze rather than just here in the file dialogs.

Not sure how I feel about the bottom line. I think we at least need a line below the inline places panel to separate it from whatever's below, but I don't think we need an extra line between the content view and the Name field.

We already have a Breeze setting that draws a frame around Places panels (System SettingsApplication StyleWidget StyleBreezeConfigureFramesDraw frame around dockable panels). Here's how it looks:

Personally I think this look hugely better, but I know @broulik hates it. :)

abetts added a comment.May 2 2018, 3:35 AM

I've felt for quite a while that we need a line to separate toolbars from content beneath them, but that would ideally need to be done in Breeze rather than just here in the file dialogs.

Not sure how I feel about the bottom line. I think we at least need a line below the inline places panel to separate it from whatever's below, but I don't think we need an extra line between the content view and the Name field.

We already have a Breeze setting that draws a frame around Places panels (System SettingsApplication StyleWidget StyleBreezeConfigureFramesDraw frame around dockable panels). Here's how it looks:

Personally I think this look hugely better, but I know @broulik hates it. :)

Visuals first, that looks good. Better than my idea. What I am looking for too, if possible, is to come to an area where we can take panels all the way to the window edge. We miss out good pixels and looks by enclosing items in such a small window.

Here are some examples:

We can and should make the Places panel and the KDirOperator content view flush the left and right edges, respectively--just like Dolphin does--because it fixes the "double margin" bug that you're seeing, which is the result of KWin adding its extra window border width by default (https://bugs.kde.org/show_bug.cgi?id=315400).

Unless we change the default KWin setting for window borders to "No borders" or "No side borders", the best we can do is reduce the side margins and fix https://bugs.kde.org/show_bug.cgi?id=315400.

ngraham updated the task description. (Show Details)May 3 2018, 2:05 PM
ngraham updated the task description. (Show Details)May 10 2018, 1:10 PM

We're going to land future changes onto the file-dialog-improvements branch and then merge everything back to master once it's all cohesively ready.

ngraham updated the task description. (Show Details)May 21 2018, 12:01 AM

Since this appears to be the main hub for Open/Save dialogs:

  • I feel that a row highlight would feel better than highlighting only the name in Detail view/Tree detail view.
  • The rename option mentioned above would be great to have inline as in Dolphin. (Select an item -> F2)
ngraham updated the task description. (Show Details)Jun 1 2018, 3:51 AM
xyquadrat updated the task description. (Show Details)Jun 2 2018, 1:34 PM
ngraham updated the task description. (Show Details)Jun 2 2018, 7:48 PM

For me missing feature in open/save file dialog is search function. It would be nice to have this like it's in Dolphin. I am writing this, because I don't see anthing about this in above list. Thank you for your amazing work!

ngraham updated the task description. (Show Details)Mar 26 2019, 3:08 PM
filipf added a subscriber: filipf.Mar 26 2019, 7:27 PM
ngraham updated the task description. (Show Details)Mar 30 2019, 8:20 PM
meven updated the task description. (Show Details)Apr 25 2019, 4:19 PM
meven updated the task description. (Show Details)Apr 25 2019, 7:48 PM
meven updated the task description. (Show Details)Apr 26 2019, 11:23 AM
ngraham updated the task description. (Show Details)May 3 2019, 3:11 PM
ngraham updated the task description. (Show Details)May 6 2019, 4:18 PM
meven updated the task description. (Show Details)May 9 2019, 11:09 AM
meven updated the task description. (Show Details)May 18 2019, 8:56 AM
ngraham updated the task description. (Show Details)May 21 2019, 2:44 PM
meven updated the task description. (Show Details)May 25 2019, 1:35 PM
meven updated the task description. (Show Details)May 27 2019, 8:29 AM
meven updated the task description. (Show Details)May 28 2019, 11:50 AM
meven updated the task description. (Show Details)Jun 1 2019, 1:58 PM
ngraham updated the task description. (Show Details)Jun 2 2019, 9:31 PM
meven updated the task description. (Show Details)Jun 4 2019, 8:55 AM
ngraham updated the task description. (Show Details)Jun 4 2019, 5:40 PM
meven updated the task description. (Show Details)Jun 6 2019, 5:41 PM