[Document] Areablock: Editable Dialog Box

bundles/AdminBundle/Resources/public/css/editmode.css

@@ -475,6 +475,14 @@ input.cke_dialog_ui_input_tel {
     top:5px;
 }
 
+.pimcore_areablock_dialogBox .x-fieldset-body {
+    overflow: visible;
+}
+
+.pimcore_areablock_dialogBox legend {
+    width: auto;
+}
+
 .pimcore_areablock_toolbar {
     opacity: .9;
     border-color: #000;
@@ -553,6 +561,10 @@ input.cke_dialog_ui_input_tel {
     display: inline-block;
 }
 
+.pimcore_editable_checkbox input {
+    margin-right: 5px;
+}
+
 /* support for placeholders */
 .pimcore_tag_input[contenteditable=true][data-placeholder]:empty:before,
 .pimcore_editable_input[contenteditable=true][data-placeholder]:empty:before,
@@ -597,6 +609,27 @@ input.cke_dialog_ui_input_tel {
     outline-offset: 5px;
 }
 
+.pimcore_areablock_dialogBox .pimcore_tag_input,
+.pimcore_areablock_dialogBox .pimcore_tag_wysiwyg,
+.pimcore_areablock_dialogBox .pimcore_tag_textarea {
+    background-color: #fff;
+}
+
+.pimcore_areablock_dialogBox .pimcore_tag_input:hover,
+.pimcore_areablock_dialogBox .pimcore_wysiwyg:hover,
+.pimcore_areablock_dialogBox .pimcore_tag_textarea:hover,
+.pimcore_areablock_dialogBox .pimcore_tag_snippet:hover,
+.pimcore_areablock_dialogBox .pimcore_tag_renderlet:hover,
+.pimcore_areablock_dialogBox .pimcore_tag_inc:hover,
+.pimcore_areablock_dialogBox .pimcore_editable_input:hover,
+.pimcore_areablock_dialogBox .pimcore_wysiwyg:hover,
+.pimcore_areablock_dialogBox .pimcore_editable_textarea:hover,
+.pimcore_areablock_dialogBox .pimcore_editable_snippet:hover,
+.pimcore_areablock_dialogBox .pimcore_editable_renderlet:hover,
+.pimcore_areablock_dialogBox .pimcore_editable_inc:hover {
+    outline: none;
+}
+
 .pimcore_tag_input:focus, .pimcore_wysiwyg:focus, .pimcore_tag_textarea:focus,
 .pimcore_editable_input:focus, .pimcore_wysiwyg:focus, .pimcore_editable_textarea:focus {
     outline: none;

bundles/AdminBundle/Resources/public/css/icons.css

@@ -818,6 +818,10 @@
     background: url(/bundles/pimcoreadmin/img/flat-color-icons/edit.svg) center center no-repeat !important;
 }
 
+.pimcore_icon_white_edit {
+    background: url(/bundles/pimcoreadmin/img/flat-white-icons/edit.svg) center center no-repeat !important;
+}
+
 .pimcore_icon_preview {
     background: url(/bundles/pimcoreadmin/img/flat-color-icons/multiple_devices.svg) center center no-repeat !important;
 }

bundles/AdminBundle/Resources/public/js/pimcore/document/edit/startup.js

@@ -124,6 +124,10 @@ Ext.onReady(function () {
             inherited = definition["inherited"];
         }
 
+        if (definition.inDialogBox && typeof pimcore.document.tags[definition.type].prototype['render'] !== 'function') {
+            throw 'Editable of type `' + type + '` with name `' + name + '` does not support the use in the dialog box.';
+        }
+
         if(in_array(name,editableNames)) {
             pimcore.helpers.showNotification("ERROR", "Duplicate editable name: " + name, "error");
         }
@@ -132,7 +136,14 @@ Ext.onReady(function () {
         // @TODO: change pimcore.document.tags to pimcore.document.editables in v7
         var editable = new pimcore.document.tags[definition.type](definition.id, name, definition.config, definition.data, inherited);
         editable.setRealName(definition.realName);
-        editable.setInherited(inherited);
+        editable.setInDialogBox(definition.inDialogBox);
+
+        if(!definition.inDialogBox) {
+            if (typeof editable['render'] === 'function') {
+                editable.render();
+            }
+            editable.setInherited(inherited);
+        }
 
         return editable;
     }

bundles/AdminBundle/Resources/public/js/pimcore/document/editable.js

@@ -18,6 +18,7 @@ pimcore.document.editable = Class.create({
     name: null,
     realName: null,
     inherited: false,
+    inDialogBox: null,
     required: false,
     requiredError: false,
 
@@ -49,6 +50,14 @@ pimcore.document.editable = Class.create({
         return this.realName;
     },
 
+    setInDialogBox: function(inDialogBox) {
+        this.inDialogBox = inDialogBox;
+    },
+
+    getInDialogBox: function() {
+        return this.inDialogBox;
+    },
+
     reloadDocument: function () {
         window.editWindow.reload();
     },