Fake settings + ability to swap editor and block views

src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblock.directive.js

@@ -1,11 +1,11 @@
 angular.module("umbraco.directives").directive('umbBlockEditorBlock', [
     function () {
         var link = function (scope, el, attr, ctrl) {
+            scope.view = attr.view;
         };
 
         return {
             restrict: "E",
-            replace: true,
             templateUrl: "views/propertyeditors/blockeditor/blockeditor.block.html",
             link: link
         };

src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblocks.directive.js

@@ -5,7 +5,6 @@
 
         return {
             restrict: "E",
-            replace: true,
             templateUrl: "views/propertyeditors/blockeditor/blockeditor.blocks.html",
             link: link
         };

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.block.html

@@ -1,14 +1,16 @@
-<div>
-    <div style="cursor:pointer" ng-click="vm.editContent(block)" class="di">
-        Block identifier goes here (e.g. icon)
-    </div>
-    <div style="cursor:pointer" ng-click="vm.editSettings(block)" class="di">
-        <i class="icon icon-settings"></i>
-    </div>
-    <div style="cursor:move" class="di handle">
-        <i class="icon icon-navigation"></i>
-    </div>
-    <div style="cursor:pointer" ng-click="vm.remove(block)" class="di">
-        <i class="icon icon-trash"></i>
+<div class="handle" >
+    <div ng-if="view" ng-include="view"></div>
+    <div ng-if="!view">
+        <div>
+            <div style="cursor:pointer" ng-click="vm.editSettings(block)" class="di">
+                <i class="icon icon-settings"></i>
+            </div>
+            <div style="cursor:pointer" ng-click="vm.remove(block)" class="di">
+                <i class="icon icon-trash"></i>
+            </div>
+        </div>
+        <div style="cursor:pointer" ng-click="vm.editContent(block)">
+            Eventually a block identifier will go here (e.g. element type icon)
+        </div>
     </div>
 </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.blocks.html

@@ -1,5 +1,8 @@
-<ul class="unstyled" ui-sortable="vm.sortableOptions" ng-model="model.value">
-    <li ng-repeat="block in model.value">
-        <umb-block-editor-block></umb-block-editor-block>
-    </li>
-</ul>
+<div>
+    <div ng-if="vm.blocksView" ng-include="vm.blocksView"></div>
+    <ul ng-if="!vm.blocksView" class="unstyled" ui-sortable="vm.sortableOptions" ng-model="model.value">
+        <li ng-repeat="block in model.value" style="border: 1px solid silver; margin-bottom: 4px; padding: 4px;">
+            <umb-block-editor-block></umb-block-editor-block>
+        </li>
+    </ul>
+</div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.controller.js

@@ -14,6 +14,8 @@
     vm.editContent = editContent;
     vm.editSettings = editSettings;
     vm.remove = remove;
+    // TODO: this needs to be configurable on data type level
+    vm.blocksView = null; // "/App_Plugins/MyBlockEditor/myblockeditor.html";
 
     // it would be awesome if we could load all scaffolds in one go... however we need to have an eye out for performance,
     // oddly enough it's been shown to actually be slower to load them all at once instead of one at a time
@@ -44,6 +46,12 @@
                     return blockConfig.elementType === scaffold.udi;
                 });
             });
+
+            _.each($scope.model.value, function (block) {
+                applyFakeSettings(block);
+            });
+
+
             vm.loading = false;
         }
     }
@@ -85,6 +93,7 @@
                 });
                 if ($scope.model.value.indexOf(block) < 0) {
                     $scope.model.value.push(block);
+                    applyFakeSettings(block);
                 }
 
                 editorService.close();
@@ -103,7 +112,7 @@
             view: "views/propertyeditors/blockeditor/blockeditor.editsettings.html",
             size: "medium",
             submit: function(model) {
-                console.log("TODO: something with block settings", model)
+                applyFakeSettings(block);
                 editorService.close();
             },
             close: function() {
@@ -114,11 +123,18 @@
     }
 
     function remove(block) {
+        // this should be replaced by a custom dialog (pending some PRs)
         if (confirm("TODO: Are you sure?")) {
             $scope.model.value.splice($scope.model.value.indexOf(block), 1);
         }
     }
 
     init();
+
+    // TODO: remove this (only for testing)
+    function applyFakeSettings(block) {
+        block.settings["cols"] = 1 + Math.floor(Math.random() * 3);
+        block.settings["rows"] = 1 + Math.floor(Math.random() * 2);
+    }
 }
 angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.PropertyEditorController", BlockEditorPropertyEditorController);