Implement grey masthead with logout, alerts and get juju

[Luca Paulina]

We will supply new designs for this friday 25th

[Luca Paulina (lucapaulina)]

Please see attached for the grey masthead, please note:

1. The "Install Juju" button swaps to "Logout" when you are logged in, but for the sandbox it should say "Install Juju"
2. The hover states are just a darker grey (see attached)
3. The Alerts circle expands towards the left and changes shape to accomodate more numbers. (See attached)

[Richard Harding (rharding)]

Sandbox is a config variable that should be available in window.juju_config.sandbox.

[Huw Wilkins (huwshimi)]

From my understanding there are still three blockers to completing the bug.

1. We are still waiting for the old and new browser changeover to happen (as Gary notes here: https://bugs.launchpad.net/juju-gui/+bug/1171535/comments/4).

2. We need some direction on this additional question from the same comment:
> Challenge that we need to talk further about:
>
> Go to
> http://uistage.jujucharms.com:8080/bws/sidebar/
> Click on a charm and click Add
> Now one page from the old charm browser appears. This will be used for 13.04. How should we coordinate header changes with this remaining page?

3. We don't yet have a mockup for how the alerts should look.

[Luca Paulina (lucapaulina)]

1. It was my understanding that we wasn't touching the right hand panel design wise and therefore we have requested no changes. If you can bring it in-line with the rest of the GUI then that would be fantastic. It would need to sit below the divider and the black should be changed to the grey that is used in the masthead.

2. See above^

3. The design for the masthead can be found here:

https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1N1pvck1rQkFWUnc/edit?usp=sharing
https://docs.google.com/a/canonical.com/file/d/0B7XG_QBXNwY1N1pvck1rQkFWUnc/edit?usp=sharing

a) The "Install Juju" button swaps to "Logout" when you are logged in, but for the sandbox it should say "Install Juju"
b) The hover states are just a darker grey (see attached)
c) The Alerts sqcircle expands towards the left and changes shape to accomodate more numbers. (See attached)

Let me know if something is missing.

[Gary Poster (gary)]

@Rick, FWIW, I'd prefer if we looked at app.get(CONFIG NAME) rather than window.juju_config.CONFIG NAME.

@Luca, re my comment from bug 1171535, the issue I was trying to raise is that the right hand panel, when it is open, visually integrates with the header right now. I'm concerned that changing the header alone without any adjustments to the right hand panel will not look acceptable. Hopefully I am wrong--and failing that, hopefully we'll have enough time to adjust it after the infrastructure behind the charm browser is production ready and we can land the default charm browser work.

I'm also toying with seeing what the system would look like without the charm browser but with the new darker header look. If it's not too bad maybe we can land it and be less blocked.

[Gary Poster (gary)]

Also @luca, https://launchpadlibrarian.net/138434307/Hover_and_alerts_extended.png and https://launchpadlibrarian.net/138434298/Juju-GUI-header-and-browser.png (the two images you attached to this bug in comments 2 and 3 of this bug) have circle alerts. The doc you linked in comment 6 has a sqcircle. I'm guessing sqcircle is correct?

[Luca Paulina (lucapaulina)]

sqcircle is correct.

If we have time to tweak the right hand column then thats fine by us, we haven't supplied anything because we thought we didn't have the time to change it. If that changes though, let us know and we'll get something out to you guys.

[Huw Wilkins (huwshimi)]

> Let me know if something is missing.
Luca, yes, we're missing a mockup for how the alerts should look, i.e. when you click on the alerts we currently have a drop down of the alerts. How would you like that drop down to look?

[Luca Paulina (lucapaulina)]

For the time being we're happy to leave the dropdown as it is for now. We don't have the resources to re-design it and will pick this up when we change alerts in the very near future.