[LNT] update summary report edit to use bootstrap

[Chris Matthews]

A few updates to the summary report UI.  Make it use bootstrap to do layout. Change some text that was clickable into buttons.
diff --git a/lnt/server/ui/static/v4_summary_report_ui.js b/lnt/server/ui/static/v4_summary_report_ui.js
index 0015a4d0ff97df0ab6d3b50d51f05a736e4ccdb8..514bd933c6e4860b327aec571a0179d11b31ff66 100644
--- a/lnt/server/ui/static/v4_summary_report_ui.js
+++ b/lnt/server/ui/static/v4_summary_report_ui.js
@@ -25,7 +25,7 @@ function init() {
   for (var i = 0; i != g.config.orders.length; ++i) {
     var order = g.config.orders[i];
     var name = order[0];
-    var item = $('<li class="list-item"></li>');
+    var item = $('<button class="btn" style="width:90%;" ></button>');
     g.list_items.push(item);
 
     // Add the item contents.
@@ -44,7 +44,7 @@ function init() {
   // Initialize the machines list.
   var machines = $('#report-machines');
   machines.empty();
-  var machine_select = $('<select multiple="multiple" size="10"></select>');
+  var machine_select = $('<select multiple="multiple"  style="width:300px;" size=20></select>');
   for (var j = 0; j != g.all_machines.length; ++j) {
     var selected_str = '';
     if ($.inArray(g.all_machines[j], g.config.machine_names) != -1)
@@ -101,7 +101,7 @@ function update_machine_items(select_elt) {
     if (option.selected)
       g.config.machine_names.push(g.all_machines[option.value]);
   }
-}
+} s
 
 // Select a report order entry to edit.
 function select_order(index) {
@@ -116,7 +116,7 @@ function select_order(index) {
   name_elt.change(function() { update_selected_order_name(name_elt[0]); });
 
   elt.append('<br>');
-  var order_select = $('<select multiple="multiple" size="10"></select>');
+  var order_select = $('<select multiple="multiple"  style="width:300px;" size=20></select>');
   for (var i = 0; i != g.all_orders.length; ++i) {
     var selected_str = '';
     if ($.inArray(g.all_orders[i], g.selected_order[1]) != -1)
diff --git a/lnt/server/ui/templates/v4_summary_report_ui.html b/lnt/server/ui/templates/v4_summary_report_ui.html
index b1ec24914cee0e8c5e73f9a9235c45048e8e9f09..797db9de924b024fd6aa699af9d30607e48b403b 100644
--- a/lnt/server/ui/templates/v4_summary_report_ui.html
+++ b/lnt/server/ui/templates/v4_summary_report_ui.html
@@ -8,60 +8,58 @@
                            filename='jquery/1.5/jquery.min.js') }}"></script>
   <script src="{{ url_for('.static',filename='v4_summary_report_ui.js')}}"></script>
 
-<style>
-.ui-box {
-    border  :  1px dashed #000;
-    padding :  3px;
-    margin  : 20px;
-}
 
-.list {
-    list-style-type : none;
-    margin: 0;
-    padding : 0;
-}
+<script>
+  g.config = {{ config|tojson(indent=2)|safe }};
+  g.all_orders = {{ all_orders|tojson(indent=2)|safe }};
+  g.all_machines = {{ all_machines|tojson(indent=2)|safe }};
+  g.save_url = {{ db_url_for("v4_summary_report_ui")|tojson|safe }};
+</script>
 
-.list-item {
-    border  : 1px solid #672;
-    padding : 1px;
-    margin  : 2px;
+<style>
+/* Base class */
+.smbox {
+  position: relative;
+  height: 550px;
+  margin: 15px 0;
+  padding: 39px 19px 14px;
+  *padding-top: 19px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  
 }
 </style>
 
-<script>
-g.config = {{ config|tojson(indent=2)|safe }};
-g.all_orders = {{ all_orders|tojson(indent=2)|safe }};
-g.all_machines = {{ all_machines|tojson(indent=2)|safe }};
-g.save_url = {{ db_url_for("v4_summary_report_ui")|tojson|safe }};
-</script>
 {% endblock %}
 {% block title %}Summary Report Editor{% endblock %}
 {% block body %}
 
-<div>
-<div style="width : 250px; float : left;">
-  <h2><center>Report Orders</center></h2>
-  <div class="ui-box" style="width : 200px; height : 200px">
-    <ul class="list" id="report-order-list">
-    </ul>
-
-    <br>
-    <input type="button" value="Add" onclick="add_order();">
+<div class="span2 smbox">
+  <h3><center>Report Orders</center></h3>
+  <div class="btn-group btn-group-vertical" style="width:100%"  id="report-order-list">
   </div>
+  <br>
+  <br>
+  <input type="button" value="Add" onclick="add_order();">
 </div>
-<div style="width : 250px; float : left;">
-  <h2><center>Order Items</center></h2>
-  <div class="ui-box" style="width : 200px; height : 200px;" id="report-order-items">
+
+<div  class="span4 smbox">
+  <h3><center>Order Items</center></h3>
+  <div class="ui-box"  id="report-order-items">
   </div>
 </div>
-<div style="width : 280px; float : left;">
-  <h2><center>Machines</center></h2>
-  <div class="ui-box" style="width : 230px; height : 200px" id="report-machines">
+
+<div class="span4 smbox">
+  <h3><center>Machines</center></h3>
+  <div class="ui-box"  id="report-machines">
   </div>
 </div>
-<br style="clear: left;" />
-</div>
-
-<input type="button" value="Save" onclick="save_config();">
 
+<div class="span9 form-actions" >
+  <button type="submit" class="btn btn-primary" onclick="save_config();">Save changes</button>
+  <button type="button" class="btn" onClick="document.location.reload(true)">Cancel</button>
+</div>
 {% endblock %}


Chris Matthews
chris.matthews at apple.com

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.llvm.org/pipermail/llvm-commits/attachments/20131018/be33ac4a/attachment.html>