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
2010-10-15 02:23:22 +00:00 · 2010-10-15 02:23:22 +00:00 · fdc6fee052
commit fdc6fee052
parent 9e35ea3775
17 changed files with 343 additions and 304 deletions
--- a/main/webapp/modules/core/MOD-INF/controller.js
+++ b/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/jquery-ui-overrides.less"
+            "styles/index.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"
        ]
    );
 }
--- a/main/webapp/modules/core/images/right-arrow.png
+++ b/main/webapp/modules/core/images/right-arrow.png
--- a/main/webapp/modules/core/scripts/project/browsing-engine.js
+++ b/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>'
    );
--- a/main/webapp/modules/core/scripts/views/data-table/add-column-by-fetching-urls-dialog.html
+++ b/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>
--- a/main/webapp/modules/core/scripts/views/data-table/add-column-dialog.html
+++ b/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>
--- a/main/webapp/modules/core/scripts/views/data-table/cell-recon-search-for-match.html
+++ b/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>
--- a/main/webapp/modules/core/scripts/views/data-table/sorting-criterion-dialog.html
+++ b/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>  
--- a/main/webapp/modules/core/scripts/views/data-table/split-column-dialog.html
+++ b/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>
--- a/main/webapp/modules/core/scripts/views/data-table/text-transform-dialog.html
+++ b/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>
--- a/main/webapp/modules/core/scripts/views/data-table/transpose-columns-into-rows.html
+++ b/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>
--- a/main/webapp/modules/core/styles/common.less
+++ b/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;
--- a/main/webapp/modules/core/styles/project/facets.less
+++ b/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: #777;
-  border: 1px solid #ff6a00;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-}
+  color: #000;
+  font-weight: bold;
+  }

 .facet-body {
    padding: 1px;
--- a/main/webapp/modules/core/styles/project/sidebar.less
+++ b/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 {
--- a/main/webapp/modules/core/styles/theme.less
+++ b/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;
+  }
--- a/main/webapp/modules/core/styles/util/dialog.less
+++ b/main/webapp/modules/core/styles/util/dialog.less
@ -2,49 +2,50 @@

 .dialog-overlay {
  position: fixed;
-    padding: 0px;
-    margin: 0px;
-    top: 0px;
-    left: 0px;
+  top: 0;
+  left: 0;
  width: 100%;
  height: 100%;
-    background: black;
-    opacity: 0.4;
-}
+  background: #666;
+  opacity: 0.5;
+  }

 .dialog-container {
  position: fixed;
-    padding: 0px;
-    margin: 0px;
-    left: 0px;
+  left: 0;
  width: 100%;
  text-align: center;
-}
+  }

 .dialog-frame {
    margin: 0 auto;
    text-align: left;
    background: white;
-    border: 1px solid #aaa;
-    padding: 2px;
+    border: 1px solid @dialog_frame;
+}
+
+.dialog-border {
+    border: 4px solid @dialog_border;
 }

 .dialog-header {
-    background: #404859;
-    padding: 5px 10px;
+    background: @dialog_header;
+    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;
-    padding: 5px 10px;
-    text-align: right;
+  font-size: 1.3em;
+  background: @dialog_footer;
+  padding: @padding_loose;
 }

 .dialog-footer button {
--- a/main/webapp/modules/core/styles/util/menu.less
+++ b/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;
-    margin: 0px;
-    top: 0px;
-    left: 0px;
+  top: 0;
+  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
-}
+  }

 .menu-container {
  position: absolute;
  width: 250px;
  background: white;
  padding: 1px;
-    border: 1px solid #ddd;
-    font-size: 12px;
-}
+  border: 1px solid #ccc;
+  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 {
-    color: #44a;
-    background: #eee;
-}
-
-a.menu-item.menu-expanded {
-    background: #ddd;
-}
+a.menu-item:hover, a.menu-item.menu-expanded {
+  background: #dbe8f8;
+  }

 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;
-}
+  }
--- a/main/webapp/modules/core/styles/views/data-table-view.less
+++ b/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;
 }