Design and Implement Open/Save Dialog(s) about filer HOT 11 CLOSED

@simonwex, this is maybe something Luke can help us do?

from filer.

I've got the bare minimum working within brackets. I plan on extracting it stand-alone as it does have some requirements (requirejs specifically). Next step is asking Luke to add his Polish [sic]

from filer.

CC'ing @ScottDowne and @Pomax to this bug as a way to have a discussion about the work Scott is going to do with File > Open and File > Save As. NOTE: this bug is specifically going to target https://github.com/mozilla/nimble at first vs. Filer in general, but having the discussion here is useful since it will likely get generalized.

I've written above about how these dialogs need to work. Since I filed this bug, a bunch of work has happened. Specifically, we have a basic implementation of Open and a shim for Save As using window.prompt. The current code is at https://github.com/humphd/brackets/tree/browser-appshell/src/filesystem/impls/makedrive

Our MakeDrive filesystem implementation in Brackets has to provide 2 functions which open dialogs, get data from the user, then report back to Brackets. You can see the code paths here:

• Open: https://github.com/humphd/brackets/blob/browser-appshell/src/filesystem/impls/makedrive/MakeDriveFileSystem.js#L47-L49
• Save As: https://github.com/humphd/brackets/blob/browser-appshell/src/filesystem/impls/makedrive/MakeDriveFileSystem.js#L51-62

The Open dialog is the most advanced at this point, and does what Brackets expects, namely, opens a proper dialog. Brackets is very similar to Popcorn Maker, in that it is a requirejs based system that uses the text plugin to load DOM fragments and create dialogs. Here's the current code for the Open dialog:

https://github.com/humphd/brackets/blob/browser-appshell/src/filesystem/impls/makedrive/open-dialog.js

This loads the HTML dynamically (https://github.com/humphd/brackets/blob/browser-appshell/src/filesystem/impls/makedrive/open-dialog.js#L9) from here https://github.com/humphd/brackets/blob/browser-appshell/src/filesystem/impls/makedrive/open-dialog.html and the CSS is included directly in Bracket's main LESS file here https://github.com/humphd/brackets/blob/browser-appshell/src/styles/brackets.less#L1630-L1658.

The Save As dialog isn't built at all, and we just fake it with window.prompt.

What we really need is to develop a compelling and highly usable set of dialogs for Brackets (and later MakeDrive/Filer in general) that help our users do what they need without getting lost. To do that we're going to want to get our design/UX folks involved. But this bug is primarily about the technical aspects of what to do.

A few of the things that need attention right away:

• The Open dialog needs to show you a given path vs a file tree. The current code is using a tree view, which is an odd UI choice for a file dialog. Instead you should double-click a folder and descend into that folder, seeing all the contents at the next level. If you play with any dialog box in any OS today you'll see what I mean. It also means we need a way to specify with dir you're in, go to the parent dir, etc.
• Save As needs to get created. It should allow the user to do common operations like create a New Folder, for example, browser through existing folders to find a parent dir, enter a filename, etc.

@simonwex is planning to setup a meeting on Monday to discuss this further, but I wanted to give you some insight into where we are at right now.

from filer.

References mozilla/nimble.webmaker.org#6

from filer.

The Open/File dialogs are very similar in that they perform a bunch of ls and stat (and mkdir) operations. In order to make them generally useful, their constructors should accept a Shell instance and return a path list of paths (which will be opened or saved):

var sh = new fs.Shell();
var dialog = new OpenDialog(sh);
var path = dialog.show();

It would also be great to have the dialogs open in an iframe and operate via postmessage.

from filer.

I like your ideas here. Let's continue with our plan to prototype this within the context of Brackets, which limits our design somewhat. After we get it working, we can extract it and do something like you describe above.

@TheCount, his point about using a shell is important, since a shell is necessary for relative paths (i.e., the fs instance requires absolute paths).

from filer.

@TheCount Come chat with me if you have questions.

from filer.

I'm sorry, what point that I have made are you talking about? Can you give me some context, please?

from filer.

@TheCount apologies, wrong username. I was wanting to cc @ScottDowne (who is thecount on irc) and assumed his github was the same. @ScottDowne, see discussion above.

from filer.

OK, no prob.

from filer.

Closing, as this is done in https://github.com/ScottDowne/filer-dialogs. File new bugs for any tighter integration we want between these.

from filer.