[WIP] form layout is error prone and intimidating (dnd fields)

buildout.cfg

@@ -69,7 +69,7 @@ setuptools = 8.3
 zc.buildout = 2.2.5
 zc.recipe.egg = 2.0.1
 
-flake8 = 2.3.0
+flake8 = 2.4.0
 
 robotframework = 2.8.4
 robotframework-ride = 1.3

setup.py

@@ -46,6 +46,7 @@
         'plone.app.dexterity',
         'jsonutil',
         'collective.instancebehavior',
+        'pyquery',
         'plone.restapi',
     ],
     extras_require={

src/Products/CMFPlomino/browser/configure.zcml

@@ -162,43 +162,36 @@
     <browser:page
         name="tinyform"
         for="Products.CMFPlomino.contents.form.IPlominoForm"
-        class=".tinymce.PlominoForm"
+        class=".tinymce.PlominoFormSettings"
         permission="zope.Public"
         allowed_attributes="getField addField addLabel addAction addHidewhen addCache addSubForm action_template"
         />
 
    <browser:page
         name="tinyfield"
         for="Products.CMFPlomino.contents.field.IPlominoField"
-        class=".tinymce.PlominoField"
+        class=".tinymce.PlominoFieldSettings"
         permission="zope.Public"
         allowed_attributes="setFieldProperties"
         />
 
    <browser:page
         name="tinyhidewhen"
         for="Products.CMFPlomino.contents.hidewhen.IPlominoHidewhen"
-        class=".tinymce.PlominoHidewhen"
+        class=".tinymce.PlominoHidewhenSettings"
         permission="zope.Public"
         allowed_attributes="setHidewhenProperties"
         />
 
    <browser:page
         name="tinyaction"
         for="Products.CMFPlomino.contents.action.IPlominoAction"
-        class=".tinymce.PlominoAction"
+        class=".tinymce.PlominoActionSettings"
         permission="zope.Public"
         allowed_attributes="setActionProperties"
         />
 
     <!--
-   <browser:page
-        name="tinyhidewhen"
-        for="Products.CMFPlomino.contents..IPlominoHidewhen"
-        class=".hidewhen.PlominoHidewhen"
-        permission="zope.Public"
-        allowed_attributes="setHidewhenProperties"
-        />
 
    <browser:page
         name="tinycache"

src/Products/CMFPlomino/browser/static/css/tinymce.css

@@ -1,40 +1,204 @@
+span.plominoFieldClass,
+span.plominoLabelClass,
+span.plominoHidewhenClass,
+span.plominoActionClass,
+span.plominoSubformClass{
+    position:relative;
+    display: inline-block;
+}
+div.plominoFieldClass,
+div.plominoLabelClass,
+div.plominoHidewhenClass,
+div.plominoActionClass,
+div.plominoSubformClass{
+    position:relative;
+    display:block;
+}
+
+
+
+.plominoFieldClass:hover:before,
+.plominoLabelClass:hover:before,
+.plominoHidewhenClass:hover:before,
+.plominoActionClass:hover:before,
+.plominoSubformClass:hover:before{
+    background: rgba(0,0,0,.8);
+    border-radius: 5px 5px 0px 0px;
+    color: #fff;
+    bottom:100%;
+    left: 0%;
+    content: attr(data-plominoid);
+    padding: 2px 5px;
+    position: absolute;
+    z-index: 98;
+    font-size: 10px;
+}
+
+div.plominoLabelClass:hover:before {
+    position: absolute;
+    top: -16px;
+}
+div.plominoLabelClass {
+    width: 80%;
+    margin-bottom: 10px;
+}
+
+
 .plominoFieldClass {
-    padding: 2px 10px;
-    color: #1b6899;
-    background-color: #ffffff;
-    border: 1px solid #1b6899;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    outline: 1px dashed #1b6899;
+}
+.plominoFieldClass:hover:before {
+    color: #ffffff;
+    background-color: #1b6899;
 }
+
 .plominoLabelClass {
-    padding: 2px 10px;
-    color: #aaaaFF;
-    background-color: #ffffff;
-    border: 1px solid #aaaaFF;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    outline: 1px dashed #03632C;
+    padding-left: 25px;
+    min-width: 100px;
+    background-image: url('++resource++Products.CMFPlomino/img/PlominoLabel.png');
+    background-position: 0 0;
+    background-repeat: no-repeat;
+
 }
-.plominoActionClass {
-    padding: 2px 10px;
+.plominoLabelClass:hover:before {
     color: #ffffff;
-    background-color: #1b6899;
-    border: 1px solid #124465;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    background-color: #03632C;
+}
+
+.plominoActionClass {
+    outline: 1px dashed #124465;
+}
+.plominoActionClass:hover:before {
+    color:  #ffffff;
+    background-color:#124465;
 }
-.plominoHidewhenClass {
+
+.plominoSubformClass {
+    outline: 1px dashed #cccccc;
+    /*padding: 2px 10px;*/
+    /*color: #ffffff;*/
+    /*background-color: #cccccc;*/
+    /*border: 1px solid #cccccc;*/
+    /*border-radius: 4px;*/
+    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
+
+}
+.plominoSubformClass:hover:before {
+    color:  #ffffff;
+    background-color:#cccccc;
+}
+
+
+.plominoEditWidgetTab{
+    background: #333;
+    background: rgba(0,0,0,.8);
+    border-radius: 5px 5px 0px 0px;
+    color: #fff;
+    left: 90%;
+    top:-50%;
+    padding: 2px 5px;
+    position: absolute;
+    z-index: 98;
+    font-size: 10px;
+}
+
+.mce-content-body *[contentEditable=false][data-mce-selected] select,
+.mce-content-body *[contentEditable=false][data-mce-selected] input,
+.mce-content-body *[contentEditable=false][data-mce-selected] button,
+.mce-content-body *[contentEditable=false][data-mce-selected] a,
+.mce-content-body *[contentEditable=false][data-mce-selected] textarea
+{
+    /*outline: 2px solid #2d8ac7;*/
+    /*padding: 3px;*/
+    pointer-events: none;
+    cursor: default;
+}
+*[data-plomino-position="start"] {
     padding: 2px 10px;
     color: #cccccc;
-    background-color: #ffffff;
-    border: 1px dashed #cccccc;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    background-color:  #cccccc;
+    background-repeat: no-repeat;
+    margin-right:0.7em;
+    display:inline;
 }
-.plominoSubformClass {
+
+*[data-plomino-position="end"] {
     padding: 2px 10px;
-    color: #ffffff;
-    background-color: #cccccc;
-    border: 1px solid #cccccc;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
+    color: #cccccc;
+    background-color:  #cccccc;
+    background-repeat: no-repeat;
+    margin-left:0.7em;
+    display:inline-block;
+}
+
+.plominoLabelClass[data-plomino-position] {
+    min-width: 10px !important;
+    outline: none;
+
+}
+
+
+.plominoHidewhenClass[data-plomino-position] {
+    background-image: url('++resource++Products.CMFPlomino/img/PlominoHideWhen.png');
+}
+.plominoLabelClass[data-plomino-position] {
+    background-image: url('++resource++Products.CMFPlomino/img/PlominoLabel.png');
+}
+.plominoCacheClass[data-plomino-position] {
+    background-image: url('++resource++Products.CMFPlomino/img/PlominoCache.png');
+}
+
+*[data-plomino-position]:after {
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: rgba(187,0,0,0);
+    border-width: 0.7em;
+    margin-top: -0.7em;
+    z-index: 1;
+    top: 50%;
+}
+
+*[data-plomino-position="start"]:after {
+    left: 100%;
+    border-left-width: 8px;
+    border-left-color:  #cccccc;
+}
+
+*[data-plomino-position="end"]:after {
+    right: 100%;
+    border-right-width: 8px;
+    border-right-color:  #cccccc;
+}
+
+
+
+/*.plominoActionClass {*/
+    /*padding: 2px 10px;*/
+    /*color: #ffffff;*/
+    /*background-color: #1b6899;*/
+    /*border: 1px solid #124465;*/
+    /*border-radius: 4px;*/
+    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
+/*}*/
+
+/*.plominoFieldClass {*/
+    /*padding: 2px 10px;*/
+    /*color: #1b6899;*/
+    /*background-color: #ffffff;*/
+    /*border: 1px solid #1b6899;*/
+    /*border-radius: 4px;*/
+    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
+/*}*/
+/*.plominoSubformClass {*/
+    /*padding: 2px 10px;*/
+    /*color: #ffffff;*/
+    /*background-color: #cccccc;*/
+    /*border: 1px solid #cccccc;*/
+    /*border-radius: 4px;*/
+    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
+/*}*/

src/Products/CMFPlomino/browser/static/js/tinymce.js

@@ -78,18 +78,29 @@
         // Find the element id
         // Select the parent node of the selection
         var selection = ed.selection.getNode();
+        var customText = false;
+        if (elementType === "label") {
+            if (tinymce.DOM.hasClass(selection, 'plominoLabelContent')) {
+                selection = selection.parentNode;
+                var customText = true;
+            } else if (selection.tagName === "DIV" && tinymce.DOM.hasClass(selection, "plominoLabelClass")) {
+                var customText = true;
+            }
+        }
         // If the node is a <span class="plominoFieldClass"/>, select all its content
         if (tinymce.DOM.hasClass(selection, elementClass))
         {
             ed.selection.select(selection);
-            var elementId = selection.firstChild.nodeValue;
-
-            // hide-when and cache zones start with start:id and finish with end:id
-            if (elementType === "hidewhen" || elementType === "cache")
-            {
-                var splittedId = elementId.split(':');
-                if (splittedId.length > 1)
-                    elementId = splittedId[1];
+            var elementId = selection.getAttribute('data-plominoid');
+            if (elementId == null) {
+                elementId = selection.firstChild.nodeValue;
+                // hide-when and cache zones start with start:id and finish with end:id
+                if (elementType === "hidewhen" || elementType === "cache")
+                {
+                    var splittedId = elementId.split(':');
+                    if (splittedId.length > 1)
+                        elementId = splittedId[1];
+                }
             }
         }
         else if (elementType !== "hidewhen" && elementType !== "cache")
@@ -128,6 +139,9 @@
             var elementId = '';
         }
 
+        if (customText) {
+            elementId = elementId + ':1'
+        }
         var base_url = $('body').attr('data-base-url');
 
         ed.windowManager.open({

src/Products/CMFPlomino/browser/static/js/tinymce.plominolabel.js

@@ -0,0 +1,7 @@
+function toggleLabelText(field) {
+    if (field.checked) {
+        console.log('Label text: enabled');
+    } else {
+        console.log('Label text: disabled');
+    };
+}