Re-laid out 'cell search for match' dialog so buttons wouldn't be obscured by suggest dropdown. Also added 'new' button. Made sure history widget is always scrolled to the 'done upto here' bar.

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

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

@@ -1,18 +1,26 @@
-<div class="dialog-frame" style="width: 400px;">
+<div class="dialog-frame" style="width: 450px;">
   <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>
+      <div class="grid-layout layout-tighter"><table>
-        <tr><td colspan="2">Search Freebase for topic to match <span bind="cellTextSpan"></span></td></tr>
         <tr>
+          <td colspan="2">Search for "<span bind="cellTextSpan"></span>"</td>
           <td><input bind="input" /></td>
-          <td><input type="checkbox" checked="true" bind="checkSimilar" /> Match other cells with same content</td>
+        </tr>
+        <tr>
+          <td width="1%"><input type="radio" name="cell-recon-search-for-match-mode" checked="true" bind="radioSimilar" /></td>
+          <td>Match other cells with same content</td>
+        </tr>
+        <tr>
+          <td width="1%"><input type="radio" name="cell-recon-search-for-match-mode" bind="radioOne" /></td>
+          <td>Match this cell only</td>
         </tr>
       </table></div>
     </div>
     <div class="dialog-footer" bind="dialogFooter">
-      <button bind="okButton">Match</button>
+      <button class="button button-primary" bind="okButton">Match</button>
-      <button bind="cancelButton">Cancel</button>
+      <button class="button" bind="newButton">New</button>
+      <button class="button" bind="cancelButton">Cancel</button>
     </div>
   </div>
 </div>

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

@@ -271,7 +271,7 @@ DataTableCellUI.prototype._searchForMatch = function(suggestOptions) {
                 }).join(",")
             };
             
-            if (elmts.checkSimilar[0].checked) {
+            if (elmts.radioSimilar[0].checked) {
                 params.similarValue = self._cell.v;
                 params.columnName = Refine.cellIndexToColumn(self._cellIndex).name;
 
@@ -282,19 +282,30 @@ DataTableCellUI.prototype._searchForMatch = function(suggestOptions) {
 
                 self._postProcessOneCell("recon-judge-one-cell", {}, params, true);
             }
-
+            
-            DialogSystem.dismissUntil(level - 1);
+            dismiss();
         }
     };
+    var commitNew = function() {
+        if (elmts.radioSimilar[0].checked) {
+            self._doMatchNewTopicToSimilarCells();
+        } else {
+            self._doMatchNewTopicToOneCell();
+        }
+        dismiss();
+    };
     
     elmts.okButton.click(commit);
-    elmts.cancelButton.click(function() { DialogSystem.dismissUntil(level - 1); });
+    elmts.newButton.click(commitNew);
+    elmts.cancelButton.click(dismiss);
     
     var level = DialogSystem.showDialog(frame);
+    var dismiss = function() { DialogSystem.dismissUntil(level - 1); };
     
+    var suggestOptions2 = $.extend({ align: "left" }, suggestOptions || { all_types: true });
     elmts.input
         .attr("value", this._cell.v)
-        .suggest(suggestOptions || { all_types: true })
+        .suggest(suggestOptions2)
         .bind("fb-select", function(e, data) {
             match = data;
             commit();

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

@@ -7,9 +7,14 @@ function HistoryWidget(div, tabHeader) {
 HistoryWidget.prototype.resize = function() {
     var body = this._div.find(".history-panel-body");
     var controls = this._div.find(".history-panel-controls");
-    var bodyPaddings = body.outerHeight(true) - body.height();
+    var nowDiv = this._div.find(".history-now");
     
-    body.css("height", (this._div.height() - controls.outerHeight(true) - bodyPaddings) + "px");
+    var bodyPaddings = body.outerHeight(true) - body.height();
+    body.height((this._div.height() - controls.outerHeight(true) - bodyPaddings) + "px");
+    body[0].scrollTop = 
+        nowDiv[0].offsetTop + 
+        nowDiv[0].offsetHeight - 
+        body[0].offsetHeight;
 };
 
 HistoryWidget.prototype.update = function(onDone) {
@@ -54,7 +59,7 @@ HistoryWidget.prototype._render = function() {
     
     var elmts = DOM.bind(this._div);
     
-    var renderEntry = function(container, entry, lastDoneID, title) {
+    var renderEntry = function(container, index, entry, lastDoneID, title) {
         var a = $('<a href="javascript:{}"></a>').appendTo(container);
         a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
             return self._onClickHistoryEntry(evt, entry, lastDoneID);
@@ -68,7 +73,7 @@ HistoryWidget.prototype._render = function() {
         } else {
             for (var i = 0; i < this._data.past.length; i++) {
                 var entry = this._data.past[i];
-                renderEntry(elmts.pastDiv, entry, i === 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
+                renderEntry(elmts.pastDiv, i, entry, i === 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
             }
         }
     
@@ -77,7 +82,7 @@ HistoryWidget.prototype._render = function() {
         } else {
             for (var i = 0; i < this._data.future.length; i++) {
                 var entry = this._data.future[i];
-                renderEntry(elmts.futureDiv, entry, entry.id, "Redo to here");
+                renderEntry(elmts.futureDiv, this._data.past.length + i, entry, entry.id, "Redo to here");
             }
         }
         
@@ -90,11 +95,6 @@ HistoryWidget.prototype._render = function() {
     elmts.applyLink.click(function() { self._showApplyOperationsDialog(); });
     
     this.resize();
-    
-    elmts.bodyDiv[0].scrollTop = 
-        elmts.nowDiv[0].offsetTop + 
-        elmts.nowDiv[0].offsetHeight - 
-        elmts.bodyDiv[0].offsetHeight;
 };
 
 HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {

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

@@ -63,6 +63,7 @@
 .history-panel-body {
     background: #fff;
     overflow: auto;
+    border-top: 1px solid @chrome_primary;
 }
 
 .history-panel-message {

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

@@ -49,7 +49,6 @@
 }
 
 .dialog-footer button {
-    margin-left: 5px;
 }
 
 .dialog-busy-frame {