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

Final grid refactor for all templates and CSS/JS (newgrid -> grid)

Browse source
This commit is contained in:
Lance Edgar 2017-07-14 21:15:22 -05:00
parent c57e2e17cc
commit 292546e44b
26 changed files with 329 additions and 687 deletions
Download patch file Download diff file Expand all files Collapse all files

281
tailbone/static/css/grids.css
View file

@ -1,179 +1,278 @@
/********************************************************************************
* grids.css
*
* Style tweaks for the new grids.
********************************************************************************/
/******************************
* Grid Header
* header table
******************************/
table.grid-header {
padding-bottom: 5px;
.grid-wrapper .grid-header td.filters {
vertical-align: bottom;
width: 100%;
}
.grid-wrapper .grid-header td.menu {
padding: 0.5em;
vertical-align: top;
white-space: nowrap;
}
/******************************
* Form (Filters etc.)
******************************/
table.grid-header td.form {
.grid-wrapper .grid-header td.tools {
margin: 0;
padding: 0;
vertical-align: bottom;
white-space: nowrap;
}
.grid-wrapper .grid-header td.tools p {
line-height: 2em;
margin: 0;
padding: 0 0.5em 0 0;
}
.grid-wrapper .grid-header td.tools form {
display: inline-block;
}
/******************************
* Context Menu
* filters
******************************/
table.grid-header td.context-menu {
.grid-wrapper .newfilters {
margin: 0;
}
.grid-wrapper .newfilters fieldset {
margin: 0;
padding: 1px 5px 5px 5px;
width: 80%;
}
.grid-wrapper .newfilters .filter {
margin-bottom: 2px;
}
.grid-wrapper .newfilters .filter:last-child {
margin-bottom: 0;
}
.grid-wrapper .newfilters .filter .toggle {
margin: 0;
text-align: left;
width: 15em;
}
.grid-wrapper .newfilters .ui-button-text {
line-height: 1.4em;
}
.grid-wrapper .ui-button-text-icon-primary .ui-button-text {
padding: 0.2em 1em 0.2em 2.1em;
}
.grid-wrapper .ui-selectmenu-button .ui-selectmenu-text {
padding: 0.2em 2.1em 0.2em 1em;
}
.grid-wrapper .newfilters .filter label {
font-weight: bold;
padding: 0.4em 0.2em;
position: relative;
top: -14px;
}
.grid-wrapper .newfilters .filter .value {
display: inline-block;
vertical-align: top;
}
table.grid-header td.context-menu ul {
list-style-type: none;
margin: 0px;
text-align: right;
.grid-wrapper .newfilters .filter .value input {
height: 19px;
}
table.grid-header td.context-menu ul li {
line-height: 2em;
.grid-wrapper .newfilters .filter .inputs {
display: inline-block;
/* TODO: Would be nice not to hard-code a height here... */
height: 26px;
vertical-align: top;
}
/******************************
* Tools
******************************/
table.grid-header td.tools {
padding-bottom: 10px;
text-align: right;
vertical-align: bottom;
.grid-wrapper .newfilters .buttons {
margin: 0.5em 0 0 0;
padding: 0;
}
table.grid-header td.tools div.buttons button {
margin-left: 5px;
.grid-wrapper .newfilters #add-filter-button {
margin-right: 5px;
vertical-align: middle;
}
/******************************
* Grid
* table
******************************/
div.grid {
.grid {
clear: both;
margin-top: 1em;
}
div.grid table {
background-color: White;
border-top: 1px solid black;
border-left: 1px solid black;
.grid.no-border {
margin-top: 0;
}
.grid table {
background-color: white;
border: 1px solid black;
border-collapse: collapse;
font-size: 9pt;
font-size: 10pt;
line-height: normal;
white-space: nowrap;
}
div.grid.full table {
.grid.full table {
width: 100%;
}
div.grid.no-border table {
.grid.half table {
width: 50%;
}
.grid.no-border table {
border-left: none;
border-top: none;
}
div.grid table th,
div.grid table td {
/******************************
* thead
******************************/
.grid tr.header td {
border-right: 1px solid black;
border-bottom: 1px solid black;
font-weight: bold;
padding: 2px 3px;
text-align: center;
}
div.grid table th.sortable a {
/* .grid table thead th:last-child { */
/* border-right: none; */
/* } */
.grid tr.header a {
display: block;
padding-right: 18px;
}
div.grid table th.sorted {
.grid tr.header .asc,
.grid tr.header .dsc {
background-position: right center;
background-repeat: no-repeat;
}
div.grid table th.sorted.asc {
.grid tr.header .asc {
background-image: url(../img/sort_arrow_up.png);
}
div.grid table th.sorted.desc {
.grid tr.header .dsc {
background-image: url(../img/sort_arrow_down.png);
}
div.grid table tbody td {
text-align: left;
/******************************
* tbody
******************************/
.grid tbody td {
padding: 5px 6px;
}
div.grid table tbody td.center {
text-align: center;
.grid.selectable tbody td {
cursor: default;
}
div.grid table tbody td.right {
float: none;
text-align: right;
}
div.grid table tr.odd {
.grid tr.odd {
background-color: #e0e0e0;
}
div.grid table tbody tr.hovering {
.grid tr:not(.header).hovering {
background-color: #bbbbbb;
}
div.grid table tbody tr td.checkbox {
.grid tr:not(.header).warning.odd {
background-color: #fcc;
}
.grid tr:not(.header).warning.even {
background-color: #ebb;
}
.grid tr:not(.header).warning.hovering {
background-color: #daa;
}
.grid tr:not(.header).notice.odd {
background-color: #fe8;
}
.grid tr:not(.header).notice.even {
background-color: #fd6;
}
.grid tr:not(.header).notice.hovering {
background-color: #ec7;
}
.grid tr:not(.header) td.checkbox {
text-align: center;
}
div.grid table tbody tr td.view,
div.grid table tbody tr td.edit,
div.grid table tbody tr td.save,
div.grid table tbody tr td.delete {
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
min-width: 18px;
text-align: center;
width: 18px;
/******************************
* main actions
******************************/
.grid .actions {
width: 1px;
}
div.grid table tbody tr td.view {
background-image: url(../img/view.png);
.grid .actions a {
margin: 0 5px 0 0;
position: relative;
top: -2px;
}
div.grid table tbody tr td.edit {
background-image: url(../img/edit.png);
.grid .actions a:last-child {
margin: 0;
}
div.grid table tbody tr td.save {
background-image: url(../img/save.png);
.grid .actions .ui-icon {
display: inline-block;
position: relative;
top: 3px;
}
div.grid table tbody tr td.delete {
background-image: url(../img/delete.png);
/******************************
* more actions
******************************/
.grid .actions div.more {
background-color: white;
border: 1px solid black;
display: none;
padding: 3px 10px 3px 5px;
position: absolute;
z-index: 1;
}
div.pager {
margin-bottom: 20px;
margin-top: 5px;
}
div.pager p {
font-size: 10pt;
margin: 0px;
}
div.pager p.showing {
float: left;
}
div.pager #grid-page-count {
font-size: 8pt;
}
div.pager p.page-links {
float: right;
.grid .actions .more a {
display: block;
padding: 2px 0;
}

75
tailbone/static/css/grids3.css
View file

@ -1,75 +0,0 @@
/********************************************************************************
* 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;
}
.newgrid.grid3 tr:not(.header).hovering {
background-color: #bbbbbb;
}
.newgrid.grid3 tr:not(.header).warning.odd {
background-color: #fcc;
}
.newgrid.grid3 tr:not(.header).warning.even {
background-color: #ebb;
}
.newgrid.grid3 tr:not(.header).warning.hovering {
background-color: #daa;
}
.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;
}

275
tailbone/static/css/newgrids.css
View file

@ -1,275 +0,0 @@
/********************************************************************************
* newgrids.css
*
* Style tweaks for the new grids.
********************************************************************************/
/******************************
* header table
******************************/
.newgrid-wrapper .grid-header td.filters {
vertical-align: bottom;
width: 100%;
}
.newgrid-wrapper .grid-header td.menu {
padding: 0.5em;
vertical-align: top;
white-space: nowrap;
}
.newgrid-wrapper .grid-header td.tools {
margin: 0;
padding: 0;
vertical-align: bottom;
white-space: nowrap;
}
.newgrid-wrapper .grid-header td.tools p {
line-height: 2em;
margin: 0;
padding: 0 0.5em 0 0;
}
.newgrid-wrapper .grid-header td.tools form {
display: inline-block;
}
/******************************
* filters
******************************/
.newgrid-wrapper .newfilters {
margin: 0;
}
.newgrid-wrapper .newfilters fieldset {
margin: 0;
padding: 1px 5px 5px 5px;
width: 80%;
}
.newgrid-wrapper .newfilters .filter {
margin-bottom: 2px;
}
.newgrid-wrapper .newfilters .filter:last-child {
margin-bottom: 0;
}
.newgrid-wrapper .newfilters .filter .toggle {
margin: 0;
text-align: left;
width: 15em;
}
.newgrid-wrapper .newfilters .ui-button-text {
line-height: 1.4em;
}
.newgrid-wrapper .ui-button-text-icon-primary .ui-button-text {
padding: 0.2em 1em 0.2em 2.1em;
}
.newgrid-wrapper .ui-selectmenu-button .ui-selectmenu-text {
padding: 0.2em 2.1em 0.2em 1em;
}
.newgrid-wrapper .newfilters .filter label {
font-weight: bold;
padding: 0.4em 0.2em;
position: relative;
top: -14px;
}
.newgrid-wrapper .newfilters .filter .value {
display: inline-block;
vertical-align: top;
}
.newgrid-wrapper .newfilters .filter .value input {
height: 19px;
}
.newgrid-wrapper .newfilters .filter .inputs {
display: inline-block;
/* TODO: Would be nice not to hard-code a height here... */
height: 26px;
vertical-align: top;
}
.newgrid-wrapper .newfilters .buttons {
margin: 0.5em 0 0 0;
padding: 0;
}
.newgrid-wrapper .newfilters #add-filter-button {
margin-right: 5px;
vertical-align: middle;
}
/******************************
* table
******************************/
.newgrid {
clear: both;
margin-top: 1em;
}
.newgrid.no-border {
margin-top: 0;
}
.newgrid table {
background-color: white;
border: 1px solid black;
border-collapse: collapse;
font-size: 10pt;
line-height: normal;
white-space: nowrap;
}
.newgrid.full table {
width: 100%;
}
.newgrid.half table {
width: 50%;
}
.newgrid.no-border table {
border-left: none;
border-top: none;
}
/******************************
* thead
******************************/
.newgrid table thead th {
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 2px 3px;
}
.newgrid table thead th:last-child {
border-right: none;
}
.newgrid table thead th.sortable a {
display: block;
padding-right: 18px;
}
.newgrid table thead th.sorted {
background-position: right center;
background-repeat: no-repeat;
}
.newgrid table thead th.sorted.asc {
background-image: url(../img/sort_arrow_up.png);
}
.newgrid table thead th.sorted.desc {
background-image: url(../img/sort_arrow_down.png);
}
/******************************
* tbody
******************************/
.newgrid tbody td {
padding: 5px 6px;
}
.newgrid.selectable tbody td {
cursor: default;
}
/* .newgrid tbody tr:nth-child(odd) { */
/* background-color: #e0e0e0; */
/* } */
/* .newgrid tbody tr.hovering { */
/* background-color: #bbbbbb; */
/* } */
/* .newgrid tbody tr.notice { */
/* background-color: #fd6; */
/* } */
/* .newgrid tbody tr.notice:nth-child(odd) { */
/* background-color: #fe8; */
/* } */
/* .newgrid tbody tr.notice.hovering { */
/* background-color: #ec7; */
/* } */
/* .newgrid tbody tr.warning { */
/* background-color: #fcc; */
/* } */
/* .newgrid tbody tr.warning:nth-child(odd) { */
/* background-color: #ebb; */
/* } */
/* .newgrid tbody tr.warning.hovering { */
/* background-color: #daa; */
/* } */
.newgrid tbody td.checkbox {
text-align: center;
}
/******************************
* main actions
******************************/
.newgrid .actions {
width: 1px;
}
.newgrid .actions a {
margin: 0 5px 0 0;
position: relative;
top: -2px;
}
.newgrid .actions a:last-child {
margin: 0;
}
.newgrid .actions .ui-icon {
display: inline-block;
position: relative;
top: 3px;
}
/******************************
* more actions
******************************/
.newgrid .actions div.more {
background-color: white;
border: 1px solid black;
display: none;
padding: 3px 10px 3px 5px;
position: absolute;
z-index: 1;
}
.newgrid .actions .more a {
display: block;
padding: 2px 0;
}

2
tailbone/static/css/theme-better.css
View file

@ -25,7 +25,7 @@ a {
padding-left: 5em;
}
.newgrid-wrapper .grid-header #context-menu {
.grid-wrapper .grid-header #context-menu {
float: none;
margin: 0;
}

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

@ -23,7 +23,7 @@
this.default_filters = this.filters.find('#default-filters');
this.clear_filters = this.filters.find('#clear-filters');
this.save_defaults = this.filters.find('#save-defaults');
this.grid = this.element.find('.newgrid');
this.grid = this.element.find('.grid');
// Enhance filters etc.
this.filters.find('.filter').gridfilter();
@ -117,31 +117,17 @@
});
// Refresh data when user clicks a sortable column header.
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;
});
}
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;
});
// Refresh data when user chooses a new page size setting.
this.element.on('change', '.pager #pagesize', function() {
@ -167,52 +153,29 @@
});
// 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() {
// (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('tbody td.checkbox input').prop('checked', 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', 'tbody td.checkbox input', function(event) {
event.stopPropagation();
});
this.element.on('click', 'tbody a', function(event) {
event.stopPropagation();
});
this.element.on('click', 'tbody tr', function() {
$(this).find('td.checkbox input').click();
});
}
// 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', '.grid tr:not(.header) td.checkbox input', function(event) {
event.stopPropagation();
});
this.element.on('click', '.grid tr:not(.header) a', function(event) {
event.stopPropagation();
});
this.element.on('click', '.grid tr:not(.header)', function() {
$(this).find('td.checkbox input').click();
});
// Show 'more' actions when user hovers over 'more' link.
this.element.on('mouseenter', '.actions a.more', function() {
that.grid.find('.actions div.more').hide();
@ -238,7 +201,7 @@
this.element.mask("Refreshing data...");
$.get(this.grid.data('url'), settings, function(data) {
that.grid.replaceWith(data);
that.grid = that.element.find('.newgrid');
that.grid = that.element.find('.grid');
that.element.unmask();
});
}
@ -264,7 +227,7 @@
this.checkbox = this.element.find('input[name$="-active"]');
this.label = this.element.find('label');
this.inputs = this.element.find('.inputs');
this.add_filter = this.element.parents('.newgrid-wrapper').find('#add-filter');
this.add_filter = this.element.parents('.grid-wrapper').find('#add-filter');
// Hide the checkbox and label, and add button for toggling active status.
this.checkbox.addClass('ui-helper-hidden-accessible');

2
tailbone/static/js/tailbone.batch.js
View file

@ -10,7 +10,7 @@
$(function() {
$('.newgrid-wrapper').gridwrapper();
$('.grid-wrapper').gridwrapper();
$('#execute-batch').click(function() {
if (has_execution_options) {