Redesign bug edit form.

* Use "label \n field" instead of "label \t field". * Use divs instead of tables for layout. * Make page scale from 4 columns down to 2 and then to 1 using media queries. * Reflow 4 custom field columns with JS to balance their height.
2014-09-19 20:16:11 +04:00 · 2014-09-19 20:16:11 +04:00 · 275de4e4f5
parent 9a7e557879
commit 275de4e4f5
9 changed files with 616 additions and 605 deletions
--- a/js/bug-visibility.js
+++ b/js/bug-visibility.js
@ -25,6 +25,7 @@ function initControlledFields()
    {
        doInit(i);
    }
+    reflowFieldColumns();
 }

 function initControlledField(i)
@ -69,6 +70,10 @@ function handleControllerField_this(e, nonfirst)
    {
        handleControllerField_this.apply(document.getElementById(i), [ null, true ]);
    }
+    if (!nonfirst)
+    {
+        reflowFieldColumns();
+    }
 }

 function setFieldValue(f, v)
@ -228,3 +233,43 @@ function handleControlledField(controlled_id, is_initial_editform)
        }
    }
 }
+
+// FIXME: Remove partially duplicated code with query-visibility.js:reflowFieldRows()
+function reflowFieldColumns()
+{
+    var cols = [];
+    var fields = [];
+    var visible = 0;
+    for (var i = 1, e; e = document.getElementById('bz_custom_column_'+i); i++)
+    {
+        cols.push(e);
+        for (var j = 0; j < e.childNodes.length; j++)
+        {
+            if (hasClass(e.childNodes[j], 'bug_field'))
+            {
+                var v = hasClass(e.childNodes[j], 'bz_hidden_field') ? 0 : 1;
+                fields.push([ e.childNodes[j], v ]);
+                visible += v;
+            }
+        }
+    }
+    var changed = false;
+    for (var cur_col = 0, j = 0, pushed = 0; cur_col < 4; cur_col++)
+    {
+        var per_col = Math.ceil((visible-pushed)/(4-cur_col));
+        var v = 0;
+        for (; j < fields.length; v += fields[j][1], j++)
+        {
+            if ((v + Math.ceil(fields[j][1]/2)) > per_col)
+            {
+                break;
+            }
+            if (changed || fields[j][0].parentNode != cols[cur_col])
+            {
+                cols[cur_col].appendChild(fields[j][0]);
+                changed = true;
+            }
+        }
+        pushed += v;
+    }
+}
--- a/js/util.js
+++ b/js/util.js
@ -288,6 +288,12 @@ window.eventTarget = function(ev)
 */
 window.addClass = function(obj, c)
 {
+    if (obj instanceof Array)
+    {
+        for (var i = 0; i < obj.length; i++)
+            addClass(obj[i], c);
+        return;
+    }
    if (typeof(obj) == 'string')
        obj = document.getElementById(obj);
    if (obj)
@ -295,6 +301,12 @@ window.addClass = function(obj, c)
 };
 window.removeClass = function(obj, c)
 {
+    if (obj instanceof Array)
+    {
+        for (var i = 0; i < obj.length; i++)
+            removeClass(obj[i], c);
+        return;
+    }
    if (typeof(obj) == 'string')
        obj = document.getElementById(obj);
    if (!obj)
--- a/skins/contrib/Mozilla/global.css
+++ b/skins/contrib/Mozilla/global.css
@ -79,6 +79,7 @@ body {
    color: #404040;
    margin: 0;
    font-size: 16px; /* Base font size. NEVER hardcode absolute sizes anywhere except this place. */
+    -moz-text-size-adjust: none; /* Fix inconsistent font sizes in mobile Firefox */
 }

 body, td, th, input, select, option, optgroup, .text_input {
@ -479,7 +480,7 @@ u {
    font-weight: normal;
 }

-table.edit_form {
+.edit_form {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
@ -487,38 +488,24 @@ table.edit_form {
    position: relative;
 }

-table.edit_form tbody {
-    width: 100%;
-}
-
-table.edit_form hr {
-    display: none;
+.edit_form hr {
+    border-width: 0;
+    background: transparent;
+    margin: 0;
 }

 .field_label {
-    font-weight: bold !important;
+    color: #404040;
    padding-right: 10px;
-    vertical-align: baseline;
    white-space: nowrap;
 }

-.field_label a, .field_label b {
+.field_label label a {
    color: #404040;
-    font-weight: bold;
 }

-.field_value .text_input {
-    min-width: 0;
-}
-
-#product, #component {
-    width: 235px;
-}
-
-#bz_show_bug_column_1 tr:last-child span {
-    position: absolute;
-    left: 20px;
-    bottom: 20px;
+.bug_field {
+    margin-bottom: 4px;
 }

 #commit_top {
@ -966,11 +953,21 @@ table.eventbox {
    padding-bottom: 6px;
 }

+@media only screen and (max-width: 1365px) {
+    .bz_show_bug_column {
+        float: none;
+        width: 100%;
+    }
+}
+
 /* Smaller than standard 990 (devices and browsers) */
@media only screen and (max-width: 989px) {
    #header .links {
        float: none;
    }
+    .flatten_table, .flatten_table > tbody, .flatten_table > tbody > tr, .flatten_table > tbody > tr > td {
+        display: block;
+    }
 }

 /* Tablet Portrait size to standard 990 */
@ -996,12 +993,9 @@ table.eventbox {

 /* All Mobile Sizes */
@media only screen and (max-width: 767px) {
-    table.edit_form, table.edit_form > tbody > tr > td {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        display: block;
-        width: 100% !important;
+    .bz_show_bug_colpair {
+        float: none;
+        width: 100%;
    }

    #titles {
@ -1020,8 +1014,11 @@ table.eventbox {
    }

    .bz_column_spacer {
-        width: auto;
-        height: 20px;
+        display: none;
+    }
+
+    .bz_group_visibility_section {
+        margin: 0;
    }

    #summary_alias_container span {
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@ -29,6 +29,9 @@
        color: #000;
        background: #fff url("global/body-back.gif") repeat-x;
    }
+    table {
+        border-collapse: collapse;
+    }
    body, td, th, input, select {
        font-family: Verdana, sans-serif;
        font-size: small;
@ -118,6 +121,7 @@

 /* titles (begin) */
    #titles {
+        border-collapse: separate;
        width: 100%;
        background-color: #404D6C;
        color: #fff;
@ -468,8 +472,25 @@ div.user_match {
 .field_label {
    text-align: left;
    vertical-align: top;
+}
+.bug_field {
+    margin-bottom: 8px;
+}
+.bug_field label {
    font-weight: bold;
 }
+.bug_field select, .bug_field textarea {
+    width: 98%;
+}
+.bug_field table select {
+    width: 100%;
+}
+.bug_field input[type=text], .bug_field input:not([type]) {
+    width: 98%;
+}
+.bug_field table input[type=text], .bug_field table input:not([type]) {
+    width: 100%;
+}

 form#Create th, form#Create td {
    vertical-align: top;
@ -559,8 +580,6 @@ table.alcontent { width: 100%; }

 #useful-links { margin-left: 0; }

-#field_container_see_also #see_also { max-width: 500px; }
-
 #visibility_values_td select { margin-bottom: 2px; }

 .importxls_link { margin-left: 20px; }
--- a/skins/standard/show_bug.css
+++ b/skins/standard/show_bug.css
@ -7,16 +7,26 @@
    font-weight: bold;
 }

-.bz_bug .edit_form {
-    width: 100%;
+.bz_show_bug_colpair {
+    width: 50%;
+    float: left;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
-.bz_bug .edit_form table {
-    width: 100%;
+
+.bz_show_bug_column {
+    width: 50%;
+    float: left;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
-.bz_bug .edit_form .text_input {
-    width: 100%;
-    min-width: 25em;
+
+.edit_form hr {
+    clear: both;
 }
+
 .bz_bug #alias {
    min-width: 0;
    width: 10em;
@ -50,10 +60,6 @@ table#flags {
    display: inline;
 }

-.bz_show_bug_column {
-    vertical-align: top;
-}
-
 .bz_section_spacer {
    height: 1em;
 }
@ -66,16 +72,13 @@ table#flags {
    vertical-align: top;
 }

-.bz_group_visibility_section {
-    margin-left: 1em;
-}
-
 .bz_group_visibility_section .instructions {
    font-style: italic;
+    margin: 8px 0;
 }

 #bz_restrict_group_visibility_help .instructions {
-    margin-top: 0;
+    margin: 0 0 8px 0;
 }

 #bz_enable_role_visibility_help { margin-bottom: 0.5em; }
--- a/template/en/default/bug/edit.html.tmpl
+++ b/template/en/default/bug/edit.html.tmpl
--- a/template/en/default/bug/field.html.tmpl
+++ b/template/en/default/bug/field.html.tmpl
@ -34,6 +34,8 @@
  #     A colspan for the table cell containing the field value.
  #   no_tds: boolean;
  #     If true, don't display the label <th> or the wrapping <td> for the field.
+  #   use_divs: boolean;
+  #     If true, display the wrapping label and the wrapping <div> for the field.
  #   custom_label: string;
  #     Label for this field. Default label is takes from the field description.
  #   desc_url: string;
@ -49,11 +51,20 @@

 [% IF editable || bug && bug.get_string(field.name) != '' %]

+[% SET show_search_link = !no_search_link &&
+  bug.id && field.type != constants.FIELD_TYPE_BUG_ID_REV &&
+  field.type != constants.FIELD_TYPE_MULTI_SELECT &&
+  field.type != constants.FIELD_TYPE_TEXTAREA &&
+  field.type != constants.FIELD_TYPE_BUG_URLS %]
+
 [% IF NOT no_tds %]
  <th class="field_label" id="field_label_[% field.name | html %]">
-    [% IF editable %]
-      <label for="[% field.name | html %]">
-    [% END %]
+[% END %]
+[% IF use_divs %]
+  <div class="bug_field" id="field_container_[% field.name | html %]">
+[% END %]
+  [% IF NOT no_tds OR use_divs %]
+    <label [% IF editable %]for="[% field.name | html %]"[% END %]>
    [% IF desc_url %]
      <a href="[% desc_url | html %]">
    [% ELSIF !field.custom %]
@ -61,12 +72,25 @@
    [% END -%]
      [% custom_label || field_descs.${field.name} || field.description | html %]:
    [%- '</a>' IF desc_url || !field.custom %]
-    [% '</label>' IF editable %]
+    </label>
+  [% END %]
+[% IF use_divs %]
+  <br />
+[% END %]
+[% IF NOT no_tds %]
  </th>
  <td class="field_value" id="field_container_[% field.name | html %]"
    [% " colspan=\"$value_span\"" | none IF value_span %]>
 [% END %]
+[% IF NOT editable AND show_search_link %]
+  [% PROCESS search_link %]
+[% END %]
 [% IF editable %]
+
+  [% IF show_search_link %]
+  <table width="98%"><tr><td width="100%">
+  [% END %]
+
  [% SWITCH field.type %]
    [% CASE constants.FIELD_TYPE_FREETEXT %]
      <input id="[% field.name | html %]" class="text_input"
@ -207,7 +231,7 @@
        name = field.name
        minrows = 4
        maxrows = 8
-        cols = 60
+        cols = 30
        defaultcontent = value
        tabindex = tabindex %]
    [% CASE constants.FIELD_TYPE_BUG_URLS %]
@ -225,9 +249,7 @@
      [% '</ul>' IF value.size %]

      [% IF editable && Bugzilla.get_field('see_also').enabled %]
-        <label for="[% field.name | html %]">
-          <strong>Add [% terms.Bug %] URLs:</strong>
-        </label><br>
+        <label for="[% field.name | html %]">Add [% terms.Bug %] URLs:</label><br />
        <input type="text" id="[% field.name | html %]" size="40"
          [% IF tabindex %] tabindex="[% tabindex | html %]"[% END %]
          class="text_input" name="[% field.name | html %]" />
@ -241,27 +263,9 @@
      [% END %]
    [% END %]

-  [%#
-    # Custis Bug 129375 - Add search link for some custom fields
-    #%]
-  [% IF bug.id && field.name != 'priority' && field.name != 'bug_status' &&
-    field.name != 'resolution' && field.type != constants.FIELD_TYPE_BUG_ID_REV &&
-    field.type != constants.FIELD_TYPE_MULTI_SELECT &&
-    field.type != constants.FIELD_TYPE_TEXTAREA &&
-    field.type != constants.FIELD_TYPE_BUG_URLS %]
-  &nbsp;(<a href="buglist.cgi?query_format=advanced&product=[% bug.product | uri %]
-    [%- IF field.name != 'product' %]&
-      [%- IF field.type == constants.FIELD_TYPE_DATETIME -%]
-        type0-1-0=greaterthaneq&field0-1-0=[% field.name %]&field0-0-0=[% field.name %]&value0-1-0=[% bug.${field.name}.substr(0,10) | uri -%]
-        +00%3A00%3A00&type0-0-0=lessthaneq&value0-0-0=[% bug.${field.name}.substr(0,10) | uri %]+23%3A59%3A59
-      [%- ELSIF field.type == constants.FIELD_TYPE_BUG_ID_REV -%]
-        [%- field.name %]=[% bug.${field.name}.join(' ') | uri -%]
-      [%- ELSIF field.type == constants.FIELD_TYPE_SINGLE_SELECT -%]
-        [%- field.name %]=[% bug.get_object(field.name).name | uri -%]
-      [%- ELSE -%]
-        [%- field.name %]=[% bug.${field.name} | uri -%]
-      [%- END -%]
-    [%- END -%]" target="_blank" id="search_link_[% field.name %]" class="search-link">search</a>)
+  [%# CustIS Bug 129375 - Add search link for some fields %]
+  [% IF show_search_link %]
+  </td><td style="padding-left: 5px">[% PROCESS search_link %](search)</a></td></tr></table>
  [% END %]
 [% ELSIF field.type == constants.FIELD_TYPE_TEXTAREA %]
  <div class="uneditable_textarea">[% value | html | wrap_comment %]</div>
@ -276,12 +280,30 @@
    [% f = field.name _ '_obj' %]
    [% bug.$f.name | html %]
  [% END %]
-[% ELSIF field.type == constants.FIELD_TYPE_MULTI_SELECT %]
-  [% f = field.name _ '_obj' %]
-  [% bug.$f.name.join(', ') | html %]
+[% ELSIF field.type == constants.FIELD_TYPE_MULTI_SELECT || field.type == constants.FIELD_TYPE_BUG_ID_REV %]
+  [% bug.get_string(field.name) | html %]
 [% ELSE %]
  [% value.join(', ') | html %]
 [% END %]
-[% '</td>' IF NOT no_tds %]
-
+[% IF NOT editable AND show_search_link %]
+  </a>
+[% END %]
+[% '</td>' IF NOT no_tds %]
+[% '</div>' IF use_divs %]
+[% END %]
+
+[% BLOCK search_link %]
+  <a href="buglist.cgi?query_format=advanced&product=[% bug.product | uri %]
+    [%- IF field.name != 'product' %]&
+      [%- IF field.type == constants.FIELD_TYPE_DATETIME -%]
+        type0-1-0=greaterthaneq&field0-1-0=[% field.name %]&field0-0-0=[% field.name %]&value0-1-0=[% bug.${field.name}.substr(0,10) | uri -%]
+        +00%3A00%3A00&type0-0-0=lessthaneq&value0-0-0=[% bug.${field.name}.substr(0,10) | uri %]+23%3A59%3A59
+      [%- ELSIF field.type == constants.FIELD_TYPE_BUG_ID_REV -%]
+        [%- field.name %]=[% bug.${field.name}.join(' ') | uri -%]
+      [%- ELSIF field.type == constants.FIELD_TYPE_SINGLE_SELECT -%]
+        [%- field.name %]=[% bug.get_object(field.name).name | uri -%]
+      [%- ELSE -%]
+        [%- field.name %]=[% bug.${field.name} | uri -%]
+      [%- END -%]
+    [%- END -%]" target="_blank" id="search_link_[% field.name %]" class="search-link">
 [% END %]
--- a/template/en/default/bug/knob.html.tmpl
+++ b/template/en/default/bug/knob.html.tmpl
@ -24,6 +24,8 @@
 <div id="status">
  [% INCLUDE bug/field.html.tmpl
      no_tds = 1
+      no_search_link = 1
+      use_divs = 0
      field  = bug_fields.bug_status
      value  = bug.bug_status
      override_legal_values = bug.statuses_available
@ -37,6 +39,8 @@
  <span id="resolution_settings">
  [% INCLUDE bug/field.html.tmpl
      no_tds = 1
+      no_search_link = 1
+      use_divs = 0
      field  = bug_fields.resolution
      value  = bug.resolution
      editable = bug.check_can_change_field('resolution', bug.resolution, 1)
--- a/template/en/default/flag/list.html.tmpl
+++ b/template/en/default/flag/list.html.tmpl
@ -53,8 +53,8 @@
    [% FOREACH flag = type.flags %]
      <tr>
        <td>
-          <a href="#[% flag.creation_date | timestamp %]">[% flag.setter.nick | html %]</a>:
-          <label title="[% type.description | html %]" for="flag-[% flag.id %]" style="white-space: nowrap">[%- type.name | html -%]</label>
+          <a href="#[% flag.creation_date | timestamp %]">[% flag.setter.nick | html %]</a>:&nbsp;
+          [%%]<label title="[% type.description | html %]" for="flag-[% flag.id %]" style="white-space: nowrap">[%- type.name | html -%]</label>
        </td>
        <td>
          <select id="flag-[% flag.id %]" name="flag-[% flag.id %]" 
@ -67,12 +67,13 @@
          </select>
        </td>
        [% IF any_flags_requesteeble %]
-          <td>
+          <td width="100%">
            [% IF (type.is_active && type.is_requestable && type.is_requesteeble) || flag.requestee %]
              <span style="white-space: nowrap;">
                [% INCLUDE "global/userselect.html.tmpl"
                    name     => "requestee-$flag.id"
-                    size     => 40
+                    size     => 20
+                    style    => "width: 100%"
                    id       => "requestee-$flag.id"
                    value    => flag.requestee.login
                    emptyok  => 1
@ -84,7 +85,7 @@
        [% END %]
      </tr>
    [% END %]
-    
+
    [%# Step 2: Display UI for setting flag. %]
    [% IF (!type.flags || type.flags.size == 0 || type.is_multiplicable) && type.is_active %]
      [% PROCESS flag_row %]
@ -135,13 +136,14 @@
      </select>
    </td>
    [% IF any_flags_requesteeble %]
-      <td>
+      <td width="100%">
        [% IF type.is_requestable && type.is_requesteeble %]
          <span style="white-space: nowrap;">
            [% INCLUDE "global/userselect.html.tmpl"
                name => "requestee_type-$type.id"
                id => "requestee_type-$type.id"
-                size => 40
+                size => 20
+                style => "width: 100%"
                value => type.default_requestee
                multiple => type.is_multiplicable
                emptyok => !type.is_multiplicable