refactor css, sidebar help UX, data table UX

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

main/webapp/modules/core/MOD-INF/controller.js

@@ -235,10 +235,10 @@ function init() {
             "styles/util/custom-suggest.less",
 
             "styles/project.less",
-            "styles/project/browsing.less",
+            "styles/project/sidebar.less",
+            "styles/project/facets.less",
             "styles/project/process.less",
             
-            "styles/widgets/history.less",
             "styles/widgets/histogram-widget.less",
             "styles/widgets/slider-widget.less",
             

main/webapp/modules/core/project.vt

@@ -16,7 +16,7 @@
         <span id="project-name-button" class="app-path-section" title="Click to rename project"></span>
           <a id="project-permalink-button" href="javascript:{}" class="secondary">Permalink</a>
       </div>
-      <div id="project-controls"><a class="button button-primary" bind="exportButton" id="export-button" href="#export">Export</a></div>
+      <div id="project-controls"><a class="button button-primary" bind="exportButton" id="export-button" href="#export"><span class="button-menu">Export</span></a></div>
     </div>
     
     <div id="loading-message"><img src="images/large-spinner.gif" /> Starting up...</div>
@@ -38,7 +38,7 @@
             <!-- row/record counts -->
           </div>
           <div bind="extensionBar" id="extension-bar">
-            Extensions: <span bind="menuContainer" id="extension-bar-menu-container"></span> <a href="" class="secondary">Customize...</a>
+            Extensions: <span bind="menuContainer" id="extension-bar-menu-container"></span>
           </div>
         </div>
         <div bind="viewPanel" id="view-panel"></div>

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

@@ -121,6 +121,7 @@ function renderProjects(data) {
 
             var renameLink = $('<a></a>')
                 .text("rename")
+                .addClass("secondary")
                 .attr("href", "javascript:{}")
                 .css("visibility", "hidden")
                 .click(function() {

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

@@ -60,7 +60,6 @@ function resizeTabs() {
 function resizeAll() {
     resize();
     resizeTabs();
-    
     ui.extensionBar.resize();
     ui.browsingEngine.resize();
     ui.processWidget.resize();

main/webapp/modules/core/scripts/project/browsing-engine.js

@@ -63,9 +63,9 @@ BrowsingEngine.prototype._initializeUI = function() {
     
     this._div.html(
         '<div class="browsing-panel-help" bind="help">' +
-            '<h1>Explore data ...</h1>' +
-            '<p>by choosing a facet or filter method from the menus at the top of each column.</p>' +
-            '<p>Not sure how to get started? <a href="http://vimeo.com/groups/gridworks/videos" target="_blank">Watch these screencasts</a>.</p>' +
+          '<h1>Using facets and filters</h1>' +
+          '<p>Use facets and filters to select subsets of your data to act on. Choose facet and filter methods from the menus at the top of each data column.</p>' +
+          '<p>Not sure how to get started?<br /><a href="http://vimeo.com/groups/gridworks/videos" target="_blank"><b>Watch these screencasts!</b></a>.</p>' +
         '</div>' +
         '<div class="browsing-panel-header" bind="header">' +
             '<div class="browsing-panel-indicator" bind="indicator">' +

main/webapp/modules/core/scripts/project/extension-bar.js

@@ -37,7 +37,7 @@ ExtensionBar.prototype._initializeUI = function() {
 ExtensionBar.prototype._createMenuButton = function(label, submenu) {
     var self = this;
 
-    var menuItem = $("<a>").addClass("button").text(label);
+    var menuItem = $("<a>").addClass("button").append('<span class="button-menu">' + label + '</span>');
     
     menuItem.click(function(evt) {
         MenuSystem.createAndShowStandardMenu(

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

@@ -17,7 +17,7 @@ DataTableCellUI.prototype._render = function() {
         
     var editLink = $('<a href="javascript:{}">&nbsp;</a>')
         .addClass("data-table-cell-edit")
-        .attr("title", "edit this cell")
+        .attr("title", "Edit this cell")
         .appendTo(divContent)
         .click(function() { self._startEdit(this); });
         

main/webapp/modules/core/scripts/widgets/history-widget.js

@@ -37,9 +37,9 @@ HistoryWidget.prototype._render = function() {
         .unbind()
         .html(
             '<div class="history-panel-help" bind="helpDiv">' +
-                '<h1>Don\'t worry ...</h1>' +
-                '<p>about making mistakes. Every change you make will be shown here, and you can undo changes at any point.</p>' +
-                '<p><a href="http://code.google.com/p/google-refine/wiki/GettingStarted?tm=6" target="_blank">Learn more &raquo;</a></p>' +
+                '<h1>Infinite undo history</h1>' +
+                '<p>Don\'t worry about making mistakes. Every change you make will be shown here, and you can undo your changes anytime.</p>' +
+                '<p><a href="http://code.google.com/p/google-refine/wiki/GettingStarted?tm=6" target="_blank"><b>Learn more &raquo;</b></a></p>' +
             '</div>' +
             '<div class="history-panel-body" bind="bodyDiv">' +
                 '<div class="history-past" bind="pastDiv"></div>' +
@@ -84,6 +84,7 @@ HistoryWidget.prototype._render = function() {
         elmts.helpDiv.hide();
     } else {
         elmts.bodyDiv.hide();
+        elmts.footerDiv.hide();
     }
     
     elmts.extractLink.click(function() { self._extractOperations(); });

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

@@ -94,20 +94,29 @@ a img {
   padding: 1px 15px;
   }
 
-.button-disabled {
+.button-disabled, a.button-disabled {
   color: #666;
   border: 1px solid #ddd;
   background: #f3f3f3;
   cursor: default;
   }
 
-.button-disabled:hover {
+.button-disabled:hover, a.button-disabled:hover {
   color: #666;
   border: 1px solid #ddd;
   background: #f3f3f3;
   cursor: default;
   }
 
+.button img, a.button img {
+  padding-left: 3px;
+  }
+  
+.button-menu, a.button-menu {
+  background: url(/images/down-arrow.png) no-repeat right 6px;
+  padding-right: 12px;
+  }
+
 .form-table th, .form-table td {
   vertical-align: top;
   font-size: 1.3em;
@@ -206,8 +215,6 @@ a img {
   margin: 0.4em;
 }
 
-
-
 input[type="checkbox"], input[type="radio"] {
     vertical-align: baseline;
 }
@@ -282,10 +289,10 @@ div.grid-layout.layout-looser > table {
     border-spacing: 20px;
 }
 
-
 div.input-container {
     padding: 3px;
 }
+
 div.input-container > input, div.input-container > textarea {
     display: block;
     width: 100%;
@@ -300,7 +307,6 @@ input.code, textarea.code {
     font-family: monospace;
 }
 
-
 img {
     vertical-align: middle;
 }

main/webapp/modules/core/styles/jquery-ui-overrides.less

@@ -58,8 +58,12 @@
   }
   
 .ui-tabs .ui-tabs-panel {
-  margin: 0px;
-  padding: 15px;
+  margin: 0;
+  padding: 0;
   border: 1px solid @chrome_primary;
   background: white;
+  }
+  
+.ui-widget-content a {
+  color: @link_primary;
   }

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

@@ -77,7 +77,7 @@
 #extension-bar {
   position: absolute;
   top: 0px;
-  right: @padding_normal;
+  right: @padding_loose;
   white-space: nowrap;
   font-size: 1.3em;
   padding: @padding_tight 0;
@@ -88,18 +88,10 @@
   }
 
 #view-panel {
-    background: white;
-    overflow: hidden;
-}
-
-#left-panel .refine-tabs.ui-tabs .ui-tabs-panel {
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-    padding: @padding_loose;
-    overflow: hidden;
-}
+  background: white;
+  overflow: hidden;
+  }
 
 #facet-panel, #history-panel {
-    overflow: auto;
-}
+  overflow: auto;
+  }

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

@@ -1,48 +1,5 @@
 @import-less url("../theme.less");
 
-.browsing-panel-header {
-    padding-bottom: 0.5em;
-    position: relative;
-    display: none;
-}
-
-.browsing-panel-indicator {
-    visibility: hidden;
-    position: absolute;
-    width: 50%;
-    margin: 0px;
-    top: 0em;
-    left: 20%;
-    text-align: center;
-    background-color: #fff;
-    padding: 4px 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border: 1px solid #ccc;
-}
-.browsing-panel-indicator img {
-    vertical-align: text-top;
-}
-
-.browsing-panel-controls {
-    visibility: hidden;
-}
-
-.browsing-panel-help {
-    margin-bottom: 1em;
-    padding: 10px;
-    background: white;
-    border: 1px solid #ccc;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-}
-.browsing-panel-help h1 {
-    margin-top: 0px;
-    font-size: 150%;
-    font-weight: bold;
-    color: #888;
-}
-
 ul.facets-container {
     margin: 0;
     padding: 0;
@@ -345,3 +302,5 @@ img.facet-choice-link {
 .scatterplot-selectors .scatterplot-dot-selector label.dot-big-label {
     background-position: -48px -25px;
 }
+
+

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

@@ -1,18 +1,54 @@
 @import-less url("../theme.less");
 
-.history-panel-help {
-    padding: 10px;
-    background: white;
-    border: 1px solid #ccc;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-}
-.history-panel-help h1 {
-    margin-top: 0px;
-    font-size: 150%;
-    font-weight: bold;
-    color: #888;
-}
+.browsing-panel-header {
+  padding-bottom: 0.5em;
+  position: relative;
+  display: none;
+  }
+
+.browsing-panel-indicator {
+  visibility: hidden;
+  position: absolute;
+  width: 50%;
+  margin: 0px;
+  top: 0em;
+  left: 20%;
+  text-align: center;
+  background-color: #fff;
+  padding: 4px 4px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border: 1px solid #ccc;
+  }
+
+.browsing-panel-indicator img {
+  vertical-align: text-top;
+  }
+
+.browsing-panel-controls {
+  visibility: hidden;
+  }
+
+.browsing-panel-help, .history-panel-help {
+  margin: 1em;
+  padding: 0 0 13px 0;
+  background: @fill_primary;
+  border: 1px solid @chrome_primary;
+  color: @near_black;
+  .rounded_corners();
+  }
+  
+.browsing-panel-help h1, .history-panel-help h1 {
+  margin: 10px;
+  padding: 20px 0 0 10px;
+  font-size: 1.15em;
+  font-weight: bold;
+  background: url(/images/logo-gem-40.png) no-repeat right top;
+  }
+
+.browsing-panel-help p, .history-panel-help p {
+  padding: 7px 20px;
+  }
 
 .history-panel-body {
     background: #fff;
@@ -90,4 +126,4 @@ textarea.history-operation-json {
     white-space: pre;
     font-family: monospace;
     height: 400px;
-}
+}

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

@@ -36,6 +36,7 @@
 table.data-table {
     margin: 0px;
     padding: 0px;
+    font-size: 1.1em;
     border-collapse: collapse;
 }
 
@@ -84,6 +85,7 @@ table.column-header-layout td {
     padding: 0px;
     font-weight: bold;
 }
+
 a.column-header-menu {
     display: block;
     margin-right: 5px;
@@ -95,6 +97,7 @@ a.column-header-menu {
 }
 a.column-header-menu:hover {
     background-position: -17px 0px;
+    text-decoration: none;
 }
 .column-header-recon-stats-bar {
     margin-top: 5px;
@@ -128,7 +131,7 @@ a.data-table-cell-edit {
     top: 0px;
     right: 0px;
     display: block;
-    width: 30px;
+    width: 25px;
     height: 16px;
     text-decoration: none;
     background-image: url(../../images/edit-map.png);
@@ -137,7 +140,7 @@ a.data-table-cell-edit {
     visibility: hidden;
 }
 a.data-table-cell-edit:hover {
-    background-position: -30px 0px;
+    background-position: -25px 0px;
 }
 div.data-table-cell-content-numeric > a.data-table-cell-edit {
     left: 0px;
@@ -145,7 +148,7 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
 }
 
 .data-table-value-nonstring {
-    color: #880;
+    color: #282;
 }
 .data-table-error {
     color: red;