From 3ba04e5b30b44bb0fabe35b6d963303b8b3ab1b9 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Sun, 27 Jan 2019 00:53:05 +0000 Subject: [PATCH] Bug 22261: Revise style of DataTables menus This patch revises our custom DataTables CSS to give a more colorful style to the columns configuration and export menus. The primary goal of this change is to make it easier to tell which columns are visible and which are hidden. To test, apply the patch and clear your browser cache if necessary. View a table with columns configuration and export options, e.e. Tools -> Notices & slip. Test the DataTables menus and confirm that they work as expected. --- koha-tmpl/intranet-tmpl/prog/css/datatables.css | 103 +++++++++++++++++++++ .../prog/en/includes/columns_settings.inc | 1 + 2 files changed, 104 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/css/datatables.css index 9cd66a0..97b7568 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/datatables.css +++ b/koha-tmpl/intranet-tmpl/prog/css/datatables.css @@ -305,14 +305,117 @@ table.group tr.even td { button.dt-button, div.dt-button, +a.dt-button, a.dt-button:link, a.dt-button:visited, a.dt-button:hover, a.dt-button:active { color: #000; + font-size: 1em; margin: 3px 3px 0; } +button.dt-button::before, +div.dt-button::before, +a.dt-button::before { + content: ''; +} + +button.dt-button:active:not(.disabled):hover:not(.disabled), +button.dt-button.active:not(.disabled):hover:not(.disabled), +div.dt-button:active:not(.disabled):hover:not(.disabled), +div.dt-button.active:not(.disabled):hover:not(.disabled), +a.dt-button:active:not(.disabled):hover:not(.disabled), +a.dt-button.active:not(.disabled):hover:not(.disabled) { + background: #FFC none; + border-color: #CCC; + box-shadow: none; + text-shadow: none; +} + +div.dt-button-collection { + width: auto; +} + +div.dt-button-collection a.dt-button { + background: #FFF none; + border-color: #EEE; + text-shadow: none; +} + +div.dt-button-collection a.dt-button::before { + color: #CCC; + content: "\f00d"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em; +} + +div.dt-button-collection a.dt-button:active:not(.disabled), +div.dt-button-collection a.dt-button.active:not(.disabled) { + background: #E6F0F2 none; + border: 1px solid #999; + box-shadow: none; +} + +div.dt-button-collection a.dt-button:active:not(.disabled)::before, +div.dt-button-collection a.dt-button.active:not(.disabled)::before { + color: #538200; + content: "\f00c"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em; +} + +div.dt-button-collection a.dt-button:not(.disabled):hover, +div.dt-button-collection a.dt-button.active:not(.disabled):hover { + box-shadow: none; + border: 1px solid #999; + background: #FFC none; +} + + +div.dt-button-collection a.dt-button:not(.disabled)::before, +div.dt-button-collection a.dt-button.active:not(.disabled):hover::before { + color: #CC0000; + content: "\f00d"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em; +} + +div.dt-button-collection a.dt-button.buttons-html5:not(.disabled)::before { + color: #222BAC; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em; +} + +div.dt-button-collection a.dt-button.buttons-excel:not(.disabled)::before { + content: "\f1c3"; +} + +div.dt-button-collection a.dt-button.buttons-csv:not(.disabled)::before { + content: "\f0ce"; +} + +div.dt-button-collection a.dt-button.buttons-copy:not(.disabled)::before { + content: "\f0c5"; +} + +div.dt-button-collection a.dt-button.buttons-print:not(.disabled)::before { + color: #222BAC; + content: "\f02f"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em; +} + .dt-button-text { display: none; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc index a0989a3..e9461f3 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc @@ -72,6 +72,7 @@ function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) { }, { extend: 'collection', + autoClose: true, fade: 100, className: "export_controls", titleAttr: _("Export or print"), -- 2.1.4