rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Add new "v3" grids, refactor all views to use them

Browse source 
or at least that's the idea..hopefully we caught them all
This commit is contained in:
Lance Edgar 2017-07-07 09:13:53 -05:00
parent f244c2934b
commit 5b1ae27a10
71 changed files with 2679 additions and 2030 deletions
Download patch file Download diff file Expand all files Collapse all files

71
tailbone/static/css/grids3.css Normal file
View file

@ -0,0 +1,71 @@
/********************************************************************************
* grids3.css
*
* Style tweaks for the new grids.
********************************************************************************/
/******************************
* thead
******************************/
.grid3 tr.header td {
border-right: 1px solid black;
border-bottom: 1px solid black;
font-weight: bold;
padding: 2px 3px;
text-align: center;
}
.grid3 tr.header a {
display: block;
padding-right: 18px;
}
.grid3 tr.header .asc,
.grid3 tr.header .dsc {
background-position: right center;
background-repeat: no-repeat;
}
.grid3 tr.header .asc {
background-image: url(../img/sort_arrow_up.png);
}
.grid3 tr.header .dsc {
background-image: url(../img/sort_arrow_down.png);
}
/******************************
* tbody
******************************/
.grid3 tr.odd {
background-color: #e0e0e0;
}
.grid3 tr.even {
background-color: White;
}
/* this is needed only as override? */
.newgrid.grid3 tbody tr:nth-child(odd) {
background-color: White;
}
.newgrid.grid3 tbody tr:nth-child(odd).hovering {
background-color: #bbbbbb;
}
.newgrid.grid3 tr:not(.header).notice.odd {
background-color: #fe8;
}
.newgrid.grid3 tr:not(.header).notice.even {
background-color: #fd6;
}
.newgrid.grid3 tr:not(.header).notice.hovering {
background-color: #ec7;
}

68
tailbone/static/js/jquery.ui.tailbone.js vendored
View file

@ -117,17 +117,31 @@
});
// Refresh data when user clicks a sortable column header.
this.element.on('click', 'thead th.sortable a', function() {
var th = $(this).parent();
var data = {
sortkey: th.data('sortkey'),
sortdir: (th.hasClass('sorted') && th.hasClass('asc')) ? 'desc' : 'asc',
page: 1,
partial: true
};
that.refresh(data);
return false;
});
if (this.grid.hasClass('grid3')) {
this.element.on('click', 'tr.header a', function() {
var td = $(this).parent();
var data = {
sortkey: $(this).data('sortkey'),
sortdir: (td.hasClass('asc')) ? 'desc' : 'asc',
page: 1,
partial: true
};
that.refresh(data);
return false;
});
} else {
this.element.on('click', 'thead th.sortable a', function() {
var th = $(this).parent();
var data = {
sortkey: th.data('sortkey'),
sortdir: (th.hasClass('sorted') && th.hasClass('asc')) ? 'desc' : 'asc',
page: 1,
partial: true
};
that.refresh(data);
return false;
});
}
// Refresh data when user chooses a new page size setting.
this.element.on('change', '.pager #pagesize', function() {
@ -145,15 +159,39 @@
});
// Add hover highlight effect to grid rows during mouse-over.
this.element.on('mouseenter', 'tbody tr', function() {
this.element.on('mouseenter', 'tbody tr:not(.header)', function() {
$(this).addClass('hovering');
});
this.element.on('mouseleave', 'tbody tr', function() {
this.element.on('mouseleave', 'tbody tr:not(.header)', function() {
$(this).removeClass('hovering');
});
// Do some extra stuff for grids with checkboxes.
if (this.grid.hasClass('selectable')) {
// do some extra stuff for grids with checkboxes
if (this.grid.hasClass('grid3')) {
// (un-)check all rows when clicking check-all box in header
if (this.grid.find('tr.header td.checkbox input').length) {
this.element.on('click', 'tr.header td.checkbox input', function() {
var checked = $(this).prop('checked');
that.grid.find('tr:not(.header) td.checkbox input').prop('checked', checked);
});
}
// Select current row when clicked, unless clicking checkbox
// (since that already does select the row) or a link (since
// that does something completely different).
this.element.on('click', '.newgrid tr:not(.header) td.checkbox input', function(event) {
event.stopPropagation();
});
this.element.on('click', '.newgrid tr:not(.header) a', function(event) {
event.stopPropagation();
});
this.element.on('click', '.newgrid tr:not(.header)', function() {
$(this).find('td.checkbox input').click();
});
} else if (this.grid.hasClass('selectable')) { // pre-v3 newgrid.selectable
// (Un-)Check all rows when clicking check-all box in header.
this.element.on('click', 'thead th.checkbox input', function() {

12
tailbone/static/js/tailbone.js
View file

@ -323,18 +323,6 @@ $(function() {
});
});
/*
* TODO: this should be deprecated; for old grids only?
* Add "check all" functionality to tables with checkboxes.
*/
$('body').on('click', '.grid thead th.checkbox input[type="checkbox"]', function() {
var table = $(this).parents('table:first');
var checked = $(this).prop('checked');
table.find('tbody tr').each(function() {
$(this).find('td.checkbox input[type="checkbox"]').prop('checked', checked);
});
});
$('body').on('click', 'div.dialog button.close', function() {
var dialog = $(this).parents('div.dialog:first');