From 802541b796e356da89c602c82d2f372f29ab06ee Mon Sep 17 00:00:00 2001 From: James Cole Date: Sun, 21 Sep 2014 12:30:00 +0200 Subject: [PATCH] Some CSS and style updates. --- .../datatables/dataTables.bootstrap.js | 186 ++++++++++++ .../javascripts/firefly/transactions.js | 32 +- app/assets/javascripts/transactions.js | 1 + .../datatables/dataTables.bootstrap.css | 281 ++++++++++++++++++ app/assets/stylesheets/transactions.css | 2 +- app/controllers/JsonController.php | 14 +- .../Firefly/Exception/MigrationException.php | 14 - 7 files changed, 501 insertions(+), 29 deletions(-) create mode 100644 app/assets/javascripts/datatables/dataTables.bootstrap.js create mode 100644 app/assets/stylesheets/datatables/dataTables.bootstrap.css delete mode 100644 app/lib/Firefly/Exception/MigrationException.php diff --git a/app/assets/javascripts/datatables/dataTables.bootstrap.js b/app/assets/javascripts/datatables/dataTables.bootstrap.js new file mode 100644 index 0000000000..6c1e70ed83 --- /dev/null +++ b/app/assets/javascripts/datatables/dataTables.bootstrap.js @@ -0,0 +1,186 @@ +/*! DataTables Bootstrap integration + * ©2011-2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * DataTables integration for Bootstrap 3. This requires Bootstrap 3 and + * DataTables 1.10 or newer. + * + * This file sets the defaults and adds options to DataTables to style its + * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap + * for further information. + */ +(function(window, document, undefined){ + +var factory = function( $, DataTable ) { +"use strict"; + + +/* Set the defaults for DataTables initialisation */ +$.extend( true, DataTable.defaults, { + dom: + "<'row'<'col-xs-6'l><'col-xs-6'f>r>"+ + "t"+ + "<'row'<'col-xs-6'i><'col-xs-6'p>>", + renderer: 'bootstrap' +} ); + + +/* Default class modification */ +$.extend( DataTable.ext.classes, { + sWrapper: "dataTables_wrapper form-inline dt-bootstrap", + sFilterInput: "form-control input-sm", + sLengthSelect: "form-control input-sm" +} ); + + +/* Bootstrap paging button renderer */ +DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { + var api = new DataTable.Api( settings ); + var classes = settings.oClasses; + var lang = settings.oLanguage.oPaginate; + var btnDisplay, btnClass; + + var attach = function( container, buttons ) { + var i, ien, node, button; + var clickHandler = function ( e ) { + e.preventDefault(); + if ( e.data.action !== 'ellipsis' ) { + api.page( e.data.action ).draw( false ); + } + }; + + for ( i=0, ien=buttons.length ; i 0 ? + '' : ' disabled'); + break; + + case 'previous': + btnDisplay = lang.sPrevious; + btnClass = button + (page > 0 ? + '' : ' disabled'); + break; + + case 'next': + btnDisplay = lang.sNext; + btnClass = button + (page < pages-1 ? + '' : ' disabled'); + break; + + case 'last': + btnDisplay = lang.sLast; + btnClass = button + (page < pages-1 ? + '' : ' disabled'); + break; + + default: + btnDisplay = button + 1; + btnClass = page === button ? + 'active' : ''; + break; + } + + if ( btnDisplay ) { + node = $('
  • ', { + 'class': classes.sPageButton+' '+btnClass, + 'aria-controls': settings.sTableId, + 'tabindex': settings.iTabIndex, + 'id': idx === 0 && typeof button === 'string' ? + settings.sTableId +'_'+ button : + null + } ) + .append( $('', { + 'href': '#' + } ) + .html( btnDisplay ) + ) + .appendTo( container ); + + settings.oApi._fnBindAction( + node, {action: button}, clickHandler + ); + } + } + } + }; + + attach( + $(host).empty().html('
      ').children('ul'), + buttons + ); +}; + + +/* + * TableTools Bootstrap compatibility + * Required TableTools 2.1+ + */ +if ( DataTable.TableTools ) { + // Set the classes that TableTools uses to something suitable for Bootstrap + $.extend( true, DataTable.TableTools.classes, { + "container": "DTTT btn-group", + "buttons": { + "normal": "btn btn-default", + "disabled": "disabled" + }, + "collection": { + "container": "DTTT_dropdown dropdown-menu", + "buttons": { + "normal": "", + "disabled": "disabled" + } + }, + "print": { + "info": "DTTT_print_info modal" + }, + "select": { + "row": "active" + } + } ); + + // Have the collection use a bootstrap compatible drop down + $.extend( true, DataTable.TableTools.DEFAULTS.oTags, { + "collection": { + "container": "ul", + "button": "li", + "liner": "a" + } + } ); +} + +}; // /factory + + +// Define as an AMD module if possible +if ( typeof define === 'function' && define.amd ) { + define( ['jquery', 'datatables'], factory ); +} +else if ( typeof exports === 'object' ) { + // Node/CommonJS + factory( require('jquery'), require('datatables') ); +} +else if ( jQuery ) { + // Otherwise simply initialise as normal, stopping multiple evaluation + factory( jQuery, jQuery.fn.dataTable ); +} + + +})(window, document); + diff --git a/app/assets/javascripts/firefly/transactions.js b/app/assets/javascripts/firefly/transactions.js index a83d929590..befbbde945 100644 --- a/app/assets/javascripts/firefly/transactions.js +++ b/app/assets/javascripts/firefly/transactions.js @@ -24,37 +24,42 @@ $(document).ready(function () { order: [], "lengthMenu": [[50, 100, 250, -1], [50, 100, 250, "All"]], columns: [ - {name: 'date', data: 'date'}, + { + name: 'date', + data: 'date', + searchable: false + }, { name: 'description', data: 'description', render: function (data, type, full, meta) { var icon = ''; - if(display == 'expenses') { + if (display == 'expenses') { icon = 'glyphicon-arrow-left'; } - if(display == 'revenue') { + if (display == 'revenue') { icon = 'glyphicon-arrow-right'; } - if(display == 'transfers') { + if (display == 'transfers') { icon = 'glyphicon-resize-full'; } - return ' '+ + return ' ' + '' + data.description + ''; } }, { name: 'amount', data: 'amount', + searchable: false, render: function (data, type, full, meta) { - if(display == 'expenses') { + if (display == 'expenses') { return '\u20AC ' + data.toFixed(2) + ''; } - if(display == 'revenue') { + if (display == 'revenue') { return '\u20AC ' + data.toFixed(2) + ''; } - if(display == 'transfers') { + if (display == 'transfers') { return '\u20AC ' + data.toFixed(2) + ''; } } @@ -62,6 +67,7 @@ $(document).ready(function () { { name: 'from', data: 'from', + searchable: false, render: function (data, type, full, meta) { return '' + data.name + ''; } @@ -69,6 +75,7 @@ $(document).ready(function () { { name: 'to', data: 'to', + searchable: false, render: function (data, type, full, meta) { return '' + data.name + ''; } @@ -76,12 +83,13 @@ $(document).ready(function () { { name: 'id', data: 'id', + searchable: false, render: function (data, type, full, meta) { - return '
      '+ - ''+ + return '
      ' + + '' + '' + - ''+ - ''+ + '' + + '' + '
      '; } } diff --git a/app/assets/javascripts/transactions.js b/app/assets/javascripts/transactions.js index 037dc9d225..bf1bc974ff 100644 --- a/app/assets/javascripts/transactions.js +++ b/app/assets/javascripts/transactions.js @@ -12,4 +12,5 @@ // //= require typeahead/bootstrap3-typeahead.min //= require datatables/jquery.dataTables +//= require datatables/dataTables.bootstrap //= require firefly/transactions \ No newline at end of file diff --git a/app/assets/stylesheets/datatables/dataTables.bootstrap.css b/app/assets/stylesheets/datatables/dataTables.bootstrap.css new file mode 100644 index 0000000000..06de426a8c --- /dev/null +++ b/app/assets/stylesheets/datatables/dataTables.bootstrap.css @@ -0,0 +1,281 @@ +div.dataTables_length label { + font-weight: normal; + float: left; + text-align: left; +} + +div.dataTables_length select { + width: 75px; +} + +div.dataTables_filter label { + font-weight: normal; + float: right; +} + +div.dataTables_filter input { + width: 16em; +} + +div.dataTables_info { + padding-top: 8px; +} + +div.dataTables_paginate { + float: right; + margin: 0; +} + +div.dataTables_paginate ul.pagination { + margin: 2px 0; + white-space: nowrap; +} + +table.dataTable td, +table.dataTable th { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + + +table.dataTable { + clear: both; + margin-top: 6px !important; + margin-bottom: 6px !important; + max-width: none !important; +} + +table.dataTable thead .sorting, +table.dataTable thead .sorting_asc, +table.dataTable thead .sorting_desc, +table.dataTable thead .sorting_asc_disabled, +table.dataTable thead .sorting_desc_disabled { + cursor: pointer; +} + +table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; } +table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; } +table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; } + +table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; } +table.dataTable thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; } + +table.dataTable thead > tr > th { + padding-left: 18px; + padding-right: 18px; +} + +table.dataTable th:active { + outline: none; +} + +/* Scrolling */ +div.dataTables_scrollHead table { + margin-bottom: 0 !important; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +div.dataTables_scrollHead table thead tr:last-child th:first-child, +div.dataTables_scrollHead table thead tr:last-child td:first-child { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +div.dataTables_scrollBody table { + border-top: none; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +div.dataTables_scrollBody tbody tr:first-child th, +div.dataTables_scrollBody tbody tr:first-child td { + border-top: none; +} + +div.dataTables_scrollFoot table { + margin-top: 0 !important; + border-top: none; +} + +/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column + width calculations when using scrolling impossible to align columns. We have + to use separate + */ +table.table-bordered.dataTable { + border-collapse: separate !important; +} +table.table-bordered thead th, +table.table-bordered thead td { + border-left-width: 0; + border-top-width: 0; +} +table.table-bordered tbody th, +table.table-bordered tbody td { + border-left-width: 0; + border-bottom-width: 0; +} +table.table-bordered th:last-child, +table.table-bordered td:last-child { + border-right-width: 0; +} +div.dataTables_scrollHead table.table-bordered { + border-bottom-width: 0; +} + + + + +/* + * TableTools styles + */ +.table tbody tr.active td, +.table tbody tr.active th { + background-color: #08C; + color: white; +} + +.table tbody tr.active:hover td, +.table tbody tr.active:hover th { + background-color: #0075b0 !important; +} + +.table tbody tr.active a { + color: white; +} + +.table-striped tbody tr.active:nth-child(odd) td, +.table-striped tbody tr.active:nth-child(odd) th { + background-color: #017ebc; +} + +table.DTTT_selectable tbody tr { + cursor: pointer; +} + +div.DTTT .btn { + color: #333 !important; + font-size: 12px; +} + +div.DTTT .btn:hover { + text-decoration: none !important; +} + +ul.DTTT_dropdown.dropdown-menu { + z-index: 2003; +} + +ul.DTTT_dropdown.dropdown-menu a { + color: #333 !important; /* needed only when demo_page.css is included */ +} + +ul.DTTT_dropdown.dropdown-menu li { + position: relative; +} + +ul.DTTT_dropdown.dropdown-menu li:hover a { + background-color: #0088cc; + color: white !important; +} + +div.DTTT_collection_background { + z-index: 2002; +} + +/* TableTools information display */ +div.DTTT_print_info.modal { + height: 150px; + margin-top: -75px; + text-align: center; +} + +div.DTTT_print_info h6 { + font-weight: normal; + font-size: 28px; + line-height: 28px; + margin: 1em; +} + +div.DTTT_print_info p { + font-size: 14px; + line-height: 20px; +} + +div.dataTables_processing { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 40px; + margin-left: -50%; + margin-top: -25px; + padding-top: 20px; + text-align: center; + font-size: 1.2em; + background-color: white; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0))); + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); +} + + + +/* + * FixedColumns styles + */ +div.DTFC_LeftHeadWrapper table, +div.DTFC_LeftFootWrapper table, +div.DTFC_RightHeadWrapper table, +div.DTFC_RightFootWrapper table, +table.DTFC_Cloned tr.even { + background-color: white; + margin-bottom: 0; +} + +div.DTFC_RightHeadWrapper table , +div.DTFC_LeftHeadWrapper table { + margin-bottom: 0 !important; + border-top-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child, +div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child, +div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child, +div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +div.DTFC_RightBodyWrapper table, +div.DTFC_LeftBodyWrapper table { + border-top: none; + margin: 0 !important; +} + +div.DTFC_RightBodyWrapper tbody tr:first-child th, +div.DTFC_RightBodyWrapper tbody tr:first-child td, +div.DTFC_LeftBodyWrapper tbody tr:first-child th, +div.DTFC_LeftBodyWrapper tbody tr:first-child td { + border-top: none; +} + +div.DTFC_RightFootWrapper table, +div.DTFC_LeftFootWrapper table { + border-top: none; +} + + +/* + * FixedHeader styles + */ +div.FixedHeader_Cloned table { + margin: 0 !important +} + diff --git a/app/assets/stylesheets/transactions.css b/app/assets/stylesheets/transactions.css index 3ef8acf977..8c6c77200c 100644 --- a/app/assets/stylesheets/transactions.css +++ b/app/assets/stylesheets/transactions.css @@ -9,5 +9,5 @@ * gets included (e.g. say you have require_tree . then the code will appear after all the directories * but before any files alphabetically greater than 'application.css' * - *= require datatables/jquery.dataTables.min + *= require datatables/dataTables.bootstrap */ \ No newline at end of file diff --git a/app/controllers/JsonController.php b/app/controllers/JsonController.php index 0dfbe2899b..d1e9f4898b 100644 --- a/app/controllers/JsonController.php +++ b/app/controllers/JsonController.php @@ -110,7 +110,7 @@ class JsonController extends BaseController */ $parameters = [ 'start' => intval(Input::get('start')), - 'length' => intval(Input::get('length')), + 'length' => intval(Input::get('length')) < 0 ? 100000 : intval(Input::get('length')), 'draw' => intval(Input::get('draw')), ]; @@ -294,13 +294,23 @@ class JsonController extends BaseController $query->take($parameters['length']); $query->skip($parameters['start']); + /* + * Input search parameters: + */ + $filtered = $count; + if(strlen($parameters['search']['value']) > 0) { + $query->where('transaction_journals.description','LIKE','%'.e($parameters['search']['value']).'%'); + $filtered = $query->count(); + } + + /* * Build return array: */ $data = [ 'draw' => $parameters['draw'], 'recordsTotal' => $count, - 'recordsFiltered' => $count, + 'recordsFiltered' => $filtered, 'data' => [], ]; diff --git a/app/lib/Firefly/Exception/MigrationException.php b/app/lib/Firefly/Exception/MigrationException.php deleted file mode 100644 index 7bf4a6fa3a..0000000000 --- a/app/lib/Firefly/Exception/MigrationException.php +++ /dev/null @@ -1,14 +0,0 @@ -