Skip to content
This repository has been archived by the owner on Apr 17, 2018. It is now read-only.

feat(draw-route): scaffold the draw route UI #24

Merged
merged 7 commits into from
Sep 24, 2014
Merged

feat(draw-route): scaffold the draw route UI #24

merged 7 commits into from
Sep 24, 2014

Conversation

Glavin001
Copy link
Contributor

Note: This is a work in progress. Do not merge yet.

Description

When the user is creating their model the following diagram is the screen they will see. The top orange bar is for functionality features (copy/paste, new diagram, zoom in/out, etc.). The red side bar will be collapsible and is shown expanded. There will be a tabbed interface to switch between any sub menus (eg. stencils). Properties are for selected elements in the diagram. Stencils are for prefab elements that you can drag into the diagram. The green bar is a tabbed interface to switch between multiple diagrams created. The “Diagram Area” will be the main drag and drop interface where users can create their models. The bottom blue bar is shown collapsed and will expand to show: STRIDE Analysis, Messages/Warnings about the diagram, User entered notes, and generated reports.

Mockup

mockup

Screenshot

image

@Glavin001
Copy link
Contributor Author

@Frozenfire92 mentioned this article: Full-height app layouts: A CSS trick to make it easier. Looks great!

@Glavin001 Glavin001 self-assigned this Sep 18, 2014
@Glavin001
Copy link
Contributor Author

Since the Stencil properties' key (attribute name) I've opted to put the key and value on their own lines:

Before

image

After

image

@Glavin001
Copy link
Contributor Author

Use Bootstrap's Glyphicons for the top navbar items with icons, such as save, etc.

Update: Also use a button toolbar for the icons. See http://getbootstrap.com/components/#btn-groups-toolbar

@Glavin001
Copy link
Contributor Author

Latest screenshot

image

@Glavin001
Copy link
Contributor Author

After this issue is closed we can continue on with #3 😃!

@MatKallada MatKallada added this to the Alpha Release milestone Sep 18, 2014
@Glavin001 Glavin001 modified the milestones: Early Foundations & Scaffolding, Alpha Release Sep 18, 2014
@Glavin001 Glavin001 mentioned this pull request Sep 18, 2014
Merged
@Glavin001
Copy link
Contributor Author

All that is left is

  • remove footer

as per @Kallada's request.

Then we can merge this and move onto building with Angular and modelling base classes and #3!

Frozenfire92 and others added 3 commits September 18, 2014 21:21
@Frozenfire92
chore(app): fix jsPlumb dependencies
5a39b7d 
- jquery-ui needed for jsPlumb
- jsPlumb updated to newest version
- indentation fix
@Frozenfire92
chore(draw-route): start setup of jsPlumb
ab2a5ab 
Not quite working yet. Following http://www.jsplumb.org/demo/sourcesAndTargets/jquery.html as an example to get started.
@Glavin001
chore(draw-route): finish setting up jsPlumb demo
055b8df 
See http://www.jsplumb.org/demo/flowchart/jquery.html for demo.
@Glavin001
Copy link
Contributor Author

image

@MatKallada MatKallada mentioned this pull request Sep 23, 2014
Closed
@Glavin001
Copy link
Contributor Author

I'd consider the "Setup jsPlumb" issue #3 complete with this Pull Request. We should start developing on #10 😃.

Frozenfire92 added a commit that referenced this pull request Sep 24, 2014
@Frozenfire92
Merge pull request #24 from mozilla/draw-route-ui
982b0ba 
feat(draw-route): scaffold the draw route UI
@Frozenfire92 Frozenfire92 merged commit 982b0ba into master Sep 24, 2014
@MatKallada MatKallada deleted the draw-route-ui branch June 27, 2015 03:52
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees

@Glavin001 Glavin001

Labels
high priority
Projects
None yet
Milestone
Early Foundations & Scaffolding
Development

Successfully merging this pull request may close these issues.
3 participants
@Glavin001 @MatKallada @Frozenfire92