fix: burger menu to also work with new core icons

djangocms_versioning/static/djangocms_versioning/css/actions.css

@@ -88,15 +88,15 @@ extending the pagetree classes provided by CMS
     width: 10px;
     height: 10px;
     margin-left: -5px;
-    background-color: #fff;
+    background-color: var(--dca-white, var(--body-bg, #fff));
     box-shadow: 0 0 10px rgba(0,0,0,.25);
     -webkit-transform: rotate(45deg) translateZ(0);
     transform: rotate(45deg) translateZ(0);
   }
 
 .cms-actions-dropdown-menu.open {
     display: block;
-    width: 200px;
+    width: fit-content;
 }
 
 .cms-actions-dropdown-menu.closed {
@@ -117,18 +117,18 @@ ul.cms-actions-dropdown-menu-inner {
     margin: 0;
     padding: 0 !important;
     border-radius: 5px;
-    background-color: #fff;
+    background-color: var(--dca-white, var(--body-bg, #fff));
+    overflow: hidden;
 }
 
 ul.cms-actions-dropdown-menu-inner li {
-    border: 1px solid transparent;
-    border-radius: 5px;
-    padding: 2px 6px;
+    border: 0px solid transparent;
+    padding: 0;
     list-style-type: none;
 }
 ul.cms-actions-dropdown-menu-inner li:hover {
-    border: 1px solid #ccc;
-    background-color: #0bf;
+    border: 0px solid var(--dca-gray-lighter, var(--border-color, #ccc));
+    background-color: var(--dca-primary, var(--primary, #79aec8));
 }
 
 a.cms-actions-dropdown-menu-item-anchor {
@@ -147,27 +147,23 @@ a.cms-actions-dropdown-menu-item-anchor:visited,
 a.cms-actions-dropdown-menu-item-anchor:link,
 a.cms-actions-dropdown-menu-item-anchor:link:visited
 {
-    color: #666 !important;
+    color: unset !important;
 }
 a.cms-actions-dropdown-menu-item-anchor:hover,
 a.cms-actions-dropdown-menu-item-anchor:active,
 a.cms-actions-dropdown-menu-item-anchor:link:hover,
 a.cms-actions-dropdown-menu-item-anchor:link:active
 {
-    color: #fff !important;
-    background: #0bf;
+    color: var(--dca-white, var(--body-bg, #fff)) !important;
+    background: var(--dca-primary, var(--primary, #79aec8));
 }
 
 /* set the size of the option icon */
-a.cms-actions-dropdown-menu-item-anchor img {
+a.cms-actions-dropdown-menu-item-anchor span.cms-icon {
     width: 20px;
     height: 20px;
-}
-/* align the option text with it's icon */
-a.cms-actions-dropdown-menu-item-anchor span {
-    line-height: 1rem;
-    vertical-align: 20%;
-    margin-left: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
 }
 /* disable any inactive option */
 a.cms-actions-dropdown-menu-item-anchor.inactive {

djangocms_versioning/static/djangocms_versioning/js/actions.js

@@ -68,16 +68,7 @@
     // Create burger menu:
     $(function() {
 
-        let burger_menu_icon;
-        if(typeof(versioning_static_url_prefix) != 'undefined'){
-          burger_menu_icon = `${versioning_static_url_prefix}svg/menu.svg`;
-        } else {
-          burger_menu_icon = '/static/djangocms_versioning/svg/menu.svg';
-          console.warn('"versioning_static_url_prefix" not defined! No value has been provided for static_url, '
-                      + 'defaulting to "/static/djangocms_versioning/svg/" for icon location.');
-        }
-
-        let createBurgerMenu = function createBurgerMenu(row) {
+         let createBurgerMenu = function createBurgerMenu(row) {
 
             let actions = $(row).children('.field-list_actions');
             if (!actions.length) {
@@ -87,9 +78,9 @@
 
             /* create burger menu anchor icon */
             let anchor = document.createElement('a');
-            let icon = document.createElement('img');
+            let icon = document.createElement('span');
 
-            icon.setAttribute('src', burger_menu_icon);
+            icon.setAttribute('class', 'cms-icon cms-icon-menu');
             anchor.setAttribute('class', 'btn cms-versioning-action-btn closed');
             anchor.setAttribute('title', 'Actions');
             anchor.appendChild(icon);
@@ -107,7 +98,6 @@
 
             /* get the existing actions and move them into the options container */
             $(actions[0]).children('.cms-versioning-action-btn').each(function (index, item) {
-
               /* exclude preview and edit buttons */
               if (item.classList.contains('cms-versioning-action-preview') ||
                   item.classList.contains('cms-versioning-action-edit')) {
@@ -123,11 +113,12 @@
               if ($(item).hasClass('cms-form-get-method')) {
                 li_anchor.classList.add('cms-form-get-method'); // Ensure the fake-form selector is propagated to the new anchor
               }
-              /* move the icon image */
-              li_anchor.appendChild($(item).children('img')[0]);
+              /* move the icon */
+              li_anchor.appendChild($(item).children()[0]);
 
               /* create the button text and construct the button */
               let span = document.createElement('span');
+              span.setAttribute('class', 'label');
               span.appendChild(
                 document.createTextNode(item.title)
               );
@@ -140,21 +131,23 @@
               actions[0].removeChild(item);
             });
 
-            /* add the options to the drop-down */
-            optionsContainer.appendChild(ul);
-            actions[0].appendChild(anchor);
-            document.body.appendChild(optionsContainer);
-
-            /* listen for burger menu clicks */
-            anchor.addEventListener('click', function (ev) {
-              ev.stopPropagation();
-              toggleBurgerMenu(anchor, optionsContainer);
-            });
-
-            /* close burger menu if clicking outside */
-            $(window).click(function () {
-              closeBurgerMenu();
-            });
+            if ($(ul).children().length > 0) {
+              /* add the options to the drop-down */
+              optionsContainer.appendChild(ul);
+              actions[0].appendChild(anchor);
+              document.body.appendChild(optionsContainer);
+
+              /* listen for burger menu clicks */
+              anchor.addEventListener('click', function (ev) {
+                ev.stopPropagation();
+                toggleBurgerMenu(anchor, optionsContainer);
+              });
+
+              /* close burger menu if clicking outside */
+              $(window).click(function () {
+                closeBurgerMenu();
+              });
+            }
           };
 
         let toggleBurgerMenu = function toggleBurgerMenu(burgerMenuAnchor, optionsContainer) {
@@ -172,8 +165,8 @@
             }
 
             let pos = bm.offset();
-            op.css('left', pos.left - 200);
-            op.css('top', pos.top);
+            op.css('left', pos.left - op.width() - 5);
+            op.css('top', pos.top - 2);
           };
 
         let closeBurgerMenu = function closeBurgerMenu() {

djangocms_versioning/static/djangocms_versioning/js/indicators.js

@@ -107,6 +107,7 @@
     $(function() {
         $('.js-cms-pagetree-dropdown-trigger').click(function(event) {
             event.stopPropagation();
+            event.preventDefault();
             var menu = JSON.parse(this.dataset.menu);
             menu = open_menu(menu);
             var offset = $(this).offset();