Closed Bug 615325 Opened 11 years ago Closed 11 years ago

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

Categories

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

defect

Tracking

(Not tracked)

RESOLVED FIXED
Builder 0.8

People

(Reporter: dbuchner, Assigned: smcarthur)

Details

Attachments

(1 file, 4 obsolete files)

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.
Priority: -- → P1
Target Milestone: -- → 0.7
Attached image New UI for the editor page of the app (obsolete) —
Attachment #496857 - Attachment is obsolete: true
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.
Attachment #496860 - Attachment is obsolete: true
Attachment #496909 - Attachment is obsolete: true
Attachment #496910 - Attachment is obsolete: true
Killed off modals per discussion with Chowse.
- 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.
Assignee: nobody → zaloon
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
Assignee: zaloon → amckay
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.
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.
I'll be off till Tuesday, so take it easy over the holidays there mate - we can touch base on this then.
Target Milestone: 0.7 → 0.8
Component: FlightDeck → Add-on Builder
Product: Mozilla Labs → addons.mozilla.org
Target Milestone: 0.8 → ---
QA Contact: flightdeck → add-on-builder
Target Milestone: --- → Builder 0.8
Is http://people.mozilla.com/~dbuchner/demos/web/fd-tree/index.html still the link to the latest mockups?
Assignee: amckay → smcarthur
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);
completed in master, fitting into release a8
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.