UI improvements to facetting, star and flags

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1617 7d457c2a-affb-35e4-300a-418c747d4874

main/webapp/modules/core/about.html

@@ -181,11 +181,9 @@ licenses/json.LICENSE.txt
 licenses/mockito.LICENSE.txt
     mockito
 
-Others
-------
 
-Flag icon
+Flag icon based on an icon from Silk Icons:
-    http://pixel-mixer.com/category/free-icons/
+    http://www.famfamfam.com/lab/icons/silk/
 </pre>
         
       <h2>Credits</h2>

main/webapp/modules/core/scripts/facets/list-facet.js

@@ -158,14 +158,12 @@ ListFacet.prototype._initializeUI = function() {
             '</tr></table></div>' +
         '</div>' +
         '<div class="facet-expression" bind="expressionDiv" title="Click to edit expression"></div>' +
-        '<div class="facet-controls" bind="controlsDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
+        '<div class="facet-controls" bind="controlsDiv" style="display:none;">' +
-            '<table><tr>' +
+          '<a bind="choiceCountContainer" class="action" href="javascript:{}"></a> <span class="facet-controls-sortControls" bind="sortGroup">Sort by: ' +
-                '<td><a bind="choiceCountContainer" class="action" href="javascript:{}"></a> <span class="facet-controls-sortControls" bind="sortGroup">sorted by ' +
+            '<a href="javascript:{}" bind="sortByNameLink">name</a>' +
-                    '<a href="javascript:{}" bind="sortByNameLink">name</a>' +
+            '<a href="javascript:{}" bind="sortByCountLink">count</a>' +
-                    '<a href="javascript:{}" bind="sortByCountLink">count</a>' +
+          '</span>' +
-                '</span></td>' +
+          '<button bind="clusterLink" class="facet-controls-button button">Cluster</button>' +
-                '<td width="1%" nowrap=""><button bind="clusterLink">cluster</button></td>' +
-            '</tr></table>' +
         '</div></div>' +
         '<div class="facet-body" bind="bodyDiv">' +
             '<div class="facet-body-inner" bind="bodyInnerDiv"></div>' +
@@ -202,7 +200,7 @@ ListFacet.prototype._initializeUI = function() {
         }
     });
         
-    this._elmts.clusterLink.click(function() { self._doEdit(); }).button();
+    this._elmts.clusterLink.click(function() { self._doEdit(); });
     if (this._config.expression != "value" && this._config.expression != "grel:value") {
         this._elmts.clusterLink.hide();
     }
@@ -224,7 +222,7 @@ ListFacet.prototype._copyChoices = function() {
     var frame = DialogSystem.createDialog();
     frame.width("600px");
     
-    var header = $('<div></div>').addClass("dialog-header").text("Facet Choices exported as TSV").appendTo(frame);
+    var header = $('<div></div>').addClass("dialog-header").text("Facet Choices as Tab Separated Values").appendTo(frame);
     var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
     var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
     
@@ -313,11 +311,11 @@ ListFacet.prototype._update = function(resetScroll) {
     }
     
     if (this._options.sort == "name") {
-        this._elmts.sortByNameLink.removeClass("action").addClass("inaction");
+        this._elmts.sortByNameLink.removeClass("action").addClass("selected");
-        this._elmts.sortByCountLink.removeClass("inaction").addClass("action");
+        this._elmts.sortByCountLink.removeClass("selected").addClass("action");
     } else {
-        this._elmts.sortByNameLink.removeClass("inaction").addClass("action");
+        this._elmts.sortByNameLink.removeClass("selected").addClass("action");
-        this._elmts.sortByCountLink.removeClass("action").addClass("inaction");
+        this._elmts.sortByCountLink.removeClass("action").addClass("selected");
     }
     
     var html = [];
@@ -444,9 +442,10 @@ ListFacet.prototype._renderBodyControls = function() {
         .appendTo(this._elmts.bodyInnerDiv);
         
     $('<a>')
-        .text("facet by choice counts")
+        .text("Facet by choice counts")
         .attr("href", "javascript:{}")
         .addClass("action")
+        .addClass("secondary")
         .appendTo(bodyControls)
         .click(function() {
             ui.browsingEngine.addFacet(
@@ -482,25 +481,17 @@ ListFacet.prototype._editChoice = function(choice, choiceDiv) {
     
     var menu = MenuSystem.createMenu().addClass("data-table-cell-editor").width("400px");
     menu.html(
-        '<table class="data-table-cell-editor-layout">' +
+              '<textarea class="data-table-cell-editor-editor" bind="textarea" />' +
-            '<tr>' +
+              '<div id="data-table-cell-editor-actions">' +
-                '<td colspan="3">' +
+                '<div class="data-table-cell-editor-action">' +
-                    '<textarea class="data-table-cell-editor-editor" bind="textarea" />' +
+                  '<button class="button" bind="okButton">Apply</button>' +
-                '</td>' +
+                  '<div class="data-table-cell-editor-key">Enter</div>' +
-            '</tr>' +
+                '</div>' +
-            '<tr>' +
+                '<div class="data-table-cell-editor-action">' +
-                '<td width="1%" align="center">' +
+                  '<button class="button" bind="cancelButton">Cancel</button>' +
-                    '<button class="button" bind="okButton">Apply</button><br/>' +
+                    '<div class="data-table-cell-editor-key">Esc</div>' +
-                    '<span class="data-table-cell-editor-key">Enter</span>' +
+                '</div>' +
-                '</td>' +
+              '</div>'
-                '<td width="1%" align="center">' +
-                    '<button class="button" bind="cancelButton">Cancel</button><br/>' +
-                    '<span class="data-table-cell-editor-key">Esc</span>' +
-                '</td>' +
-                '<td>' +
-                '</td>' +
-            '</tr>' +
-        '</table>'
     );
     var elmts = DOM.bind(menu);
     

main/webapp/modules/core/scripts/facets/range-facet.js

@@ -172,7 +172,7 @@ RangeFacet.prototype._initializeUI = function() {
         self._remove();
     });
         
-    this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
+    this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#bbccff", "#88aaee" ] });
     this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
     
     this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {

main/webapp/modules/core/scripts/index.js

@@ -137,8 +137,8 @@ function renderProjects(data) {
             '<table class="list-table"><tr>' +
                 '<th>Name</th>' +
                 '<th></th>' +
-                '<th align="right">Last&nbsp;Modified</th>' +
                 '<th></th>' +
+                '<th align="right">Last&nbsp;modified</th>' +
             '</tr></table>'
         ).appendTo(container)[0];
 
@@ -183,38 +183,42 @@ function renderProjects(data) {
                     });
                 }).appendTo(tr.insertCell(tr.cells.length));
 
+            var deleteLink = $('<a></a>')
+                .addClass("delete-project")
+                .attr("title","Delete this project")
+                .attr("href","")
+                .css("visibility", "hidden")                
+                .html("<img src='/images/close.png' />")
+                .click(function() {
+                    if (window.confirm("Are you sure you want to delete project \"" + project.name + "\"?")) {
+                        $.ajax({
+                            type: "POST",
+                            url: "/command/core/delete-project",
+                            data: { "project" : project.id },
+                            dataType: "json",
+                            success: function (data) {
+                                if (data && typeof data.code != 'undefined' && data.code == "ok") {
+                                    fetchProjects();
+                                }
+                            }
+                        });
+                    }
+                    return false;
+                }).appendTo(tr.insertCell(tr.cells.length));
+
+
             $('<div></div>')
                 .html(formatDate(project.date))
                 .addClass("last-modified")
                 .attr("title", project.date.toString())
                 .appendTo(tr.insertCell(tr.cells.length));
 
-            $('<a></a>')
-            .addClass("delete-project")
-            .attr("title","Delete this project")
-            .attr("href","")
-            .html("<img src='/images/close.png' />")
-            .click(function() {
-                if (window.confirm("Are you sure you want to delete project \"" + project.name + "\"?")) {
-                    $.ajax({
-                        type: "POST",
-                        url: "/command/core/delete-project",
-                        data: { "project" : project.id },
-                        dataType: "json",
-                        success: function (data) {
-                            if (data && typeof data.code != 'undefined' && data.code == "ok") {
-                                fetchProjects();
-                            }
-                        }
-                    });
-                }
-                return false;
-            }).appendTo(tr.insertCell(tr.cells.length));
-
             $(tr).mouseenter(function() {
                 renameLink.css("visibility", "visible");
+                deleteLink.css("visibility", "visible");
             }).mouseleave(function() {
                 renameLink.css("visibility", "hidden");
+                deleteLink.css("visibility", "hidden");
             });
         };
 

main/webapp/modules/core/scripts/project/history-apply-dialog.html

@@ -1,13 +1,16 @@
 <div class="dialog-frame" style="width: 800px;">
-  <div class="dialog-header" bind="dialogHeader">Extract Operations</div>
+  <div class="dialog-border">
-  <div class="dialog-body" bind="dialogBody"><div class="grid-layout layout-normal layout-full"><table>
+    <div class="dialog-header" bind="dialogHeader">Apply Operation History</div>
-      <tr><td>Paste the JSON code encoding the operations to perform.</td></tr>
+    <div class="dialog-body" bind="dialogBody">
-      <tr><td>
+      <div class="dialog-instruction">
-          <div class="input-container"><textarea wrap="off" bind="textarea" class="history-operation-json" /></div>
+        Paste an extracted JSON history of operations to perform:
-      </td></tr>
+      </div>  
-  </table></div></div>
+      <div class="input-container"><textarea wrap="off" bind="textarea" class="history-operation-json" /></div>
-  <div class="dialog-footer" bind="dialogFooter">
+    </div>
-    <button class="button" bind="applyButton">Apply</button>
+    <div class="dialog-footer" bind="dialogFooter">
+    <button class="button" bind="applyButton">Perform Operations</button>
     <button class="button" bind="cancelButton">Cancel</button>
+    </div>
   </div>
 </div>
+

main/webapp/modules/core/scripts/project/history-extract-dialog.html

@@ -1,21 +1,31 @@
 <div class="dialog-frame" style="width: 800px;">
-  <div class="dialog-header" bind="dialogHeader">Extract Operations</div>
+  <div class="dialog-border">
-  <div class="dialog-body" bind="dialogBody"><div class="grid-layout layout-normal layout-full"><table>
+    <div class="dialog-header" bind="dialogHeader">Extract Operation History</div>
-        <tr><td colspan="2">
+    <div class="dialog-body" bind="dialogBody">
-            The following JSON code encodes the operations you have done that can be abstracted.
+      <div class="grid-layout layout-normal layout-full">
-            You can copy and save it in order to apply the same operations in the future.
+        <table>
-        </td></tr>
+          <tr>
-        <tr>
+            <td colspan="2">
+              Extract and save parts of your operation history as JSON that you can apply to this or other projects in the future.
+            </td>
+          </tr>
+          <tr>
             <td width="50%" style="vertical-align: top">
-                <div class="extract-operation-dialog-entries"><table cellspacing="5" bind="entryTable"></table></div>
+              <div class="extract-operation-dialog-entries">
+                <table cellspacing="5" bind="entryTable"></table>
+              </div>
+                <button class="button" bind="selectAllButton">Select All</button>
+                <button class="button" bind="unselectAllButton">Unselect All</button>
             </td>
             <td width="50%" style="vertical-align: top">
                 <div class="input-container"><textarea wrap="off" class="history-operation-json" bind="textarea" /></div>
             </td>
-        </tr>
+          </tr>
-  </table></div></div>
+        </table>
-  <div class="dialog-footer" bind="dialogFooter"><div class="grid-layout layout-normal layout-full"><table><tr>
+      </div>
-    <td align="left"><button class="button" bind="selectAllButton">Select All</button> <button class="button" bind="unselectAllButton">Unselect All</button></td>
+    </div>
-    <td align="left"><button class="button" bind="closeButton">Close</button></td>
+    <div class="dialog-footer" bind="dialogFooter">
-  </tr></table></div></div>
+      <button class="button" bind="closeButton">Close</button>
+    </div>
+  </div>
 </div>

main/webapp/modules/core/scripts/views/data-table/cell-editor.html

@@ -22,8 +22,3 @@
     <div class="data-table-cell-editor-key">Esc</div>
   </div>
 </div>
-
-
-
-
-

main/webapp/modules/core/scripts/views/data-table/column-header-ui.js

@@ -288,7 +288,7 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
         elmts.sortAloneContainer.show();
     }
     
-    var validValuesHtml = '<li kind="value">Valid Values</li>';
+    var validValuesHtml = '<li kind="value">Valid values</li>';
     var blankValuesHtml = '<li kind="blank">Blanks</li>';
     var errorValuesHtml = '<li kind="error">Errors</li>';
     var positionsHtml;

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

@@ -87,7 +87,7 @@ DataTableView.prototype.render = function() {
     
     var html = $(
         '<div class="viewpanel-header">' +
-            '<div class="viewpanel-rowrecord" bind="rowRecordControls">Show as ' +
+            '<div class="viewpanel-rowrecord" bind="rowRecordControls">Show as: ' +
                 '<span bind="modeSelectors"></span>' + 
             '</div>' +
             '<div class="viewpanel-pagesize" bind="pageSizeControls"></div>' +
@@ -172,7 +172,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
         lastPage.addClass("inaction");
     }
     
-    $('<span>Show </span>').appendTo(pageSizeControls);
+    $('<span>Show: </span>').appendTo(pageSizeControls);
     var sizes = [ 5, 10, 25, 50 ];
     var renderPageSize = function(index) {
         var pageSize = sizes[index];

main/webapp/modules/core/styles/common.less

@@ -230,13 +230,13 @@ a img {
   }
   
 .notification-action {
-    padding-left: 10px;
+  padding-left: 10px;
-}
+  }
 
 .notification-loader {
-    padding: 0 3px 0 0;
+  padding: 0 3px 0 0;
-    opacity: 0.3;
+  opacity: 0.3;
-}
+  }
 
 #header {
   height: 40px;
@@ -284,28 +284,21 @@ a img {
   }
   
 #body-info ul {
-    font-size: 1.3em;
+  font-size: 1.3em;
-    margin: .5em 0 2em;
+  margin: .5em 0 2em;
-}
+  }
 
 #body-info li {
   margin: 0.4em;
-}
+  }
 
 input[type="checkbox"], input[type="radio"], select {
-    vertical-align: baseline;
+  vertical-align: baseline;
-}
+  }
 
 input.inline {
-    vertical-align: middle;
+  vertical-align: middle;
-}
+  }
-
-
-
-
-
-
-  
 
 
 div.grid-layout > table {

main/webapp/modules/core/styles/index.less

@@ -70,9 +70,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   }
 
 #projects-container {
-  border: 1px solid @chrome_primary;
+  border-top: 1px solid @chrome_primary;
-  border-left: 0;
-  border-right: 0;
   background: #fff;
   overflow: auto;
   height: 378px;
@@ -97,6 +95,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   background: #f2f2f2;
   padding: @padding_tight;
   font-size: 1.1em;
+  .rounded_corners_bottom(4px);  
   }
 
 #project-links {
@@ -141,6 +140,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   padding: @padding_loose 200px 48px @padding_loose;
   background: @fill_secondary;
   color: @metadata_grey;
+  .rounded_corners_bottom(4px);
   }
   
 #project-create-parsetext {

main/webapp/modules/core/styles/project.less

@@ -62,7 +62,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   }
 
 #project-name-button:hover {
-  background: #ffffd6;
+  background: @fill_editable;
   border: 1px solid #ccc;
   border-top: 1px solid #aaa;
   }

main/webapp/modules/core/styles/project/facets.less

@@ -34,111 +34,116 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 @import-less url("../theme.less");
 
 ul.facets-container {
-    margin: 0;
+  margin: 0 5px;
-    padding: 0;
+  overflow: auto;
-    padding-right: 2px;
+  }
-    overflow: auto;
-}
 
 li.facet-container {
-    display: block;
+  display: block;
-    clear: both;
+  clear: both;
-    margin: 0;
+  margin-bottom: 7px;
-    padding: 0;
+  background: @chrome_secondary;  
-    margin-bottom: 6px;
+  border: 1px solid @chrome_primary;
-    background: white;
+  .rounded_corners(7px);
-    border: 1px solid #bbb;
+  }
-    
-    -moz-border-radius: 7px;
-    -webkit-border-radius: 7px;    
-    border-radius: 7px 7px;
-}
 
 .facet-title {
-    padding: 3px 5px;
+  padding: 3px 5px;
-    font-weight: bold;
+  background: @chrome_primary;
-    cursor: move;
+  font-weight: bold;
-    border-bottom: 1px solid #ccc;
+  cursor: move;
-}
+  border-bottom: 1px solid @chrome_primary;
+  .rounded_corners_top(6px);
+  
+  }
+
 a.facet-title-remove {
     display: block;
-    width: 16px;
+    width: 12px;
-    height: 16px;
+    height: 12px;
+    margin: 2px 0 0 0;
     text-decoration: none;
     background-image: url(../../images/close-map.png);
     background-repeat: no-repeat;
     background-position: 0px 0px;
 }
+
 a.facet-title-remove:hover {
-    background-position: -16px 0px;
+  background-position: -12px 0px;
-}
+  }
-
+
-.facet-expression {
+.facet-expression {
-    padding: 3px 5px;
+  padding: 3px 5px;
-    font-family: monospace;
+  font-family: monospace;
-    font-size: 11px;
+  background: #fff;
-    background: #eee;
+  cursor: text;
-    cursor: text;
+  border-bottom: 1px solid @chrome_primary;
-    border-bottom: 1px solid #ccc;
+  }
-}
+
-
+.facet-expression:hover {
-.facet-expression:hover {
+  background: @fill_editable;
-  background: #ffffd6;
+  }
-}
+
-
+.facet-status {
-.facet-status {
+  font-size: 0.9em;
-    font-size: 90%;
+  padding: 2px 5px;
-    padding: 2px 5px;
+  }
-}
+
-.facet-controls {
+.facet-controls {
-    font-size: 90%;
+  position: relative;
-    padding: 4px 5px 4px 5px;
+  font-size: 0.9em;
-    background: #F4F7FA;
+  padding: 7px 3px;
-    border-bottom: 1px solid #ccc;
+  background: @chrome_secondary;
-}
+  border-bottom: 1px solid @chrome_primary;
-.facet-controls .ui-button-text {
+  }
-    padding: 0.1em 0.4em 0.2em;
+
-}
+.facet-controls-button {
-
+  position: absolute;
-.facet-controls-sortControls a {
+  top: 2px;
-  margin: 0 2px;
+  right: 2px;
-  padding: 2px 4px 3px 4px;
-}
-.facet-controls-sortControls a.inaction {
-  color: #000;
-  font-weight: bold;
   }
   
-.facet-body {
-    padding: 1px;
-}
 .facet-body-message {
-    margin: 1em;
+  margin: 1em;
-    color: #666;
+  color: @metadata_grey;
-    text-align: center;
+  text-align: center;
-}
+  }
-.facet-body.facet-body-scrollable {
+
-    height: 17em;
+.facet-body-scrollable {
-    padding-bottom: 10px;
+  height: 17em;
-    background: url(../../images/facet-resize-handle.png) center bottom no-repeat;
+  padding-bottom: 8px;
-}
+  background: url(../../images/facet-resize-handle.png) center bottom no-repeat;
+  }
+
+.facet-body-inner {
+  background: #fff;
+  border-bottom: 1px solid @chrome_primary;
+  }
+
 .facet-body.facet-body-scrollable .ui-resizable-s {
-    bottom: -5px;
+  bottom: -5px;
-    height: 15px;
+  height: 15px;
-}
+  }
+  
 .facet-body-scrollable .facet-body-inner {
-    height: 100%;
+  height: 100%;
-    overflow: auto;
+  overflow: auto;
-}
+  }
+
 .facet-body-controls {
-    margin: 0.5em 0;
+  font-size: 0.85em;
-    text-align: center;
+  margin: 5px 0;
-}
+  }
 
 .facet-choice {
     padding: 2px 5px;
     clear: both;
 }
+
+.facet-choice:hover {
+  background: @fill_secondary;
+}
+
 .facet-choice-selected .facet-choice-label {
     font-weight: bold;
     color: #ff6a00;
@@ -152,32 +157,19 @@ a.facet-title-remove:hover {
     color: black;
 }
 
-a.facet-choice-label {
-    margin-right: 0.25em;
-    text-decoration: none;
-    color: #004;
-}
-a.facet-choice-label:hover {
-    text-decoration: underline;
-    color: #66f;
-}
-
 .facet-choice-count {
-    color: #aaa;
+  padding-left: 5px;
-    font-size: 80%;
+  font-size: 0.85em;
-}
+  color: @light_grey;
+  }
 
 a.facet-choice-link {
-    margin-left: 0.5em;
+  float: right;
-    font-size: 80%;
+  padding-left: 5px;
-    float: right;
+  font-size: 0.85em;
-    text-decoration: none;
+  color: @link_secondary;
-    color: #aac;
+  font-weight: normal;
-}
+  }
-a.facet-choice-link:hover {
-    text-decoration: underline;
-    color: #88a;
-}
 
 img.facet-choice-link {
     text-align: baseline;
@@ -187,23 +179,22 @@ img.facet-choice-link {
 }
 
 .facet-range-body {
-    padding: 10px 5px 0px 5px;
+    padding: 5px;
-}
-.facet-range-message {
-    margin: 1em;
-    color: #f88;
-}
-.facet-range-histogram {
-    overflow: hidden;
-}
-.facet-range-slider {
-    margin: 0px;
 }
 
+.facet-range-message {
+  color: @metadata_grey;
+  }
+
+.facet-range-histogram {
+  overflow: hidden;
+  }
+
 .facet-range-status {
-    margin: 5px 0;
+  margin: 0 0 3px 0;
-    text-align: center;
+  color: #000;
-}
+  text-align: center;
+  }
 
 .facet-range-choices {
     margin-bottom: 0.8em;

main/webapp/modules/core/styles/project/sidebar.less

@@ -34,7 +34,6 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 @import-less url("../theme.less");
 
 .browsing-panel-header {
-  padding-bottom: 0.5em;
   position: relative;
   display: none;
   }

main/webapp/modules/core/styles/theme.less

@@ -37,6 +37,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 @chrome_secondary: #e3e9ff;
 @fill_primary: #ebeef8;
 @fill_secondary: #f2f2f2;
+@fill_editable: #ffffd6;
 @selected_primary: #68e;
 @green_primary: #282;
 @green_secondary: #3d3;
@@ -62,6 +63,24 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   border-radius: @radius;
   }
 
+.rounded_corners_top (@radius: 5px) { 
+  -webkit-border-top-left-radius: @radius;
+  -webkit-border-top-right-radius: @radius;
+  -moz-border-radius-topleft: @radius;
+  -moz-border-radius-topright: @radius;
+  border-top-right-radius: @radius;
+  border-top-left-radius: @radius;
+  }
+
+.rounded_corners_bottom (@radius: 5px) { 
+  -webkit-border-bottom-left-radius: @radius;
+  -webkit-border-bottom-right-radius: @radius;
+  -moz-border-radius-bottomleft: @radius;
+  -moz-border-radius-bottomright: @radius;
+  border-bottom-right-radius: @radius;
+  border-bottom-left-radius: @radius;
+  }
+
 .sharp_corners_left () {
   -webkit-border-top-right-radius: 0;
   -webkit-border-bottom-right-radius: 0;

main/webapp/modules/core/styles/util/dialog.less

@@ -75,6 +75,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   padding: @padding_looser;
   }
 
+.dialog-instruction {
+  padding: 0 0 @padding_normal;
+  }
+
 .dialog-footer {
   font-size: 1.3em;
   background: @dialog_footer;

main/webapp/modules/core/styles/views/data-table-view.less

@@ -243,19 +243,19 @@ a.data-table-star-on, a.data-table-star-off, a.data-table-flag-on, a.data-table-
   text-decoration: none;
   }
   
-a.data-table-star-on, a.data-table-star-off:hover {
+a.data-table-star-on {
   background-position: 0 0;
   }
 
-a.data-table-star-off, a.data-table-star-on:hover {
+a.data-table-star-off {
   background-position: -17px 0;
   }
 
-a.data-table-flag-on, a.data-table-flag-off:hover {
+a.data-table-flag-on {
   background-position: 0 -17px;
   }
 
-a.data-table-flag-off, a.data-table-flag-on:hover {
+a.data-table-flag-off {
   background-position: -17px -17px;
   }
 

main/webapp/modules/core/styles/widgets/histogram-widget.less

@@ -34,11 +34,11 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 @import-less url("../theme.less");
 
 .histogram-widget {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    position: relative;
+  position: relative;
-}
+  }
 
 .histogram-widget canvas {
-    width: 100%;
+  width: 100%;
-}
+  }

main/webapp/modules/core/styles/widgets/slider-widget.less

@@ -36,46 +36,47 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .slider-widget {
     position: relative;
     overflow: visible;
-    margin-left: 12px;
+    margin: 5px;
-    margin-right: 12px;
 }
 
 .slider-widget-tint {
-    position: absolute;
+  position: absolute;
-    top: 0px;
+  top: 0px;
-    height: 100%;
+  height: 100%;
-    background: black;
+  background: #666;
-    opacity: 0.2;
+  opacity: 0.5;
-    display: none;
+  display: none;
-}
+  }
+
 .slider-widget-tint.left {
-    left: 0px;
+    left: 0;
 }
+
 .slider-widget-tint.right {
-    right: 0px;
+    right: 0;
 }
 .slider-widget-highlight {
     position: absolute;
-    padding: 1px 0px;
+    padding: 0;
-    border: 1px solid #ff6a00;
+    border: 1px solid #000;
     top: -2px;
     height: 100%;
     cursor: move;
 }
 .slider-widget-bracket {
     position: absolute;
+    top: 0;
     width: 12px;
-    top: 0px;
     height: 100%;
 }
 .slider-widget-bracket.left {
     background: url(../../images/slider-handle.png) no-repeat center right;
-    margin-left: -14px;
+    margin-left: -8px;
     cursor: e-resize;
 }
 .slider-widget-bracket.right {
     background: url(../../images/slider-handle.png) no-repeat center left;
-    margin-left: 2px;
+    margin-left: -4px;
     cursor: w-resize;
 }
 .slider-widget-overlay {