Bug 1381752 - Re-organize the layout

1 files changed, 155 insertions, 165 deletions

diff --git a/template/en/default/bug/new_bug.html.tmpl b/template/en/default/bug/new_bug.html.tmpl
index 814c6b9b9..83ec1e924 100644
--- a/template/en/default/bug/new_bug.html.tmpl
+++ b/template/en/default/bug/new_bug.html.tmpl
@@ -10,185 +10,175 @@
 [% PROCESS bug_modal/common_header.html.tmpl 
     title = title
     jquery = [ "selectize" ]
-    jquery_css = [ "js/jquery/plugins/selectize/selectize.default.css" ]
+    jquery_css = [ "js/jquery/plugins/selectize/selectize.bootstrap3.css" ]
     javascript_urls = ['extensions/BugModal/web/new_bug.js']
     style_urls = ['extensions/BugModal/web/new_bug.css']
 %]
 [% PROCESS global/header.html.tmpl %]
-<p>Coming Soon!</p>
-<p>This is a demonstration of a reusable comment component</p>
 
-<form name="newbugform" id="newbugform" method="post" action="new_bug.cgi">
-
-<input type="hidden" value="[% issue_hash_token(['new_bug']) FILTER html %]" name="token">
-
-[% WRAPPER bug_modal/module.html.tmpl
-    title = ""
-%]
-    <div id="summary-container">
-    [%# summary %]
-    [% INCLUDE bug_modal/field.html.tmpl
-        field = bug_fields.short_desc
-        field_type = constants.FIELD_TYPE_FREETEXT
-        edit_only = 1
-        editable = 1
-        required = 1
-        help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#short_desc"
-    %]
-    
-  </div>
-  <div id="mode-container">
-    <div id="user-guide">
-      <a title="User guide for [% terms.Bugzilla %]" href="#">Get help with this page</a>
-    </div>
-  </div>
-[%END%]
-
-
-[%# === status === %]
-
-[% WRAPPER bug_modal/module.html.tmpl
-    title = "Status"
-%]
-  [% WRAPPER fields_lhs %]
-
-    [%# product %]
-    [% can_edit_product   = bug.check_can_change_field("product", 0, 1) %]
-    [% filtered_product   = bug.product_obj.name FILTER uri %]
-    [% filtered_component = bug.component_obj.name FILTER uri %]
-    [% WRAPPER bug_modal/field.html.tmpl
-        field        = bug_fields.product
-        field_type   = constants.FIELD_TYPE_SINGLE_SELECT
-        edit_only = 1
-        editable = 1
-        help         = "describecomponents.cgi?product=$filtered_product"
-    %]
-      <span aria-owns="product-name product-latch">
-        <span role="button" aria-label="show product information" aria-expanded="false" tabindex="0"
-              class="spin-latch" id="product-latch" data-latch="product" data-for="product">&#9656;</span>
-        <div title="show product information" tabindex="0" class="spin-toggle"
-             id="product-name" data-latch="product" data-for="product">
-          [% bug.product FILTER html %]
+[% IF user.id %]
+  <div style="display: none" id="xhr-error"></div>
+  <form name="newbugform" id="newbugform" method="post" action="new_bug.cgi">
+    <input type="hidden" value="[% issue_hash_token(['new_bug']) FILTER html %]" name="token">
+    <div class="new-bug-container">
+      <div class="new-bug">
+        <div class="new-bug-pad">
         </div>
-        <div id="product-info" style="display:none">
-          [% bug.product_obj.description FILTER html_light %]
+        <div class="new-bug-title">
+          <h2>Create New [% terms.Bug %]</h2>
+          <p>Before reporting a bug, make sure you've read our
+            <a href="https://developer.mozilla.org/en/Bug_writing_guidelines">bug writing guidelines</a> and double checked that your bug hasn't already
+            been reported. Consult our list of <a href="https://bugzilla.mozilla.org/duplicates.cgi">
+            most frequently reported bugs</a> and <a href="https://bugzilla.mozilla.org/query.cgi">
+            search through descriptions</a> of previously reported bugs.
+          </p>
         </div>
-      </span>
-    [% END %]
-    [% WRAPPER bug_modal/field.html.tmpl
-        field          = bug_fields.product
-        field_type     = constants.FIELD_TYPE_SINGLE_SELECT
-        hide_on_view   = 1
-        hide_on_edit   = !can_edit_product
-        append_content = 1
-        help           = "describecomponents.cgi?product=$filtered_product"
-    %]
-      <span id="product-search-container">
-        [% INCLUDE prodcompsearch/form.html.tmpl
-            id            = "pcs"
-            custom_select = 1
-            hidden        = 1
-            throbber      = "product-throbber"
-        %]
-        <button id="product-search" type="button" class="minor">Search</button>
-        <button id="product-search-cancel" type="button" class="minor" style="display:none">X</button>
-        <img id="product-throbber" src="extensions/BugModal/web/throbber.gif"
-          width="16" height="11" style="display:none">
-        <img id="product-search-error" class="tt" src="extensions/BugModal/web/error.png"
-          width="16" height="16" style="display:none">
-      </span>
-    [% END %]
-
-    [%# component %]
-    [% WRAPPER bug_modal/field.html.tmpl
-        field      = bug_fields.component
-        field_type = constants.FIELD_TYPE_SINGLE_SELECT
-        help       = "describecomponents.cgi?product=$filtered_product&component=$filtered_component#$filtered_component"
-        edit_only = 1
-        editable = 1
-    %]
-      <span aria-owns="component-name component-latch">
-        <span role="button" aria-label="show component description" aria-expanded="false" tabindex="0"
-              class="spin-latch" id="component-latch" data-latch="component" data-for="component">&#9656;</span>
-        <div title="show component information" tabindex="0" class="spin-toggle" id="component-name"
-             data-latch="#component-latch" data-for="component">
-            [% bug.component FILTER html %]
+        <div class="new-bug-pad">
         </div>
-        <div id="component-info" style="display:none">
-          <div>[% bug.component_obj.description FILTER html_light %]</div>
-          <a href="buglist.cgi?component=[% bug.component FILTER uri %]&amp;
-                  [%~ %]product=[% bug.product FILTER uri %]&amp;
-                  [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a>
+      </div>
+      <div class="new-bug">
+        <div class="new-bug-pad">
         </div>
-      </span>
-    [% END %]
-  [% END %]
-  [% WRAPPER fields_rhs %]
-  <td colspan="2" id="comp_desc_container">
-    <table>
-        <tr>
-          <td>
-            <fieldset>
-              <legend>Component Description</legend>
-              <div id="comp_desc" class="comment">Select a component to read its description.</div>
-            </fieldset>
-          </td>
-        </tr>
-      </table>
-    </td>
-  [% END %]
+        <div class="new-bug-split-2">
+          [% WRAPPER bug_modal/module.html.tmpl title = "" %]
+          [%# summary %]
+          [% INCLUDE bug_modal/field.html.tmpl
+              field = bug_fields.short_desc
+              field_type = constants.FIELD_TYPE_FREETEXT
+              edit_only = 1
+              editable = 1
+              required = 1
+              help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#short_desc"
+          %]
+
+          [% INCLUDE bug_modal/common_new_comment.html.tmpl disable_cols=1 %]
+          [% END %]
+          [% WRAPPER bug_modal/module.html.tmpl title = "Attach a File" collapsed = 1 %]
+            <p>Coming Soon.</p>
+          [% END %]
+          <button type="submit" id="create-btn" class="create-btn major">Submit</button>
+        </div>
+        <div class="new-bug-split-1">
+          [% WRAPPER bug_modal/module.html.tmpl title = "Status" %]
+            [% can_edit_product   = bug.check_can_change_field("product", 0, 1) %]
+            [% filtered_product   = bug.product_obj.name FILTER uri %]
+            [% filtered_component = bug.component_obj.name FILTER uri %]
+
+            [% WRAPPER bug_modal/field.html.tmpl
+                field        = bug_fields.product
+                field_type   = constants.FIELD_TYPE_SINGLE_SELECT
+                edit_only = 1
+                editable = 1
+                help         = "describecomponents.cgi?product=$filtered_product"
+            %]
+              <span aria-owns="product-name product-latch">
+                <span role="button" aria-label="show product information" aria-expanded="false" tabindex="0"
+                      class="spin-latch" id="product-latch" data-latch="product" data-for="product">&#9656;</span>
+                <div title="show product information" tabindex="0" class="spin-toggle"
+                    id="product-name" data-latch="product" data-for="product">
+                  [% bug.product FILTER html %]
+                </div>
+                <div id="product-info" style="display:none">
+                  [% bug.product_obj.description FILTER html_light %]
+                </div>
+              </span>
+            [% END %]
+
+            [% WRAPPER bug_modal/field.html.tmpl
+                field          = bug_fields.product
+                field_type     = constants.FIELD_TYPE_SINGLE_SELECT
+                hide_on_view   = 1
+                hide_on_edit   = !can_edit_product
+                append_content = 1
+                help           = "describecomponents.cgi?product=$filtered_product"
+            %]
+              <span id="product-search-container">
+                [% INCLUDE prodcompsearch/form.html.tmpl
+                    id            = "pcs"
+                    custom_select = 1
+                    hidden        = 1
+                    throbber      = "product-throbber"
+                %]
+                <button id="product-search" type="button" class="minor">Search</button>
+                <button id="product-search-cancel" type="button" class="minor" style="display:none">X</button>
+                <img id="product-throbber" src="extensions/BugModal/web/throbber.gif"
+                  width="16" height="11" style="display:none">
+                <img id="product-search-error" class="tt" src="extensions/BugModal/web/error.png"
+                  width="16" height="16" style="display:none">
+              </span>
+            [% END %]
+
+            [%# component %]
+            [% WRAPPER bug_modal/field.html.tmpl
+                field      = bug_fields.component
+                field_type = constants.FIELD_TYPE_SINGLE_SELECT
+                help       = "describecomponents.cgi?product=$filtered_product&component=$filtered_component#$filtered_component"
+                edit_only = 1
+                editable = 1
+            %]
+              <span aria-owns="component-name component-latch">
+                <span role="button" aria-label="show component description" aria-expanded="false" tabindex="0"
+                      class="spin-latch" id="component-latch" data-latch="component" data-for="component">&#9656;</span>
+                <div title="show component information" tabindex="0" class="spin-toggle" id="component-name"
+                    data-latch="#component-latch" data-for="component">
+                    [% bug.component FILTER html %]
+                </div>
+                <div id="component-info" style="display:none">
+                  <div>[% bug.component_obj.description FILTER html_light %]</div>
+                  <a href="buglist.cgi?component=[% bug.component FILTER uri %]&amp;
+                          [%~ %]product=[% bug.product FILTER uri %]&amp;
+                          [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a>
+                </div>
+              </span>
+            [% END %]
+
+            [% INCLUDE bug_modal/field.html.tmpl
+              field = bug_fields.version
+              field_type = constants.FIELD_TYPE_SINGLE_SELECT
+              help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#version"
+              edit_only = 1
+              editable = 1
+            %]
+          [% END %]
+          [% WRAPPER bug_modal/module.html.tmpl title = "Labels" %]
+            [%# keywords %]
+            [% INCLUDE bug_modal/field.html.tmpl
+                field = bug_fields.keywords
+                field_type = constants.FIELD_TYPE_MULTI_SELECT
+                edit_only = 1
+                editable = 1
+                help = "describekeywords.cgi"
+            %]
+
+            [% WRAPPER bug_modal/field.html.tmpl
+                field = bug_fields.status_whiteboard
+                field_type = constants.FIELD_TYPE_FREETEXT
+                help = "https://wiki.mozilla.org/BMO/UserGuide/Whiteboard"
+                edit_only = 1
+                editable = 1
+            %]
+              [% bug.status_whiteboard == "" ? "---" : bug.status_whiteboard FILTER html %]
+            [% END %]
+          [% END %]
+        </div>
+        <div class="new-bug-pad">
+        </div>
+      </div>
+    </div>
+  </form>
+[% ELSE %]
+  <div id="new-comment-notice">
+    You need to <a href="new-bug&amp;GoAheadAndLogIn=1">log in</a>
+    before you can file a [% terms.bug %].
+  </div>
 [% END %]
 
-[%# === tracking === %]
-
-[% WRAPPER bug_modal/module.html.tmpl
-  title = "Tracking"
-  subtitle = sub
-  collapsed = col
-%]
-  [% WRAPPER fields_lhs %]
-
-    [%# version %]
-    [% INCLUDE bug_modal/field.html.tmpl
-        field = bug_fields.version
-        field_type = constants.FIELD_TYPE_SINGLE_SELECT
-        help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#version"
-        edit_only = 1
-        editable = 1
-    %]
-    [%# keywords %]
-    [% INCLUDE bug_modal/field.html.tmpl
-        field = bug_fields.keywords
-        field_type = constants.FIELD_TYPE_MULTI_SELECT
-        edit_only = 1
-        editable = 1
-        help = "describekeywords.cgi"
-    %]
- [% END %]
-[% END %]
+[% PROCESS global/footer.html.tmpl %]
 
 [% BLOCK fields_lhs %]
-  <div class="fields-lhs">[% content FILTER none %]</div>
+    <div class="fields-lhs">[% content FILTER none %]</div>
 [% END %]
 
 [% BLOCK fields_rhs %]
-  <div class="fields-rhs">[% content FILTER none %]</div>
+    <div class="fields-rhs">[% content FILTER none %]</div>
 [% END %]
-
-[%
-    IF user.id;
-      INCLUDE bug_modal/common_new_comment.html.tmpl;
-    ELSE;
-      %]
-        <div id="new-comment-notice">
-          You need to <a href="new-bug&amp;GoAheadAndLogIn=1">log in</a>
-          before you can file a [% terms.bug %].
-        </div>
-      [%
-    END;
-  %]
-
-<div style="display: none" id="xhr-error"></div>
-<button type="submit" id="create-btn" class="create-btn major">Create New [% terms.Bug %]</button>
-</form>
-[% PROCESS global/footer.html.tmpl %]
\ No newline at end of file