Bug 6836: followup CSS work

Signed-off-by: Chris Cormack <chris@bigballofwax.co.nz>
Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>

koha-tmpl/intranet-tmpl/prog/en/css/datatables.css

@@ -3,15 +3,15 @@ input.search_init {
 }
 .sorting_asc {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_asc.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting_desc {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_desc.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_both.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting_asc_disabled {
     padding-right: 19px;
@@ -26,6 +26,157 @@ input.search_init {
     background-color: #EEEEEE;
 }
 
+div.top {clear : both; }
+
+div.top.pager,
+div.bottom.pager {
+    background-color : #E5E5E5;
+    padding : 0;
+}
+
+div.bottom.pager div.dataTables_paginate.paging_full_numbers,
+div.bottom.pager div.dataTables_paginate.paging_four_button {
+    border-right-width : 0;
+}
+
+div.dataTables_filter,
+div.dataTables_length,
+div.dataTables_info,
+div.dataTables_paginate {
+    float: left;
+    padding : .3em .5em .3em .5em;
+
+}
+div.dataTables_length {
+    border-right : 1px solid #686868;
+    line-height:1.9em;
+}
+div.dataTables_info {
+    border-right : 1px solid #AAA;
+    line-height:1.9em;
+}
+div.dataTables_length,
+div.dataTables_filter {
+    border-left : 1px solid #FFF;
+}
+div.dataTables_filter {
+    line-height : 1.9em;
+}
+div.dataTables_paginate {
+    background-color : #F4F4F4;
+    font-size: 110%;
+    padding : 0;
+}
+
+.paging_full_numbers span.paginate_button,
+.paging_full_numbers span.paginate_active {
+    border-right : 1px solid #AAA;
+    border-left : 1px solid #FFF;
+    display : block;
+    float : left;
+    line-height:1.6em;
+    padding: .3em .7em;
+    cursor: pointer;
+}
+
+.paging_full_numbers span.paginate_button {
+    color : #0000CC;
+}
+.paging_full_numbers span.paginate_button.first {
+    background-image : url('../../img/first.png');
+    background-repeat: no-repeat;
+    background-position : 2px center;
+    padding-left : 2em;
+}
+.paging_full_numbers span.paginate_button.previous {
+    background-image : url('../../img/prev.png');
+    background-repeat: no-repeat;
+    background-position : 2px center;
+    padding-left : 2em;
+}
+.paging_full_numbers span.paginate_button.next {
+    background-image : url('../../img/next.png');
+    background-repeat: no-repeat;
+    background-position : right center;
+    padding-right : 2em;
+}
+.paging_full_numbers span.paginate_button.last {
+    background-image : url('../../img/last.png');
+    background-repeat: no-repeat;
+    background-position : right center;
+    border-right : 1px solid #686868;
+    padding-right : 2em;
+}
+div.bottom.pager .paging_full_numbers span.paginate_button.last {
+    border-right-width : 0;
+}
+.paging_full_numbers span.paginate_active {
+    background-color : #FFFFEA;
+    color : #000;
+    font-weight: bold;
+}
+
+.paging_full_numbers span.paginate_button:hover {
+    background-color: #FFC;
+}
+
+.paging_full_numbers span.paginate_button.paginate_button_disabled {
+    color : #666;
+}
+
+/* Two-button version */
+
+div.dataTables_paginate.paging_two_button,
+div.dataTables_paginate.paging_four_button {
+    background-color : transparent;
+    border-right : 1px solid #686868;
+    border-left : 1px solid #FFF;
+    line-height : 1.8em;
+}
+.paginate_disabled_first,
+.paginate_enabled_first,
+.paginate_disabled_previous,
+.paginate_enabled_previous,
+.paginate_disabled_next,
+.paginate_enabled_next,
+.paginate_disabled_last,
+.paginate_enabled_last {
+    float: left;
+    height: 16px;
+    margin: .5em;
+    width: 16px;
+}
+.paginate_disabled_first {
+    background-image: url("../../img/first-disabled.png");
+}
+.paginate_enabled_first {
+    background-image: url("../../img/first.png");
+    cursor: pointer;
+}
+.paginate_disabled_previous {
+    background-image: url("../../img/prev-disabled.png");
+}
+.paginate_enabled_previous {
+    background-image: url("../../img/prev.png");
+    cursor: pointer;
+}
+.paginate_disabled_next {
+    background-image: url("../../img/next-disabled.png");
+}
+.paginate_enabled_next {
+    background-image: url("../../img/next.png");
+    cursor: pointer;
+}
+.paginate_disabled_last {
+    background-image: url("../../img/last-disabled.png");
+}
+.paginate_enabled_last {
+    background-image: url("../../img/last.png");
+    cursor: pointer;
+}
+
+
+/*
 table.display {
     width: 100%;
 }

koha-tmpl/intranet-tmpl/prog/en/js/datatables.js

@@ -22,7 +22,8 @@ var dataTablesDefaults = {
         "sProcessing"       : window.MSG_DT_PROCESSING || "Processing...",
         "sSearch"           : window.MSG_DT_SEARCH || "Search:",
         "sZeroRecords"      : window.MSG_DT_ZERO_RECORDS || "No matching records found"
-    }
+    },
+    "sDom": '<"top pager"ilpf>t<"bottom pager"ip>'
 };
 
 
@@ -279,3 +280,105 @@ function replace_html_date( original_node, id, format ) {
     script.text = script_content;
     $(original_node).append( script );
 }
+
+$.fn.dataTableExt.oPagination.four_button = {
+    /*
+     * Function: oPagination.four_button.fnInit
+     * Purpose:  Initalise dom elements required for pagination with a list of the pages
+     * Returns:  -
+     * Inputs:   object:oSettings - dataTables settings object
+     *           node:nPaging - the DIV which contains this pagination control
+     *           function:fnCallbackDraw - draw function which must be called on update
+     */
+    "fnInit": function ( oSettings, nPaging, fnCallbackDraw )
+    {
+        nFirst = document.createElement( 'span' );
+        nPrevious = document.createElement( 'span' );
+        nNext = document.createElement( 'span' );
+        nLast = document.createElement( 'span' );
+
+/*        nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) );
+        nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) );
+        nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) );
+        nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );*/
+
+        nFirst.className = "paginate_button first";
+        nPrevious.className = "paginate_button previous";
+        nNext.className="paginate_button next";
+        nLast.className = "paginate_button last";
+
+        nPaging.appendChild( nFirst );
+        nPaging.appendChild( nPrevious );
+        nPaging.appendChild( nNext );
+        nPaging.appendChild( nLast );
+
+        $(nFirst).click( function () {
+            oSettings.oApi._fnPageChange( oSettings, "first" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        $(nPrevious).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "previous" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        $(nNext).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "next" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        $(nLast).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "last" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        /* Disallow text selection */
+        $(nFirst).bind( 'selectstart', function () { return false; } );
+        $(nPrevious).bind( 'selectstart', function () { return false; } );
+        $(nNext).bind( 'selectstart', function () { return false; } );
+        $(nLast).bind( 'selectstart', function () { return false; } );
+    },
+
+    /*
+     * Function: oPagination.four_button.fnUpdate
+     * Purpose:  Update the list of page buttons shows
+     * Returns:  -
+     * Inputs:   object:oSettings - dataTables settings object
+     *           function:fnCallbackDraw - draw function which must be called on update
+     */
+    "fnUpdate": function ( oSettings, fnCallbackDraw )
+    {
+        if ( !oSettings.aanFeatures.p )
+        {
+            return;
+        }
+
+        /* Loop over each instance of the pager */
+        var an = oSettings.aanFeatures.p;
+        for ( var i=0, iLen=an.length ; i<iLen ; i++ )
+        {
+            var buttons = an[i].getElementsByTagName('span');
+            if ( oSettings._iDisplayStart === 0 )
+            {
+                buttons[0].className = "paginate_disabled_first";
+                buttons[1].className = "paginate_disabled_previous";
+            }
+            else
+            {
+                buttons[0].className = "paginate_enabled_first";
+                buttons[1].className = "paginate_enabled_previous";
+            }
+
+            if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() )
+            {
+                buttons[2].className = "paginate_disabled_next";
+                buttons[3].className = "paginate_disabled_last";
+            }
+            else
+            {
+                buttons[2].className = "paginate_enabled_next";
+                buttons[3].className = "paginate_enabled_last";
+            }
+        }
+    }
+};

koha-tmpl/opac-tmpl/prog/en/css/datatables.css

@@ -3,15 +3,15 @@ input.search_init {
 }
 .sorting_asc {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_asc.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting_desc {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_desc.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_both.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting_asc_disabled {
     padding-right: 19px;
@@ -26,6 +26,157 @@ input.search_init {
     background-color: #EEEEEE;
 }
 
+div.top {clear : both; }
+
+div.top.pager,
+div.bottom.pager {
+    background-color : #E5E5E5;
+    padding : 0;
+}
+
+div.bottom.pager div.dataTables_paginate.paging_full_numbers,
+div.bottom.pager div.dataTables_paginate.paging_four_button {
+    border-right-width : 0;
+}
+
+div.dataTables_filter,
+div.dataTables_length,
+div.dataTables_info,
+div.dataTables_paginate {
+    float: left;
+    padding : .3em .5em .3em .5em;
+
+}
+div.dataTables_length {
+    border-right : 1px solid #686868;
+    line-height:1.9em;
+}
+div.dataTables_info {
+    border-right : 1px solid #AAA;
+    line-height:1.9em;
+}
+div.dataTables_length,
+div.dataTables_filter {
+    border-left : 1px solid #FFF;
+}
+div.dataTables_filter {
+    line-height : 1.9em;
+}
+div.dataTables_paginate {
+    background-color : #F4F4F4;
+    font-size: 110%;
+    padding : 0;
+}
+
+.paging_full_numbers span.paginate_button,
+.paging_full_numbers span.paginate_active {
+    border-right : 1px solid #AAA;
+    border-left : 1px solid #FFF;
+    display : block;
+    float : left;
+    line-height:1.6em;
+    padding: .3em .7em;
+    cursor: pointer;
+}
+
+.paging_full_numbers span.paginate_button {
+    color : #0000CC;
+}
+.paging_full_numbers span.paginate_button.first {
+    background-image : url('../../img/first.png');
+    background-repeat: no-repeat;
+    background-position : 2px center;
+    padding-left : 2em;
+}
+.paging_full_numbers span.paginate_button.previous {
+    background-image : url('../../img/prev.png');
+    background-repeat: no-repeat;
+    background-position : 2px center;
+    padding-left : 2em;
+}
+.paging_full_numbers span.paginate_button.next {
+    background-image : url('../../img/next.png');
+    background-repeat: no-repeat;
+    background-position : right center;
+    padding-right : 2em;
+}
+.paging_full_numbers span.paginate_button.last {
+    background-image : url('../../img/last.png');
+    background-repeat: no-repeat;
+    background-position : right center;
+    border-right : 1px solid #686868;
+    padding-right : 2em;
+}
+div.bottom.pager .paging_full_numbers span.paginate_button.last {
+    border-right-width : 0;
+}
+.paging_full_numbers span.paginate_active {
+    background-color : #FFFFEA;
+    color : #000;
+    font-weight: bold;
+}
+
+.paging_full_numbers span.paginate_button:hover {
+    background-color: #FFC;
+}
+
+.paging_full_numbers span.paginate_button.paginate_button_disabled {
+    color : #666;
+}
+
+/* Two-button version */
+
+div.dataTables_paginate.paging_two_button,
+div.dataTables_paginate.paging_four_button {
+    background-color : transparent;
+    border-right : 1px solid #686868;
+    border-left : 1px solid #FFF;
+    line-height : 1.8em;
+}
+.paginate_disabled_first,
+.paginate_enabled_first,
+.paginate_disabled_previous,
+.paginate_enabled_previous,
+.paginate_disabled_next,
+.paginate_enabled_next,
+.paginate_disabled_last,
+.paginate_enabled_last {
+    float: left;
+    height: 16px;
+    margin: .5em;
+    width: 16px;
+}
+.paginate_disabled_first {
+    background-image: url("../../img/first-disabled.png");
+}
+.paginate_enabled_first {
+    background-image: url("../../img/first.png");
+    cursor: pointer;
+}
+.paginate_disabled_previous {
+    background-image: url("../../img/prev-disabled.png");
+}
+.paginate_enabled_previous {
+    background-image: url("../../img/prev.png");
+    cursor: pointer;
+}
+.paginate_disabled_next {
+    background-image: url("../../img/next-disabled.png");
+}
+.paginate_enabled_next {
+    background-image: url("../../img/next.png");
+    cursor: pointer;
+}
+.paginate_disabled_last {
+    background-image: url("../../img/last-disabled.png");
+}
+.paginate_enabled_last {
+    background-image: url("../../img/last.png");
+    cursor: pointer;
+}
+
+
+/*
 table.display {
     width: 100%;
 }

koha-tmpl/opac-tmpl/prog/en/js/datatables.js

@@ -22,7 +22,8 @@ var dataTablesDefaults = {
         "sProcessing"       : window.MSG_DT_PROCESSING || "Processing...",
         "sSearch"           : window.MSG_DT_SEARCH || "Search:",
         "sZeroRecords"      : window.MSG_DT_ZERO_RECORDS || "No matching records found"
-    }
+    },
+    "sDom": '<"top pager"ilpf>t<"bottom pager"ip>'
 };
 
 
@@ -279,3 +280,105 @@ function replace_html_date( original_node, id, format ) {
     script.text = script_content;
     $(original_node).append( script );
 }
+
+$.fn.dataTableExt.oPagination.four_button = {
+    /*
+     * Function: oPagination.four_button.fnInit
+     * Purpose:  Initalise dom elements required for pagination with a list of the pages
+     * Returns:  -
+     * Inputs:   object:oSettings - dataTables settings object
+     *           node:nPaging - the DIV which contains this pagination control
+     *           function:fnCallbackDraw - draw function which must be called on update
+     */
+    "fnInit": function ( oSettings, nPaging, fnCallbackDraw )
+    {
+        nFirst = document.createElement( 'span' );
+        nPrevious = document.createElement( 'span' );
+        nNext = document.createElement( 'span' );
+        nLast = document.createElement( 'span' );
+
+/*        nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) );
+        nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) );
+        nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) );
+        nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );*/
+
+        nFirst.className = "paginate_button first";
+        nPrevious.className = "paginate_button previous";
+        nNext.className="paginate_button next";
+        nLast.className = "paginate_button last";
+
+        nPaging.appendChild( nFirst );
+        nPaging.appendChild( nPrevious );
+        nPaging.appendChild( nNext );
+        nPaging.appendChild( nLast );
+
+        $(nFirst).click( function () {
+            oSettings.oApi._fnPageChange( oSettings, "first" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        $(nPrevious).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "previous" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        $(nNext).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "next" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        $(nLast).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "last" );
+            fnCallbackDraw( oSettings );
+        } );
+
+        /* Disallow text selection */
+        $(nFirst).bind( 'selectstart', function () { return false; } );
+        $(nPrevious).bind( 'selectstart', function () { return false; } );
+        $(nNext).bind( 'selectstart', function () { return false; } );
+        $(nLast).bind( 'selectstart', function () { return false; } );
+    },
+
+    /*
+     * Function: oPagination.four_button.fnUpdate
+     * Purpose:  Update the list of page buttons shows
+     * Returns:  -
+     * Inputs:   object:oSettings - dataTables settings object
+     *           function:fnCallbackDraw - draw function which must be called on update
+     */
+    "fnUpdate": function ( oSettings, fnCallbackDraw )
+    {
+        if ( !oSettings.aanFeatures.p )
+        {
+            return;
+        }
+
+        /* Loop over each instance of the pager */
+        var an = oSettings.aanFeatures.p;
+        for ( var i=0, iLen=an.length ; i<iLen ; i++ )
+        {
+            var buttons = an[i].getElementsByTagName('span');
+            if ( oSettings._iDisplayStart === 0 )
+            {
+                buttons[0].className = "paginate_disabled_first";
+                buttons[1].className = "paginate_disabled_previous";
+            }
+            else
+            {
+                buttons[0].className = "paginate_enabled_first";
+                buttons[1].className = "paginate_enabled_previous";
+            }
+
+            if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() )
+            {
+                buttons[2].className = "paginate_disabled_next";
+                buttons[3].className = "paginate_disabled_last";
+            }
+            else
+            {
+                buttons[2].className = "paginate_enabled_next";
+                buttons[3].className = "paginate_enabled_last";
+            }
+        }
+    }
+};