s434730/RandomSec
3
0
Fork 0

UI fixes to table controls, matching dialogs and edit dialogs

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@1614 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-20 23:43:37 +00:00
parent 5a17acfd70
commit 3fbefac8e1
6 changed files with 189 additions and 182 deletions

BIN
main/webapp/modules/core/images/checks-map.png
View File

Binary file not shown.

Before

(image error) Size: 568 B

After

(image error) Size: 1.1 KiB

46
main/webapp/modules/core/scripts/views/data-table/cell-editor.html
View File

@ -1,17 +1,29 @@
<table class="grid-layout layout-tighest layout-full data-table-cell-editor-layout">
<tr> Data type: <select bind="typeSelect">
<td colspan="5"><textarea class="data-table-cell-editor-editor" bind="textarea" /></td> <option value="text">text</option>
</tr> <option value="number">number</option>
<tr> <option value="boolean">boolean</option>
<td width="1%" align="center"><button class="button" bind="okButton">Apply</button><br/><span class="data-table-cell-editor-key">Enter</span></td> <option value="date">date</option>
<td width="1%" align="center"><button class="button" bind="cancelButton">Cancel</button><br/><span class="data-table-cell-editor-key">Esc</span></td> </select>
<td><select bind="typeSelect">
<option value="text">text</option> <textarea class="data-table-cell-editor-editor" bind="textarea" />
<option value="number">number</option>
<option value="boolean">boolean</option> <div id="data-table-cell-editor-actions">
<option value="date">date</option> <div class="data-table-cell-editor-action">
</select></td> <button class="button" bind="okButton">Apply</button>
<td width="1%"><input type="checkbox" bind="applyOthersCheckbox" /></td> <div class="data-table-cell-editor-key">Enter</div>
<td>apply to other cells with<br/>same content <span class="data-table-cell-editor-key">(Ctrl-Enter)</span></td> </div>
</tr> <div class="data-table-cell-editor-action">
</table> <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>

5
main/webapp/modules/core/scripts/views/data-table/cell-recon-preview-popup-header.html
View File

@ -1,4 +1,5 @@
<div class="data-table-topic-popup-header"> <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 this cell" bind="matchButton">Match this Cell</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 all visible cells with same content" bind="matchSimilarButton">Match All Identical Cells</button>
<button class="button" title="Cancel" bind="cancelButton">Cancel</button>
</div> </div>

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

@ -88,10 +88,10 @@ DataTableCellUI.prototype._render = function() {
var service = (r.service) ? ReconciliationManager.getServiceFromUrl(r.service) : null; var service = (r.service) ? ReconciliationManager.getServiceFromUrl(r.service) : null;
if (r.j == "new") { 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>') $('<a href="javascript:{}"></a>')
.text("re\u2011match") .text("Choose new match")
.addClass("data-table-recon-action") .addClass("data-table-recon-action")
.appendTo(divContent).click(function(evt) { .appendTo(divContent).click(function(evt) {
self._doRematch(); self._doRematch();
@ -111,7 +111,7 @@ DataTableCellUI.prototype._render = function() {
$('<span> </span>').appendTo(divContent); $('<span> </span>').appendTo(divContent);
$('<a href="javascript:{}"></a>') $('<a href="javascript:{}"></a>')
.text("re\u2011match") .text("Choose new match")
.addClass("data-table-recon-action") .addClass("data-table-recon-action")
.appendTo(divContent) .appendTo(divContent)
.click(function(evt) { .click(function(evt) {
@ -129,7 +129,7 @@ DataTableCellUI.prototype._render = function() {
$('<a href="javascript:{}">&nbsp;</a>') $('<a href="javascript:{}">&nbsp;</a>')
.addClass("data-table-recon-match-similar") .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) { .appendTo(li).click(function(evt) {
self._doMatchTopicToSimilarCells(candidate); self._doMatchTopicToSimilarCells(candidate);
}); });
@ -186,7 +186,7 @@ DataTableCellUI.prototype._render = function() {
var liNew = $('<div></div>').addClass("data-table-recon-candidate").appendTo(ul); var liNew = $('<div></div>').addClass("data-table-recon-candidate").appendTo(ul);
$('<a href="javascript:{}">&nbsp;</a>') $('<a href="javascript:{}">&nbsp;</a>')
.addClass("data-table-recon-match-similar") .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) { .appendTo(liNew).click(function(evt) {
self._doMatchNewTopicToSimilarCells(); self._doMatchNewTopicToSimilarCells();
}); });
@ -198,7 +198,7 @@ DataTableCellUI.prototype._render = function() {
self._doMatchNewTopicToOneCell(); self._doMatchNewTopicToOneCell();
}); });
$('<span>').text("(New topic)").appendTo(liNew); $('<span>').text("Create new topic").appendTo(liNew);
var suggestOptions; var suggestOptions;
var addSuggest = false; var addSuggest = false;
@ -216,7 +216,7 @@ DataTableCellUI.prototype._render = function() {
self._searchForMatch(suggestOptions); self._searchForMatch(suggestOptions);
return false; return false;
}) })
.text("search for match") .text("Search for match")
.appendTo($('<div>').appendTo(divContent)); .appendTo($('<div>').appendTo(divContent));
} }
} }
@ -395,13 +395,11 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
var fakeMenu = MenuSystem.createMenu(); var fakeMenu = MenuSystem.createMenu();
fakeMenu fakeMenu
.width(preview.width) .width(414)
.css("background", "none") .addClass('data-table-topic-popup')
.css("border", "none")
.html(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-preview-popup-header.html")); .html(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-preview-popup-header.html"));
var iframe = $('<iframe></iframe>') var iframe = $('<iframe></iframe>')
.addClass("data-table-topic-popup-iframe")
.width(preview.width) .width(preview.width)
.height(preview.height) .height(preview.height)
.attr("src", url) .attr("src", url)
@ -419,6 +417,9 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
self._doMatchTopicToSimilarCells(candidate); self._doMatchTopicToSimilarCells(candidate);
MenuSystem.dismissAll(); MenuSystem.dismissAll();
}); });
elmts.cancelButton.click(function() {
MenuSystem.dismissAll();
});
}; };
DataTableCellUI.prototype._startEdit = function(elmt) { DataTableCellUI.prototype._startEdit = function(elmt) {
@ -435,7 +436,11 @@ DataTableCellUI.prototype._startEdit = function(elmt) {
var commit = function() { var commit = function() {
var type = elmts.typeSelect[0].value; 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 text = elmts.textarea[0].value;
var value = text; var value = text;
@ -502,15 +507,17 @@ DataTableCellUI.prototype._startEdit = function(elmt) {
}; };
elmts.okButton.click(commit); elmts.okButton.click(commit);
elmts.okallButton.click(commit);
elmts.textarea elmts.textarea
.text(originalContent) .text(originalContent)
.keydown(function(evt) { .keydown(function(evt) {
if (!evt.shiftKey) { if (!evt.shiftKey) {
if (evt.keyCode == 13) { if (evt.keyCode == 13) {
if (evt.ctrlKey) { if (evt.ctrlKey) {
elmts.applyOthersCheckbox[0].checked = true; elmts.okallButton.trigger('click');
} else {
elmts.okButton.trigger('click');
} }
commit();
} else if (evt.keyCode == 27) { } else if (evt.keyCode == 27) {
MenuSystem.dismissAll(); MenuSystem.dismissAll();
} }

2
main/webapp/modules/core/styles/common.less
View File

@ -292,7 +292,7 @@ a img {
margin: 0.4em; margin: 0.4em;
} }
input[type="checkbox"], input[type="radio"] { input[type="checkbox"], input[type="radio"], select {
vertical-align: baseline; vertical-align: baseline;
} }

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

@ -62,31 +62,31 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
} }
.data-table-container { .data-table-container {
border-top: 1px solid @chrome_primary; border-top: 1px solid @chrome_primary;
overflow: auto; overflow: auto;
} }
.data-table { .data-table {
margin: 0px; margin: 0;
padding: 0px; padding: 0;
font-size: 1.1em; font-size: 1.1em;
border-collapse: collapse; border-collapse: collapse;
} }
.data-table td { .data-table td {
padding: 2px 5px; padding: 2px 5px;
border-bottom: 1px dotted #ddd; border-bottom: 1px dotted #ddd;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
table.data-table > tbody > tr.even > td { table.data-table > tbody > tr.even > td {
background: @fill_secondary; background: @fill_secondary;
} }
table.data-table > tbody > tr.contextual > td > div { table.data-table > tbody > tr.contextual > td > div {
opacity: 0.3; opacity: 0.3;
} }
table.data-table td.column-header { table.data-table td.column-header {
vertical-align: top; vertical-align: top;
@ -98,10 +98,6 @@ table.data-table td.column-header {
font-weight: bold; font-weight: bold;
} }
.column-header-title {
clear: left;
}
.column-header-name { .column-header-name {
margin: 0 0 0 21px; margin: 0 0 0 21px;
padding: 4px 0 0 0; padding: 4px 0 0 0;
@ -119,18 +115,18 @@ a.column-header-menu {
} }
a.column-header-menu:hover { a.column-header-menu:hover {
background-position: -17px 0px; background-position: -17px 0px;
text-decoration: none; text-decoration: none;
} }
.column-header-recon-stats-bar { .column-header-recon-stats-bar {
margin-top: 10px; margin-top: 10px;
height: 4px; height: 4px;
max-height: 4px; background: #ddd;
background: #ddd; border: 1px solid #ccc;
border: 1px solid #ccc; position: relative;
position: relative; width: 100%;
width: 100%; }
}
.column-header-recon-stats-matched { .column-header-recon-stats-matched {
position: absolute; position: absolute;
@ -177,145 +173,136 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
} }
.data-table-value-nonstring { .data-table-value-nonstring {
color: #282; color: #282;
} }
.data-table-error { .data-table-error {
color: red; color: red;
} }
div.data-table-recon-candidates { div.data-table-recon-candidates {
margin: 0.5em 0; padding: 1px 0;
min-width: 15em; min-width: 15em;
color: #88a; color: @metadata_grey;
} }
div.data-table-recon-candidate { div.data-table-recon-candidate {
padding-left: 35px; padding: 1px 35px 1px;
position: relative; position: relative;
} }
a.data-table-recon-topic { a.data-table-recon-topic {
text-decoration: none; color: @link_secondary;
color: #88a; }
}
a.data-table-recon-topic:hover {
text-decoration: underline;
color: #008;
}
.data-table-recon-score { .data-table-recon-score {
color: #aaa; color: #aaa;
margin: 0 0.5em; margin: 0 0.5em;
} }
a.data-table-recon-action, a.data-table-recon-search { a.data-table-recon-action, a.data-table-recon-search {
font-size: 80%; display: block;
text-decoration: none; margin: 3px 0 0;
color: #aaf; font-size: 0.8em;
} text-decoration: none;
a.data-table-recon-action:hover, a.data-table-recon-search:hover { color: @link_secondary;
text-decoration: underline; }
color: #008;
}
a.data-table-recon-match { a.data-table-recon-match, a.data-table-recon-match-similar {
display: block; position: absolute;
width: 16px; top: 0;
height: 16px; left: 0;
background-image: url('../../images/checks-map.png'); display: block;
background-repeat: no-repeat; width: 16px;
background-position: -17px 0px; height: 16px;
text-decoration: none; background-image: url('../../images/checks-map.png');
position: absolute; background-repeat: no-repeat;
top: 0px; background-position: -16px 0;
left: 0px; text-decoration: none;
} }
a.data-table-recon-match:hover { a.data-table-recon-match:hover {
background-position: 0px 0px; background-position: 0 0;
} }
a.data-table-recon-match-similar { a.data-table-recon-match-similar {
display: block; background-position: -16px -16px;
width: 16px; left: 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;
}
a.data-table-recon-match-similar:hover { 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 { a.data-table-star-on, a.data-table-star-off, a.data-table-flag-on, a.data-table-flag-off {
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: url('../../images/star-flag-map.png'); background-image: url('../../images/star-flag-map.png');
background-repeat: no-repeat; background-repeat: no-repeat;
text-decoration: none; text-decoration: none;
} }
a.data-table-star-on, a.data-table-star-off:hover { 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 { 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 { 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 { a.data-table-flag-off, a.data-table-flag-on:hover {
background-position: -17px -17px; 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;
}
.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 { .data-table-topic-popup-header {
padding: 5px; padding: 0 0 5px;
background: #DBE8EB; }
}
iframe.data-table-topic-popup-iframe { .data-table-cell-editor-editor {
background: #DBE8EB; display: block;
border: none; 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 { ul.sorting-dialog-blank-error-positions {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
height: 10em; height: 10em;
border: 1px solid #ccc; border: 1px solid #ccc;
-moz-border-radius: 5px; .rounded_corners(3px);
-webkit-border-radius: 5px; }
}
ul.sorting-dialog-blank-error-positions > li { ul.sorting-dialog-blank-error-positions > li {
display: block; display: block;
border: 1px solid #ccc; border: 1px solid #ccc;
background: #eee; background: #eee;
padding: 5px; padding: 5px;
margin: 2px; margin: 2px;
-moz-border-radius: 5px; .rounded_corners(3px);
-webkit-border-radius: 5px; cursor: move;
cursor: move; }
}