Wiki-tree-editing-toggle-button

resources/css/humhub.wiki.css

@@ -571,13 +571,16 @@
   margin-bottom: -2px;
 }
 #category_list_view .drag-icon {
+  opacity: 0;
   visibility: hidden;
+  transition: opacity 0.3s ease;
   color: var(--text-color-soft);
 }
 #category_list_view .drag-icon .fa {
   font-size: 11px;
 }
-#category_list_view .page-title:hover .drag-icon {
+#category_list_view .drag-icon.visible {
+  opacity: 1;
   visibility: visible;
   cursor: move;
 }

resources/css/humhub.wiki.less

@@ -789,16 +789,17 @@
   }
 
   .drag-icon {
+    opacity: 0;
     visibility: hidden;
+    transition: opacity 0.3s ease;
     color: @text-color-control;
 
     .fa {
       font-size: 11px;
     }
-  }
-
-  .page-title:hover {
-    .drag-icon {
+
+    &.visible {
+      opacity: 1;
       visibility: visible;
       cursor: move;
     }

resources/js/humhub.wiki.CategoryListView.js

@@ -19,6 +19,7 @@ humhub.module('wiki.CategoryListView', function(module, require, $) {
         this.initFoldingSubpages();
         this.initSorting();
         this.initPageTitleLink();
+        this.initDragButtonHoverDelay();
     }
 
     CategoryListView.prototype.initFoldingSubpages = function() {
@@ -266,5 +267,28 @@ humhub.module('wiki.CategoryListView', function(module, require, $) {
         });
     };
 
+    CategoryListView.prototype.initDragButtonHoverDelay = function() {
+        const HOVER_DELAY = 1000;
+        const dragClass = '.wiki-page-control.drag-icon';
+
+        this.$.find('.page-title').each(function () {
+            const $item = $(this);
+            const $dragBtn = $item.find(dragClass);
+
+            let timer = null;
+
+            $item.on('mouseenter', function () {
+                timer = setTimeout(() => {
+                    $dragBtn.addClass('visible');
+                }, HOVER_DELAY);
+            });
+
+            $item.on('mouseleave', function () {
+                clearTimeout(timer);
+                $dragBtn.removeClass('visible');
+            });
+        });
+    };
+
     module.export = CategoryListView;
 });

resources/js/humhub.wiki.bundle.js

@@ -135,7 +135,7 @@ humhub.module('wiki', function(module, require, $) {
         unload: unload
     })
 });
-
+
 humhub.module('wiki.Page', function (module, require, $) {
     var Widget = require('ui.widget').Widget;
     var wikiView = require('wiki');
@@ -305,7 +305,7 @@ humhub.module('wiki.Page', function (module, require, $) {
 
     module.export = Page;
 });
-
+
 humhub.module('wiki.Form', function(module, require, $) {
     var Widget = require('ui.widget').Widget;
     var wikiView = require('wiki');
@@ -388,7 +388,7 @@ humhub.module('wiki.Form', function(module, require, $) {
 
     module.export = Form;
 });
-
+
 humhub.module('wiki.CategoryListView', function(module, require, $) {
     var Widget = require('ui.widget').Widget;
     var client = require('client');
@@ -410,6 +410,7 @@ humhub.module('wiki.CategoryListView', function(module, require, $) {
         this.initFoldingSubpages();
         this.initSorting();
         this.initPageTitleLink();
+        this.initDragButtonHoverDelay();
     }
 
     CategoryListView.prototype.initFoldingSubpages = function() {
@@ -657,9 +658,32 @@ humhub.module('wiki.CategoryListView', function(module, require, $) {
         });
     };
 
+    CategoryListView.prototype.initDragButtonHoverDelay = function() {
+        const HOVER_DELAY = 1000;
+        const dragClass = '.wiki-page-control.drag-icon';
+
+        this.$.find('.page-title').each(function () {
+            const $item = $(this);
+            const $dragBtn = $item.find(dragClass);
+
+            let timer = null;
+
+            $item.on('mouseenter', function () {
+                timer = setTimeout(() => {
+                    $dragBtn.addClass('visible');
+                }, HOVER_DELAY);
+            });
+
+            $item.on('mouseleave', function () {
+                clearTimeout(timer);
+                $dragBtn.removeClass('visible');
+            });
+        });
+    };
+
     module.export = CategoryListView;
 });
-
+
 humhub.module('wiki.linkExtension', function (module, require, $) {
     var richtext = require('ui.richtext.prosemirror');
     var Widget = require('ui.widget').Widget;
@@ -929,7 +953,7 @@ humhub.module('wiki.linkExtension', function (module, require, $) {
         setEditorLink: setEditorLink
     });
 });
-
+
 humhub.module('wiki.History', function(module, require, $) {
     var Widget = require('ui.widget').Widget;
     var client = require('client');
@@ -988,7 +1012,7 @@ humhub.module('wiki.History', function(module, require, $) {
     }
 
     module.export = History;
-});
+});
 humhub.module('wiki.Sidebar', function(module, require, $) {
     const Widget = require('ui.widget').Widget;
 
@@ -1044,7 +1068,7 @@ humhub.module('wiki.Sidebar', function(module, require, $) {
     }
 
     module.export = Sidebar;
-});
+});
 humhub.module('wiki.ListTable', function(module, require, $) {
     const Widget = require('ui.widget').Widget;
 
@@ -1063,7 +1087,7 @@ humhub.module('wiki.ListTable', function(module, require, $) {
     };
 
     module.export = ListTable;
-});
+});
 /**
  * htmldiff.js a diff algorithm that understands HTML, and produces HTML in the browser.
  *