New visual design of charm details and browser.

New visual design of charm details and browser.

Add new typography, colours and layout for the charm details and other browser views such as the sidebar and full screen browser.

https://code.launchpad.net/~huwshimi/juju-gui/visual-update-3/+merge/173891

(do not edit description out of merge proposal)

[huwshimi, 2013-07-10 09:24:37]

Please take a look.

[rharding, 2013-07-10 12:43:57]

Code looks ok, would like to see the #d7d7d7 color variable-ized. One question
on if we can remove the 500 front from the request to cut down on that request
size.

Will QA before a final 'looks good'.

https://codereview.appspot.com/11104043/diff/1/app/index.html
File app/index.html (right):

https://codereview.appspot.com/11104043/diff/1/app/index.html#newcode40
app/index.html:40: <link
href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Ubuntu:300,400,500,300italic,400italic,500italic'
rel='stylesheet' type='text/css'>
I didn't see any 500 in the typography.less. Can we remove that font from the
request then?

[rharding, 2013-07-10 13:27:38]

A few QA issues:

First, there's this strange border around the tabs when selected. See the
screenshot here:

http://uploads.mitechie.com/lp/visuals-3-tab-bug.png

The share button is gone and is just text now and the menu doesn't align nicely
with it. See screenshot:

http://uploads.mitechie.com/lp/no-share-button.png

With the addition of the Summary tab it looks poor to have an initial heading
"Summary" right under the tab heading. I'd suggest removing the heading and just
leaving the text content.


Working with the team to determine if this is stuff that we can push for now and
follow up or need to fix first.

[rharding, 2013-07-10 13:58:28]

Luca notes that there's some width issues during his qa:

...charm details is 50px too small and narrow panel is 60px too wide

[luca.paulina, 2013-07-10 14:06:19]

Build mode:

The category icons should be removed from the narrow panel. They are only
accessible via search.

Back button needs to be added. See here:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1ZVpkRjVtY0luaE0/e...

Spacing is incorrect on the top and bottom of the charm token

The narrow panel width should be 290px, it is currently 350px (The inspector is
also 290px)

The narrow panel headers seem to be slightly lighter than the charm tokens, it
should all be one uniform colour which is also textured. See here:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1Nm1RaDFpT1UtRk0/e...

Featured charms is not collapsable or expandable, it is always expanded.

[luca.paulina, 2013-07-10 14:06:53]

Charm details: (The charm details is the same for build and browse mode so the
following effects both modes)

Providers is missing

New share icons need to be added

[luca.paulina, 2013-07-10 14:07:10]

Global:

The search bar should not highlight orange

The new browser and build buttons in the masthead can be seen here:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1RFdOb3lGdWc2b1E/e...

The bottom bar should be removed.

Zoom should be moved onto the right hand side of the canvas and vertical.

[luca.paulina, 2013-07-10 14:08:50]

Charm details:

The "Related charm" table is styled incorrectly, the sapcers should look like
this:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1RFdOb3lGdWc2b1E/e...

[luca.paulina, 2013-07-10 14:11:38]

Browse mode:

The viewport should be centered and at a width of 1040px, beyond that the
background should only continue. The content does not expand to fit the width.
See here:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1RFdOb3lGdWc2b1E/e...

[luca.paulina, 2013-07-10 14:12:58]

Browse mode:

Back button needs to be added. See here:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1RFdOb3lGdWc2b1E/e...

[luca.paulina, 2013-07-10 14:17:35]

Browse mode:

The charm details in browse mode should be the following widths: 290px for the
static left hand column, 750px for the scrollable right hand column.

[luca.paulina, 2013-07-10 14:19:54]

Charm details: 

The charm detail navigation should be centered in browse and build mode,
currently it is left aligned. See here:
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1RFdOb3lGdWc2b1E/e...
and
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1QjdzNWMwUm9ENDg/e...

[luca.paulina, 2013-07-10 14:23:53]

Global:

The body copy type in the charm details has the wrong line-height. It should be
1.4em but is being over written as 18px.

[huwshimi, 2013-07-10 21:02:04]

On 2013/07/10 12:43:57, rharding wrote:
> Code looks ok, would like to see the #d7d7d7 color variable-ized. One question
> on if we can remove the 500 front from the request to cut down on that request
> size.
> 
> Will QA before a final 'looks good'.
> 
> https://codereview.appspot.com/11104043/diff/1/app/index.html
> File app/index.html (right):
> 
> https://codereview.appspot.com/11104043/diff/1/app/index.html#newcode40
> app/index.html:40: <link
>
href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Ubuntu:300,400,500,300italic,400italic,500italic'
> rel='stylesheet' type='text/css'>
> I didn't see any 500 in the typography.less. Can we remove that font from the
> request then?

500 is the weight for Medium so any reference to Ubuntu Medium is using that
weight. I just haven't transitioned all the code to using weights yet.

[huwshimi, 2013-07-10 21:11:55]

On 2013/07/10 13:27:38, rharding wrote:
> A few QA issues:
> 
> First, there's this strange border around the tabs when selected. See the
> screenshot here:
> 
> http://uploads.mitechie.com/lp/visuals-3-tab-bug.png

That's how Chrome highlights the current selected element. If you use a
different browser it'll appear differently.

> 
> The share button is gone and is just text now and the menu doesn't align
nicely
> with it. See screenshot:
> 
> http://uploads.mitechie.com/lp/no-share-button.png

We have new share controls. I believe Jon is working on that.

> 
> With the addition of the Summary tab it looks poor to have an initial heading
> "Summary" right under the tab heading. I'd suggest removing the heading and
just
> leaving the text content.
> 
> 
> Working with the team to determine if this is stuff that we can push for now
and
> follow up or need to fix first.

[gary.poster, 2013-07-10 21:45:12]

LGTM with merging lp:~makyo/juju-gui/visual-update-3 to address Rick's
non-sharing comments (Jon is working on that) and further branches to address
Luca's comments.  Thanks!

Gary

[huwshimi, 2013-07-10 22:55:15]

*** Submitted:

New visual design of charm details and browser.

Add new typography, colours and layout for the charm details and other browser
views such as the sidebar and full screen browser.

R=rharding, luca.paulina, gary.poster
CC=
https://codereview.appspot.com/11104043