3324 - Suggestion: Align image cropper property editor UI with color picker and checkbox lists (#3325)

src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less

@@ -5,6 +5,10 @@
     .umb-overlay & {
         width: 500px;
     }
+
+    p{
+        margin: 7px 0;
+    }
 }
 
 .umb-prevalues-multivalues__left {

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -23,7 +23,7 @@
     margin-top: 0px;
     margin-bottom: 15px;
     font-size: 14px;
-    color: @gray-7; 
+    color: @gray-7;
 }
 
 h5{
@@ -134,7 +134,7 @@ h5.-black {
   padding-bottom: 0;
 }
 
-.block-form .umb-control-group label .help-block, 
+.block-form .umb-control-group label .help-block,
 .block-form .umb-control-group label small {
   font-size: 13px;
   padding-top: 2px;
@@ -243,9 +243,9 @@ label:not([for]) {
 }
 
 .umb-version {
-    color: @gray-7; 
-    position: absolute; 
-    bottom: 5px; 
+    color: @gray-7;
+    position: absolute;
+    bottom: 5px;
     right: 20px;
 }
 
@@ -653,3 +653,14 @@ input[type=checkbox]:checked + .input-label--small {
 .bootstrap-datetimepicker-widget td span {
 	border-radius: 0 !important;
 }
+
+.visuallyhidden{
+    position: absolute !important;
+	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+	clip: rect(1px, 1px, 1px, 1px);
+	padding:0 !important;
+	border:0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}

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

@@ -102,11 +102,11 @@ div.umb-codeeditor {
   border: 1px solid @gray-8;
 }
 div.umb-codeeditor .umb-el-wrap {
-  padding: 0px;
+  padding: 0;
 }
 div.umb-codeeditor .umb-btn-toolbar {
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
   border-bottom: @gray-8 1px solid;
   background: @gray-10;
 }
@@ -122,7 +122,7 @@ div.umb-codeeditor .umb-btn-toolbar {
         position: absolute;
     }
 }
-.mce-tinymce{border: 1px solid @gray-8 !important; border-radius: 0px !important;}
+.mce-tinymce{border: 1px solid @gray-8 !important; border-radius: 0 !important;}
 .mce-panel{background: @gray-10 !important; border-color: @gray-8 !important;}
 .mce-btn-group, .mce-btn{border: none !important; background: none !important;}
 .mce-ico{font-size: 12px !important; color: @gray-1 !important;}
@@ -203,7 +203,7 @@ div.umb-codeeditor .umb-btn-toolbar {
     }
 
     label {
-        border: 1px solid #fff;
+        border: 1px solid @white;
         padding: 6px 10px;
         font-family: monospace;
         border: 1px solid #dfdfe1;
@@ -213,6 +213,99 @@ div.umb-codeeditor .umb-btn-toolbar {
     }
 }
 
+//
+// Image Cropper
+// --------------------------------------------------
+
+.umb-prevalues-multivalues.umb-cropsizes{
+    max-width: none;
+    width: 100%;
+
+    .umb-overlay__form &{
+        width: 100%;
+    }
+}
+
+.umb-cropsizes{
+    float: left;
+
+    .control-group{
+        label{
+            display: block;
+        }
+   }
+
+   &__add{
+       display: flex;
+       align-items: center;
+       flex-wrap: wrap;
+   }
+
+   &__sortable{
+       max-width: 500px;
+       width: 100%;
+       min-width: 66.6%;
+
+       @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px){
+           max-width: none;
+       }
+   }
+
+   &__controls{
+       margin: 24px 0 0;
+   }
+
+   &__input{
+       margin: 0 15px 0 0;
+       width: ~"calc(100% - 15px)";
+
+       @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px){
+           margin: 0;
+           width: 100%;
+           max-width: 220px;
+       }
+
+       &--narrow{
+           max-width: 95px;
+           width: 100%;
+       }
+
+       &-wrap{
+           position: relative;
+           max-width: 206px;
+           width: 100%;
+
+            @media (min-width: 1101px) and (max-width: 1300px), (max-width: 930px){
+                max-width: none;
+                flex: 1 1 100%;
+                margin: 0 0 20px;
+            }
+
+           &--narrow{
+               margin: 0 15px 0 0;
+               max-width: 95px;
+               width: 100%;
+           }
+
+           &--icon{
+            padding: 0 15px 0 0;
+            width: ~"calc(100% + 15px)"; // Use an escape string in order to make use of CSS native calc function instead of the one built into less
+
+               &:after{
+                   content:"\00D7";
+                   position: absolute;
+                   bottom: -9px;
+                   top: 0;
+                   margin: auto;
+                   right: 0;
+                   width: 5px;
+                   height: 5px;
+               }
+           }
+       }
+   }
+}
+
 
 //
 // Media picker
@@ -719,8 +812,8 @@ div.umb-codeeditor .umb-btn-toolbar {
 
 
 .umb-photo-folder .picrow div, .umb-photo-preview{
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   border: none;
   display: inline-block;
   vertical-align: top;
@@ -757,9 +850,9 @@ div.umb-codeeditor .umb-btn-toolbar {
 //this is a temp hack, to provide selectors in the dialog:
 .umb-photo-folder .pic:hover .selector-overlay {
   position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  bottom: 0;
+  left: 0;
+  right: 0;
   padding: 5px;
   background: @black;
   z-index: 100;
@@ -839,7 +932,7 @@ div.umb-codeeditor .umb-btn-toolbar {
 .umb-fileupload ul {
   list-style: none;
   vertical-align: middle;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .umb-fileupload label {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.prevalues.controller.js

@@ -1,10 +1,13 @@
 angular.module("umbraco").controller("Umbraco.PrevalueEditors.CropSizesController",
-	function ($scope, $timeout) {
+	function ($scope) {
 
 	    if (!$scope.model.value) {
 	        $scope.model.value = [];
 	    }
 
+        $scope.editMode = false;
+        $scope.setFocus = false;
+
 	    $scope.remove = function (item, evt) {
 	        evt.preventDefault();
 	        $scope.model.value = _.reject($scope.model.value, function (x) {
@@ -13,32 +16,57 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.CropSizesControlle
 	    };
 
 	    $scope.edit = function (item, evt) {
-	        evt.preventDefault();
+            evt.preventDefault();
+            $scope.editMode = true;
+            $scope.setFocus = false;
+
 	        $scope.newItem = item;
 	    };
 
 	    $scope.cancel = function (evt) {
-	        evt.preventDefault();
+            evt.preventDefault();
+            $scope.editMode = false;
+            $scope.setFocus = true;
+
 	        $scope.newItem = null;
 	    };
 
-	    $scope.add = function (evt) {
-	        evt.preventDefault();
+        $scope.change = function () {
+            // Listen to the change event and set focus 2 false
+            if($scope.setFocus){
+                $scope.setFocus = false;
+                return;
+            }
+        }
 
-	        if ($scope.newItem && $scope.newItem.alias && 
+	    $scope.add = function (evt) {
+            evt.preventDefault();
+
+            $scope.editMode = false;
+
+            $scope.setFocus = true;
+
+	        if ($scope.newItem && $scope.newItem.alias &&
                 angular.isNumber($scope.newItem.width) && angular.isNumber($scope.newItem.height) &&
                 $scope.newItem.width > 0 && $scope.newItem.height > 0) {
 
-	            var exists = _.find($scope.model.value, function (item) { return $scope.newItem.alias === item.alias; });
+                var exists = _.find($scope.model.value, function (item) { return $scope.newItem.alias === item.alias; });
+
 	            if (!exists) {
 	                $scope.model.value.push($scope.newItem);
 	                $scope.newItem = {};
-	                $scope.hasError = false;
+                    $scope.hasError = false;
+                    $scope.cropAdded = false;
 	                return;
-	            }
+                }
+                else{
+                    $scope.newItem = null;
+                    $scope.hasError = false;
+                    return;
+                }
 	        }
 
 	        //there was an error, do the highlight (will be set back by the directive)
 	        $scope.hasError = true;
-	    };
-	});
+        };
+	});

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.prevalues.html

@@ -1,49 +1,74 @@
-<div ng-controller="Umbraco.PrevalueEditors.CropSizesController" class="umb-editor umb-cropsizes">
+<div ng-controller="Umbraco.PrevalueEditors.CropSizesController" class="umb-editor umb-prevalues-multivalues umb-cropsizes">
 
+    <div class="control-group umb-cropsizes__add">
 
-    <div class="control-group" ng-if="model.value.length > 0">
-        <ul class="unstyled list-icons"
-            ui-sortable
-            ng-model="model.value">
-            <li ng-repeat="node in model.value">
-                <a href=""><i class="icon icon-delete red hover-show pull-right" ng-click="remove(node, $event)"></i></a>
-                <i class="icon icon-picture handle hover-hide"></i>
+        <div class="umb-cropsizes__input-wrap">
+            <label for="addcropalias"><localize key="general_alias">Alias</localize></label>
+            <input
+                id="addcropalias"
+                name="newItem.alias"
+                type="text"
+                ng-model="newItem.alias"
+                class="umb-cropsizes__input"
+                val-highlight="{{hasError}}"
+                localize="placeholder"
+                placeholder="@general_alias"
+                focus-when="{{setFocus}}"
+                ng-change="change()"
+            />
+        </div>
+
+        <div class="umb-cropsizes__input-wrap umb-cropsizes__input-wrap--narrow umb-cropsizes__input-wrap--icon">
+            <label for="addcropwidth"><localize key="general_width">Width</localize></label>
+            <input
+                name="newItem.width"
+                type="number"
+                localize="placeholder"
+                placeholder="@general_width"
+                ng-model="newItem.width"
+                class="umb-cropsizes__input umb-cropsizes__input--narrow"
+                val-highlight="{{hasError}}"
+                id="addcropwidth"
+                min="0"
+                pattern="[0-9]*"
+            />
+        </div>
+
+        <div class="umb-cropsizes__input-wrap umb-cropsizes__input-wrap--narrow">
+            <label for="addcropheight"><localize key="general_height">Height</localize></label>
+            <input
+                name="newItem.height"
+                type="number"
+                localize="placeholder"
+                placeholder="@general_height"
+                ng-model="newItem.height"
+                class="umb-cropsizes__input umb-cropsizes__input--narrow"
+                val-highlight="{{hasError}}"
+                id="addcropheight"
+                min="0"
+                pattern="[0-9]*"
+            />
+        </div>
+
+        <div class="umb-cropsizes__controls">
+            <button class="btn btn-info add" ng-hide="editMode" ng-click="add($event)"><localize key="general_add">Add</localize></button>
+            <button class="btn btn-info add" ng-show="editMode" ng-click="add($event)"><localize key="general_update">Update</localize></button>
+            <a href class="btn btn-link" ng-show="editMode" ng-click="cancel($event)"><localize key="general_cancel">Cancel</localize></a>
+        </div>
 
-                <a href prevent-default ng-click="edit(node, $event)">{{node.alias}}</a>
-                <br /><small>{{node.width}}px &times; {{node.height}}px</small>
-            </li>
-        </ul>
     </div>
 
-    <div class="form" ng-show="newItem">
-        <h4><localize key="imagecropper_defineCrop">Define crop</localize></h4>
-        <p>
-            <localize key="imagecropper_defineCropDescription">Give the crop an alias and it's default width and height</localize>.
-        </p>
-
-        <div class="control-group">
-            <label><localize key="general_alias">Alias</localize></label>
-            <input name="newItem.alias" type="text"
-                   ng-model="newItem.alias" val-highlight="{{hasError}}" />
+    <div ui-sortable="sortableOptions" class="umb-cropsizes__sortable">
+        <div class="control-group umb-prevalues-multivalues__listitem" ng-repeat="item in model.value">
+            <i class="icon icon-navigation handle"></i>
+            <div class="umb-prevalues-multivalues__left">
+                <p><span>{{item.alias}}</span> <small>({{item.width}}px &times; {{item.height}}px)</small></p>
+            </div>
+            <div class="umb-prevalues-multivalues__right">
+                <a href="#" prevent-default class="umb-node-preview__action umb-node-preview__action--red" ng-click="edit(item, $event)" class="umb-prevalues-multivalues__action">Edit</a>
+                <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></a>
+            </div>
         </div>
-
-        <div class="control-group">
-            <label><localize key="general_size">Size</localize></label>
-            <input name="newItem.width" type="number" localize="placeholder" placeholder="@general_width"
-                   ng-model="newItem.width" class="umb-editor-small" val-highlight="{{hasError}}" />
-            &times;
-            <input name="newItem.height" type="number" localize="placeholder" placeholder="@general_height"
-                   ng-model="newItem.height" class="umb-editor-small" val-highlight="{{hasError}}" />
-        </div>
-
-        <div class="control-group">
-            <button class="btn" ng-click="add($event)"><localize key="imagecropper_saveCrop">Save crop</localize></button>
-            <a href class="btn btn-link" ng-click="cancel($event)"><localize key="general_cancel">Cancel</localize></a>
-        </div>
-    </div>
-
-    <div class="control-group" ng-hide="newItem">
-        <button class="btn" ng-click="newItem = {}" prevent-default><localize key="imagecropper_addCrop">Add new crop</localize></button>
     </div>
 
 </div>

src/Umbraco.Web.UI/umbraco/config/lang/en.xml

@@ -1304,8 +1304,6 @@ To manage your website, simply open the Umbraco back office and start adding con
     </area>
     <area alias="imagecropper">
         <key alias="reset">Reset crop</key>
-        <key alias="defineCrop">Define crop</key>
-        <key alias="defineCropDescription">Give the crop an alias and its default width and height</key>
         <key alias="saveCrop">Save crop</key>
         <key alias="addCrop">Add new crop</key>
         <key alias="updateEditCrop">Done</key>

src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml

@@ -1302,8 +1302,6 @@ To manage your website, simply open the Umbraco back office and start adding con
     </area>
     <area alias="imagecropper">
         <key alias="reset">Reset crop</key>
-        <key alias="defineCrop">Define crop</key>
-        <key alias="defineCropDescription">Give the crop an alias and its default width and height</key>
         <key alias="saveCrop">Save crop</key>
         <key alias="addCrop">Add new crop</key>
         <key alias="updateEditCrop">Done</key>

src/Umbraco.Web.UI/umbraco/config/lang/es.xml

@@ -1039,8 +1039,6 @@
     </area>
     <area alias="imagecropper">
         <key alias="reset">Reiniciar</key>
-        <key alias="defineCrop">Definir corte</key>
-        <key alias="defineCropDescription">Da al corte un alias y su anchura y altura por defecto</key>
         <key alias="saveCrop">Guardar corte</key>
         <key alias="addCrop">Añadir nuevo corte</key>
     </area>

src/Umbraco.Web.UI/umbraco/config/lang/fr.xml

@@ -1286,7 +1286,6 @@ Pour gérer votre site, ouvrez simplement le backoffice Umbraco et commencez à
   <area alias="imagecropper">
     <key alias="reset">Réinitialiser</key>
     <key alias="defineCrop">Définir le recadrage</key>
-    <key alias="defineCropDescription">Donnez un alias au recadrage ainsi que sa largeur et sa hauteur par défaut</key>
     <key alias="saveCrop">Sauvegarder le recadrage</key>
     <key alias="addCrop">Ajouter un nouveau recadrage</key>
   </area>

src/Umbraco.Web.UI/umbraco/config/lang/pl.xml

@@ -1022,8 +1022,6 @@ Naciśnij przycisk <strong>instaluj</strong>, aby zainstalować bazę danych Umb
   </area>
   <area alias="imagecropper">
     <key alias="reset">Resetuj</key>
-    <key alias="defineCrop">Zdefiniuj przycięcie</key>
-    <key alias="defineCropDescription">Ustaw alias dla przycięcia, a także jego domyślną szerokość i długość</key>
     <key alias="saveCrop">Zapisz przycięcie</key>
     <key alias="addCrop">Dodaj nowe przycięcie</key>
   </area>

src/Umbraco.Web.UI/umbraco/config/lang/ru.xml

@@ -879,8 +879,6 @@
   </area>
   <area alias="imagecropper">
     <key alias="reset">Сбросить</key>
-    <key alias="defineCrop">Задать рамку</key>
-    <key alias="defineCropDescription">Задайте рамке имя (алиас), а также ширину и высоту по-умолчанию</key>
     <key alias="saveCrop">Сохранить рамку</key>
     <key alias="addCrop">Добавить новую рамку</key>
   </area>

src/Umbraco.Web.UI/umbraco/config/lang/sv.xml

@@ -645,8 +645,6 @@
   </area>
   <area alias="imagecropper">
     <key alias="reset">Återställ</key>
-    <key alias="defineCrop">Definiera beskräning</key>
-    <key alias="defineCropDescription">Ge beskärningen ett alias och dess standardbredd och -höjd</key>
     <key alias="saveCrop">spara beskärning</key>
     <key alias="addCrop">Lägg till ny beskärning</key>
   </area>

src/Umbraco.Web.UI/umbraco/config/lang/zh.xml

@@ -999,8 +999,6 @@
   </area>
   <area alias="imagecropper">
     <key alias="reset">Reset</key>
-    <key alias="defineCrop">Define crop</key>
-    <key alias="defineCropDescription">Give the crop an alias and its default width and height</key>
     <key alias="saveCrop">Save crop</key>
     <key alias="addCrop">Add new crop</key>
   </area>

src/Umbraco.Web/PropertyEditors/ImageCropperPropertyEditor.cs

@@ -229,7 +229,7 @@ namespace Umbraco.Web.PropertyEditors
 
         internal class ImageCropperPreValueEditor : PreValueEditor
         {
-            [PreValueField("crops", "Crop sizes", "views/propertyeditors/imagecropper/imagecropper.prevalues.html")]
+            [PreValueField("crops", "Define crops", "views/propertyeditors/imagecropper/imagecropper.prevalues.html", Description = "Give the crop an alias and it's default width and height")]
             public string Crops { get; set; }
         }