implement a categorized add menu in contextmenu

docs/source/widgets.rst

@@ -422,7 +422,7 @@ Furthermore it's possible to register a view action for the contextmenu's
         interface=ExamplePlugin,
         permission='view',
         text='Details',
-        icon='glyphicons glyphicons-magic')
+        icon='bi bi-magic')
     class DetailsContentTile(Tile):
         """For this class a pyramid view is registered which is reachable
         under 'http://domain.com/path/to/node/details'. This view renders
@@ -1083,8 +1083,8 @@ More customization options on ``BatchedItems`` class:
 - **show_title**: Flag whether to show title in the listing header. Defaults
   to ``True``.
 
-- **title_css**: CSS classes to set on title container DOM element. Defaults
-  to ``col-xs-4``. Can be used to change the size of the title area.
+- **title_css**: CSS classes to set on title container DOM element.
+Can be used to change the size of the title area.
 
 - **default_slice_size**: Default number of items displayed in slice. Defaults
   to ``15``.
@@ -1095,14 +1095,14 @@ More customization options on ``BatchedItems`` class:
   listing header. Defaults to ``True``.
 
 - **slice_size_css**: CSS classes to set on slice size selection container DOM
-  element. Defaults to ``col-xs-4 col-sm3``. Can be used to change the size
+  element. Can be used to change the size
   of the slice size selection.
 
 - **show_filter**: Flag whether to display the search filter input in listing
   header. Defaults to ``True``.
 
 - **filter_css**: CSS classes to set on search filter input container DOM
-  element. Defaults to ``col-xs-3``. Can be used to change the size
+  Can be used to change the size
   of the search filter input.
 
 - **head_additional**: Additional arbitrary markup rendered in listing header.

js/src/navtree.js

@@ -25,6 +25,10 @@ export class NavTree {
     constructor(elem) {
         this.elem = elem;
         this.dropdown_elem = $('#navigation-collapse', elem);
+        if (this.dropdown_elem.hasClass('no-collapse')) {
+            // navroot is hidden, no need for collapsing logic
+            return;
+        }
 
         // Expand menu if previously opened.
         if (localStorage.getItem('cone.app.navtree.open')) {

package.json

@@ -11,7 +11,7 @@
     "qunit": "^2.20.1",
     "rollup": "^2.79.2",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.86.0",
+    "sass": "^1.89.1",
     "web-test-runner-qunit": "^2.0.0"
   },
   "packageManager": "[email protected]+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"

scss/content.scss

@@ -1,6 +1,11 @@
 /* content */
 #content {
     height: calc(100% - 40px);
+    position: relative;
+
+    &.has-editor {
+        position: relative;
+    }
 }
 #main-area {
     width: 0!important; /* prevent 'jumping' between 1400 and 1440px */
@@ -13,3 +18,13 @@ tr.selectable td {
     -webkit-user-select: none;
     -ms-user-select: none;
 }
+
+/* batched items */
+#main-area.full {
+    .batched_items_slice_size {
+        max-width: max-content;
+    }
+    .batched_items_filter {
+        max-width: 300px;
+    }
+}

scss/header.scss

@@ -166,3 +166,6 @@
         color: $form-text-color;
     }
 }
+#pathbar {
+    z-index: 5;
+}

scss/sidebar.scss

@@ -39,6 +39,13 @@
                 vertical-align: text-bottom;
             }
         }
+
+        #navigation-collapse.no-collapse {
+            // remove first level item padding if hiding the navroot.
+            > ul > li {
+                padding-left: 0!important;
+            }
+        }
     }
 
     #sidebar_resize {

scss/styles.scss

@@ -11,7 +11,7 @@ html {
 }
 body {
     height: 100%;
-    overflow-y: hidden;
+    overflow-y: hidden!important;
 }
 #footer {
     z-index: 1;
@@ -27,6 +27,10 @@ body {
     border-radius: 0;
     left: calc(-1 * var(--bs-modal-padding));
     width: calc(100% + var(--bs-modal-padding) * 2);
+
+    td.title {
+        width: 100%;
+    }
 }
 
 @import 'content.scss';

src/cone/app/__init__.py

@@ -73,6 +73,7 @@ def __init__(self, model=None, request=None):
         self.columns_fluid = True
         self.pathbar = True
         self.sidebar_left = ['navtree']
+        self.show_navroot = True
 
 
 def import_from_string(path):

src/cone/app/browser/authoring.py

@@ -12,6 +12,7 @@
 from cone.app.browser.form import FormTarget
 from cone.app.browser.utils import make_query
 from cone.app.browser.utils import make_url
+from cone.app.interfaces import ICategories
 from cone.app.model import AdapterNode
 from cone.app.model import BaseNode
 from cone.app.model import get_node_info
@@ -311,6 +312,47 @@ def default_addmodel_factory(parent, nodeinfo):
       permission='add', strict=False)
 class AddDropdown(Tile):
 
+    def category_id(self, category):
+        return 'add-category-cat-{0}'.format(category)
+
+    @property
+    def addables(self):
+        addables = list()
+        for addable in self.model.nodeinfo.addables:
+            if not security.node_available(self.model, addable):
+                continue
+            addables.append(addable)
+        return addables
+
+    @property
+    def categories(self):
+        # expects ``categories`` property on model class
+        ret = list()
+        addables = self.addables
+        if not addables:
+            return ret
+        node_infos = [get_node_info(addable) for addable in addables]
+        # lookup categories
+        categories = set()
+        for info in node_infos:
+            cls = info.node
+            for cat in cls.categories:
+                categories.add(cat)
+        # create items
+        for category in categories:
+            category_items = list()
+            for info in node_infos:
+                cls = info.node
+                if category in cls.categories:
+                    item = self.make_item(cls.node_info_name, info)
+                    category_items.append(item)
+            ret.append((category, category_items))
+        return sorted(ret, key=lambda x: x[0])
+
+    @property
+    def has_categories(self):
+        return ICategories.providedBy(self.model)
+
     def make_item(self, info_name, info):
         model = self.model
         request = self.request

src/cone/app/browser/batch.py

@@ -275,7 +275,7 @@ class BatchedItems(Tile):
     """CSS ID of the batched items container DOM element.
     """
 
-    items_css = 'batched_items panel panel-default'
+    items_css = 'batched_items list-group-item'
     """CSS classes of the batched items container DOM element.
     """
 
@@ -296,9 +296,9 @@ class BatchedItems(Tile):
     """Flag whether to show title in the listing header. Defaults to ``True``.
     """
 
-    title_css = 'col-xs-4'
+    title_css = None
     """CSS classes to set on title container DOM element.
-    Defaults to ``col-xs-4``. Can be used to change the size of the title area.
+    Can be used to change the size of the title area.
     """
 
     default_slice_size = 15
@@ -314,19 +314,19 @@ class BatchedItems(Tile):
      Defaults to ``True``.
     """
 
-    slice_size_css = 'col-xs-4 col-sm3'
+    slice_size_css = None
     """CSS classes to set on slice size selection container DOM element.
-    Defaults to ``col-xs-4 col-sm3``. Can be used to change the size of the
+    Can be used to change the size of the
     slice size selection.
     """
 
     show_filter = True
     """Flag whether to display the search filter input in listing header.
     """
 
-    filter_css = 'col-xs-3'
+    filter_css = None
     """CSS classes to set on search filter input container DOM element.
-    Defaults to ``col-xs-3``. Can be used to change the size of the search
+    Can be used to change the size of the search
     filter input.
     """
 

src/cone/app/browser/layout.py

@@ -320,10 +320,14 @@ def items_for(self, model, breakpoint=None):
       path='templates/navtree.pt',
       permission='view',
       strict=False)
-class NavTree(Tile):
+class NavTree(LayoutConfigTile):
     """Navigation tree tile.
     """
 
+    @property
+    def show_navroot(self):
+        return self.config.show_navroot
+
     @property
     def title(self):
         navroot = self.navroot

src/cone/app/browser/static/cone/cone.app.css

@@ -78,7 +78,7 @@ html {
 
 body {
   height: 100%;
-  overflow-y: hidden;
+  overflow-y: hidden !important;
 }
 
 #footer {
@@ -97,10 +97,17 @@ body {
   left: calc(-1 * var(--bs-modal-padding));
   width: calc(100% + var(--bs-modal-padding) * 2);
 }
+#referencebrowser td.title {
+  width: 100%;
+}
 
 /* content */
 #content {
   height: calc(100% - 40px);
+  position: relative;
+}
+#content.has-editor {
+  position: relative;
 }
 
 #main-area {
@@ -115,6 +122,14 @@ tr.selectable td {
   -ms-user-select: none;
 }
 
+/* batched items */
+#main-area.full .batched_items_slice_size {
+  max-width: max-content;
+}
+#main-area.full .batched_items_filter {
+  max-width: 300px;
+}
+
 #input-contentform-save {
   margin-right: 1rem;
 }
@@ -249,6 +264,10 @@ tr.selectable td {
   color: var(--bs-secondary-color);
 }
 
+#pathbar {
+  z-index: 5;
+}
+
 #form-loginform {
   display: flex;
   flex-direction: column;
@@ -420,6 +439,9 @@ tr.selectable td {
   overflow-x: hidden;
   vertical-align: text-bottom;
 }
+#sidebar_left #navtree #navigation-collapse.no-collapse > ul > li {
+  padding-left: 0 !important;
+}
 #sidebar_left #sidebar_resize {
   position: relative;
   left: 100%;

src/cone/app/browser/static/cone/cone.app.js

@@ -1381,6 +1381,9 @@ var cone = (function (exports, $, ts) {
         constructor(elem) {
             this.elem = elem;
             this.dropdown_elem = $('#navigation-collapse', elem);
+            if (this.dropdown_elem.hasClass('no-collapse')) {
+                return;
+            }
             if (localStorage.getItem('cone.app.navtree.open')) {
                 this.dropdown_elem.addClass('show');
             }

src/cone/app/browser/table.py

@@ -44,8 +44,8 @@ class Table(Tile):
     ajax_path = None
     ajax_path_event = None
 
-    table_length_size = 'col-xs-4 col-sm-3'
-    table_filter_size = 'col-xs-3'
+    table_length_size = None
+    table_filter_size = None
 
     @property
     def slice(self):