From 40d1099fbd81efb8df884336b5325f99cc9bf5b6 Mon Sep 17 00:00:00 2001
From: per ploug <pph@umbraco.dk>
Date: Mon, 12 May 2014 13:07:44 +0200
Subject: [PATCH] grid modifications

---
 src/Umbraco.Web.UI.Client/.bowerrc            |   3 -
 src/Umbraco.Web.UI.Client/bower.json          |   2 +-
 src/Umbraco.Web.UI.Client/gruntFile.js        |  17 ++
 .../directives/grid/grid.rte.directive.js     |   5 +-
 .../src/views/propertyeditors/grid/grid.html  | 197 ++++++++++--------
 .../PropertyEditors/GridPropertyEditor.cs     |   5 +-
 6 files changed, 131 insertions(+), 98 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/.bowerrc

diff --git a/src/Umbraco.Web.UI.Client/.bowerrc b/src/Umbraco.Web.UI.Client/.bowerrc
deleted file mode 100644
index 17bf34b679..0000000000
--- a/src/Umbraco.Web.UI.Client/.bowerrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"directory" : "lib"
-}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json
index 0eb44dfac9..0fcdd89b3b 100644
--- a/src/Umbraco.Web.UI.Client/bower.json
+++ b/src/Umbraco.Web.UI.Client/bower.json
@@ -17,6 +17,6 @@
   ],
   "dependencies": {
     "typeahead.js": "~0.10.2",
-    "codemirror": "~4.1.0"
+    "ace-builds": "~1.1.3"
   }
 }
diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js
index 316a1442f6..3fa6feeb5b 100644
--- a/src/Umbraco.Web.UI.Client/gruntFile.js
+++ b/src/Umbraco.Web.UI.Client/gruntFile.js
@@ -114,6 +114,23 @@ module.exports = function (grunt) {
         files: [{ dest: '<%= distdir %>/assets', src : '**', expand: true, cwd: 'src/assets/' }]
       },
 
+
+      bower: {
+        files: [
+                {
+                  dest: 'lib/typeahead/typeahead.bundle.min.js', 
+                  src: 'bower_components/typeahead.js/dist/typeahead.bundle.min.js' 
+                },
+                {
+                  dest: 'lib/ace/',
+                  src: '**',
+                  expand: true,
+                  cwd: 'bower_components/ace-builds/src-min-noconflict/' 
+                }
+              ]
+      },
+
+
       installer: {
         files: [{ dest: '<%= distdir %>/views/install', src : '**/*.html', expand: true, cwd: 'src/installer/steps' }]
       },
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js
index 828fe1c3a6..621a67a699 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js
@@ -5,7 +5,8 @@ angular.module("umbraco")
                 uniqueId: '=',
                 value: '=',
                 ctrlOp: '&',
-                ctrlCl: '&'
+                ctrlCl: '&',
+                configuration:"="
             },
             template: "<textarea ng-model=\"value\" rows=\"10\" class=\"mceNoEditor\" id=\"{{uniqueId}}\"></textarea>",
             replace: true,
@@ -13,11 +14,13 @@ angular.module("umbraco")
 
                 var initTiny = function () {
 
+                    //we always fetch the default one, and then override parts with our own
                     tinyMceService.configuration().then(function (tinyMceConfig) {
 
                         //config value from general tinymce.config file
                         var validElements = tinyMceConfig.validElements;
                         var fallbackStyles = [{title: "Page header", block: "h2"}, {title: "Section header", block: "h3"}, {title: "Paragraph header", block: "h4"}, {title: "Normal", block: "p"}, {title: "Quote", block: "blockquote"}, {title: "Code", block: "code"}];
+                        
                         //These are absolutely required in order for the macros to render inline
                         //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce
                         var extendedValidElements = "@[id|class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align]";
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 5fb3e195e2..8c19015b8d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -15,117 +15,130 @@
         </div>
     </div>
 
+
     <!-- Grids -->
     <div class="usky-grid-width" style="width:{{ model.value.gridWidth }}px">
-        <div ng-if="model.config.items.enableGridWidth" class="boxWidth">
-            <label for="">width (px):</label><input type="text" ng-model="model.value.gridWidth" />
-        </div>
+    <div class="tb">
 
+    <div class="usky-column td" ng-class="{last:$index==model.value.columns.length-1}" ng-repeat="column in model.value.columns" style="width:{{column .percentage}}%">
+
+    <div ui-sortable="sortableOptions" ng-model="column.rows">
+
+    <div 
+        ng-repeat="row in column.rows" 
+        class="usky-row"
+        ng-mouseover="setCurrentRow(row)" 
+        ng-mouseleave="disableCurrentRow()"
+        ng-class="{removingControl:currentRemoveControl == row}">
+
+    <div class="row-tools" ng-if="currentRow == row">
+        <div class="cell-tools-remove">
+            <div class="iconBox"
+                ng-click="removeRow(column, $index)"
+                ng-mouseover="setCurrentRemoveControl(row)" 
+                ng-mouseleave="disableCurrentRemoveControl(row)">
+                <i class="icon icon-trash"></i>
+            </div>
+        </div>
+    </div>
+
+    <div ng-class="{last:$index==model.value.length-1,first:$index==0}" 
+        class="{{row.cssClass}} mainContainer">
+
+    <div class="mainTb">
         <div class="tb">
 
-            <div class="usky-column td" ng-class="{last:$index==model.value.columns.length-1}" ng-repeat="column in model.value.columns" style="width:{{column .percentage}}%">
+    <div class="tr">
+        <div style="width:{{ cell.model.percentage }}%"
+             ng-class="{last:$index==row.cells.length-1,first:$index==0}"
+             class="td mainTd"
 
-                <div ui-sortable="sortableOptions" ng-model="column.rows">
+             ng-repeat="cell in row.cells">
 
-                    <div ng-repeat="row in column.rows" class="usky-row">
+    <div ng-repeat="control in cell.controls"
+         ng-class="{backColor:!control.tinyMCE,
+                    last:$index==cell.controls.length-1,
+                    removingControl:currentRemoveControl == control,
+                    toolsControl:currentToolsControl == control,
+                    selectedControl:currentControl == control || isOpenRTEToolbar(control),
+                    jumbotron:row.boxed}"
+         ng-mouseover="setCurrentControl(control)" ng-mouseleave="disableCurrentControl(control)"
+         class="controlContainer">
 
-                        <div ng-class="{selected:row == currentRow}" class="row-tools" ng-mouseover="setCurrentRow(row)" ng-mouseleave="disableCurrentRow()">
-                            <div class="iconBox"><a title="row setting"><i class="icon icon-settings"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableBackground" class="iconBox" ng-click="setBackGroundRow(row)"><a title="background color/image"><i class="icon icon-paint-roller"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableSkipTopMargin" ng-class="{iconBox:1==1,selected:row.skipTopMargin}" ng-click="skipTopMargin(row)"><a title="remove top margin"><i class="icon icon-navigation-top"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableSkipBottomMargin" ng-class="{iconBox:1==1,selected:row.skipBottomMargin}" ng-click="skipBottomMargin(row)"><a title="remove bottom margin"><i class="icon icon-navigation-bottom"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableSkipLeftMargin" ng-class="{iconBox:1==1,selected:row.skipLeftMargin}" ng-click="skipLeftMargin(row)"><a title="remove left margin"><i class="icon icon-navigation-first"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableSkipRightMargin" ng-class="{iconBox:1==1,selected:row.skipRightMargin}" ng-click="skipRightMargin(row)"><a title="remove right margin"><i class="icon icon-navigation-last"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableSkipControlMargin" ng-class="{iconBox:1==1,selected:row.skipControlMargin}" ng-click="skipControlMargin(row)"><a title="remove cell margins"><i class="icon icon-exit-fullscreen"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableFullScreen" ng-class="{iconBox:1==1,selected:row.fullScreen}" ng-click="fullScreen(row)"><a title="full width/height"><i class="icon icon-width"></i></a></div>
-                            <div ng-if="row == currentRow && model.config.items.enableBoxed" ng-class="{iconBox:1==1,selected:row.boxed}" ng-click="boxed(row)"><a title="cells boxed"><i class="icon icon-frame"></i></a></div>
-                            <div ng-if="row == currentRow" class="iconBox" ng-click="removeRow(column, $index)"><a title="remove row"><i class="icon icon-trash"></i></a></div>
-                        </div>
+    <!-- Empty cell tools -->
+    <div class="cell-tools" 
+        ng-if="control && ( currentControl == control || isOpenRTEToolbar(control) )">
 
-                        <div ng-class="{last:$index==model.value.length-1,first:$index==0,
-                            marginTopLess:row.skipTopMargin || row.fullScreen,
-                            marginBottomLess:row.skipBottomMargin || row.fullScreen,
-                            marginLeftLess:row.skipLeftMargin || row.fullScreen,
-                            marginRightLess:row.skipRightMargin || row.fullScreen,
-                            marginControlLess:row.skipControlMargin}" class="{{row.cssClass}} mainContainer">
+        <div class="cell-tools-add" 
+            ng-if="model.config.items.enableMultiCells" 
+            ng-mouseover="setCurrentToolsControl(control)" 
+            ng-mouseleave="disableCurrentToolsControl(control)">
+                                                        
+            <div class="iconBox" 
+                ng-click="addTinyMce(cell, $index)" 
+                ng-if="(currentToolsControl == control) && model.config.items.enableRte">
+                    <i class="icon icon-edit"></i>
+            </div>
+            
+            <div class="iconBox" 
+                ng-click="addMedia(cell, $index)" 
+                ng-if="(currentToolsControl == control) && model.config.items.enableMedia">
+                    <i class="icon icon-picture"></i>
+            </div>
 
-                            <div class="mainTb">
+            <div class="iconBox" 
+                ng-click="addMacro(cell, $index)" 
+                ng-if="(currentToolsControl == control) && model.config.items.enableMacro">
+                <i class="icon icon-settings-alt"></i>
+            </div>
 
-                                <div class="tb">
+            <div class="iconBox" 
+                ng-if="currentToolsControl != control">
+                <i class=" icon icon-add"></i>
+            </div>
+        </div>
 
-                                    <div class="tr">
-                                        <div style="width:{{ cell.model.percentage }}%"
-                                             ng-class="{last:$index==row.cells.length-1,first:$index==0}"
-                                             class="td mainTd"
+        <div class="cell-tools-remove">    
+            <div class="iconBox"
+                ng-click="removeControl(cell, $index)"
+                ng-mouseover="setCurrentRemoveControl(control)" 
+                ng-mouseleave="disableCurrentRemoveControl(control)">
+                <i class="icon icon-trash"></i>
+            </div>
+        </div>
+    </div>
 
-                                             ng-repeat="cell in row.cells">
+    <!-- Tiny cell -->
+    <div ng-if="control && control.tinyMCE"
+         ng-class="{cellPanelRte:1==1,hideRTEToolbar:!isOpenRTEToolbar(control)}">
 
-                                            <div ng-repeat="control in cell.controls"
-                                                 ng-class="{backColor:!control.tinyMCE,
-                                                            last:$index==cell.controls.length-1,
-                                                            first:$index==0,
-                                                            selectedControl:currentControl == control || isOpenRTEToolbar(control),
-                                                            jumbotron:row.boxed}"
-                                                 ng-mouseover="setCurrentControl(control)" ng-mouseleave="disableCurrentControl(control)"
-                                                 class="controlContainer">
+        <!--<div ng-controller="uSky.Grid.Rte.controler">
+            <textarea ng-model="control.tinyMCE" rows="10" id="{{control.tinyMCE.uniqueId}}"></textarea>
+        </div>-->
 
+        <div ng-if="control.tinyMCE"
+             unique-id="control.tinyMCE.uniqueId"
+             value="control.tinyMCE.value"
+             ctrl-op="openRTEToolbar(control)"
+             ctrl-cl="closeRTEToolbar(control)"
+             grid-rte configuration="model.config.rte"></div>
 
-                                                <!-- Empty cell tools -->
-                                                <div class="cell-tools" ng-if="control && ( currentControl == control || isOpenRTEToolbar(control) )">
+    </div>
 
-                                                    <div class="cell-tools-add" ng-if="model.config.items.enableMultiCells" ng-mouseover="setCurrentToolsControl(control)" ng-mouseleave="disableCurrentToolsControl(control)">
-                                                        <div class="iconBox" ng-click="addTinyMce(cell, $index)" ng-if="(currentToolsControl == control) && model.config.items.enableRte">
-                                                            <i class="icon icon-edit"></i>
-                                                        </div>
-                                                        <div class="iconBox" ng-click="addMedia(cell, $index)" ng-if="(currentToolsControl == control) && model.config.items.enableMedia">
-                                                            <i class="icon icon-picture"></i>
-                                                        </div>
-                                                        <div class="iconBox" ng-click="addMacro(cell, $index)" ng-if="(currentToolsControl == control) && model.config.items.enableMacro">
-                                                            <i class="icon icon-settings-alt"></i>
-                                                        </div>
-                                                        <div class="iconBox" ng-if="currentToolsControl != control">
-                                                            <i class=" icon icon-add"></i>
-                                                        </div>
-                                                    </div>
+    <!-- Media cell -->
+    <div ng-if="control && control.media" class="cellMedia">
+        <img ng-src="{{control.media.src}}" class="fullSizeImage" />
+    </div>
 
-                                                    <div class="cell-tools-remove">    
-                                                        <div class="iconBox">
-                                                            <i class="icon icon-trash" ng-click="removeControl(cell, $index)"></i>
-                                                        </div>
-                                                    </div>
-                                                </div>
+    <!-- Macro cell -->
+    <div ng-if="control && control.macro" class="cellMacro">
+        <div class="tools">
+            <i class="icon icon-settings-alt"></i>
+            {{control.macro.macroAlias}}
+        </div>
+    </div>
 
-                                                <!-- Tiny cell -->
-                                                <div ng-if="control && control.tinyMCE"
-                                                     ng-class="{cellPanelRte:1==1,hideRTEToolbar:!isOpenRTEToolbar(control)}">
-
-                                                    <!--<div ng-controller="uSky.Grid.Rte.controler">
-                                                        <textarea ng-model="control.tinyMCE" rows="10" id="{{control.tinyMCE.uniqueId}}"></textarea>
-                                                    </div>-->
-
-                                                    <div ng-if="control.tinyMCE"
-                                                         unique-id="control.tinyMCE.uniqueId"
-                                                         value="control.tinyMCE.value"
-                                                         ctrl-op="openRTEToolbar(control)"
-                                                         ctrl-cl="closeRTEToolbar(control)"
-                                                         grid-rte></div>
-
-                                                </div>
-
-                                                <!-- Macro cell -->
-                                                <div ng-if="control && control.media" class="cellMedia">
-                                                    <img ng-src="{{control.media.src}}" class="fullSizeImage" />
-                                                </div>
-
-                                                <!-- Macro cell -->
-                                                <div ng-if="control && control.macro" class="cellMacro">
-                                                    <div class="tools">
-                                                        <i class="icon icon-settings-alt"></i>
-                                                        {{control.macro.macroAlias}}
-                                                    </div>
-                                                </div>
-
-                                            </div>
+    </div>
 
                                             <!-- Empty cell tools -->
                                             <div class="cellPanel"
diff --git a/src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs b/src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs
index 7a278a1a63..528e4ea1ad 100644
--- a/src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs
+++ b/src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs
@@ -30,7 +30,10 @@ namespace Umbraco.Web.PropertyEditors
 
     internal class gridPreValueEditor : PreValueEditor
     {
-        [PreValueField("items", "Grid Configuration", "views/propertyeditors/grid/grid.prevalues.html", Description = "General grid configuration")]
+        [PreValueField("items", "Grid", "views/propertyeditors/grid/grid.prevalues.html", Description = "Grid configuration")]
         public string Items { get; set; }
+
+        [PreValueField("rte", "Rich text editor", "views/propertyeditors/rte/rte.prevalues.html", Description = "Rich text editor configuration")]
+        public string Rte { get; set; }
     }
 }