Launchpad itself

Merge lp:~beuno/launchpad/finally-fix-forms into lp:launchpad/db-devel

  1. finally-fix-forms
  2. Merge into db-devel
Proposed by Martin Albisetti
Status: Merged
Approved by: Curtis Hovey
Approved revision: no longer in the source branch.
Merged at revision: not available
Proposed branch: lp:~beuno/launchpad/finally-fix-forms
Merge into: lp:launchpad/db-devel
Diff against target: None lines
To merge this branch: bzr merge lp:~beuno/launchpad/finally-fix-forms
Reviewer Review Type Date Requested Status
Curtis Hovey (community) code Approve
Review via email: mp+9427@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Martin Albisetti (beuno) wrote :

This branch changes form layouts so the labels are always on top of the fields and everything is left-aligned.

To see it in action, go to any page with a form, like say: https://launchpad.dev/firefox/+edit

Revision history for this message
Curtis Hovey (sinzui) wrote :

Hi Martin.

Thanks for address the radio button positioning that we discussed in IRC. I think you have solved the general issue of positioning control labels.

I think there is a discrepancy between the presentation of the labels and the presentation of similar layouts in UI 3.0. I see that the term/label is always bold in the project and user designs, with the subordinate information in normal. I expect the labels in the forms to be bold for the same reason. This can be done via CSS, or by switching back to a <th>.

If you do not want the labels bold, can you explain why they are different from when the information is show in the page?

review: Needs Fixing
Revision history for this message
Curtis Hovey (sinzui) wrote :

Thanks for taking my bold suggestion under consideration

review: Approve (code)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'lib/canonical/launchpad/icing/style.css'
--- lib/canonical/launchpad/icing/style.css 2009-07-16 04:17:24 +0000
+++ lib/canonical/launchpad/icing/style.css 2009-07-28 22:44:12 +0000
@@ -407,9 +407,9 @@
407 margin-right: 0.5em;407 margin-right: 0.5em;
408}408}
409button{padding:0;}409button{padding:0;}
410input.urlTextType {width: 100%;}410input.urlTextType {width: 40em;}
411.fieldRequired, .fieldOptional {color: #999;}411.fieldRequired, .fieldOptional {color: #999;}
412.formHelp {margin-top: 0.2em; margin-bottom: 0.5em; color: #777;}412.formHelp {margin: 0.2em 0 0.5em 0.2em; color: #777;}
413/* Hack to add breathing room to bug status forms: */413/* Hack to add breathing room to bug status forms: */
414table.listing div.field>table {margin-top: 0.5em;}414table.listing div.field>table {margin-top: 0.5em;}
415table.listing div.field>label, table.listing div.field>div>label,415table.listing div.field>label, table.listing div.field>div>label,
416416
=== modified file 'lib/canonical/launchpad/pagetests/standalone/xx-form-layout.txt'
--- lib/canonical/launchpad/pagetests/standalone/xx-form-layout.txt 2009-06-12 16:36:02 +0000
+++ lib/canonical/launchpad/pagetests/standalone/xx-form-layout.txt 2009-07-29 14:18:29 +0000
@@ -21,10 +21,8 @@
21 >>> print content21 >>> print content
22 <...22 <...
23 <tr>23 <tr>
24 <th>24 <td colspan="2">
25 <label for="field.name">Name:</label><br />25 <label for="field.name">Name:</label>
26 </th>
27 <td>
28 <div>26 <div>
29 <input ... name="field.name" ... />27 <input ... name="field.name" ... />
30 </div>28 </div>
@@ -38,11 +36,9 @@
38 >>> print content36 >>> print content
39 <...37 <...
40 <tr>38 <tr>
41 <th>39 <td colspan="2">
42 <label for="field.contactemail">Contact Email Address:</label><br />40 <label for="field.contactemail">Contact Email Address:</label>
43 <span class="fieldRequired">(Optional)</span>41 <span class="fieldRequired">(Optional)</span>
44 </th>
45 <td>
46 <div>42 <div>
47 <input ... id="field.contactemail" ... />43 <input ... id="field.contactemail" ... />
48 </div>44 </div>
@@ -99,8 +95,7 @@
99 >>> print content95 >>> print content
100 <...96 <...
101 <tr>97 <tr>
102 <th></th>98 <td colspan="2">
103 <td width="100%">
104 ...99 ...
105 <input ... name="field.official_rosetta" type="checkbox" ... />100 <input ... name="field.official_rosetta" type="checkbox" ... />
106 <label for="field.official_rosetta">Translations...</label>101 <label for="field.official_rosetta">Translations...</label>
107102
=== modified file 'lib/canonical/launchpad/templates/launchpad-form.pt'
--- lib/canonical/launchpad/templates/launchpad-form.pt 2009-07-17 17:59:07 +0000
+++ lib/canonical/launchpad/templates/launchpad-form.pt 2009-07-28 19:12:57 +0000
@@ -45,7 +45,7 @@
45 metal:define-slot="extra_top" 45 metal:define-slot="extra_top"
46 tal:replace="nothing">46 tal:replace="nothing">
47 <div>Extra top</div>47 <div>Extra top</div>
48 <div><input type="text" style="width:100%" /></div>48 <div><input type="text"/></div>
49 </div>49 </div>
5050
51 <metal:widgets metal:define-slot="widgets">51 <metal:widgets metal:define-slot="widgets">
@@ -61,7 +61,7 @@
61 metal:define-slot="extra_bottom" 61 metal:define-slot="extra_bottom"
62 tal:replace="nothing">62 tal:replace="nothing">
63 <div>Extra bottom</div>63 <div>Extra bottom</div>
64 <div class="field"><input type="text" style="width:100%" /></div>64 <div class="field"><input type="text" /></div>
65 </div>65 </div>
6666
67 </div>67 </div>
@@ -99,13 +99,13 @@
99 tal:condition="python: view.isSingleLineLayout(field_name)"99 tal:condition="python: view.isSingleLineLayout(field_name)"
100 tal:attributes="class error_class"100 tal:attributes="class error_class"
101 >101 >
102 <th tal:condition="display_label|widget/display_label|python:True">102 <td colspan="2">
103 <tal:block tal:condition="display_label|widget/display_label|python:True">
103 <label tal:attributes="for widget/name"104 <label tal:attributes="for widget/name"
104 tal:content="string:${widget/label}:">Label</label><br />105 tal:content="string:${widget/label}:">Label</label>
105 <span tal:condition="show_optional"106 <span tal:condition="show_optional"
106 class="fieldRequired">(Optional)</span>107 class="fieldRequired">(Optional)</span>
107 </th>108 </tal:block>
108 <td>
109 <div>109 <div>
110 <input tal:replace="structure widget" />110 <input tal:replace="structure widget" />
111 </div>111 </div>
@@ -129,7 +129,6 @@
129 tal:content="string:${widget/label}:">Label:</label>129 tal:content="string:${widget/label}:">Label:</label>
130 <span tal:condition="show_optional"130 <span tal:condition="show_optional"
131 class="fieldRequired">(Optional)</span>131 class="fieldRequired">(Optional)</span>
132
133 </tal:showlabel>132 </tal:showlabel>
134 <div133 <div
135 tal:condition="error"134 tal:condition="error"
@@ -137,7 +136,7 @@
137 class="message"136 class="message"
138 >Error message</div>137 >Error message</div>
139 <div tal:content="structure widget">138 <div tal:content="structure widget">
140 <input type="text" style="width: 100%" />139 <input type="text" />
141 </div>140 </div>
142 <p class="formHelp"141 <p class="formHelp"
143 tal:condition="widget/hint"142 tal:condition="widget/hint"
@@ -147,8 +146,7 @@
147 </tr>146 </tr>
148 </tal:block>147 </tal:block>
149 <tr tal:condition="python: view.isCheckBoxLayout(field_name)">148 <tr tal:condition="python: view.isCheckBoxLayout(field_name)">
150 <th></th>149 <td tal:attributes="class error_class" colspan="2">
151 <td tal:attributes="class error_class" width="100%">
152 <input type="checkbox" tal:replace="structure widget" />150 <input type="checkbox" tal:replace="structure widget" />
153 <label tal:attributes="for widget/name"151 <label tal:attributes="for widget/name"
154 tal:content="widget/label">Label</label>152 tal:content="widget/label">Label</label>
155153
=== modified file 'lib/canonical/widgets/templates/date.pt'
--- lib/canonical/widgets/templates/date.pt 2009-07-17 17:59:07 +0000
+++ lib/canonical/widgets/templates/date.pt 2009-07-28 22:44:12 +0000
@@ -5,7 +5,7 @@
5 omit-tag="">5 omit-tag="">
6<input size="10" type="text" class="yui2-calendar"6<input size="10" type="text" class="yui2-calendar"
7 tal:attributes="name view/name; id view/name;7 tal:attributes="name view/name; id view/name;
8 value view/formvalue;8 value view/formvalue;
9 disabled view/disabled_flag" />9 disabled view/disabled_flag" />
10<tal:daterange condition="view/daterange">10<tal:daterange condition="view/daterange">
11 <span style="display:none;"11 <span style="display:none;"
1212
=== modified file 'lib/canonical/widgets/templates/datetime.pt'
--- lib/canonical/widgets/templates/datetime.pt 2009-07-17 17:59:07 +0000
+++ lib/canonical/widgets/templates/datetime.pt 2009-07-28 22:44:12 +0000
@@ -5,7 +5,7 @@
5 omit-tag="">5 omit-tag="">
6<input size="19" type="text" class="yui2-calendar withtime"6<input size="19" type="text" class="yui2-calendar withtime"
7 tal:attributes="name view/name; id view/name;7 tal:attributes="name view/name; id view/name;
8 value view/formvalue;8 value view/formvalue;
9 disabled view/disabled_flag" />9 disabled view/disabled_flag" />
10<tal:display_zone condition="view/display_zone">10<tal:display_zone condition="view/display_zone">
11 <span> in time zone: <tal:tz replace="view/time_zone_name" />11 <span> in time zone: <tal:tz replace="view/time_zone_name" />
1212
=== modified file 'lib/canonical/widgets/templates/passwordchange.pt'
--- lib/canonical/widgets/templates/passwordchange.pt 2009-07-17 17:59:07 +0000
+++ lib/canonical/widgets/templates/passwordchange.pt 2009-07-28 22:44:12 +0000
@@ -2,13 +2,11 @@
2 Note that we don't use view/_getFormValue to fill in the value2 Note that we don't use view/_getFormValue to fill in the value
3 for security reasons3 for security reasons
4</tal:comment>4</tal:comment>
5<table>5<table style="margin-top:1em;">
6 <tr>6 <tr>
7 <th>7 <td colspan="2">
8 <label tal:content="string: ${view/label}:"8 <label tal:content="string: ${view/label}:"
9 tal:attributes="for view/name;">Password:</label>9 tal:attributes="for view/name;">Password:</label><br />
10 </th>
11 <td>
12 <input type="password" value="" tal:attributes="10 <input type="password" value="" tal:attributes="
13 name view/name;11 name view/name;
14 id view/name;12 id view/name;
@@ -20,12 +18,10 @@
20 </td>18 </td>
21 </tr>19 </tr>
22 <tr>20 <tr>
23 <th>21 <td colspan="2">
24 <label tal:attributes="for string:${view/name}_dupe;">22 <label tal:attributes="for string:${view/name}_dupe;">
25 Retype the password:23 Retype the password:
26 </label>24 </label><br />
27 </th>
28 <td>
29 <input type="password" value="" tal:attributes="25 <input type="password" value="" tal:attributes="
30 name string:${view/name}_dupe;26 name string:${view/name}_dupe;
31 id string:${view/name}_dupe;27 id string:${view/name}_dupe;

Subscribers

People subscribed via source and target branches

to status/vote changes: