dialog styles, first round of improvements to facets, data table, menus

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

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

@@ -151,10 +151,10 @@ function init() {
         module,
         [
             "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
+            "styles/jquery-ui-overrides.less",
             "styles/common.less",
             "styles/pure.css",
-            "styles/index.less",
+            "styles/index.less"
-            "styles/jquery-ui-overrides.less"
         ]
     );
     
@@ -226,9 +226,9 @@ function init() {
             "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
             "externals/imgareaselect/css/imgareaselect-default.css",
 
+            "styles/jquery-ui-overrides.less",
             "styles/common.less",
             "styles/pure.css",
-            "styles/jquery-ui-overrides.less",
     
             "styles/util/menu.less",
             "styles/util/dialog.less",
@@ -273,9 +273,9 @@ function init() {
         [
             "externals/suggest/css/suggest-1.2.min.css",
             "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
-            "styles/common.less",
-            "styles/pure.css",
             "styles/jquery-ui-overrides.less",
+            "styles/common.less",
+            "styles/pure.css"
         ]
     );
 }

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

@@ -65,25 +65,19 @@ BrowsingEngine.prototype._initializeUI = function() {
         '<div class="browsing-panel-help" bind="help">' +
           '<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>' +
+          '<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">' +
-                '<img src="images/small-spinner.gif" /> refreshing facets ...' +
+              '<img src="images/small-spinner.gif" /> Refreshing facets...' +
+          '</div>' +
+          '<div class="browsing-panel-controls" bind="controls">' +
+            '<div class="browsing-panel-controls-refresh">' +
+              '<a href="javascript:{}" bind="refreshLink" class="button" title="Update all facets">Refresh</a>' +
+            '</div>' +              
+            '<a href="javascript:{}" bind="resetLink" class="button button-pill-left" title="Clear selection in all facets">Reset All</a>' +
+            '<a href="javascript:{}" bind="removeLink" class="button button-pill-right" title="Remove all facets">Remove All</a>' +
           '</div>' +
-            '<div class="browsing-panel-controls" bind="controls"><div class="grid-layout layout-tightest layout-full"><table>' +
-                '<tr>' +
-                    '<td>' +
-                        '<a href="javascript:{}" bind="refreshLink" class="action" title="Make sure all facets are up-to-date">Refresh</a>' +
-                    '</td>' +
-                    '<td width="1%">' +
-                        '<a href="javascript:{}" bind="resetLink" class="action" title="Clear selection in all facets">Reset&nbsp;All</a>' +
-                    '</td>' +
-                    '<td width="1%">' +
-                        '<a href="javascript:{}" bind="removeLink" class="action" title="Remove all facets">Remove&nbsp;All</a>' +
-                    '</td>' +
-                '</tr>' +
-            '</table></div></div>' +
         '</div>' +
         '<ul bind="facets" class="facets-container"></ul>'
     );

main/webapp/modules/core/scripts/views/data-table/add-column-by-fetching-urls-dialog.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 700px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-normal layout-full"><table cols="2">
@@ -22,4 +23,5 @@
       <button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
       <button bind="cancelButton">Cancel</button>
     </div>
+  </div>
 </div>

main/webapp/modules/core/scripts/views/data-table/add-column-dialog.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 700px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-normal layout-full"><table cols="2">
@@ -17,4 +18,5 @@
       <button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
       <button bind="cancelButton">Cancel</button>
     </div>
+  </div>
 </div>

main/webapp/modules/core/scripts/views/data-table/cell-recon-search-for-match.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 400px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader">Search for Match</div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-normal layout-full"><table>
@@ -13,4 +14,5 @@
       <button bind="okButton">Match</button>
       <button bind="cancelButton">Cancel</button>
     </div>
+  </div>
 </div>

main/webapp/modules/core/scripts/views/data-table/sorting-criterion-dialog.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 400px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-normal layout-full "><table>
@@ -43,4 +44,5 @@
       <button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
       <button bind="cancelButton">Cancel</button>
     </div>
+  </div>
 </div>  

main/webapp/modules/core/scripts/views/data-table/split-column-dialog.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 600px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-looser layout-full"><table><tr>
@@ -52,4 +53,5 @@
       <button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
       <button bind="cancelButton">Cancel</button>
     </div>
+  </div>
 </div>

main/webapp/modules/core/scripts/views/data-table/text-transform-dialog.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 700px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-tight layout-full"><table>
@@ -11,6 +12,7 @@
           </tr>
       </table>
     </div>
+  </div>
   <div class="dialog-footer" bind="dialogFooter">
     <button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
     <button bind="cancelButton">Cancel</button>

main/webapp/modules/core/scripts/views/data-table/transpose-columns-into-rows.html

@@ -1,4 +1,5 @@
 <div class="dialog-frame" style="width: 600px;">
+  <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div class="grid-layout layout-normal layout-full grid-layout-for-ui"><table>
@@ -35,4 +36,5 @@
       <button bind="okButton">Transpose</button>
       <button bind="cancelButton">Cancel</button>
     </div>
+  </div>
 </div>

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

@@ -54,7 +54,7 @@ a.selected {
   }
 
 a.inaction {
-  color: #ccc;
+  color: @chrome_primary;
   }
 
 a.selected:hover, a.inaction:hover {
@@ -77,6 +77,7 @@ a img {
   border: 1px solid #bbb;
   cursor: pointer;
   background: #eee;
+  white-space: nowrap;
   font-family: Arial, Helvetica, sans-serif; 
   .rounded_corners(3px);
   }
@@ -94,6 +95,16 @@ a img {
   padding: 1px 15px;
   }
 
+.button-pill-left, a.button-pill-left {
+  border-right: 1px solid #bbb;
+  .sharp_corners_left();
+  }
+
+.button-pill-right, a.button-pill-right {
+  border-left: 1px solid #fff;
+  .sharp_corners_right();  
+  }
+
 .button-disabled, a.button-disabled {
   color: #666;
   border: 1px solid #ddd;

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

@@ -66,15 +66,11 @@ a.facet-title-remove:hover {
 .facet-controls-sortControls a {
   margin: 0 2px;
   padding: 2px 4px 3px 4px;
-  font-weight: bold;
 }
 .facet-controls-sortControls a.inaction {
-  background: #f8f8f8;
+  color: #000;
-  color: #777;
+  font-weight: bold;
-  border: 1px solid #ff6a00;
+  }
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-}
 
 .facet-body {
     padding: 1px;

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

@@ -26,7 +26,16 @@
   }
 
 .browsing-panel-controls {
+  position: relative;
+  padding: @padding_normal;
   visibility: hidden;
+  text-align: right;
+  }
+
+.browsing-panel-controls-refresh {
+  position: absolute;
+  top: @padding_normal;
+  left: @padding_normal;
   }
 
 .browsing-panel-help, .history-panel-help {
@@ -48,6 +57,7 @@
 
 .browsing-panel-help p, .history-panel-help p {
   padding: 7px 20px;
+  line-height: 1.3;
   }
 
 .history-panel-body {

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

@@ -12,6 +12,10 @@
 @light_grey: #999;
 @metadata_grey: #777;
 @near_black: #444;
+@dialog_frame: #3a5774;
+@dialog_border: #c1d9ff;
+@dialog_header: #e0edfe;
+@dialog_footer: #eee;
 
 @padding_tighter: 3px;
 @padding_tight: 5px;
@@ -25,3 +29,20 @@
   border-radius: @radius;
   }
   
+.sharp_corners_left () {
+  -webkit-border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-bottomright: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;	
+  }
+
+.sharp_corners_right () {
+  -moz-border-radius-topleft: 0;
+  -moz-border-radius-bottomleft: 0;
+  -webkit-border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  }

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

@@ -2,49 +2,50 @@
 
 .dialog-overlay {
   position: fixed;
-    padding: 0px;
+  top: 0;
-    margin: 0px;
+  left: 0;
-    top: 0px;
-    left: 0px;
   width: 100%;
   height: 100%;
-    background: black;
+  background: #666;
-    opacity: 0.4;
+  opacity: 0.5;
-}
+  }
 
 .dialog-container {
   position: fixed;
-    padding: 0px;
+  left: 0;
-    margin: 0px;
-    left: 0px;
   width: 100%;
   text-align: center;
-}
+  }
 
 .dialog-frame {
     margin: 0 auto;
     text-align: left;
     background: white;
-    border: 1px solid #aaa;
+    border: 1px solid @dialog_frame;
-    padding: 2px;
+}
+
+.dialog-border {
+    border: 4px solid @dialog_border;
 }
 
 .dialog-header {
-    background: #404859;
+    background: @dialog_header;
-    padding: 5px 10px;
+    padding: @padding_loose;
     font-weight: bold;
-    color: white;
+    font-size: 1.6em;
+    color: #000;
     cursor: move;
 }
 
 .dialog-body {
-    padding: 10px;
+  font-size: 1.3em;
+  padding: @padding_looser;
 }
 
 .dialog-footer {
-    background: #ddd;
+  font-size: 1.3em;
-    padding: 5px 10px;
+  background: @dialog_footer;
-    text-align: right;
+  padding: @padding_loose;
 }
 
 .dialog-footer button {

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

@@ -1,63 +1,56 @@
 @import-less url("../theme.less");
 
 .menu-overlay {
-    background: black;
-    opacity: 0.15;
   position: fixed;
-    padding: 0px;
+  top: 0;
-    margin: 0px;
+  left: 0;
-    top: 0px;
-    left: 0px;
   width: 100%;
   height: 100%;
   z-index: 1000;
-}
+  }
 
 .menu-container {
   position: absolute;
   width: 250px;
   background: white;
   padding: 1px;
-    border: 1px solid #ddd;
+  border: 1px solid #ccc;
-    font-size: 12px;
+  border-right: 1px solid #666;
-}
+  border-bottom: 1px solid #666;
+  font-size: 1.2em;
+  }
 
 .menu-container hr {
+  margin: 2px 0;
+  padding: 0;
   height: 1px;
   border: none;
   border-top: 1px solid #ccc;
-    padding: 0px;
+  }
-    margin: 2px 0px;
-}
 
 a.menu-item {
   display: block;
   padding: 5px 7px;
   text-decoration: none;
-    color: black;
+  color: #000;
   white-space: pre;
-}
+  }
 
-a.menu-item:hover {
+a.menu-item:hover, a.menu-item.menu-expanded {
-    color: #44a;
+  background: #dbe8f8;
-    background: #eee;
+  }
-}
-
-a.menu-item.menu-expanded {
-    background: #ddd;
-}
 
 a.menu-item img {
   border: none;
-}
+  }
 
 table.menu-item-layout td {
   vertical-align: middle;
-}
+  }
 
 .menu-section {
   padding: 2px 7px;
   background: #aaa;
   color: white;
   font-weight: bold;
-}
+  }

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

@@ -60,9 +60,6 @@ table.data-table > tbody > tr.contextual > td > div {
     opacity: 0.3;
 }
 
-table.data-table > tbody > tr.record.contextual > td {
-}
-
 table.data-table td.column-header {
     background: #e8e8e8;
     cursor: pointer;
@@ -118,10 +115,12 @@ a.column-header-menu:hover {
     background: #6d6;
 }
 
-
 div.data-table-cell-content {
+  line-height: 1.2;
+  color: #222;
   position: relative;
-}
+  }
+
 div.data-table-cell-content-numeric {
     text-align: right;
 }