From f17512a421687368bbf57286c557305c08be59c7 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. Signed-off-by: Liz Rea This is a nice update to the styles. --- 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 9cd66a016c..97b756884d 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 a0989a3a3e..e9461f353b 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.11.0