615325 - Create a new UI for the package structure that mirrors the installed SDK

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Add-on Builder, defect, P1)

Description

[Daniel Buchner [:dbuc]]

We need a new file tree-like UI for the package sidebar that mirrors the installed version of the SDK. Its titles and description sections should be direct copies of the folders and files found in an SDK package - data, lib, package.json, etc.

Comment 1

[Daniel Buchner [:dbuc]]

Attachment: New UI for the editor page of the app

Comment 2

[Daniel Buchner [:dbuc]]

Attachment: New UI for the editor page of the app - UPDATED

Comment 3

[Daniel Buchner [:dbuc]]

What you are seeing is the UI push we will make for this release. If you click the + sign next to a directory, it will bring up the modal shown in the screenshot. The modal's mode should default to "File". When in file mode, the only difference is that there will be a file input vs the text input shown in the "Folder" addition mode in the screenshot.

The sidebar will be a tree of n depth. it will have a drag handle for resizing and the overflow will be handled by the default scroll style of the browser for both the X and Y axis.

Comment 4

[Daniel Buchner [:dbuc]]

Attachment: New UI for the editor page of the app - UPDATE 2

Comment 5

[Daniel Buchner [:dbuc]]

Attachment: New UI for the editor page of the app - UPDATE 3

Comment 6

[Daniel Buchner [:dbuc]]

Attachment: New UI for the editor page of the app - UPDATE 4

Comment 7

[Daniel Buchner [:dbuc]]

Killed off modals per discussion with Chowse.

Comment 8

[Daniel Buchner [:dbuc]]

- Description of the updated UI mock -

Lib Section:

The Lib section's large, main add icon creates a new js file under the Lib group. The text of the new entry will be set to "BLANK" and it will be immediately focused and inline editable. Pressing enter will finalize the text entered for the file name.

Each file will then have its own minus and edit mini action icons when hovered.

Data Section:

A click on the Data section's main add icon will open a small, inline element that is positioned next to the add icon and contains 5 action buttons that create new entries under the section, those being: Upload, HTML, CSS, JS, and Folder.

The Upload action brings up a system file upload dialog that uploads and places an entry in the section to represent the file. HTML, CSS, and JS actions all create files under the section that follow the same UI pattern as described in the "BLANK" new entry creation described in the Lib Section details above.

User Libraries Section:

A click on the User Libraries section's main add icon will open a small, inline element containing a text input. This input will autocomplete search what the user types against the available libraries in the system.

Comment 9

[Daniel Buchner [:dbuc]]

Below is a link to a working implementation of the sidebar UI using the data structure that FlightDeck will be sending to the client. Should be a pretty strait forward task to implement the UI tree in FD, if you need any help just give me a holler ;)

http://people.mozilla.com/~dbuchner/demos/web/fd-tree/index.html

Comment 10

[Andy McKay]

Might want to chat about what is expected to be implemented by when, can plug the tree in, but there's a few things that need to be beyond the tree to match the mockup. If you are expecting the whole thing by the freeze, then that's at risk.

Comment 11

[Daniel Buchner [:dbuc]]

Per our discussion to push the freeze to next Thursday, I have updated the timeline: https://wiki.mozilla.org/AMO/FlightDeck/1.0a7#Timeline

I think this feature is still possible. I will be providing all the JS event hooks for the various actions. For instance, when a node is repositioned in the tree, I will have a method that gives you the new path in the tree as a string.

We already have the ability to upload/delete files on the server, those transactions will need only the addition of including the expected path in the tree (using the method I will supply, noted above). All the other UI for the tree in the mock is nearly finished, I will guarantee it is ready for wiring up by Monday morning.

Comment 12

[Andy McKay]

I'll be off till Tuesday, so take it easy over the holidays there mate - we can touch base on this then.

Comment 13

[Andy McKay]

Is http://people.mozilla.com/~dbuchner/demos/web/fd-tree/index.html still the link to the latest mockups?

Comment 14

[Piotr Zalewa [:zalun]]

The list of "subgoals"
http://etherpad.mozilla.org:9000/AL5Z60WciU

JUst added:

* uploading the Attachment is broken - throws exception at response = JSON.parse(xhr.responseText);

Comment 15

[Sean McArthur [:seanmonstar]]

completed in master, fitting into release a8