[view/grid][s]: strip out all the menu stuff as somewhat broken both in UI (overflow not working) and functional terms (transform has changed).

* Felt simpler to remove and possibly reinstate later than try and fix now.
This commit is contained in:
Rufus Pollock 2012-07-08 16:41:34 +01:00
parent 3ad97a82e0
commit 22dd818183
3 changed files with 4 additions and 139 deletions

View File

@ -24,10 +24,6 @@ table.recline-grid {
vertical-align: top;
}
.recline-grid tr td:first-child, .recline-grid tr th:first-child {
width: 20px;
}
.recline-grid tbody tr:last-child {
border-bottom: 1px solid #ccc;
}
@ -37,9 +33,7 @@ table.recline-grid {
}
/* direct borrowing from twitter buttons */
.recline-grid th,
.transform-column-view .expression-preview-table-wrapper th
{
.recline-grid th {
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
@ -189,12 +183,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
* Read-only mode
*********************************************************/
.recline-read-only .recline-grid.no-hidden tr td:first-child,
.recline-read-only .recline-grid.no-hidden tr th:first-child
{
display: none;
}
.recline-read-only .recline-grid .write-op,
.recline-read-only .recline-grid a.data-table-cell-edit
{

View File

@ -29,10 +29,6 @@ my.Grid = Backbone.View.extend({
},
events: {
'click .column-header-menu .data-table-menu li a': 'onColumnHeaderClick',
'click .row-header-menu': 'onRowHeaderClick',
'click .root-header-menu': 'onRootHeaderClick',
'click .data-table-menu li a': 'onMenuClick',
// does not work here so done at end of render function
// 'scroll .recline-grid tbody': 'onHorizontalScroll'
},
@ -40,74 +36,6 @@ my.Grid = Backbone.View.extend({
// ======================================================
// Column and row menus
onColumnHeaderClick: function(e) {
this.tempState.currentColumn = $(e.target).closest('.column-header').attr('data-field');
},
onRowHeaderClick: function(e) {
this.tempState.currentRow = $(e.target).parents('tr:first').attr('data-id');
},
onRootHeaderClick: function(e) {
var tmpl = ' \
{{#columns}} \
<li><a data-action="showColumn" data-column="{{.}}" href="JavaScript:void(0);">Show column: {{.}}</a></li> \
{{/columns}}';
var tmp = Mustache.render(tmpl, {'columns': this.state.get('hiddenFields')});
this.el.find('.root-header-menu .dropdown-menu').html(tmp);
},
onMenuClick: function(e) {
var self = this;
e.preventDefault();
var actions = {
bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.tempState.currentColumn}); },
facet: function() {
self.model.queryState.addFacet(self.tempState.currentColumn);
},
facet_histogram: function() {
self.model.queryState.addHistogramFacet(self.tempState.currentColumn);
},
filter: function() {
self.model.queryState.addTermFilter(self.tempState.currentColumn, '');
},
sortAsc: function() { self.setColumnSort('asc'); },
sortDesc: function() { self.setColumnSort('desc'); },
hideColumn: function() { self.hideColumn(); },
showColumn: function() { self.showColumn(e); },
deleteRow: function() {
var self = this;
var doc = _.find(self.model.records.models, function(doc) {
// important this is == as the currentRow will be string (as comes
// from DOM) while id may be int
return doc.id == self.tempState.currentRow;
});
doc.destroy().then(function() {
self.model.records.remove(doc);
self.trigger('recline:flash', {message: "Row deleted successfully"});
}).fail(function(err) {
self.trigger('recline:flash', {message: "Errorz! " + err});
});
}
};
actions[$(e.target).attr('data-action')]();
},
showTransformColumnDialog: function() {
var self = this;
var view = new my.ColumnTransform({
model: this.model
});
// pass the flash message up the chain
view.bind('recline:flash', function(flash) {
self.trigger('recline:flash', flash);
});
view.state = this.tempState;
view.render();
this.el.append(view.el);
view.el.modal();
},
setColumnSort: function(order) {
var sort = [{}];
sort[0][this.tempState.currentColumn] = {order: order};
@ -141,33 +69,8 @@ my.Grid = Backbone.View.extend({
<table class="recline-grid table-striped table-condensed" cellspacing="0"> \
<thead class="fixed-header"> \
<tr> \
{{#notEmpty}} \
<th class="column-header"> \
<div class="btn-group root-header-menu"> \
<a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> \
<ul class="dropdown-menu data-table-menu"> \
</ul> \
</div> \
<span class="column-header-name"></span> \
</th> \
{{/notEmpty}} \
{{#fields}} \
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
<div class="btn-group column-header-menu"> \
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
<ul class="dropdown-menu data-table-menu pull-right"> \
<li><a data-action="facet" href="JavaScript:void(0);">Term Facet</a></li> \
<li><a data-action="facet_histogram" href="JavaScript:void(0);">Date Histogram Facet</a></li> \
<li><a data-action="filter" href="JavaScript:void(0);">Text Filter</a></li> \
<li class="divider"></li> \
<li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
<li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
<li class="divider"></li> \
<li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
<li class="divider"></li> \
<li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
</ul> \
</div> \
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;" title="{{label}}"> \
<span class="column-header-name">{{label}}</span> \
</th> \
{{/fields}} \
@ -270,14 +173,6 @@ my.GridRow = Backbone.View.extend({
},
template: ' \
<td> \
<div class="btn-group row-header-menu"> \
<a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> \
<ul class="dropdown-menu data-table-menu"> \
<li class="write-op"><a data-action="deleteRow" href="JavaScript:void(0);">Delete this row</a></li> \
</ul> \
</div> \
</td> \
{{#cells}} \
<td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
<div class="data-table-cell-content"> \

View File

@ -2,24 +2,6 @@
module("View - Grid");
test('menu - hideColumn', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.Grid({
model: dataset
});
$('.fixtures .test-datatable').append(view.el);
view.render();
assertPresent('.column-header[data-field="x"]');
var hideColumn = view.el.find('.column-header[data-field="x"] a[data-action="hideColumn"]');
hideColumn.trigger('click');
assertNotPresent('.column-header[data-field="x"]', view.el);
// also test a bit of state
deepEqual(view.state.toJSON(), {hiddenFields: ['x']});
view.remove();
});
test('state', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.Grid({
@ -51,8 +33,8 @@ test('new GridRow View', function () {
view.render();
ok($el.attr('data-id'), '1');
var tds = $el.find('td');
equal(tds.length, 3);
equal($(tds[1]).attr('data-field'), 'a');
equal(tds.length, 2);
equal($(tds[0]).attr('data-field'), 'a');
view.remove();
});