From 3fbefac8e1cff8a0b55a582ac899185251671e18 Mon Sep 17 00:00:00 2001
From: James Home <jh@jameshome.com>
Date: Wed, 20 Oct 2010 23:43:37 +0000
Subject: [PATCH] UI fixes to table controls, matching dialogs and edit dialogs

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1614 7d457c2a-affb-35e4-300a-418c747d4874
---
 .../webapp/modules/core/images/checks-map.png | Bin 568 -> 1127 bytes
 .../scripts/views/data-table/cell-editor.html |  46 +--
 .../cell-recon-preview-popup-header.html      |   5 +-
 .../core/scripts/views/data-table/cell-ui.js  |  35 ++-
 main/webapp/modules/core/styles/common.less   |   2 +-
 .../core/styles/views/data-table-view.less    | 283 +++++++++---------
 6 files changed, 189 insertions(+), 182 deletions(-)

diff --git a/main/webapp/modules/core/images/checks-map.png b/main/webapp/modules/core/images/checks-map.png
index 8e39cbd024d1a8fb56a0a6a75f3a9ef28c74f156..523be784563c16048a0a12fc472e90c5c4fc0080 100644
GIT binary patch
literal 1127
zcmaJ=T}TvB7#$EoEXlH<?1ynAuxNLFOqZEl!`)eP%CTi#NQlaD=B`dQbH|yx?P^dd
z7FHl-1U>~q5B-2(20n-gB}8NpW>7}dLq<^;7--bPc1K<9p>1I1-uvBi&Ufy2zquT)
zJ(!zQkV6neu2d~X@L1@+*;)A8AaKX=uoZ>sQ5}q-gkl4tQiF|vlnkW_M1Z2TwLS&q
z1d&DQ(Rx%b*9a;!yo!tQCJhU-38MT!(o)nGfXGJBq?>-~`^XqY>YATAS}HTL6$H(C
zb-NAf+H0d~dyC3z)PV}JJSkuS10aP=8mCQ1NcyQoT>;PCFinw*5Y*zQmQ2;lVKNA9
zK$dzLkIIxWWEtyaOZNGEzP%*Junf&`G|PEdpHRXH3_~tI6wYRAF(D#WE$6~3Kh=zo
zCD3#tk?<x;ywGl<S)S)z4UY3*gvV(!k&^V7PElGx1deL!7Sf?fx{698j3YmVoh}{0
zuvTPEXSqzcV02QkXx7WPM@j=_`TtPESV21|0#^P0Q`m{NS%8iJ2gYp`UtFxnO=Sr|
z8z>0cQ3y|`s~B#E2s+KsB7=3Mq^zjA>8=;?vMflZgA`K*lIW+ff>+lyA;bjA#E=*e
z_XQZ16{~oWVR_c)3zdp|s45spb494e4Pc@)S6k%<GjiQlFf5!|1h#$#XjL{e$i*WI
zdS)+tM!jXOmf1^XMlOxb(C)?lb<yb%?jCo#(zbZ9()hr{-EQNy9^l3+@Gr43ToVm-
z-<wUPQX><o$5Zp;uNJ<}{`~UtZXe!VgCezccq^46hQ@A>;mCbStc)h7CwdR(j5F(k
zGp|QeH}{*{Q?cu7V(g`Ww3F(+*y4LZf8w{XH;6r4acq13WcF-V-saAZL&euFug@!Z
zNE9_($ZzL6q|Y;1U6<~hntSx?*l1tpn7U`v@Z{Wwq4D{%ZG&%5=E2{E&(|h~`S{#~
z-MA~hKE7cpa`4Ezh1iZCqpfew&Gzm7*du-2az4KI)`JsQrU#?_pP%%<jrLc6d;hC-
ZEkj)G&gpqJ>Dz^E6H=&F90)XY{sFuFgX91J

delta 518
zcmV+h0{Q*t2)G2083+ad0039y!f%lwCw~FjNkl<Zc-riiyGjE=6o${N+1Lm|il~qv
zYGG--AP9?~g(Rq*Z6FU2u<~t$fM8{7C6*Epd;q}*un=q%M2xKe?9L`Tv$xq<L5p4Z
zvSem*@^NOEbC~P8^w*C?|KQ0l!Pr#ce`SoBOE6Z$=Me8+0RbDI4&Kf2koKAI1%Gb9
zCU^&n<hrj00y|(9jKD2od|8G9onH{R=K|gw&%_uk0Efz04LrDfDbX8nq<Ix08_dOw
z?Sf;_@nVMNRe>QGfo=f-2ONQhjsT|;O4tW@0sQn2#1?dwEx5}_`ZxIG$p<aOsN&sF
zwji>N^1<|fbO}yEYjg#I82p@VfPaP1Xre&$O!(=mf-CJUh~E|qY^7~M{F#V~42%S1
zkye%fhn2OXlqe-ii9!;LwZ&Clq>HMHtK2}s@1Cx~c>w|5J#B-v)OF&DotLgxqMj(}
z&tNs?N^W~syF51SmF>y*rYPwLU?wI;-MiYo+QAnPJ&L}erXdi_UxdagU~^CO4Yr0r
zFuy)2U_@u4YCcH<c``(_BC6)TB%qO@aFA0W5(wnWkRM}Nhy(&!8B&Avr9Vi@P<jbp
zlC~fzLz(@A98}JbS#Kd{NUN!d2I(6MBxR^<YD$Te=SP460K4;X`EK(r=l}o!07*qo
IM6N<$f*Tv}&;S4c

diff --git a/main/webapp/modules/core/scripts/views/data-table/cell-editor.html b/main/webapp/modules/core/scripts/views/data-table/cell-editor.html
index e31c70053..4cad83888 100644
--- a/main/webapp/modules/core/scripts/views/data-table/cell-editor.html
+++ b/main/webapp/modules/core/scripts/views/data-table/cell-editor.html
@@ -1,17 +1,29 @@
-<table class="grid-layout layout-tighest layout-full data-table-cell-editor-layout">
-  <tr>
-    <td colspan="5"><textarea class="data-table-cell-editor-editor" bind="textarea" /></td>
-  </tr>
-  <tr>
-    <td width="1%" align="center"><button class="button" bind="okButton">Apply</button><br/><span class="data-table-cell-editor-key">Enter</span></td>
-    <td width="1%" align="center"><button class="button" bind="cancelButton">Cancel</button><br/><span class="data-table-cell-editor-key">Esc</span></td>
-    <td><select bind="typeSelect">
-        <option value="text">text</option>
-        <option value="number">number</option>
-        <option value="boolean">boolean</option>
-        <option value="date">date</option>
-      </select></td>
-    <td width="1%"><input type="checkbox" bind="applyOthersCheckbox" /></td>
-    <td>apply to other cells with<br/>same content <span class="data-table-cell-editor-key">(Ctrl-Enter)</span></td>
-  </tr>
-</table>
\ No newline at end of file
+
+  Data type: <select bind="typeSelect">
+    <option value="text">text</option>
+    <option value="number">number</option>
+    <option value="boolean">boolean</option>
+    <option value="date">date</option>
+  </select>
+
+<textarea class="data-table-cell-editor-editor" bind="textarea" />
+
+<div id="data-table-cell-editor-actions">
+  <div class="data-table-cell-editor-action">
+    <button class="button" bind="okButton">Apply</button>
+    <div class="data-table-cell-editor-key">Enter</div>
+  </div>
+  <div class="data-table-cell-editor-action">
+    <button class="button" bind="okallButton">Apply to All Identical Cells</button>
+    <div class="data-table-cell-editor-key">Ctrl-Enter</div>
+  </div>
+  <div class="data-table-cell-editor-action">
+    <button class="button" bind="cancelButton">Cancel</button>
+    <div class="data-table-cell-editor-key">Esc</div>
+  </div>
+</div>
+
+
+
+
+
diff --git a/main/webapp/modules/core/scripts/views/data-table/cell-recon-preview-popup-header.html b/main/webapp/modules/core/scripts/views/data-table/cell-recon-preview-popup-header.html
index a856cc8c9..0afc0e891 100644
--- a/main/webapp/modules/core/scripts/views/data-table/cell-recon-preview-popup-header.html
+++ b/main/webapp/modules/core/scripts/views/data-table/cell-recon-preview-popup-header.html
@@ -1,4 +1,5 @@
 <div class="data-table-topic-popup-header">
-  <button class="button" title="Match topic to this cell" bind="matchButton">Match</button>
-  <button class="button" title="Match topic to all visible cells with same content" bind="matchSimilarButton">Match Similar</button>
+  <button class="button" title="Match topic to this cell" bind="matchButton">Match this Cell</button>
+  <button class="button" title="Match topic to all visible cells with same content" bind="matchSimilarButton">Match All Identical Cells</button>
+  <button class="button" title="Cancel" bind="cancelButton">Cancel</button>
 </div>
diff --git a/main/webapp/modules/core/scripts/views/data-table/cell-ui.js b/main/webapp/modules/core/scripts/views/data-table/cell-ui.js
index 6af128901..9e2424fff 100644
--- a/main/webapp/modules/core/scripts/views/data-table/cell-ui.js
+++ b/main/webapp/modules/core/scripts/views/data-table/cell-ui.js
@@ -88,10 +88,10 @@ DataTableCellUI.prototype._render = function() {
         var service = (r.service) ? ReconciliationManager.getServiceFromUrl(r.service) : null;
         
         if (r.j == "new") {
-            $('<span>').text(cell.v + " (new topic) ").appendTo(divContent);
+            $('<span>').text(cell.v + "Create new topic").appendTo(divContent);
             
             $('<a href="javascript:{}"></a>')
-                .text("re\u2011match")
+                .text("Choose new match")
                 .addClass("data-table-recon-action")
                 .appendTo(divContent).click(function(evt) {
                     self._doRematch();
@@ -111,7 +111,7 @@ DataTableCellUI.prototype._render = function() {
                 
             $('<span> </span>').appendTo(divContent);
             $('<a href="javascript:{}"></a>')
-                .text("re\u2011match")
+                .text("Choose new match")
                 .addClass("data-table-recon-action")
                 .appendTo(divContent)
                 .click(function(evt) {
@@ -129,7 +129,7 @@ DataTableCellUI.prototype._render = function() {
                         
                         $('<a href="javascript:{}">&nbsp;</a>')
                             .addClass("data-table-recon-match-similar")
-                            .attr("title", "Match this topic to this cell and other cells with the same content")
+                            .attr("title", "Match this topic to this and all identical cells")
                             .appendTo(li).click(function(evt) {
                                 self._doMatchTopicToSimilarCells(candidate);
                             });
@@ -186,7 +186,7 @@ DataTableCellUI.prototype._render = function() {
                 var liNew = $('<div></div>').addClass("data-table-recon-candidate").appendTo(ul);
                 $('<a href="javascript:{}">&nbsp;</a>')
                     .addClass("data-table-recon-match-similar")
-                    .attr("title", "Create a new topic for this cell and other cells with the same content")
+                    .attr("title", "Create a new topic for this and all identical cells")
                     .appendTo(liNew).click(function(evt) {
                         self._doMatchNewTopicToSimilarCells();
                     });
@@ -198,7 +198,7 @@ DataTableCellUI.prototype._render = function() {
                         self._doMatchNewTopicToOneCell();
                     });
                     
-                $('<span>').text("(New topic)").appendTo(liNew);
+                $('<span>').text("Create new topic").appendTo(liNew);
                 
                 var suggestOptions;
                 var addSuggest = false;
@@ -216,7 +216,7 @@ DataTableCellUI.prototype._render = function() {
                             self._searchForMatch(suggestOptions);
                             return false;
                         })
-                        .text("search for match")
+                        .text("Search for match")
                         .appendTo($('<div>').appendTo(divContent));
                 }
             }
@@ -395,13 +395,11 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
 
     var fakeMenu = MenuSystem.createMenu();
     fakeMenu
-        .width(preview.width)
-        .css("background", "none")
-        .css("border", "none")
+        .width(414)
+        .addClass('data-table-topic-popup')
         .html(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-preview-popup-header.html"));
 
     var iframe = $('<iframe></iframe>')
-        .addClass("data-table-topic-popup-iframe")
         .width(preview.width)
         .height(preview.height)
         .attr("src", url)
@@ -419,6 +417,9 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
         self._doMatchTopicToSimilarCells(candidate);
         MenuSystem.dismissAll();
     });
+    elmts.cancelButton.click(function() {
+        MenuSystem.dismissAll();
+    });
 };
 
 DataTableCellUI.prototype._startEdit = function(elmt) {
@@ -435,7 +436,11 @@ DataTableCellUI.prototype._startEdit = function(elmt) {
     
     var commit = function() {
         var type = elmts.typeSelect[0].value;
-        var applyOthers = elmts.applyOthersCheckbox[0].checked;
+        
+        var applyOthers = 0;
+        if (this === elmts.okallButton[0]) {
+          applyOthers = 1;
+        }
         
         var text = elmts.textarea[0].value;
         var value = text;
@@ -502,15 +507,17 @@ DataTableCellUI.prototype._startEdit = function(elmt) {
     };
     
     elmts.okButton.click(commit);
+    elmts.okallButton.click(commit);
     elmts.textarea
         .text(originalContent)
         .keydown(function(evt) {
             if (!evt.shiftKey) {
                 if (evt.keyCode == 13) {
                     if (evt.ctrlKey) {
-                        elmts.applyOthersCheckbox[0].checked = true;
+                        elmts.okallButton.trigger('click');
+                    } else {
+                      elmts.okButton.trigger('click');
                     }
-                    commit();
                 } else if (evt.keyCode == 27) {
                     MenuSystem.dismissAll();
                 }
diff --git a/main/webapp/modules/core/styles/common.less b/main/webapp/modules/core/styles/common.less
index 655304ac1..12dc73294 100644
--- a/main/webapp/modules/core/styles/common.less
+++ b/main/webapp/modules/core/styles/common.less
@@ -292,7 +292,7 @@ a img {
   margin: 0.4em;
 }
 
-input[type="checkbox"], input[type="radio"] {
+input[type="checkbox"], input[type="radio"], select {
     vertical-align: baseline;
 }
 
diff --git a/main/webapp/modules/core/styles/views/data-table-view.less b/main/webapp/modules/core/styles/views/data-table-view.less
index adf4f5426..949a02393 100644
--- a/main/webapp/modules/core/styles/views/data-table-view.less
+++ b/main/webapp/modules/core/styles/views/data-table-view.less
@@ -62,31 +62,31 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   }
 
 .data-table-container {
-    border-top: 1px solid @chrome_primary;
-    overflow: auto;
-}
+  border-top: 1px solid @chrome_primary;
+  overflow: auto;
+  }
 
 .data-table {
-    margin: 0px;
-    padding: 0px;
-    font-size: 1.1em;
-    border-collapse: collapse;
-}
+  margin: 0;
+  padding: 0;
+  font-size: 1.1em;
+  border-collapse: collapse;
+  }
 
 .data-table td {
-    padding: 2px 5px;
-    border-bottom: 1px dotted #ddd;    
-    border-right: 1px solid #ddd;
-}
+  padding: 2px 5px;
+  border-bottom: 1px dotted #ddd;    
+  border-right: 1px solid #ddd;
+  }
 
 
 table.data-table > tbody > tr.even > td {
-    background: @fill_secondary;
-}
+  background: @fill_secondary;
+  }
 
 table.data-table > tbody > tr.contextual > td > div {
-    opacity: 0.3;
-}
+  opacity: 0.3;
+  }
 
 table.data-table td.column-header {
   vertical-align: top;
@@ -98,10 +98,6 @@ table.data-table td.column-header {
   font-weight: bold;
   }
 
-.column-header-title {
-  clear: left;
-  }
-
 .column-header-name {
   margin: 0 0 0 21px;
   padding: 4px 0 0 0;
@@ -119,18 +115,18 @@ a.column-header-menu {
   }
 
 a.column-header-menu:hover {
-    background-position: -17px 0px;
-    text-decoration: none;
-}
+  background-position: -17px 0px;
+  text-decoration: none;
+  }
+  
 .column-header-recon-stats-bar {
-    margin-top: 10px;
-    height: 4px;
-    max-height: 4px;
-    background: #ddd;
-    border: 1px solid #ccc;
-    position: relative;
-    width: 100%;
-}
+  margin-top: 10px;
+  height: 4px;
+  background: #ddd;
+  border: 1px solid #ccc;
+  position: relative;
+  width: 100%;
+  }
 
 .column-header-recon-stats-matched {
   position: absolute;
@@ -177,145 +173,136 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
   }
 
 .data-table-value-nonstring {
-    color: #282;
-}
+  color: #282;
+  }
+
 .data-table-error {
-    color: red;
-}
+  color: red;
+  }
+  
 div.data-table-recon-candidates {
-    margin: 0.5em 0;
-    min-width: 15em;
-    color: #88a;
-}
+  padding: 1px 0;
+  min-width: 15em;
+  color: @metadata_grey;
+  }
+  
 div.data-table-recon-candidate {
-    padding-left: 35px;
-    position: relative;
-}
+  padding: 1px 35px 1px;
+  position: relative;
+  }
 
 a.data-table-recon-topic {
-    text-decoration: none;
-    color: #88a;
-}
-a.data-table-recon-topic:hover {
-    text-decoration: underline;
-    color: #008;
-}
+  color: @link_secondary;
+  }
 
 .data-table-recon-score {
-    color: #aaa;
-    margin: 0 0.5em;
-}
+  color: #aaa;
+  margin: 0 0.5em;
+  }
 
 a.data-table-recon-action, a.data-table-recon-search {
-    font-size: 80%;
-    text-decoration: none;
-    color: #aaf;
-}
-a.data-table-recon-action:hover, a.data-table-recon-search:hover {
-    text-decoration: underline;
-    color: #008;
-}
+  display: block;
+  margin: 3px 0 0;
+  font-size: 0.8em;
+  text-decoration: none;
+  color: @link_secondary;
+  }
 
-a.data-table-recon-match {
-    display: block;
-    width: 16px;
-    height: 16px;
-    background-image: url('../../images/checks-map.png');
-    background-repeat: no-repeat;
-    background-position: -17px 0px;
-    text-decoration: none;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
+a.data-table-recon-match, a.data-table-recon-match-similar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-image: url('../../images/checks-map.png');
+  background-repeat: no-repeat;
+  background-position: -16px 0;
+  text-decoration: none;
+  }
+  
 a.data-table-recon-match:hover {
-    background-position: 0px 0px;
-}
+  background-position: 0 0;
+  }
 
 a.data-table-recon-match-similar {
-    display: block;
-    width: 16px;
-    height: 16px;
-    background-image: url('../../images/checks-map.png');
-    background-repeat: no-repeat;
-    background-position: -17px -17px;
-    text-decoration: none;
-    position: absolute;
-    top: 0px;
-    left: 16px;
-}
+  background-position: -16px -16px;
+  left: 16px;
+  }
+  
 a.data-table-recon-match-similar:hover {
-    background-position: 0px -17px;
-}
+  background-position: 0 -16px;
+  }
 
 a.data-table-star-on, a.data-table-star-off, a.data-table-flag-on, a.data-table-flag-off {
-    display: block;
-    width: 16px;
-    height: 16px;
-    background-image: url('../../images/star-flag-map.png');
-    background-repeat: no-repeat;
-    text-decoration: none;
-}
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-image: url('../../images/star-flag-map.png');
+  background-repeat: no-repeat;
+  text-decoration: none;
+  }
+  
 a.data-table-star-on, a.data-table-star-off:hover {
-    background-position: 0px 0px;
-}
+  background-position: 0 0;
+  }
+
 a.data-table-star-off, a.data-table-star-on:hover {
-    background-position: -17px 0px;
-}
+  background-position: -17px 0;
+  }
+
 a.data-table-flag-on, a.data-table-flag-off:hover {
-    background-position: 0px -17px;
-}
+  background-position: 0 -17px;
+  }
+
 a.data-table-flag-off, a.data-table-flag-on:hover {
-    background-position: -17px -17px;
-}
-
-.data-table-cell-editor {
-    border: 1px solid #aaa;
-    padding: 5px;
-    background: #DBE8EB;
-    -moz-border-radiust: 5px;
-    -webkit-border-radius: 5px;
-}
-table.data-table-cell-editor-layout {
-    white-space: pre;
-}
-
-textarea.data-table-cell-editor-editor {
-    display: block;
-    width: 96%;
-    padding: 2%;
-    height: 3em;
-    font-family: monospace;
-}
-
-span.data-table-cell-editor-key {
-    color: #aaa;
-}
+  background-position: -17px -17px;
+  }
 
+.data-table-cell-editor, .data-table-topic-popup {
+  border: 1px solid @chrome_primary;
+  background: @chrome_secondary;
+  padding: @padding_tight;
+  .rounded_corners();
+  }
+ 
 .data-table-topic-popup-header {
-    padding: 5px;
-    background: #DBE8EB;
-}
-iframe.data-table-topic-popup-iframe {
-    background: #DBE8EB;
-    border: none;
-}
+  padding: 0 0 5px;
+  }
+  
+.data-table-cell-editor-editor {
+  display: block;
+  width: 98%;
+  height: 3em;
+  font-family: monospace;
+  margin: 3px 0;
+  }
+
+.data-table-cell-editor-action {
+  float: left;
+  vertical-align: bottom;
+  text-align: center;
+  }
+
+.data-table-cell-editor-key {
+  font-size: 0.8em;
+  color: @light_grey;
+  }
 
 ul.sorting-dialog-blank-error-positions {
-    margin: 0;
-    padding: 5px;
-    height: 10em;
-    border: 1px solid #ccc;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-}
+  margin: 0;
+  padding: 5px;
+  height: 10em;
+  border: 1px solid #ccc;
+  .rounded_corners(3px);
+  }
+  
 ul.sorting-dialog-blank-error-positions > li {
-    display: block;
-    border: 1px solid #ccc;
-    background: #eee;
-    padding: 5px;
-    margin: 2px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    cursor: move;
-}
\ No newline at end of file
+  display: block;
+  border: 1px solid #ccc;
+  background: #eee;
+  padding: 5px;
+  margin: 2px;
+  .rounded_corners(3px);
+  cursor: move;
+  }
\ No newline at end of file