knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#46,view-grid,view-transform-dialog][s]: switch ColumnTransform to work off bootstrap modal.

Browse Source
This commit is contained in:
Rufus Pollock
2012-04-26 21:20:59 +01:00
parent 81dc7eab2b
commit 9c0c4dfae3
3 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/grid.css
View File

@@ -210,10 +210,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
* Transform Dialog * Transform Dialog
*********************************************************/ *********************************************************/
#expression-preview-tabs .ui-tabs-nav li a {
padding: 0.15em 1em;
}
textarea.expression-preview-code { textarea.expression-preview-code {
font-family: monospace; font-family: monospace;
height: 5em; height: 5em;

10
src/view-grid.js
View File

@@ -104,19 +104,13 @@ my.Grid = Backbone.View.extend({
}, },
showTransformColumnDialog: function() { showTransformColumnDialog: function() {
var $el = $('.dialog-content');
util.show('dialog');
var view = new my.ColumnTransform({ var view = new my.ColumnTransform({
model: this.model model: this.model
}); });
view.state = this.tempState; view.state = this.tempState;
view.render(); view.render();
$el.empty(); this.el.append(view.el);
$el.append(view.el); view.el.modal();
util.observeExit($el, function() {
util.hide('dialog');
});
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
}, },
showTransformDialog: function() { showTransformDialog: function() {

19
src/view-transform-dialog.js
View File

@@ -76,12 +76,13 @@ my.DataTransform = Backbone.View.extend({
// View (Dialog) for doing data transformations (on columns of data). // View (Dialog) for doing data transformations (on columns of data).
my.ColumnTransform = Backbone.View.extend({ my.ColumnTransform = Backbone.View.extend({
className: 'transform-column-view', className: 'transform-column-view modal fade in',
template: ' \ template: ' \
<div class="dialog-header"> \ <div class="modal-header"> \
Functional transform on column {{name}} \ <a class="close" data-dismiss="modal">×</a> \
<h3>Functional transform on column {{name}}</h3> \
</div> \ </div> \
<div class="dialog-body"> \ <div class="modal-body"> \
<div class="grid-layout layout-tight layout-full"> \ <div class="grid-layout layout-tight layout-full"> \
<table> \ <table> \
<tbody> \ <tbody> \
@@ -107,10 +108,10 @@ my.ColumnTransform = Backbone.View.extend({
</tr> \ </tr> \
<tr> \ <tr> \
<td colspan="4"> \ <td colspan="4"> \
<div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> \ <div id="expression-preview-tabs"> \
<span>Preview</span> \ <span>Preview</span> \
<div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> \ <div id="expression-preview-tabs-preview"> \
<div class="expression-preview-container" style="width: 652px; "> \ <div class="expression-preview-container"> \
</div> \ </div> \
</div> \ </div> \
</div> \ </div> \
@@ -125,7 +126,7 @@ my.ColumnTransform = Backbone.View.extend({
</table> \ </table> \
</div> \ </div> \
</div> \ </div> \
<div class="dialog-footer"> \ <div class="modal-footer"> \
<button class="okButton btn primary">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button> \ <button class="okButton btn primary">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button> \
<button class="cancelButton btn danger">Cancel</button> \ <button class="cancelButton btn danger">Cancel</button> \
</div> \ </div> \
@@ -161,7 +162,7 @@ my.ColumnTransform = Backbone.View.extend({
my.notify("Error with function! " + editFunc.errorMessage); my.notify("Error with function! " + editFunc.errorMessage);
return; return;
} }
util.hide('dialog'); this.el.modal('hide');
my.notify("Updating all visible docs. This could take a while...", {persist: true, loader: true}); my.notify("Updating all visible docs. This could take a while...", {persist: true, loader: true});
var docs = self.model.currentDocuments.map(function(doc) { var docs = self.model.currentDocuments.map(function(doc) {
return doc.toJSON(); return doc.toJSON();