Merge branch 'dev-v7' into dev-v7.8

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html

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

@@ -77,7 +77,7 @@
 
 @param {string} icon (<code>binding</code>): The node icon.
 @param {string} name (<code>binding</code>): The node name.
-@param {boolean} published (<code>binding</code>): The node pusblished state.
+@param {boolean} published (<code>binding</code>): The node published state.
 @param {string} description (<code>binding</code>): A short description.
 @param {boolean} sortable (<code>binding</code>): Will add a move cursor on the node preview. Can used in combination with ui-sortable.
 @param {boolean} allowRemove (<code>binding</code>): Show/Hide the remove button.

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

@@ -1,4 +1,15 @@
-(function () {
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbPasswordToggle
+@restrict E
+@scope
+
+@description
+<strong>Added in Umbraco v. 7.7.4:</strong> Use this directive to render a password toggle.
+
+**/
+
+(function () {
     'use strict';
 
     // comes from https://codepen.io/jakob-e/pen/eNBQaP

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

@@ -1,3 +1,114 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbTable
+@restrict E
+@scope
+
+@description
+<strong>Added in Umbraco v. 7.4:</strong> Use this directive to render a data table.
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.TableController as vm">
+        
+        <umb-table
+            ng-if="items"
+            items="vm.items"
+            item-properties="vm.options.includeProperties"
+            allow-select-all="vm.allowSelectAll"
+            on-select="vm.selectItem"
+            on-click="vm.clickItem"
+            on-select-all="vm.selectAll"
+            on-selected-all="vm.isSelectedAll"
+            on-sorting-direction="vm.isSortDirection"
+            on-sort="vm.sort">
+        </umb-table>
+    
+    </div>
+</pre>
+
+<h3>Controller example</h3>
+<pre>
+    (function () {
+        "use strict";
+    
+        function Controller() {
+    
+            var vm = this;
+    
+            vm.items = [
+                {
+                    "icon": "icon-document",
+                    "name": "My node 1",
+                    "published": true,
+                    "description": "A short description of my node",
+                    "author": "Author 1"
+                },
+                {
+                    "icon": "icon-document",
+                    "name": "My node 2",
+                    "published": true,
+                    "description": "A short description of my node",
+                    "author": "Author 2"
+                }
+            ];
+
+            vm.options = {
+                includeProperties: [
+                    { alias: "description", header: "Description" },
+                    { alias: "author", header: "Author" }
+                ]
+            };
+    
+            vm.selectItem = selectItem;
+            vm.clickItem = clickItem;
+            vm.selectAll = selectAll;
+            vm.isSelectedAll = isSelectedAll;
+            vm.isSortDirection = isSortDirection;
+            vm.sort = sort;
+
+            function selectAll($event) {
+                alert("select all");
+            }
+
+            function isSelectedAll() {
+                
+            }
+    
+            function clickItem(item) {
+                alert("click node");
+            }
+
+            function selectItem(selectedItem, $index, $event) {
+                alert("select node");
+            }
+            
+            function isSortDirection(col, direction) {
+                
+            }
+            
+            function sort(field, allow, isSystem) {
+                
+            }
+    
+        }
+    
+        angular.module("umbraco").controller("My.TableController", Controller);
+    
+    })();
+</pre>
+
+@param {string} icon (<code>binding</code>): The node icon.
+@param {string} name (<code>binding</code>): The node name.
+@param {string} published (<code>binding</code>): The node published state.
+@param {function} onSelect (<code>expression</code>): Callback function when the row is selected.
+@param {function} onClick (<code>expression</code>): Callback function when the "Name" column link is clicked.
+@param {function} onSelectAll (<code>expression</code>): Callback function when selecting all items.
+@param {function} onSelectedAll (<code>expression</code>): Callback function when all items are selected.
+@param {function} onSortingDirection (<code>expression</code>): Callback function when sorting direction is changed.
+@param {function} onSort (<code>expression</code>): Callback function when sorting items.
+**/
+
 (function () {
    'use strict';
 

src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less

@@ -535,7 +535,7 @@
     color: @gray-3;
 }
 
-.umb-grid .umb-cell-rte textarea {
+.umb-grid .umb-cell-rte textarea.mceNoEditor {
     display: none !important;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less

@@ -36,6 +36,7 @@
 .umb-node-preview__content {
     flex: 1 1 auto;
     margin-right: 25px;
+    overflow: hidden;
 }
 
 .umb-node-preview__name {
@@ -49,6 +50,13 @@
     color: @gray-3;
 }
 
+.umb-node-preview__name,
+.umb-node-preview__description {
+    /*text-overflow: ellipsis;
+    overflow: hidden;*/
+    word-wrap: break-word;
+}
+
 .umb-node-preview__actions {
     flex: 0 0 auto;
     display: flex;

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -281,6 +281,12 @@ ul.color-picker li a  {
     display: block;
 }
 
+.umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper {
+    width: 120px;
+    height: 114px;
+    overflow: hidden;
+}
+
 .umb-sortable-thumbnails .umb-sortable-thumbnails__actions {
     position: absolute;
     bottom: 10px;
@@ -308,6 +314,7 @@ ul.color-picker li a  {
     justify-content: center;
     align-items: center;
     margin-left: 5px;
+    text-decoration: none;
 }
 
 .umb-sortable-thumbnails .umb-sortable-thumbnails__action.-red {

src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js

@@ -1,20 +1,25 @@
 function imageFilePickerController($scope) {
 
-    $scope.pick = function() {
-        $scope.mediaPickerDialog = {};
-        $scope.mediaPickerDialog.view = "mediapicker";
-        $scope.mediaPickerDialog.show = true;
-
-        $scope.mediaPickerDialog.submit = function(model) {
-            $scope.model.value = model.selectedImages[0].image;
-            $scope.mediaPickerDialog.show = false;
-            $scope.mediaPickerDialog = null;
+    $scope.add = function() {
+        $scope.mediaPickerOverlay = {
+            view: "mediapicker",
+            disableFolderSelect: true,
+            onlyImages: true,
+            show: true,
+            submit: function (model) {
+                $scope.model.value = model.selectedImages[0].image;
+                $scope.mediaPickerOverlay.show = false;
+                $scope.mediaPickerOverlay = null;
+            },
+            close: function () {
+                $scope.mediaPickerOverlay.show = false;
+                $scope.mediaPickerOverlay = null;
+            }
         };
+    };
 
-        $scope.mediaPickerDialog.close = function(oldModel) {
-            $scope.mediaPickerDialog.show = false;
-            $scope.mediaPickerDialog = null;
-        };
+    $scope.remove = function () {
+        $scope.model.value = null;
     };
 
 }

src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html

@@ -1,19 +1,28 @@
 <div ng-controller="Umbraco.PrevalueEditors.ImageFilePickerController" class="umb-editor umb-mediapicker">
-    <ul class="umb-sortable-thumbnails">
-        <li>
-            <img ng-src="{{model.value}}" alt="" ng-show="model.value">
-            <a href class="picked-image" ng-click="model.value = null" ng-show="model.value"><i class="icon icon-delete"></i></a>
+
+    <ul class="umb-sortable-thumbnails" ng-if="model.value">
+        <li class="umb-sortable-thumbnails__wrapper">
+            <img ng-src="{{model.value}}" alt="">
+
+            <div class="umb-sortable-thumbnails__actions">
+                <!--<a class="umb-sortable-thumbnails__action" href="" ng-click="goToItem(image)">
+                    <i class="icon icon-edit"></i>
+                </a>-->
+                <a class="umb-sortable-thumbnails__action -red" href="" ng-click="remove()">
+                    <i class="icon icon-delete"></i>
+                </a>
+            </div>
         </li>
     </ul>
 
-    <a href ng-click="pick()" class="umb-mediapicker add-link" ng-hide="model.value">
+    <a href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': !model.value }" ng-hide="model.value" prevent-default>
         <i class="icon icon-add large"></i>
     </a>
 
     <umb-overlay
-      ng-if="mediaPickerDialog.show"
-      model="mediaPickerDialog"
-      view="mediaPickerDialog.view"
+      ng-if="mediaPickerOverlay.show"
+      model="mediaPickerOverlay"
+      view="mediaPickerOverlay.view"
       position="right">
     </umb-overlay>
 

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

@@ -640,16 +640,16 @@ angular.module("umbraco")
             var clear = true;
 
             //settings indicator shortcut
-            if ( ($scope.model.config.items.config && $scope.model.config.items.config.length > 0) || ($scope.model.config.items.styles && $scope.model.config.items.styles.length > 0)) {
+            if (($scope.model.config.items.config && $scope.model.config.items.config.length > 0) || ($scope.model.config.items.styles && $scope.model.config.items.styles.length > 0)) {
                 $scope.hasSettings = true;
             }
 
             //ensure the grid has a column value set,
             //if nothing is found, set it to 12
-            if ($scope.model.config.items.columns && angular.isString($scope.model.config.items.columns)) {
-                $scope.model.config.items.columns = parseInt($scope.model.config.items.columns);
-            } else {
+            if (!$scope.model.config.items.columns){
                 $scope.model.config.items.columns = 12;
+            } else if (angular.isString($scope.model.config.items.columns)) {
+                $scope.model.config.items.columns = parseInt($scope.model.config.items.columns);
             }
 
             if ($scope.model.value && $scope.model.value.sections && $scope.model.value.sections.length > 0 && $scope.model.value.sections[0].rows && $scope.model.value.sections[0].rows.length > 0) {

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

@@ -19,6 +19,8 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
             $scope.images = [];
             $scope.ids = [];
 
+            $scope.isMultiPicker = multiPicker;
+
             if ($scope.model.value) {
                 var ids = $scope.model.value.split(',');
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html

@@ -2,10 +2,10 @@
 
     <p ng-if="(images|filter:{trashed:true}).length == 1"><localize key="mediaPicker_pickedTrashedItem"></localize></p>
     <p ng-if="(images|filter:{trashed:true}).length > 1"><localize key="mediaPicker_pickedTrashedItems"></localize></p>
-
+    
     <div data-element="sortable-thumbnails" class="flex error">
         <ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
-            <li data-element="sortable-thumbnail-{{$index}}" style="width: 120px; height: 100px; overflow: hidden;" ng-repeat="image in images">
+            <li data-element="sortable-thumbnail-{{$index}}" class="umb-sortable-thumbnails__wrapper" ng-repeat="image in images track by $index">
 
                 <!-- IMAGE -->
                 <img ng-class="{'trashed': image.trashed}" ng-src="{{image.thumbnail}}" alt="" ng-show="image.thumbnail" title="{{image.trashed ? 'Trashed: ' + image.name : image.name}}" />
@@ -29,11 +29,12 @@
                     </a>
                 </div>
             </li>
-
+            <li style="border: none;">
+                <a data-element="sortable-thumbnails-add" href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': (images.length === 0 || isMultiPicker)}" ng-if="showAdd()" prevent-default>
+                    <i class="icon icon-add large"></i>
+                </a>
+            </li>
         </ul>
-        <a data-element="sortable-thumbnails-add" href="#" class="add-link" ng-click="add()" ng-class="{'add-link-square': images.length === 0}" ng-if="showAdd()" prevent-default>
-            <i class="icon icon-add large"></i>
-        </a>
     </div>
 
     <umb-overlay