fix: burger menu to also work with new core icons (#323)

* Fix burger menu to work with core icons and/or img icons

* Fix: added missing preventDefault to dropdown js

* Fix bug that in rare cases showed an unpublished indicator for an archived version

* Fix test

* Update changelog

* Django CMS 4.1.0rc2 compatibility

* Update admin.py

Author: fsbraun

CHANGELOG.rst

@@ -4,6 +4,8 @@ Changelog
 
 Unreleased
 ==========
+* fix: burger menu adjusts to the design of django cms core dropdown
+* fix: bug that showed an archived version as unpublished in some cases in the state indicator
 * add: Dutch and French translations thanks to Stefan van den Eertwegh and François Palmierso
 * add: transifex support, German translations
 * add: Revert button as replacement for dysfunctional Edit button for unpublished

djangocms_versioning/admin.py

@@ -215,7 +215,7 @@ class Media:
         js = ("admin/js/jquery.init.js", "djangocms_versioning/js/actions.js")
         css = {
             "all": (
-                static_with_version("cms/css/cms.icons.css"),
+                static_with_version("cms/css/cms.admin.css"),
                 "djangocms_versioning/css/actions.css",
             )
         }
@@ -493,7 +493,7 @@ class VersionAdmin(admin.ModelAdmin):
     class Media:
         js = ("admin/js/jquery.init.js", "djangocms_versioning/js/actions.js", "djangocms_versioning/js/compare.js",)
         css = {"all": (
-            static_with_version("cms/css/cms.icons.css"),
+            static_with_version("cms/css/cms.admin.css"),
             "djangocms_versioning/css/actions.css",
         )}
 

djangocms_versioning/indicators.py

@@ -108,10 +108,10 @@ def content_indicator(content_obj):
         elif signature[PUBLISHED]:
             content_obj._indicator_status = "published"
             content_obj._version = signature[PUBLISHED]
-        elif signature[UNPUBLISHED]:
+        elif versions[0].state == UNPUBLISHED:
             content_obj._indicator_status = "unpublished"
             content_obj._version = signature[UNPUBLISHED]
-        elif signature[ARCHIVED]:
+        elif versions[0].state == ARCHIVED:
             content_obj._indicator_status = "archived"
             content_obj._version = signature[ARCHIVED]
         else:  # pragma: no cover

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();

tests/test_indicators.py

@@ -159,9 +159,9 @@ def test_page_indicators(self):
                                         args=(pk,)))
             self.assertEqual(response.status_code, 302)  # Sends a redirect
 
-            # Is unpublished indicator? No draft indicator
+            # Is archived indicator? No draft indicator
             response = self.client.get(page_tree, {"language": "en"})
-            self.assertContains(response, "cms-pagetree-node-state-unpublished")
+            self.assertContains(response, "cms-pagetree-node-state-archived")
             self.assertNotContains(response, "cms-pagetree-node-state-draft")
 
             # Now revert