From 15b903f66c42e6b72ddbc7838a60f3cf988301b3 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>
---
 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.7.4