From 61c6562860e9f3af7d654d9f7acf8f9d41952d4a Mon Sep 17 00:00:00 2001
From: Roberto Rosario <roberto.rosario@mayan-edms.com>
Date: Mon, 23 Sep 2019 13:58:29 -0400
Subject: [PATCH] Tweaked the jstree component's appearance

Improve usage with long cabinet labels.
Thanks for forum user @briboe for the report.

Signed-off-by: Roberto Rosario <roberto.rosario@mayan-edms.com>
---
 HISTORY.rst                                        |  2 ++
 docs/releases/3.2.8.rst                            | 14 +++++++++++++-
 .../apps/appearance/static/appearance/css/base.css | 10 ++++++++++
 .../templates/cabinets/cabinet_details.html        | 10 +++++-----
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/HISTORY.rst b/HISTORY.rst
index ff415308eb..578f5b956a 100644
--- a/HISTORY.rst
+++ b/HISTORY.rst
@@ -1,6 +1,8 @@
 3.2.8 (2019-XX-XX)
 ==================
 * Add cabinet add and remove workflow actions.
+* Tweaked the jstree component's appearance to cope with
+  long labels.
 
 3.2.7 (2019-08-28)
 ==================
diff --git a/docs/releases/3.2.8.rst b/docs/releases/3.2.8.rst
index e0e8885829..1a60ffcbca 100644
--- a/docs/releases/3.2.8.rst
+++ b/docs/releases/3.2.8.rst
@@ -7,8 +7,20 @@ Released: XX, 2019
 Changes
 -------
 
+Cabinets
+^^^^^^^^
+
+Tweaked the jstree component's appearance to cope with long labels.
+Added a scrollbar, reduced the font size, switched to a sans serif font,
+and reduced padding. Thanks for forum user @briboe for the report.
+
+
+Other changes
+^^^^^^^^^^^^^
+
 - Add cabinet add and remove workflow actions.
 
+
 Removals
 --------
 
@@ -101,6 +113,6 @@ Bugs fixed or issues closed
 ---------------------------
 
 - :gitlab-issue:`643` The "Actions" button won't show up, if window size between 992 and 1248 px
-- :forum-topic:`1050` edit/delete sub-cabinet
+- :forum-topic:`1120` Cabinet Presentation
 
 .. _PyPI: https://pypi.python.org/pypi/mayan-edms/
diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css
index 688f8e6e51..1d5e5f2c2c 100644
--- a/mayan/apps/appearance/static/appearance/css/base.css
+++ b/mayan/apps/appearance/static/appearance/css/base.css
@@ -410,3 +410,13 @@ a i {
 .btn-list {
     margin-bottom: 2px;
 }
+
+/* jstree - cabinets */
+#jstree {
+    max-width: 100%;
+    overflow: auto;
+    font: 11px Verdana, sans-serif;
+    padding: 0px;
+    padding-bottom: 10px; /* Padding for scrollbar */
+    border-radius: 5px;
+}
diff --git a/mayan/apps/cabinets/templates/cabinets/cabinet_details.html b/mayan/apps/cabinets/templates/cabinets/cabinet_details.html
index 0e689c109b..11a14ee539 100644
--- a/mayan/apps/cabinets/templates/cabinets/cabinet_details.html
+++ b/mayan/apps/cabinets/templates/cabinets/cabinet_details.html
@@ -15,7 +15,7 @@
     <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-2">
             <h4>{% trans 'Navigation:' %}</h4>
-            <div class="jstree"></div>
+            <div id="jstree"></div>
         </div>
 
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10">
@@ -31,11 +31,11 @@
 {% block javascript %}
     <script>
         $.getScript( "{% static 'cabinets/node_modules/jstree/dist/jstree.min.js' %}" )
-            .done(function( script, textStatus ) {
-            $(function () {
-                var jstreeElement = $('.jstree');
+            .done(function(script, textStatus) {
+                $(function () {
+                    var jstreeElement = $('#jstree');
 
-                jstreeElement
+                    jstreeElement
                     .on('select_node.jstree', function (e, data) {
                         if(data.selected.length) {
                             partialNavigation.setLocation(data.instance.get_node(data.selected[0]).data.href);