Re-worked buttons in schema alignment dialog and added change indicator

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1687 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-10-25 20:05:48 +00:00
parent 76fe6a963b
commit 96b41450da
4 changed files with 36 additions and 12 deletions

View File

@ -166,11 +166,13 @@ SchemaAlignment.createNewRootNode = function() {
function SchemaAlignmentDialog(protograph, onDone) { function SchemaAlignmentDialog(protograph, onDone) {
this._onDone = onDone; this._onDone = onDone;
this._hasUnsavedChanges = false;
this._createDialog(); this._createDialog();
this._reset(protograph); this._reset(protograph, true);
} }
SchemaAlignmentDialog.prototype._reset = function(protograph) { SchemaAlignmentDialog.prototype._reset = function(protograph, initial) {
this._originalProtograph = protograph || { rootNodes: [] }; this._originalProtograph = protograph || { rootNodes: [] };
this._protograph = cloneDeep(this._originalProtograph); // this is what can be munched on this._protograph = cloneDeep(this._originalProtograph); // this is what can be munched on
@ -193,10 +195,11 @@ SchemaAlignmentDialog.prototype._reset = function(protograph) {
)); ));
} }
this.preview(); this.preview(initial);
}; };
SchemaAlignmentDialog.prototype._save = function(onDone) { SchemaAlignmentDialog.prototype._save = function(onDone) {
var self = this;
var protograph = this.getJSON(); var protograph = this.getJSON();
Refine.postProcess( Refine.postProcess(
@ -208,7 +211,11 @@ SchemaAlignmentDialog.prototype._save = function(onDone) {
{ {
onDone: function() { onDone: function() {
theProject.overlayModels.freebaseProtograph = protograph; theProject.overlayModels.freebaseProtograph = protograph;
onDone();
self._elmts.statusIndicator.hide();
self._hasUnsavedChanges = false;
if (onDone) onDone();
} }
} }
); );
@ -217,7 +224,7 @@ SchemaAlignmentDialog.prototype._save = function(onDone) {
SchemaAlignmentDialog.prototype._createDialog = function() { SchemaAlignmentDialog.prototype._createDialog = function() {
var self = this; var self = this;
var frame = $(DOM.loadHTML("freebase", "scripts/dialogs/schema-alignment/schema-alignment-dialog.html")); var frame = $(DOM.loadHTML("freebase", "scripts/dialogs/schema-alignment/schema-alignment-dialog.html"));
var elmts = DOM.bind(frame); var elmts = this._elmts = DOM.bind(frame);
this._level = DialogSystem.showDialog(frame); this._level = DialogSystem.showDialog(frame);
@ -225,8 +232,8 @@ SchemaAlignmentDialog.prototype._createDialog = function() {
DialogSystem.dismissUntil(self._level - 1); DialogSystem.dismissUntil(self._level - 1);
}; };
elmts.saveAndCloseButton.click(function() { elmts.saveButton.click(function() {
self._save(dismiss); self._save();
}); });
elmts.saveAndLoadButton.click(function() { elmts.saveAndLoadButton.click(function() {
self._save(function() { self._save(function() {
@ -237,7 +244,11 @@ SchemaAlignmentDialog.prototype._createDialog = function() {
elmts.resetButton.click(function() { elmts.resetButton.click(function() {
self._reset(null); self._reset(null);
}); });
elmts.cancelButton.click(dismiss); elmts.closeButton.click(function() {
if (!self._hasUnsavedChanges || window.confirm("There are unsaved changes. Close anyway?")) {
dismiss();
}
});
$("#schema-alignment-tabs").tabs(); $("#schema-alignment-tabs").tabs();
$("#schema-alignment-tabs-preview-mqllike").css("display", ""); $("#schema-alignment-tabs-preview-mqllike").css("display", "");
@ -263,10 +274,14 @@ SchemaAlignmentDialog.prototype.getJSON = function() {
}; };
}; };
SchemaAlignmentDialog.prototype.preview = function() { SchemaAlignmentDialog.prototype.preview = function(initial) {
var self = this; var self = this;
this._previewPanes.empty(); this._previewPanes.empty();
if (!(initial)) {
this._elmts.statusIndicator.show().text("There are unsaved changes.");
this._hasUnsavedChanges = true;
}
var protograph = this.getJSON(); var protograph = this.getJSON();
$.post( $.post(

View File

@ -25,12 +25,17 @@
</div> </div>
<div class="dialog-footer" bind="dialogFooter"><div class="grid-layout layout-normal layout-full"><table><tr> <div class="dialog-footer" bind="dialogFooter"><div class="grid-layout layout-normal layout-full"><table><tr>
<td> <td>
<button class="button" bind="cancelButton">Cancel</button>
<button class="button" bind="resetButton">Reset</button> <button class="button" bind="resetButton">Reset</button>
</td> </td>
<td style="text-align:right;"> <td style="text-align:right;">
<button class="button button-primary" bind="saveAndCloseButton">Save &amp; Close</button> <button class="button button-primary" bind="saveButton">Save</button>
<button class="button" bind="saveAndLoadButton">Save &amp; Load</button> <button class="button" bind="saveAndLoadButton">Save &amp; Load</button>
</td> </td>
<td style="text-align:center;" width="30%">
<span class="schema-alignment-status-indicator" bind="statusIndicator"></span>
</td>
<td style="text-align:right;" width="1%">
<button class="button" bind="closeButton">Close</button>
</td>
</tr></table></div></div> </tr></table></div></div>
</div> </div>

View File

@ -265,6 +265,7 @@ SchemaAlignmentDialog.UILink.prototype._showPropertySuggestPopup = function(elmt
if (suggestions.length > 0) { if (suggestions.length > 0) {
divSearch = $('<div>') divSearch = $('<div>')
.addClass("schema-alignment-link-menu-section") .addClass("schema-alignment-link-menu-section")
.css("margin-bottom", "2em")
.html('<div>Search for a property or pick one below</div>').appendTo(menu); .html('<div>Search for a property or pick one below</div>').appendTo(menu);
var createSuggestion = function(suggestion) { var createSuggestion = function(suggestion) {

View File

@ -111,6 +111,10 @@ div.schema-alignment-dialog-preview {
font-size: 9pt; font-size: 9pt;
} }
.schema-alignment-status-indicator {
color: #red;
}
/*-------------------------------------------------- /*--------------------------------------------------
* Node dialog * Node dialog
*-------------------------------------------------- *--------------------------------------------------
@ -138,7 +142,6 @@ div.schema-alignment-dialog-preview {
.schema-alignment-link-menu-section { .schema-alignment-link-menu-section {
padding: 8px; padding: 8px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 3px;
} }
.schema-alignment-link-menu-section-last { .schema-alignment-link-menu-section-last {