From 7e9f72ab57d5fad06937ccceb5bda22863a17f3e Mon Sep 17 00:00:00 2001
From: Hao Sun <sunhao@easycorp.ltd>
Date: Tue, 9 Nov 2021 13:38:37 +0800
Subject: [PATCH] * improve UI for dropdown menu in doc side tree.

---
 module/doc/css/objectlibs.css | 15 ++++++++++++---
 module/doc/model.php          |  8 ++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/module/doc/css/objectlibs.css b/module/doc/css/objectlibs.css
index e70a6841af..8656d576da 100644
--- a/module/doc/css/objectlibs.css
+++ b/module/doc/css/objectlibs.css
@@ -2,7 +2,7 @@
 .addbtn {padding-top: 22px; height: 63px; border: 1px dashed #ddd; width: 60px;}
 .addbtn .icon-plus {font-size: 18px; display: block; opacity: 0.5; transition: opacity .2s; text-shadow: 1px 1px 3px rgba(0,0,0,.2);}
 .addbtn:hover .icon-plus {opacity: .9; animation: flash-icon 1s linear alternate infinite;}
-#subHeader #dropMenu {min-width: 250px; box-sizing: inhert; max-height: inherit;}
+#subHeader #dropMenu {min-width: 250px; box-sizing: inherit; max-height: inherit;}
 #subHeader #dropMenu .table-col .list-group {padding-top: 10px;}
 .main-col .block-files .panel-heading {padding-right: 20px;}
 .main-col .block-files .panel-heading .panel-title {height: 35px; line-height: 30px;}
@@ -42,5 +42,14 @@
 .title {font-size: 20px !important;}
 .article-content.comment {width: 100% !important;}
 
-.tree-group .tree-actions{display: none}
-.tree-group:hover .tree-actions{display: inline}
+#custom, .tree {overflow: visible}
+.tree li>.list-toggle {left: -4px; top: 0;}
+.tree-group {position: relative;}
+.tree-group > .module-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block;}
+.tree-group .tree-actions {display: none; position: absolute; right: 0; top: 0; background-color: #fff; white-space: nowrap;}
+.tree-group:hover > .module-name {width: calc(100% - 84px);}
+.tree-group:hover .tree-actions {display: block}
+.tree-group .tree-actions > .dropdown {display: inline-block;}
+.tree-group .dropdown-menu {position: absolute; right: 0; left: auto; margin-top: -2px;}
+.tree-group .dropdown-menu > li > a {max-width: 100%; color: #3c4353!important; font-weight: normal!important;}
+.tree-group .dropdown-menu > li > a:hover {color: #fff;}
diff --git a/module/doc/model.php b/module/doc/model.php
index cbcf52e068..648ff9e34a 100644
--- a/module/doc/model.php
+++ b/module/doc/model.php
@@ -2373,8 +2373,9 @@ EOT;
                     if($currentMethod == 'objectlibs')
                     {
                         $treeMenu[$module->id] .= "<div class='tree-group'><span class='module-name'>" . html::a(inlink('objectLibs', "type=$type&objectID=$objectID&libID=$libID&docID={$doc->id}"), "<i class='icon icon-file-text text-muted'></i> &nbsp;" . $doc->title, '', "data-app='{$this->app->tab}' class='doc-title' title='{$doc->title}'") . '</span>';
-                        $treeMenu[$module->id] .= "<div class='tree-actions pull-right'>";
+                        $treeMenu[$module->id] .= "<div class='tree-actions'>";
                         $treeMenu[$module->id] .= html::a(helper::createLink('doc', 'edit', "docID=$docID&comment=false&objectType=$type&objectID=$objectID&libID=$libID"), "<i class='icon icon-edit'></i>", '', "title={$this->lang->doc->edit}");
+                        $treeMenu[$module->id] .= '<div class="dropdown dropdown-hover">';
                         $treeMenu[$module->id] .= "<a class='tree-action' href='javascript:;' data-toggle='dropdown'><i class='icon icon-plus'></i></a>";
                         $treeMenu[$module->id] .= "<ul class='dropdown-menu'>";
                         foreach($this->lang->doc->typeList as $typeKey => $typeName)
@@ -2393,6 +2394,7 @@ EOT;
                             $treeMenu[$module->id] .= '<li>' . html::a(helper::createLink('doc', 'createLib', "type=$type&objectID=$objectID"), "<i class='icon-doc-lib icon'></i> " . $this->lang->doc->createLib, '', "class='iframe' data-width='70%'") . '</li>';
                         }
                         $treeMenu[$module->id] .= "</ul>";
+                        $treeMenu[$module->id] .= "</div>";
                         $treeMenu[$module->id] .= "<a class='sort-handler tree-action' href='javascript:;' data-type='sort' title={$this->lang->tree->dragAndSort}><i class='icon icon-move'></i></a>";
                         $treeMenu[$module->id] .= '</div></div>';
                     }
@@ -2419,9 +2421,10 @@ EOT;
             else
             {
                 $li  = "<div class='tree-group'><span class='module-name'><a title='{$module->name}'>" . $module->name . '</a></span>';
-                $li .= "<div class='tree-actions pull-right'>";
+                $li .= "<div class='tree-actions'>";
                 $li .= html::a(helper::createLink('tree', 'edit', "module=$module->id&type=doc"), "<i class='icon icon-edit'></i>", '', "data-toggle='modal' title={$this->lang->doc->editType}");
                 $li .= html::a(helper::createLink('tree', 'browse', "rootID=$libID&type=doc&module=$module->id", '', 1), "<i class='icon icon-split'></i>", '', "class='iframe' title={$this->lang->doc->editType}");
+                $li .='<div class="dropdown dropdown-hover">';
                 $li .= "<a class='tree-action' href='javascript:;' data-toggle='dropdown'><i class='icon icon-plus'></i></a>";
                 $li .= "<ul class='dropdown-menu'>";
                 foreach($this->lang->doc->typeList as $typeKey => $typeName)
@@ -2440,6 +2443,7 @@ EOT;
                     $li .= '<li>' . html::a(helper::createLink('doc', 'createLib', "type=$type&objectID=$objectID"), "<i class='icon-doc-lib icon'></i> " . $this->lang->doc->createLib, '', "class='iframe' data-width='70%'") . '</li>';
                 }
                 $li .= "</ul>";
+                $li .= '</div>';
                 $li .= "<a class='sort-handler tree-action' href='javascript:;' data-type='sort' title={$this->lang->tree->dragAndSort}><i class='icon icon-move'></i></a>";
                 $li .= '</div></div>';
             }