From 766e8cbcf7fd4ed348e1544ae4916bb4e1debbed Mon Sep 17 00:00:00 2001
From: yuri <yurikuzn@users.noreply.github.com>
Date: Wed, 14 Nov 2018 11:34:16 +0200
Subject: [PATCH] category tree menu

---
 client/res/templates/record/list-tree.tpl | 29 ++++++++++++++++-------
 client/src/views/record/list-tree.js      |  5 +++-
 frontend/less/espo/custom.less            |  7 ------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/client/res/templates/record/list-tree.tpl b/client/res/templates/record/list-tree.tpl
index bbb73ad0b7..12376d98f7 100644
--- a/client/res/templates/record/list-tree.tpl
+++ b/client/res/templates/record/list-tree.tpl
@@ -15,14 +15,27 @@
     {{/if}}
 {{/unless}}
 <div class="list list-expanded">
-
-    {{#if hasExpandedToggler}}
-        <a href="javascript:" title="{{translate 'Collapse'}}" class="small pull-right category-expanded-toggle-link action{{#unless isExpanded}} hidden{{/unless}}" data-action="collapse"><span class="fas fa-folder-open"></span></a>
-        <a href="javascript:" title="{{translate 'Expand'}}" class="small pull-right category-expanded-toggle-link action{{#if isExpanded}} hidden{{/if}}" data-action="expand""><span class="fas fa-folder"></span></a>
-    {{/if}}
-
-    {{#if showEditLink}}
-    <a href="#{{scope}}" class="small pull-right action manage-categories-link" data-action="manageCategories" title="{{translate 'Manage Categories' scope=scope}}"><span class="fas fa-th-list"></span></a>
+    {{#if showRootMenu}}
+    <div class="btn-group pull-right">
+        <a href="javascript:" class="small dropdown-toggle btn-link" data-toggle="dropdown">
+            <span class="fas fa-ellipsis-h"></span>
+        </a>
+        <ul class="dropdown-menu">
+            {{#if hasExpandedToggler}}
+            <li class="{{#unless isExpanded}}hidden{{/unless}}">
+                <a href="javascript:" class="category-expanded-toggle-link action" data-action="collapse">{{translate 'Collapse'}}</a>
+            </li>
+            <li class="{{#if isExpanded}}hidden{{/if}}">
+                <a href="javascript:" class="category-expanded-toggle-link action" data-action="expand"">{{translate 'Expand'}}</a>
+            </li>
+            {{/if}}
+            {{#if showEditLink}}
+            <li>
+                <a href="#{{scope}}" class="action manage-categories-link" data-action="manageCategories">{{translate 'Manage Categories' scope=scope}}</a>
+            </li>
+            {{/if}}
+        </ul>
+    </div>
     {{/if}}
 
     {{#if showRoot}}
diff --git a/client/src/views/record/list-tree.js b/client/src/views/record/list-tree.js
index 8e793f7446..38544552ea 100644
--- a/client/src/views/record/list-tree.js
+++ b/client/src/views/record/list-tree.js
@@ -81,6 +81,10 @@ Espo.define('views/record/list-tree', 'views/record/list', function (Dep) {
                 data.isExpanded = this.isExpanded;
             }
 
+            if (data.hasExpandedToggler || this.showEditLink) {
+                data.showRootMenu = true;
+            }
+
             return data;
         },
 
@@ -268,4 +272,3 @@ Espo.define('views/record/list-tree', 'views/record/list', function (Dep) {
 
     });
 });
-
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index d3d9701b09..c8bff1f175 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -2194,13 +2194,6 @@ pre > code {
 }
 
 .categories-container {
-    a.manage-categories-link {
-        margin-left: 8px;
-    }
-    a.category-expanded-toggle-link {
-        margin-left: 8px;
-    }
-
     > .list > .list-group-tree > li {
         padding-left: 0;
     }