V8: Add option for medium-sized infinite editor (#6808)

src/Umbraco.Web.UI.Client/src/common/services/editor.service.js

@@ -251,7 +251,7 @@ When building a custom infinite editor view you can use the same components as a
          *
          * @param {Object} editor rendering options
          * @param {String} editor.view Path to view
-         * @param {String} editor.size Sets the size of the editor ("small"). If nothing is set it will use full width.
+         * @param {String} editor.size Sets the size of the editor ("small" || "medium"). If nothing is set it will use full width.
          */
         function open(editor) {
 

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

@@ -1,82 +1,86 @@
 .umb-editors {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
+    .absolute();
+    overflow: hidden;    
+
+    .umb-editor {
+        box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
+    }
 }
 
 .umb-editor {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    .absolute();
     background: @brownGrayLight;
     z-index: @zIndexEditor;
-}
 
-.umb-editor--infiniteMode {
-    transform: none;
-    will-change: transform;
-    transition: transform 400ms ease-in-out;
-    &.moveRight {
-        transform: translateX(110%);
+    &--infiniteMode {
+        transform: none;
+        will-change: transform;
+        transition: transform 400ms ease-in-out;
+        
+        &.umb-editor--moveRight {
+            transform: translateX(110%);
+        }
     }
-}
 
-.umb-editor--outOfRange {
-    transform: none;
-    display: none;
-    will-change: auto;
-    transition: display 0s 320ms;
-}
-.umb-editor--level0 {
-    transform: none;
-}
-.umb-editor--level1 {
-    transform: translateX(60px);
-}
-.umb-editor--level2 {
-    transform: translateX(120px);
-}
-.umb-editor--level3 {
-    transform: translateX(180px);
-}
-
-.umb-editor--n1 {
-    right:60px;
-}
-.umb-editor--n2 {
-    right:120px;
-}
-.umb-editor--n3 {
-    right:180px;
-}
-
-// hide all infinite editors by default
-// will be shown through animation
-.umb-editors .umb-editor {
-    box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
-}
-
-.umb-editor--small {
-    width: 500px;
-    will-change: transform;
-    left: auto;
+    &--outOfRange {
+        transform: none;
+        display: none;
+        will-change: auto;
+        transition: display 0s 320ms;
+    }
     
-    .umb-editor-container {
-        max-width: 500px;
+    &--level0 {
+        transform: none;
     }
 }
 
+// use a loop to build the editor levels
+@iterations: 3;
+@step: 60px;
+
+.level-loop (@i) when (@i > 0) {
+    @x: @i * @step;
+    .umb-editor--level@{i} {
+        transform: translateX(@x);
+    }
+    
+    .umb-editor--n@{i} {
+        right:@x;
+    }
+    
+    .level-loop(@i - 1);
+}
+
+.level-loop(@iterations);
+
+// and also use a loop to build editor sizes - easily extended with new sizes by adding to the map
+@editorSizes:
+    small 500px,
+    medium 800px;
+
+.create-editor-sizes(@iterator:1) when(@iterator <= length(@editorSizes)) {
+    .umb-editor {
+        @size: extract(extract(@editorSizes, @iterator), 1);
+        @value: extract(extract(@editorSizes, @iterator), 2);
+        
+        &--@{size} {
+            width: @value;
+            will-change: transform;
+            left: auto;
+            
+            .umb-editor--container {
+                max-width: @value;
+            }
+        }
+    }
+    
+    .create-editor-sizes(@iterator + 1);
+}
+
+.create-editor-sizes();
+
 .umb-editor__overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    .absolute();
     background: rgba(0,0,0,0.4);
     z-index: @zIndexEditor;
     visibility: hidden;
@@ -85,7 +89,7 @@
 }
 
 #contentcolumn > .umb-editor__overlay,
-.--notInFront .umb-editor__overlay {
+.umb-editor--notInFront .umb-editor__overlay {
     visibility: visible;
     opacity: 1;
     transition: opacity 320ms 20ms, visibility 0s;

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

@@ -308,7 +308,14 @@
   opacity: @opacity / 100;
 }
 
-
+// Position
+.absolute() {
+    position:absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:0;
+}
 
 // BACKGROUNDS
 // --------------------------------------------------

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editors.html

@@ -3,10 +3,11 @@
     <div class="umb-editor"
         ng-repeat="model in editors"
         ng-class="{'umb-editor--small': model.size === 'small',
+        'umb-editor--medium': model.size === 'medium',
         'umb-editor--animating': model.animating,
-        '--notInFront': model.inFront !== true,
+        'umb-editor--notInFront': model.inFront !== true,
         'umb-editor--infiniteMode': model.infiniteMode,
-        'moveRight': model.moveRight,
+        'umb-editor--moveRight': model.moveRight,
         'umb-editor--n0': model.styleIndex === 0,
         'umb-editor--n1': model.styleIndex === 1,
         'umb-editor--n2': model.styleIndex === 2,