Update Murano with Horizon design patterns

I didn't see a way to upload a screenshot, so here is a URL:
https://region-b.geo-1.objects.hpcloudsvc.com/v1/53485376778433/murano/UI-suggestions-Piet/designs-v2.jpg

@tsufiev:
Brian, thank you for working this out. I'd like to keep 'Current Environment' selector in the AppCatalog page - it defines the destination Environment for Applications after successful 'Add to Env' action.
'Design C' looks good to me.

@brian-tully:
Timur, thanks! I agree that Design C is also my favorite. One thing we'll need to plan for is Applications with really long names, i.e., do we truncate the text after a certain # of characters or do we let it wrap to 2 lines, etc. My experience with floated tile designs is that they can become tricky when the content lengths of fields varies greatly, e.g., some tiles will be taller than others which breaks the flow of the design. So we should try to plan for that.
Also, sorry that I completely forgot about the Environment selector. Do you think we can add another dropdown on the page for environments rather than the orange square that is floated right? I'm catching a lot of grief for the orange sqare nav :(

@tsufiev:
Considering long names - I'd suggest to truncate them and display full name in a tooltip.
About Environment selector: yes, another dropdown seems fine to me - e.g., to the right of the 'Application Catalog' header. Also, tooltips could also be helpful here - according to the feedback from the rest of Murano team, it is not clear to which Environment an Application will be added after pressing 'Add to Env' button (especially now, with Current Environment selector hidden in orange square). So, I'd also suggest add tooltip to that button, e.g. 'Add application to <current_environment> environment'.

@brian-tully (5.14.2014):
Some suggestions based on discussion with @tsufiev in IRC
Since the current design has the "Environment" selector hidden by default, it's not clear to users what environment they are deploying to when they click on the "Add To Env" or "Quick Deploy" buttons. One suggestion would be to remove the global environment selector from the page and instead update each "Add To Env" button so it operates as a pulldown. This way each app tile would have its own selector and keep the user focused on the app rather than having to remember to go back up to a global selector. OR, include the environment selector on the modal that appears when the user clicks "Add To Env" or "Quick Deploy" so it not only tells them what environment is preselected, but also allows them to change it. If we don't want the selector in the modal, then we should at the very least update the modal header to inform the user which environment is being used, i.e. replace "Add Application" with "Add Application to <someEnv>"

@brian-tully (5.14.2014):
Also, some further discussion should probably take place to clarify the purpose of the "Latest Apps" section of the page. The title seems to indicate the latest apps that have been imported, however currently the section is often empty which is confusing. In speaking with @tsufiev, he mentioned that the info shown there is really more related to recent activity by the user and is stored in the web session rather than the DB. So more often than not, this section will probably be empty. So we need to figure out and clarify the purpose of this area. If it truly is based on recent activity of the user (app imports, app deployments, etc.) then maybe we should rename this to something like "Recent Activity". If the data is going to be stored in the web session rather than DB, then maybe we should update the template and only show this section if there is content. Currently the text that shows there now "There are no applications available at this time." does not make sense, so we should either change the text or hide the section, IMHO.

@george-okrokvertskhov (05/20/2014)
 I am ok with removing right side control bar and have search elements on the main page. Frankly I don't want to change the style of the tiles. The reason for that it the following:
  * the overall page should not be overloaded visually. If you add more colored elements (top level strip with name, bottom level strip with buttons) this will overload the page content when multiple tiles are displayed.
  * If you change tile color to white they will almost indistinct from page background.
 We can move "details" link closer to description and use right alignment for buttons.

@brian-tully (5/21/2014):
Thanks for your comments, @george-okrokvertskhov. The suggestion to change the style of the tiles came not from me but from our UX Director. I tried to push back as much as I could since I didn't really see the benefit of his proposed tile designs. I agree with you 100%. I'm glad you are open to removing the right side control bar. Please let me know what I can do to help implement the changes :)

@brian-tully (5/22/2014)
I've added some work items below. I will reach out to @george-okrokvertskhov to figure out how to go about implementing them. There are a few work items that I have labeled as POSTPONED because I think they need more discussion and consensus:
- Update "selector" style for App Category and Environment to be more "Horizon": NEEDS MORE DISCUSSION/CONSENSUS
- Rename "Latest Apps" section header to something more precise, like "Recent Activity": NEEDS MORE DISCUSSION/CONSENSUS
- Environment - maybe remove global selector and instead within each app tile the "Add to Env" button becomes a selector?: NEEDS MORE DISCUSSION/CONSENSUS
- Environment - maybe allow user to change environment within the deploy modal?: NEEDS MORE DISCUSSION/CONSENSUS

Gerrit topic: https://review.openstack.org/#q,topic:bp/murano-ui-horizon-patterns,n,z

Addressed by: https://review.openstack.org/99229
    Implement Horizon UI patterns

Work items:
- Remove the right side control bar (markup, CSS, JS): TODO
- Add "Horizon" search filter at top of App Category section: TODO
- Add Environment selector at top of App Category section: TODO
- Add "current environment" description to the deploy modal header text, e.g., "Add Application to <someEnv>": TODO
- Tile style - move "details" link closer to description and use right alignment for buttons: TODO
- Update "selector" style for App Category and Environment to be more "Horizon": POSTPONED
- Rename "Latest Apps" section header to something more precise, like "Recent Activity": POSTPONED
- Under "Latest Apps/Recent Activity" section, apps that appear there do not need the action buttons so maybe slightly modify the tile layout for this section: POSTPONED
- Environment - maybe remove global selector and instead within each app tile the "Add to Env" button becomes a selector?: POSTPONED
- Environment - maybe allow user to change environment within the deploy modal?: POSTPONED
- SEARCH field. When a search is performed, add the query to the search field on the results page so that the user can see which term is being filtered on: TODO