Merge lp:~allenap/launchpad/dd-beta-icon-bug-827508 into lp:launchpad

[Gavin Panella]

[r=gmb][ui=matthew.revell][bug=827508] Add a BETA notice for Derived Distributions.

Add a wretched beta icon to the +localpackagediffs page (and its
siblings) and to the DD portlet that appears on DistroSeries:+index.

An earlier attempt used the existing beta.png, but it's fairly, and
didn't look right anywhere. See the non-#2 images at [1] for an idea.

I then tried putting a diagonal sash across the top left of the page
(in the case of +localpackagediffs) and a smaller sash across the top
left of the portlet. It looks good, but interfered with the content on
the page (not layout, things like being able to use links, or just
reading the text underneath) so I abandoned that.

Finally there's the current proposal, a simple short red bar with BETA
written within. It looks better than the existing beta icon, and also
works in paragraph context without looking like it's been left
behind. See the #2 images at [1] for example screenshots.

[1] http://people.canonical.com/~gavin/ui/dd-beta-icon-bug-827508/

I have little experience as a designer so this has been frustrating,
slow going, and it's probably fairly crap. There's more that could be
done with this, like adding a help page, but someone else (or me next
week) can follow up on that. I see blood red mist when I think of the
time this branch has soaked up.

[Matthew Revell (matthew.revell)]

Thanks for taking the time to find the best way to communicate that this feature is in beta.

If Huw were here, we'd have sorted this fairly swiftly, I think. We need a re-usable recipe for indicating that something's in beta.

I agree that the red strip is better than the original beta icon. However, it looks a little lost on the full page.

Could we re-use the privacy ribbon from the Managing Disclosure project for the full page beta indicator? That would make it more clear that it's talking about the feature/page, rather than just one part of it, and it wouldn't interrupt the flow of the page.

The Teal squad originally allowed for dismissing the privacy ribbon, so that'd be a good way to avoid it being annoying.

I marking this "Needs information" because I want to know how long it would take to re-purpose the Teal squad's privacy ribbon. I think the portlet beta indicator is fine in the circumstances; we need Huw to re-work the design of the portlets generally.

review: Needs Information (ui)

[Graham Binns (gmb)]

Approving the code, though this should probably be marked WIP if there's more discussion to be had.

review: Approve (code)

[Gavin Panella (allenap)]

> Thanks for taking the time to find the best way to communicate that this
> feature is in beta.
>
> If Huw were here, we'd have sorted this fairly swiftly, I think. We need a re-
> usable recipe for indicating that something's in beta.
>
> I agree that the red strip is better than the original beta icon. However, it
> looks a little lost on the full page.
>
> Could we re-use the privacy ribbon from the Managing Disclosure project for
> the full page beta indicator? That would make it more clear that it's talking
> about the feature/page, rather than just one part of it, and it wouldn't
> interrupt the flow of the page.

We could do I suppose, but I'm reluctant to dig back into UI
design-like stuff. I do not have the design skills and experience of
someone like Huw, and I cannot acquire or even reasonably imitate
those skills quickly enough to make addressing this problem "properly"
be much more than an expensive folly.

>
> The Teal squad originally allowed for dismissing the privacy ribbon, so that'd
> be a good way to avoid it being annoying.

ISTR reading that dismissing the ribbon was considered a Bad
Thing. Indeed, it's no longer possible to dismiss it.

Also, overloading the top of the page for a BETA message is probably
confusing, especially since we have a red colour for both the BETA
icon and the privacy message. In other words, we'd probably have to
choose another colour for BETA.

>
> I marking this "Needs information" because I want to know how long it would
> take to re-purpose the Teal squad's privacy ribbon. I think the portlet beta
> indicator is fine in the circumstances; we need Huw to re-work the design of
> the portlets generally.

Technically, repurposing probably would not take too long, but it
opens new cans of design and interaction worms.

In short, I don't think I'm the right person to fix this issue
generally, I just need to get something done for Derived Distributions
and move on.

[Matthew Revell (matthew.revell)]

You're right, in that code review isn't the time for us to be making UI decisions.

In future, we'll make these decisions before implementation begins. Also, when Huw returns I'll work with him to produce a standard way to show that's something's in beta .

review: Approve (ui)

[Gavin Panella (allenap)]

Thanks Matt :)

=== modified file 'lib/canonical/launchpad/icing/style-3-0.css'
--- lib/canonical/launchpad/icing/style-3-0.css	2011-08-18 08:00:28 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css	2011-09-02 11:16:24 +0000
@@ -1197,6 +1197,16 @@
     /* Work around float bug in MSIE */
     height: 1%;
     }
+div.beta {
+    background-color: #c24848;
+    margin-bottom: 7px;
+    margin-top: 7px;
+    height: 10px;
+    width: 175px;
+    }
+div.beta img {
+    height: 10px;
+    }
 
 
 /* =========================

=== added file 'lib/canonical/launchpad/images/beta.png'
Binary files lib/canonical/launchpad/images/beta.png	1970-01-01 00:00:00 +0000 and lib/canonical/launchpad/images/beta.png	2011-09-02 11:16:24 +0000 differ
=== removed file 'lib/canonical/launchpad/images/beta.png'
Binary files lib/canonical/launchpad/images/beta.png	2010-06-24 05:19:16 +0000 and lib/canonical/launchpad/images/beta.png	1970-01-01 00:00:00 +0000 differ
=== added file 'lib/canonical/launchpad/images/src/beta.svg'
--- lib/canonical/launchpad/images/src/beta.svg	1970-01-01 00:00:00 +0000
+++ lib/canonical/launchpad/images/src/beta.svg	2011-09-02 11:16:24 +0000
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="52"
+   height="20"
+   id="svg5276"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="New document 4">
+  <defs
+     id="defs5278">
+    <linearGradient
+       id="linearGradient5794">
+      <stop
+         style="stop-color:#aa0000;stop-opacity:1;"
+         offset="0"
+         id="stop5796" />
+      <stop
+         style="stop-color:#aa0000;stop-opacity:0;"
+         offset="1"
+         id="stop5798" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5794"
+       id="radialGradient5802"
+       cx="-1.4285693"
+       cy="-68.800606"
+       fx="-1.4285693"
+       fy="-68.800606"
+       r="106.07143"
+       gradientTransform="matrix(5.7303931e-8,0.87228176,-2.0000197,1.3138987e-7,-140.53115,999.94761)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8"
+     inkscape:cx="89.731391"
+     inkscape:cy="-20.203044"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1547"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5281">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1032.3622)">
+    <text
+       xml:space="preserve"
+       style="font-size:18.58152771px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#b3b3b3;stroke-width:0.38711515;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Ubuntu;-inkscape-font-specification:Ubuntu Bold"
+       x="1.8477888"
+       y="1048.7914"
+       id="text5804"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan5806"
+         x="1.8477888"
+         y="1048.7914"
+         style="stroke-width:0.38711515">BETA</tspan></text>
+  </g>
+</svg>

=== modified file 'lib/lp/registry/templates/distroseries-localdifferences.pt'
--- lib/lp/registry/templates/distroseries-localdifferences.pt	2011-08-30 22:42:01 +0000
+++ lib/lp/registry/templates/distroseries-localdifferences.pt	2011-09-02 11:16:24 +0000
@@ -39,6 +39,11 @@
       tal:define="differences view/cached_differences;
                   series_name context/displayname;
                   can_perform_sync view/canPerformSync;">
+
+      <div class="beta">
+        <img src="/@@/beta" alt="[BETA]" />
+      </div>
+
       <p><tal:replace replace="structure view/explanation/escapedtext" /></p>
 
       <metal:package_filter_form

=== modified file 'lib/lp/registry/templates/distroseries-portlet-derivation.pt'
--- lib/lp/registry/templates/distroseries-portlet-derivation.pt	2011-08-22 03:20:59 +0000
+++ lib/lp/registry/templates/distroseries-portlet-derivation.pt	2011-09-02 11:16:24 +0000
@@ -13,6 +13,10 @@
       <h2>Derived from <tal:name replace="view/number_of_parents"/> parents</h2>
     </tal:multiple_parents>
 
+    <div class="beta">
+      <img src="/@@/beta" alt="[BETA]" />
+    </div>
+
       <tal:diffs define="nb_diffs view/num_version_differences;
                          nb_diffs_in_parent view/num_differences_in_parent;
                          nb_diffs_in_child view/num_differences_in_child;">