Merge lp:~deryck/launchpad/description-editing-ubuntu-font into lp:launchpad

[Deryck Hodge]

Add a font-family declaration for inline description editing widgets which ensures consistency and uses the Ubuntu font if present.

This is a small branch to fix the CSS for the inline text area
editing widgets. These are the widgets used to edit descriptions for
bugs and merge proposal. MP commit messages are also edited via this
type of widget.

These widgets did not have the font-family declared in Launchpad and
so were using the font declared in lazr-js and with the current
update to use the Ubuntu font if available the description editing
widgets look even odder than before. This branch fixes that by
adding the rules to the stylesheet for LP. I also removed some
declarations that were shared across multiple templates but declared
in each template, so that there is one place to control the style of
these widgets.

I've declared this to use the same font family as for comments:

'UbuntuBeta Mono', 'Ubuntu Mono', monospace

This means that currently the plain monospace font will be used, but
once we have the Ubuntu version of this, the page will be all Ubuntu
font family. The page will be consistent for now and will use the
Ubuntu family of fonts once available.

This work does leave me with a couple questions:

 * Did I put the style declarations in the correct place?

         The base stlesheet is fairly generic, and these are fairly
         specific styles, but I didn't see where else to add them.

 * Does a UI reviewer agree that using monospace for descriptions is
   acceptable?

        There are already bugs about inconsistent fonts on pages, but
        IMHO this changes makes pages more consistently inconsistent.
        :-)

        All user-entered blocks of text would be monospace now, which
        I think is appropriate, but I welcome UI reviewer feedback on
        this.

[Graham Binns (gmb)]

review: Approve (code)

[Guilherme Salgado (salgado)]

I personally like having the same font family for all user-entered content, and specially for the description and comments, which can be considered part of a single conversation.

One question I have, though, is why the Ubuntu Beta family takes precedence over the Ubuntu one; shouldn't it be the other way around, so that the Ubuntu family is used when the user has both families installed? Or maybe I'm missing something?

Also, will we be able to remove the Ubuntu Beta family from that list once the final version is released or is there any reason we'd like to maintain it there?

review: Approve (ui*)

[Deryck Hodge (deryck)]

I followed the existing pattern from when the Ubuntu font family was added earlier. I assume it doesn't matter because they are the same font, and the name was simply changed. The font is provided by the same PPA currently, so I don't think you can have both installed. I assume when the font ships there will only be one font, not the beta one. We could indeed remove "beta" from the CSS when the final font ships.

[Curtis Hovey (sinzui)]

I too was confused by the decision to place the beta font before the final font, and wondered when will we remove it. Mark explained that we intend to continue development on the font family and that we want to see the beta font on all Canonical web sites to test. Most users will have the final font. Testers can choose to keep the beta font installed. We have no plans to remove the beta font.

review: Approve (ui)

=== modified file 'lib/canonical/launchpad/icing/style-3-0.css.in'
--- lib/canonical/launchpad/icing/style-3-0.css.in	2010-08-27 19:20:53 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css.in	2010-09-20 12:37:43 +0000
@@ -1804,6 +1804,20 @@
     color: #b8b8ff;
     }
 
+/* Inline description editing.
+ * Override the lazr-js style for all uses.
+ */
+div#edit-description,
+div#edit-commit_message {
+    font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
+    font-size: 93%;
+    margin: 1em 0;
+    }
+div#edit-description .yui-ieditor-input,
+div#edit-commit_message .yui-ieditor-input {
+    top: 0;
+    }
+
 
 /* =========================
    Universal presentation

=== modified file 'lib/lp/bugs/templates/bugtask-index.pt'
--- lib/lp/bugs/templates/bugtask-index.pt	2010-08-20 13:33:51 +0000
+++ lib/lp/bugs/templates/bugtask-index.pt	2010-09-20 12:37:43 +0000
@@ -20,8 +20,6 @@
         });
       </script>
       <style type="text/css">
-        /* A page-specific fix for inline text are editing to line up box. */
-        #edit-description .yui-ieditor-input { top: 0; }
         /* Align the 'add comment' link to the right of the comment box. */
         #add-comment-form textarea { width: 100%; }
         #add-comment-form { max-width: 60em; padding-bottom: 4em; }

=== modified file 'lib/lp/code/templates/branchmergeproposal-index.pt'
--- lib/lp/code/templates/branchmergeproposal-index.pt	2010-09-13 00:29:50 +0000
+++ lib/lp/code/templates/branchmergeproposal-index.pt	2010-09-20 12:37:43 +0000
@@ -18,9 +18,6 @@
     #code-review-votes {
       margin: 1em 0;
     }
-    #description, #edit-description {
-      margin: 1em 0;
-    }
     #add-comment-form {
       max-width: 60em;
       padding-bottom: 3em;
@@ -50,9 +47,6 @@
       padding-left: 20px;
       padding-bottom: 10px;
     }
-    /* A page-specific fix for inline text are editing to line up box. */
-    #edit-description .yui-ieditor-input { top: 0; }
-    #edit-commit_message .yui-ieditor-input { top: 0; }
   </style>
 </metal:block>