WIP Compact admin form UI with widgets attributes

.gitignore

@@ -23,3 +23,5 @@ workdir/
 filer_public/
 filer_public_thumbnails/
 examples/bs3demo/private_settings.py
+.venv/
+poetry.lock

cmsplugin_cascade/bootstrap4/accordion.py

@@ -10,7 +10,7 @@
 from cmsplugin_cascade.plugin_base import TransparentWrapper, TransparentContainer
 from cmsplugin_cascade.widgets import NumberInputWidget
 from .plugin_base import BootstrapPluginBase
-
+from cmsplugin_cascade.helpers import used_compact_form, entangled_nested
 
 class AccordionFormMixin(ManageChildrenFormMixin, EntangledModelFormMixin):
     num_children = IntegerField(
@@ -35,6 +35,9 @@ class AccordionFormMixin(ManageChildrenFormMixin, EntangledModelFormMixin):
          help_text=_("Start with the first card open.")
     )
 
+    if used_compact_form:
+        entangled_nested(num_children, close_others,first_is_open, data_nested='accordion')
+
     class Meta:
         untangled_fields = ['num_children']
         entangled_fields = {'glossary': ['close_others', 'first_is_open']}
@@ -85,6 +88,9 @@ class AccordionGroupFormMixin(EntangledModelFormMixin):
          help_text=_("Add standard padding to card body."),
     )
 
+    if used_compact_form:
+        entangled_nested(heading,body_padding,  data_nested='accordion_group')
+
     class Meta:
         entangled_fields = {'glossary': ['heading', 'body_padding']}
 

cmsplugin_cascade/bootstrap4/buttons.py

@@ -9,7 +9,10 @@
 from cmsplugin_cascade.icon.forms import IconFormMixin
 from cmsplugin_cascade.link.config import LinkPluginBase, LinkFormMixin
 from cmsplugin_cascade.link.plugin_base import LinkElementMixin
+from cmsplugin_cascade.helpers import used_compact_form, entangled_nested
 
+from sass_processor.processor import sass_processor
+sass_processor('cascade/css/admin/compact_forms/bootstrap4-colors.scss')
 
 class ButtonTypeWidget(widgets.RadioSelect):
     """
@@ -24,7 +27,6 @@ class ButtonSizeWidget(widgets.RadioSelect):
     """
     template_name = 'cascade/admin/legacy_widgets/button_sizes.html' if DJANGO_VERSION < (2, 0) else 'cascade/admin/widgets/button_sizes.html'
 
-
 class ButtonFormMixin(EntangledModelFormMixin):
     BUTTON_TYPES = [
         ('btn-primary', _("Primary")),
@@ -104,6 +106,12 @@ class ButtonFormMixin(EntangledModelFormMixin):
         help_text=_("Add an Icon before or after the button content."),
     )
 
+    if used_compact_form:
+        entangled_nested(link_content,button_type,button_size,button_options,\
+           stretched_link, data_nested='button')
+        entangled_nested(button_type, data_nested='button', template_key='button_type')
+        entangled_nested(icon_align, data_nested='icon')
+
     class Meta:
         entangled_fields = {'glossary': ['link_content', 'button_type', 'button_size', 'button_options', 'icon_align',
                                          'stretched_link']}

cmsplugin_cascade/bootstrap4/carousel.py

@@ -14,6 +14,7 @@
 from cmsplugin_cascade.bootstrap4.utils import IMAGE_RESIZE_OPTIONS
 from cmsplugin_cascade.forms import ManageChildrenFormMixin
 from cmsplugin_cascade.image import ImagePropertyMixin, ImageFormMixin
+from cmsplugin_cascade.helpers import used_compact_form, entangled_nested
 
 logger = logging.getLogger('cascade')
 
@@ -55,6 +56,9 @@ class CarouselSlidesFormMixin(ManageChildrenFormMixin, EntangledModelFormMixin):
         initial=['upscale', 'crop', 'subject_location', 'high_resolution'],
     )
 
+    if used_compact_form:
+        entangled_nested(resize_options, container_max_heights,options,interval,num_children, data_nested='carousel')
+
     class Meta:
         untangled_fields = ['num_children']
         entangled_fields = {'glossary': ['interval', 'options', 'container_max_heights', 'resize_options']}

cmsplugin_cascade/bootstrap4/container.py

@@ -11,6 +11,7 @@
 from cmsplugin_cascade import app_settings
 from cmsplugin_cascade.bootstrap4.grid import Breakpoint
 from cmsplugin_cascade.forms import ManageChildrenFormMixin
+from cmsplugin_cascade.helpers import entangled_nested, used_compact_form
 from .plugin_base import BootstrapPluginBase
 from . import grid
 
@@ -19,17 +20,26 @@ def get_widget_choices():
     breakpoints = app_settings.CMSPLUGIN_CASCADE['bootstrap4']['fluid_bounds']
     widget_choices = []
     for index, (bp, bound) in enumerate(breakpoints.items()):
-        if index == 0:
-            widget_choices.append((bp.name, "{} (<{:.1f}px)".format(bp.label, bound.max)))
-        elif index == len(breakpoints) - 1:
-            widget_choices.append((bp.name, "{} (≥{:.1f}px)".format(bp.label, bound.min)))
+        if not used_compact_form:
+            if index == 0:
+                widget_choices.append((bp.name, "{} (<{:.1f}px)".format(bp.label, bound.max)))
+            elif index == len(breakpoints) - 1:
+                widget_choices.append((bp.name, "{} (≥{:.1f}px)".format(bp.label, bound.min)))
+            else:
+                widget_choices.append((bp.name, "{} (≥{:.1f}px and <{:.1f}px)".format(bp.label, bound.min, bound.max)))
         else:
-            widget_choices.append((bp.name, "{} (≥{:.1f}px and <{:.1f}px)".format(bp.label, bound.min, bound.max)))
+            if index == 0:
+                 widget_choices.append((bp.name, "{} <{:.1f}px".format(bp._name_, bound.max)))
+            else:
+                 widget_choices.append((bp.name, "{} ≥{:.1f}px".format(bp._name_, bound.min)))
     return widget_choices
 
 
 class ContainerBreakpointsWidget(widgets.CheckboxSelectMultiple):
-    template_name = 'cascade/admin/legacy_widgets/container_breakpoints.html' if DJANGO_VERSION < (2, 0) else 'cascade/admin/widgets/container_breakpoints.html'
+    if not used_compact_form:
+        template_name = 'cascade/admin/legacy_widgets/container_breakpoints.html' if DJANGO_VERSION < (2, 0) else 'cascade/admin/widgets/container_breakpoints.html'
+    else:
+        template_name = 'cascade/admin/compact_forms/widgets/container_breakpoints.html'
 
 
 class ContainerFormMixin(EntangledModelFormMixin):
@@ -48,6 +58,9 @@ class ContainerFormMixin(EntangledModelFormMixin):
         help_text=_("Changing your outermost '.container' to '.container-fluid'.")
     )
 
+    if used_compact_form:
+        entangled_nested( breakpoints, fluid, data_nested="container")
+
     class Meta:
         entangled_fields = {'glossary': ['breakpoints', 'fluid']}
 
@@ -121,6 +134,9 @@ class BootstrapRowFormMixin(ManageChildrenFormMixin, EntangledModelFormMixin):
         help_text=_('Number of columns to be created with this row.'),
     )
 
+    if used_compact_form:
+        entangled_nested( num_children, data_nested="row")
+
     class Meta:
         untangled_fields = ['num_children']
 
@@ -196,7 +212,7 @@ def choose_help_text(*phrases):
                 return phrases[1].format(bs4_breakpoints[first].min)
             else:
                 return phrases[2]
-            
+
         if 'parent' in self._cms_initial_attributes:
             container=self._cms_initial_attributes['parent'].get_ancestors().order_by('depth').last().get_bound_plugin()
         else:
@@ -233,7 +249,7 @@ def choose_help_text(*phrases):
                 width_fields[field_name] = ChoiceField(
                     choices=choices,
                     label=_("Column width for {}").format(devices),
-                    initial='col-{}-12'.format(bp),
+                    initial='col' if bp =='xs' else 'col-{}'.format(bp),
                     help_text=choose_help_text(
                         _("Column width for devices narrower than {:.1f} pixels."),
                         _("Column width for devices wider than {:.1f} pixels."),
@@ -325,6 +341,13 @@ def choose_help_text(*phrases):
         glossary_fields.extend(reorder_fields.keys())
         glossary_fields.extend(responsive_fields.keys())
 
+
+        if used_compact_form:
+            entangled_nested(width_fields, data_nested="column", template_key="column", )
+            entangled_nested(offset_fields, data_nested="offset", template_key="column", )
+            entangled_nested(reorder_fields, data_nested="reorder", template_key="column",)
+            entangled_nested(responsive_fields, data_nested="responsive", template_key="column")
+
         class Meta:
             entangled_fields = {'glossary': glossary_fields}
 

cmsplugin_cascade/bootstrap4/icon.py

@@ -8,7 +8,7 @@
 from cmsplugin_cascade.link.plugin_base import LinkElementMixin
 from cmsplugin_cascade.icon.forms import IconFormMixin
 from cmsplugin_cascade.icon.plugin_base import IconPluginMixin
-
+from cmsplugin_cascade.helpers import used_compact_form, entangled_nested
 
 class FramedIconFormMixin(IconFormMixin):
     SIZE_CHOICES = [('{}em'.format(c), "{} em".format(c)) for c in range(1, 13)]
@@ -56,6 +56,10 @@ class FramedIconFormMixin(IconFormMixin):
         required=False,
     )
 
+    if used_compact_form:
+        entangled_nested(font_size, color, background_color, text_align, border,
+                                         border_radius, data_nested='icon')
+
     class Meta:
         entangled_fields = {'glossary': ['font_size', 'color', 'background_color', 'text_align', 'border',
                                          'border_radius']}

cmsplugin_cascade/bootstrap4/image.py

@@ -10,6 +10,7 @@
 from cmsplugin_cascade.fields import SizeField
 from cmsplugin_cascade.link.config import LinkPluginBase, LinkFormMixin
 from cmsplugin_cascade.link.plugin_base import LinkElementMixin
+from cmsplugin_cascade.helpers import used_compact_form, entangled_nested
 
 logger = logging.getLogger('cascade.bootstrap4')
 
@@ -67,6 +68,10 @@ class BootstrapImageFormMixin(ImageFormMixin):
         help_text=_("How to align a non-responsive image."),
     )
 
+    if used_compact_form:
+        entangled_nested(image_shapes, image_width_responsive, image_width_fixed,
+         image_height, resize_options, image_alignment, data_nested='image_setting')
+
     class Meta:
         entangled_fields = {'glossary': ['image_shapes', 'image_width_responsive', 'image_width_fixed',
                                          'image_height', 'resize_options', 'image_alignment']}

cmsplugin_cascade/bootstrap4/jumbotron.py

@@ -12,6 +12,7 @@
 from cmsplugin_cascade.bootstrap4.container import ContainerGridMixin
 from cmsplugin_cascade.bootstrap4.fields import BootstrapMultiSizeField
 from cmsplugin_cascade.bootstrap4.picture import get_picture_elements
+from cmsplugin_cascade.helpers import entangled_nested, used_compact_form
 
 logger = logging.getLogger('cascade')
 
@@ -154,6 +155,11 @@ class JumbotronFormMixin(EntangledModelFormMixin):
         help_text=_("This property specifies the width and height of a background image in px or %."),
     )
 
+    if used_compact_form:
+        entangled_nested(fluid, background_color, element_heights, image_file,
+                                 background_repeat, background_attachment,
+                                 background_vertical_position, background_horizontal_position,
+                                 background_size, background_width_height, data_nested='jumbotron')
     class Meta:
         entangled_fields = {'glossary': ['fluid', 'background_color', 'element_heights', 'image_file',
                                          'background_repeat', 'background_attachment',

cmsplugin_cascade/bootstrap4/mixins.py

@@ -4,7 +4,7 @@
 from entangled.forms import EntangledModelFormMixin
 from cmsplugin_cascade.utils import CascadeUtilitiesMixin
 from cmsplugin_cascade.bootstrap4.grid import Breakpoint
-
+from cmsplugin_cascade.helpers import entangled_nested, used_compact_form
 
 class BootstrapUtilities(type):
     """
@@ -26,23 +26,53 @@ class BootstrapUtilities(type):
 
     The class ``BootstrapUtilities`` offers a bunch of property methods which return a list of
     input fields and/or select boxes. They then can be added to the plugin's editor. This is
-    specially useful to add CSS classes from the utilities section of Bootstrap-4, such as
+    specially useful to add CSS classes or HTML data attributes from the utilities section of Bootstrap-4, such as
     margins, borders, colors, etc.
+
+    The 'property_name' attritbute in property methods is needed because python property methods don't have name
+    attributes without using inspect module or others things. 
+    The 'attrs_type' attritbute in property methods can have two possiblity values 'css_classes' or 'html_data_attrs'.
+    The 'anchors_fields' in the property_fields attributes can add choices id elements of the current page, theses
+    choices are realy set when the request is available.
     """
+
     def __new__(cls, *args):
         form_fields = {}
+        form_fields_by_property_name = {}
+        form_fields_by_attr_type = {}
+        fields_choices_anchors = []
+
         for arg in args:
             if isinstance(arg, property):
-                form_fields.update(arg.fget(cls))
+                property_fields=arg.fget(cls)
+                form_subfields = property_fields['form_fields']
+                attrs_type = property_fields['attrs_type']
+                property_name = property_fields['property_name']
+
+                form_fields.update(form_subfields)
+                form_fields_by_property_name[property_name]= property_fields['form_fields']
+
+                form_fields_by_attr_type.setdefault(attrs_type, [])
+                form_fields_by_attr_type[attrs_type ].extend(property_fields['form_fields'].keys())
+
+                if 'anchors_fields' in  property_fields:
+                    fields_choices_anchors.extend(property_fields['anchors_fields'])
+
+        if used_compact_form:
+            for property_name , field in form_fields_by_property_name.items():
+                entangled_nested(field, data_nested=property_name , template_key=property_name)
 
         class Meta:
             entangled_fields = {'glossary': list(form_fields.keys())}
 
-        utility_form_mixin = type('UtilitiesFormMixin', (EntangledModelFormMixin,), dict(form_fields, Meta=Meta))
-        return type('BootstrapUtilitiesMixin', (CascadeUtilitiesMixin,), {'utility_form_mixin': utility_form_mixin})
+        utility_form_mixin = type('UtilitiesFormMixin', (EntangledModelFormMixin,), dict(form_fields, Meta=Meta) )
+        return type('HtmlAttrsUtilitiesMixin', (CascadeUtilitiesMixin,), {'utility_form_mixin': utility_form_mixin,
+                     'attr_type': form_fields_by_attr_type , 'fields_with_choices_anchors': fields_choices_anchors })
 
     @property
     def background_and_color(cls):
+        attrs_type = 'css_classes'
+        property_name = 'background_and_color'
         choices = [
             ('', _("Default")),
             ('bg-primary text-white', _("Primary with white text")),
@@ -57,15 +87,19 @@ def background_and_color(cls):
             ('bg-transparent text-dark', _("Transparent with dark text")),
             ('bg-transparent text-white', _("Transparent with white text")),
         ]
-        return {'background_and_color': ChoiceField(
+        form_fields = {'background_and_color': ChoiceField(
             label=_("Background and color"),
             choices=choices,
             required=False,
             initial='',
         )}
+        property_fields = { 'form_fields':form_fields, 'attrs_type': attrs_type, 'property_name':property_name }
+        return property_fields 
 
     @property
     def margins(cls):
+        attrs_type = 'css_classes'
+        property_name = 'margins'
         form_fields = {}
         choices_format = [
             ('m-{}{}', _("4 sided margins ({})")),
@@ -91,10 +125,13 @@ def margins(cls):
                 required=False,
                 initial='',
             )
-        return form_fields
+        property_fields = { 'form_fields':form_fields, 'attrs_type': attrs_type, 'property_name':property_name }
+        return property_fields 
 
     @property
     def vertical_margins(cls):
+        attrs_type = 'css_classes'
+        property_name = 'vertical_margins'
         form_fields = {}
         choices_format = [
             ('my-{}{}', _("Vertical margins ({})")),
@@ -116,10 +153,13 @@ def vertical_margins(cls):
                 required=False,
                 initial='',
             )
-        return form_fields
+        property_fields = { 'form_fields':form_fields, 'attrs_type': attrs_type, 'property_name':property_name }
+        return property_fields 
 
     @property
     def paddings(cls):
+        attrs_type = 'css_classes'
+        property_name = 'paddings'
         form_fields = {}
         choices_format = [
             ('p-{}{}', _("4 sided padding ({})")),
@@ -145,11 +185,14 @@ def paddings(cls):
                 required=False,
                 initial='',
             )
-        return form_fields
+        property_fields = { 'form_fields':form_fields, 'attrs_type': attrs_type, 'property_name':property_name }
+        return property_fields 
 
     @property
     def floats(cls):
         form_fields = {}
+        attrs_type = 'css_classes'
+        property_name = 'floats'
         choices_format = [
             ('float-{}none', _("Do not float")),
             ('float-{}left', _("Float left")),
@@ -169,4 +212,5 @@ def floats(cls):
                 required=False,
                 initial='',
             )
-        return form_fields
+        property_fields = { 'form_fields':form_fields, 'attrs_type': attrs_type, 'property_name':property_name }
+        return property_fields 

cmsplugin_cascade/bootstrap4/picture.py

@@ -10,6 +10,7 @@
 from cmsplugin_cascade.image import ImageFormMixin, ImagePropertyMixin
 from cmsplugin_cascade.link.config import LinkPluginBase, LinkFormMixin
 from cmsplugin_cascade.link.plugin_base import LinkElementMixin
+from cmsplugin_cascade.helpers import used_compact_form, entangled_nested
 
 logger = logging.getLogger('cascade.bootstrap4')
 
@@ -48,6 +49,9 @@ class BootstrapPictureFormMixin(ImageFormMixin):
         initial=['img-fluid']
     )
 
+    if used_compact_form:
+        entangled_nested(responsive_heights, responsive_zoom, resize_options, image_shapes, data_nested='picture')
+
     class Meta:
         entangled_fields = {'glossary': ['responsive_heights', 'responsive_zoom', 'resize_options', 'image_shapes']}