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
  • Use recentlyused:/ ioslave in the places panel to display recently accessed files by this application

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 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

+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
ngraham updated the task description. (Show Details)Sep 27 2019, 4:33 PM
ngraham updated the task description. (Show Details)Sep 27 2019, 4:43 PM
ngraham added a project: Frameworks.
ngraham moved this task from Backlog/Planned to Sent to dev on the VDG board.
ngraham moved this task from Backlog to In Progress on the Frameworks board.
ngraham updated the task description. (Show Details)Oct 7 2019, 3:37 AM
ngraham updated the task description. (Show Details)Oct 13 2019, 3:23 PM
meven updated the task description. (Show Details)Oct 16 2019, 2:27 PM