ui improvements: data-table-view header

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

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

@@ -33,13 +33,13 @@ DataTableView.prototype.render = function() {
     var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0;
     
     var html = $(
-        '<div id="viewPanel-header">' +
+        '<div id="viewpanel-header">' +
-            '<div bind="rowRecordControls">Show as ' +
+            '<div class="viewpanel-rowrecord" bind="rowRecordControls">Show as ' +
-                '<span bind="modeSelectors" class="viewPanel-browsingmodes"></span>' + 
+                '<span bind="modeSelectors"></span>' + 
             '</div>' +
-            '<div bind="pageSizeControls"></div>' +
+            '<div class="viewpanel-pagesize" bind="pageSizeControls"></div>' +
-            '<div bind="sortingControls" align="center"></div>' +
+            '<div class="viewpanel-sorting" bind="sortingControls"></div>' +
-            '<div bind="pagingControls" align="right"></div>' +
+            '<div class="viewpanel-paging" bind="pagingControls"></div>' +
         '</div>' +
         '<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>'
     );
@@ -54,7 +54,7 @@ DataTableView.prototype.render = function() {
             .appendTo(elmts.modeSelectors);
             
         if (value == ui.browsingEngine.getMode()) {
-            a.addClass("inaction");
+            a.addClass("selected");
         } else {
             a.addClass("action").click(function(evt) {
                 ui.browsingEngine.setMode(value);
@@ -98,7 +98,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
     var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit);
     
     var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls);
-    var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls);
+    var previousPage = $('<a href="javascript:{}">&lsaquo; previous</a>').appendTo(pagingControls);
     if (theProject.rowModel.start > 0) {
         firstPage.addClass("action").click(function(evt) { self._onClickFirstPage(this, evt); });
         previousPage.addClass("action").click(function(evt) { self._onClickPreviousPage(this, evt); });
@@ -107,9 +107,9 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
         previousPage.addClass("inaction");
     }
     
-    $('<span>').addClass("viewPanel-pagingControls-currentPageInfo").html(" " + from + " &mdash; " + to + " ").appendTo(pagingControls);
+    $('<span>').addClass("viewpanel-pagingcount").html(" " + from + " - " + to + " ").appendTo(pagingControls);
     
-    var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls);
+    var nextPage = $('<a href="javascript:{}">next &rsaquo;</a>').appendTo(pagingControls);
     var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls);
     if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) {
         nextPage.addClass("action").click(function(evt) { self._onClickNextPage(this, evt); });
@@ -127,7 +127,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
             .addClass("viewPanel-pagingControls-page")
             .appendTo(pageSizeControls);
         if (pageSize == self._pageSize) {
-            a.text(pageSize).addClass("inaction");
+            a.text(pageSize).addClass("selected");
         } else {
             a.text(pageSize).addClass("action").click(function(evt) {
                 self._pageSize = pageSize;

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

@@ -43,6 +43,25 @@ a.secondary {
   color: @link_secondary;
   }
 
+a.action, a.selected, a.inaction {
+  margin: 0 3px;
+  }
+
+a.selected {
+  color: #000;
+  font-weight: bold;
+  cursor: default;
+  }
+
+a.inaction {
+  color: #ccc;
+  }
+
+a.selected:hover, a.inaction:hover {
+  cursor: default;
+  text-decoration: none;
+  }
+
 a img {
   border: 0;
   }
@@ -203,25 +222,6 @@ input.inline {
 
 
 
-a.action, 
-a.quiet-link {
-    text-decoration: none;
-    color: #448;
-}
-a.action {
-    margin: 0 3px;
-}
-a.action:hover, 
-a.quiet-link:hover {
-    color: #88f;
-}
-
-a.inaction {
-    margin: 0 3px;
-    text-decoration: none;
-    color: #ccc;
-}
-
 
   
 

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

@@ -1,27 +1,32 @@
 @import-less url("../theme.less");
 
-#viewPanel-header {
+#viewpanel-header {
+  position: relative;
   background: @chrome_secondary;
   font-size: 1.3em;
   padding: @padding_normal;
-}
+  overflow: hidden;
+  text-align: right;
+  }
 
-.viewPanel-pagingControls-currentPageInfo {
+.viewpanel-rowrecord, .viewpanel-pagesize, .viewpanel-sorting {
-    font-size: 150%;
+  position: absolute;
-}
+  top: @padding_normal;
+  background: @chrome_secondary;
+  padding: 0 10px 0 0;
+  }
 
-a.viewPanel-pagingControls-page, a.viewPanel-browsingModes-mode {
+.viewpanel-pagesize {
-    margin: 0 2px;
+  left: 180px;
-    padding: 2px 4px 3px 4px;
+  }
-    font-weight: bold;
+
-}
+.viewpanel-sorting {
-a.viewPanel-pagingControls-page.inaction, a.viewPanel-browsingModes-mode.inaction {
+  left: 350px;
-    background: #f8f8f8;
+  }
-    color: #777;
+
-    border: 1px solid #ff6a00;
+.viewpanel-pagingcount {
-    -moz-border-radius: 4px;
+  font-weight: bold
-    -webkit-border-radius: 4px;
+  }
-}
 
 .data-table-container {
     border-top: 1px solid @line_accent;