From a54eb7fd5cba95f6ef350fa50b7713c8c096a204 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
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 <wizzyrea@gmail.com>
This is a nice update to the styles.

Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
---
 .../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.39.5