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
This commit is contained in:
James Home
parent
5a17acfd70
commit
3fbefac8e1
Binary file not shown.
|
Before Width: | Height: | Size: 568 B After Width: | Height: | Size: 1.1 KiB |
@ -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>
|
||||
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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:{}"> </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:{}"> </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();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
display: block;
|
||||
border: 1px solid #ccc;
|
||||
background: #eee;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
.rounded_corners(3px);
|
||||
cursor: move;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user