Improve visual layout of preference list.

share/layout/html.tt

@@ -31,6 +31,9 @@
         <script src="/js/libs/bootstrap/bootstrap.min.js"></script>
         <script src="/js/libs/jquery.dataTables.min.js"></script>
         <script src="/js/libs/datatables-bootstrap-paging.js"></script>
+
+        <script type="text/javascript" src="/js/plugins/msgbox/jquery.msgbox.js"></script>
+        <link rel="stylesheet" type="text/css" href="/js/plugins/msgbox/jquery.msgbox.css" />
     </head>
     [% content %]
 </html>

share/templates/helpers/pref_table.tt

@@ -1,9 +1,10 @@
 <table class="table table-bordered table-striped table-highlight table-hover" id="preferences_table">
     <thead>
         <tr>
+            [% # one for description -%]
+            <th></th>
             <th>Name</th>
             <th>Value</th>
-            <th>Description</th>
             [% # one for actions -%]
             <th class="span3"></th>
         </tr>
@@ -11,7 +12,19 @@
     <tbody>
         [% FOREACH r IN helper.rows %]
             <tr class="sw_action_row">
-                <td>[% r.attribute %]</td>
+                <td>
+                    <a href="#" onclick="$.msgbox(
+                        '[% r.description %]',
+                        {
+                            type:'info', 
+                            buttons:[
+                                {type:'cancel',value:'Close'}
+                            ]
+                        });"><i class="icon-question-sign"></i></a>
+                </td>
+                <td>
+                  [% r.attribute %]
+                </td>
                 <td>
                     [% IF r.data_type == "boolean" %]
                         <input type="checkbox" disabled="disabled"
@@ -33,8 +46,11 @@
                         </select>
                     [% END %]
                 </td>
-                <td>[% r.description %]</td>
-                <td><a href="[% c.uri_for(helper.domain_id,'preferences') %]/edit/[% r.attribute %]">Edit</a></td>
+                <td>
+                    <div class="sw_actions pull-right">
+                        <a style="display:inline;line-height:16px;" class="btn btn-small btn-primary" href="[% c.uri_for(helper.domain_id,'preferences') %]/[% r.id %]/edit"><i class="icon-edit" style="line-height:1em;margin-top:2px"></i> Edit</i></a>
+                    </div>
+                </td>
             </tr>
         [% END %]
     </tbody>