Merge lp:~michael.nelson/launchpad/3-0-menu into lp:launchpad

= Summary =

This branch is a first implementation of Martin's new location-header +
navigation tabs (facets), the mockup of which can be seen at:

http://people.canonical.com/~michaeln/menu_3-0/0-LP_new_design_Bugs_v3.1-from-beuno.png

== Proposed fix ==

This branch removes the old facet tabs from base-layout.pt and adds in
their place a simple styled list via a macro.

Following are a few unresolved questions that I have regarding the design.

What happens for contexts that do not have an image:logo?
=========================================================
See source package screenshot at:
http://people.canonical.com/~michaeln/menu_3-0/2-DistroSourcepkg-with-disabled-tabs.png

IDistributionSourcePackage does not provide IHasLogo, so passes up to
the nearest object that does, which is the distribution.

Note: in this specific case we actually want to update
IDistributionSourcePackage to implement IHasLogo and use the logo of the
upstream project - if it has one.

Alignment of menu text when first tab is highlighted (Code)?
============================================================

The provided mockup has the text of the first tab aligned with the text
of the heading above, but does not specify what should be aligned when
the first tab is active (ie. still the text, or the border of the
highlight?).

As a last-minute decision, I've gone with aligning the text of the first
tab when it is not active, and the margin/highlight when it is, as shown
by the first two examples at:

http://people.canonical.com/~michaeln/menu_3-0/4-alignment-of-first-tab.png

The third example shows you the other alternative (aligning the text
even when the first tab is active). Let me know what you'd prefer.

The location-portlet now becomes the top-portlet
================================================

I'm assuming from the mockup that the location portlet will always be
the top portlet when it is present. That is, the first content below it
should be separated with a thin gray line (ie. a normal portlet).

If this is so, it'll mean updating the 3.0 design instructions as people
can simply add class="portlet" to their first main-area portlet.

Other unspecified design decisions
==================================

Hover behaviour
---------------
I've just used a lower-contrasting gray. See

http://people.canonical.com/~michaeln/menu_3-0/1-DistroSearch-with-hover.png

Another point (which I haven't got an image for, but you can see the
behaviour if you merge the branch) is hovering over the current selected
tab.

Disabled location tabs
----------------------
I've grayed them out as shown at:
 http://people.canonical.com/~michaeln/menu_3-0/2-DistroSourcepkg-with-disabled-tabs.png

edge/staging warning message
----------------------------
As I've only implemented the location header/nav, I have not moved it so
it will still appear under the current 'breadcrumb'-like structure at
the top of the page.

== Implementation details ==

== Tests ==

bin/test -vvt tests/base-layout.txt

== Demo and Q/A ==

= Launchpad lint =

Checking for conflicts. and issues in doctests and templates.
Running jslint, xmllint, pyflakes, and pylint.
Using normal rules.

Linting chan...

> What happens for contexts that do not have an image:logo?
> =========================================================
> See source package screenshot at:
> http://people.canonical.com/~michaeln/menu_3-0/2-DistroSourcepkg-with-
> disabled-tabs.png
>
> IDistributionSourcePackage does not provide IHasLogo, so passes up to
> the nearest object that does, which is the distribution.
>
> Note: in this specific case we actually want to update
> IDistributionSourcePackage to implement IHasLogo and use the logo of the
> upstream project - if it has one.

I think that we should always have a default Logo, and a plan to eventually show something meaningful there.

> Alignment of menu text when first tab is highlighted (Code)?
> ============================================================
>
> The provided mockup has the text of the first tab aligned with the text
> of the heading above, but does not specify what should be aligned when
> the first tab is active (ie. still the text, or the border of the
> highlight?).
>
> As a last-minute decision, I've gone with aligning the text of the first
> tab when it is not active, and the margin/highlight when it is, as shown
> by the first two examples at:
>
> http://people.canonical.com/~michaeln/menu_3-0/4-alignment-of-first-tab.png
>
> The third example shows you the other alternative (aligning the text
> even when the first tab is active). Let me know what you'd prefer.

I feel the third option is the best. Thank you so much for laying out my options so well :)

> The location-portlet now becomes the top-portlet
> ================================================
>
> I'm assuming from the mockup that the location portlet will always be
> the top portlet when it is present. That is, the first content below it
> should be separated with a thin gray line (ie. a normal portlet).
>
> If this is so, it'll mean updating the 3.0 design instructions as people
> can simply add class="portlet" to their first main-area portlet.

I don't quite understand what you mean by "location portlet".

> Other unspecified design decisions
> ==================================
>
> Hover behaviour
> ---------------
> I've just used a lower-contrasting gray. See
>
> http://people.canonical.com/~michaeln/menu_3-0/1-DistroSearch-with-hover.png
>
> Another point (which I haven't got an image for, but you can see the
> behaviour if you merge the branch) is hovering over the current selected
> tab.

Your instincts where right here. It's great as-is.

> Disabled location tabs
> ----------------------
> I've grayed them out as shown at:
> http://people.canonical.com/~michaeln/menu_3-0/2-DistroSourcepkg-with-
> disabled-tabs.png

Again, the right thing to do.

> edge/staging warning message
> ----------------------------
> As I've only implemented the location header/nav, I have not moved it so
> it will still appear under the current 'breadcrumb'-like structure at
> the top of the page.

I see you still haven't moved the breadcrumbs to beneath the title. To be honest, I don't know what to do with the edge notice, but I feel it's no longer as important to know about in which instance you are. It could very well be something th...

> > What happens for contexts that do not have an image:logo?
> > =========================================================
> > See source package screenshot at:
> > http://people.canonical.com/~michaeln/menu_3-0/2-DistroSourcepkg-with-
> > disabled-tabs.png
> >
> > IDistributionSourcePackage does not provide IHasLogo, so passes up to
> > the nearest object that does, which is the distribution.
> >
> > Note: in this specific case we actually want to update
> > IDistributionSourcePackage to implement IHasLogo and use the logo of the
> > upstream project - if it has one.
>
> I think that we should always have a default Logo, and a plan to eventually
> show something meaningful there.

Yes, the tales logo formatter does this - it will display a default logo if it cannot find one for the given traversal path (ie. in the above example, if IDistribution did not provide IHasLogo, then a default logo would be displayed.

I'm not sure if you are saying that you'd prefer that the formatter didn't look up the traversal path (ie. if there is no logo for the IDistributionSourcePackage then it should just display the default logo, rather than looking to IDistribution first)? If so, then I think the wider implications of that change need to be considered (and I'd suggest it isn't part of this branch).

And to eventually get something meaningful here shouldn't be difficult as once the logos are displayed so visibly it will be up to the responsible teams to add IHasLogo support.

>
>
>
> > Alignment of menu text when first tab is highlighted (Code)?
> > ============================================================
> >
> > The provided mockup has the text of the first tab aligned with the text
> > of the heading above, but does not specify what should be aligned when
> > the first tab is active (ie. still the text, or the border of the
> > highlight?).
> >
> > As a last-minute decision, I've gone with aligning the text of the first
> > tab when it is not active, and the margin/highlight when it is, as shown
> > by the first two examples at:
> >
> > http://people.canonical.com/~michaeln/menu_3-0/4-alignment-of-first-tab.png
> >
> > The third example shows you the other alternative (aligning the text
> > even when the first tab is active). Let me know what you'd prefer.
>
> I feel the third option is the best. Thank you so much for laying out my
> options so well :)
>

No probs! I've pushed the change so the third option is used.

>
> > The location-portlet now becomes the top-portlet
> > ================================================
> >
> > I'm assuming from the mockup that the location portlet will always be
> > the top portlet when it is present. That is, the first content below it
> > should be separated with a thin gray line (ie. a normal portlet).
> >
> > If this is so, it'll mean updating the 3.0 design instructions as people
> > can simply add class="portlet" to their first main-area portlet.
>
> I don't quite understand what you mean by "location portlet".

OK, so perhaps another point should have been that I don't know how to refer to this block of heading+application/navigation/facet/tabs. I started refering to it as the "location portlet" ...

Martin,

I've just been talking with Curtis - which has helped clarify a few issues. In particular, what I've referred to above as the 'location portlet' is really the 'pillar heading'. So I'll need to do a bit of a re-work to straighten things out.

I'll hopefully be able to push the changes tomorrow morning.

> I'm not sure if you are saying that you'd prefer that the formatter didn't
> look up the traversal path (ie. if there is no logo for the
> IDistributionSourcePackage then it should just display the default logo,
> rather than looking to IDistribution first)? If so, then I think the wider
> implications of that change need to be considered (and I'd suggest it isn't
> part of this branch).

No, I think the current behavior is good for now.

> > I see you still haven't moved the breadcrumbs to beneath the title.
>
> No, Julian mentioned the other day that I was only to do the nav, not the
> breadcrumbs. But even if you do want me to do those, I'd still prefer to do
> them as a separate branch - if that's ok?

It is. The breadcrumb issue is something separate from the UI. They need to be more detailed, and I'm going to work on that with Salgado.
If you can handle the UI, while I work out the technical details with Salgado, it would be great.

> This change will affect any page that uses the 3-0 templates (main_only,
> main_side, searchless, locationless.) So, I was wanting to check with Curtis,
> but I was planning on landing this change without updating any other templates
> (it just so happens that Curtis has already landed the searchless template
> changes such as the Distribution search that I used in the examples here and
> that you can see locally). I was under the impression (from Curtis' conversion
> page) that we cannot yet land any changes that update templates to 3-0? (see
> the section "There are some bugs that must be fixed before layouts changes can
> start" at the beginning of the page
> https://dev.launchpad.net/VersionThreeDotO/UI/Conversion)

Sounds good to me.

OK, I've updated this branch after talking with both Curtis and Martin.

The complete diff is: Diff: http://pastebin.ubuntu.com/247929/ (easier to read).

Changes
=======

1. I added a location_title formatter which, similar to the logo formatter, checks for the nearest IHasLogo implementer in the canonical url, and displays returns the title. This allows the location portlet to display the *person* who owns the PPA currently being browsed, like this:

http://people.canonical.com/~michaeln/menu_3-0/5-default-h2-location-heading.png

Note: when discussing this with Curtis, we had planned for this to be 'pillar_title', but I also understood that when viewing a PPA, the location should be the person, as shown in the image. Other options for the formatter would be 'piller_or_person_title' depending on what Curtis thinks.

2. I've ensured that if we cannot display a piller/person title (because there is no pillar or person present) then we display 'Launchpad' like this:

http://people.canonical.com/~michaeln/menu_3-0/6-no-location-default-launchpad.png

Note1: I assume 'Launchpad Home' will be disappearing, according to beuno' design?
Note2: The logo formatter already does this by default - so that didn't require any change.

Questions
=========

Now I'm left with the following question:

1. Why is the default heading used in the "heading" metal slot h2? Shouldn't it always be h1 (given that the heading in the location is always h2).

Note: I did do a revision where the location_title marked up the title with h1 or h2 depending on whether the current context itself implemented IHasLogo, but that didn't work for pages like:

http://people.canonical.com/~michaeln/menu_3-0/7-ubuntu-search.png

where the context *is* the ubuntu distribution, but we have an h1 heading related to search.

Thanks for your time!

Changes are awesome.

> Note1: I assume 'Launchpad Home' will be disappearing, according to beuno'
> design?

Yes.

> 1. Why is the default heading used in the "heading" metal slot h2? Shouldn't
> it always be h1 (given that the heading in the location is always h2).
>
> Note: I did do a revision where the location_title marked up the title with h1
> or h2 depending on whether the current context itself implemented IHasLogo,
> but that didn't work for pages like:
>
> http://people.canonical.com/~michaeln/menu_3-0/7-ubuntu-search.png
>
> where the context *is* the ubuntu distribution, but we have an h1 heading
> related to search.

I don't think I quite understand this, but if there's only one heading, then it should be h1

Hi Michael.

This is a good improvement. I think I have just as may questions as you. I do not think I have any answers. I think Martin needs to give some directions here.

Martin mentioned that the the Overview tab going away. I believe that will
cause havoc here. How do I get from translations to my profile? Do I
click on the icon or pillar title?

If overview is gone, how do we handle the Launchpad Home hack? I do not
think search is Launchpads root page. It is most like a collection such as
people/ and projects/. I guess my concern is about distinguishing the
launchpad application that is being used and our projects. They have the
same icons which confuses me. Is it possible to have a different icon
for the projects and the application?

I wonder what sprint looks like? It is the only non-pillar-person that
has logos. Since a sprint is antonymous from pillars and teams, it probably
should have an icon.

/me can see the PPA is private because the left margin has a stripe.

The default heading is a <h2> because we assume the <h1> is an exception.
The engineer and reviewer need to know when the template must pass a
<h1> to the heading slot because we are looking at the object itself. I
cannot explain this rule. This ws very frustrating for me. I gave up
working on this issue. Let me show you some examples that illustrate
my understanding:

    Distroseries Karmic (has bread crumbs):
        <title> Search packages in Ubuntu Karmic

        {@} Ubuntu Linux
        <h2> Karmic
             Ubuntu > Karmic

        <h1> Search packages in Karmic

    Project edit (no bread crumbs because this is the top):
        <title> Change Bazaar details

        {@} Bazaar Distributed Version Control
        <h2> Bazaar

        <h1> Change details <this is the form label>

    Project (no bread crumbs and pass a <h1>):
        <title> Bazaar Distributed Version Control

        {@} Bazaar Distributed Version Control
        <h1> Bazaar

    Team PPA history
        <title> Launchpad dependencies history

        {@} Canonical Launchpad Developers
        <h2> Launchpad dependencies
             launchpad developers > ppas

        <h1> Launchpad dependencies history

> Hi Michael.
>
> This is a good improvement. I think I have just as may questions as you. I do
> not think I have any answers. I think Martin needs to give some directions
> here.

Thanks for your time Curtis! Just to aid our call, here are some thoughts.

>
> Martin mentioned that the the Overview tab going away. I believe that will
> cause havoc here. How do I get from translations to my profile? Do I
> click on the icon or pillar title?

Yes, I have not done any removing - I was just noting that that's why my screenshot didn't look exactly like his mockup.

>
> If overview is gone, how do we handle the Launchpad Home hack? I do not
> think search is Launchpads root page. It is most like a collection such as
> people/ and projects/.

OK, I'm not sure I understand this point. Looking at:

http://people.canonical.com/~michaeln/menu_3-0/6-no-location-default-launchpad.png

which I assume would (currently in the branch) also apply to collections, could we not make the icon itself the link to Launchpad? (and if we wanted, also in other contexts, to the project/person etc.)

> I guess my concern is about distinguishing the
> launchpad application that is being used and our projects. They have the
> same icons which confuses me. Is it possible to have a different icon
> for the projects and the application?

Ah, I see the confusion. So it is really just an isolated case for the Launchpad project right? Hmm.. or maybe I've misunderstood?

>
> I wonder what sprint looks like? It is the only non-pillar-person that
> has logos. Since a sprint is antonymous from pillars and teams, it probably
> should have an icon.
>

Currently it would look something like this:
http://people.canonical.com/~michaeln/menu_3-0/11-sprint.png

> /me can see the PPA is private because the left margin has a stripe.
>
>
> The default heading is a <h2> because we assume the <h1> is an exception.
> The engineer and reviewer need to know when the template must pass a
> <h1> to the heading slot because we are looking at the object itself. I
> cannot explain this rule. This ws very frustrating for me. I gave up
> working on this issue. Let me show you some examples that illustrate
> my understanding:
>
> Distroseries Karmic (has bread crumbs):
> <title> Search packages in Ubuntu Karmic
>
> {@} Ubuntu Linux
> <h2> Karmic
> Ubuntu > Karmic
>
> <h1> Search packages in Karmic
>

OK, I don't think this one is an issue - it seems more like the heading just needs updating like this:

http://people.canonical.com/~michaeln/menu_3-0/8-distroseries-search-change.png

And to highlight why I thought the heading slot should default to h1, here's the example where we *would* use the default heading:

http://people.canonical.com/~michaeln/menu_3-0/9-distroseries-index.png

>
> Project edit (no bread crumbs because this is the top):
> <title> Change Bazaar details
>
> {@} Bazaar Distributed Version Control
> <h2> Bazaar
>
> <h1> Change details <this is the form label>

Similar to the distroseries search above, I'm not sure why the template wouldn't just override the heading slot with <h1> Change...

On Wed, Aug 5, 2009 at 12:48 PM, Michael
Nelson<email address hidden> wrote:
> So here there is a small issue, in that I think the h1 heading will or should replicate the {@} <h2> Bazaar Distributed Version Control </h2>.
>
> Like this:
>
> http://people.canonical.com/~michaeln/menu_3-0/10-project-index.png

I this case, the title would be "Overview", in h2, like in the mock
up: https://devpad.canonical.com/~beuno/LP_new_design_Home.png

--
Martin