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

RESOLVED FIXED in Builder 0.8

Status

addons.mozilla.org Graveyard
Add-on Builder
P1
normal
RESOLVED FIXED
8 years ago
4 years ago

People

(Reporter: dbuc, Assigned: seanmonstar)

Tracking

unspecified
Builder 0.8

Details

Attachments

(1 attachment, 4 obsolete attachments)

(Reporter)

Description

8 years ago
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.
(Reporter)

Updated

8 years ago
Priority: -- → P1
Target Milestone: -- → 0.7
(Reporter)

Comment 1

8 years ago
Created attachment 496857 [details]
New UI for the editor page of the app
(Reporter)

Comment 2

8 years ago
Created attachment 496860 [details]
New UI for the editor page of the app - UPDATED
(Reporter)

Updated

8 years ago
Attachment #496857 - Attachment is obsolete: true
(Reporter)

Comment 3

8 years ago
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.
(Reporter)

Comment 4

8 years ago
Created attachment 496909 [details]
New UI for the editor page of the app - UPDATE 2
(Reporter)

Updated

8 years ago
Attachment #496860 - Attachment is obsolete: true
(Reporter)

Comment 5

8 years ago
Created attachment 496910 [details]
New UI for the editor page of the app - UPDATE 3
(Reporter)

Updated

8 years ago
Attachment #496909 - Attachment is obsolete: true
(Reporter)

Updated

8 years ago
Attachment #496910 - Attachment is obsolete: true
(Reporter)

Comment 6

8 years ago
Created attachment 496964 [details]
New UI for the editor page of the app - UPDATE 4
(Reporter)

Comment 7

8 years ago
Killed off modals per discussion with Chowse.
(Reporter)

Comment 8

8 years ago
- 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.
(Reporter)

Updated

8 years ago
Assignee: nobody → zaloon
(Reporter)

Comment 9

8 years ago
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

Comment 10

8 years ago
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.
(Reporter)

Comment 11

8 years ago
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

8 years ago
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

Comment 13

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

Updated

8 years ago
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);
(Assignee)

Comment 15

8 years ago
completed in master, fitting into release a8
Status: NEW → RESOLVED
Last Resolved: 8 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.