From ee534f88cc42365997453be17ef015377be24fbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 1 Apr 2020 16:42:09 +0200
Subject: [PATCH] Inline create button styling: Better spacing, darker blue
 color for Focus Outline, moving the plus icon to mouse position for better
 visual appearance.

---
 .../inlineblock/inlineblock.editor.less       |  4 +--
 ...klist.component.createButton.controller.js | 18 ++++++++++++
 .../blocklist/blocklist.component.html        |  3 ++
 .../blocklist/blocklist.component.less        | 28 ++++++++++---------
 4 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js

diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less
index a1e5b54c35..2702ca163a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less
@@ -1,7 +1,7 @@
 .blockelement-inlineblock-editor {
 
-    margin-bottom: 2px;
-    margin-top: 2px;
+    margin-bottom: 4px;
+    margin-top: 4px;
     border: 1px solid @gray-9;
     border-radius: @baseBorderRadius;
     transition: border-color 120ms;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js
new file mode 100644
index 0000000000..1a0b4f6241
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.createButton.controller.js
@@ -0,0 +1,18 @@
+(function () {
+    "use strict";
+
+    angular
+    .module("umbraco")
+    .controller("Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController", 
+    function BlockListController($scope) {
+        
+        var vm = this;
+        vm.plusPosX = 0;
+
+        vm.onMouseMove = function($event) {
+            vm.plusPosX = $event.offsetX;
+        }
+
+    });
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
index 4aa3b0f6b1..fc957ce003 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
@@ -11,7 +11,10 @@
                     type="button"
                     class="btn-reset umb-block-list__block--create-button"
                     ng-click="vm.showCreateDialog($index, $event)"
+                    ng-controller="Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController as vm"
+                    ng-mousemove="vm.onMouseMove($event)"
                 >
+                    <div class="__plus" ng-style="{'left':vm.plusPosX}">+</div>
                 </button>
 
                 <div class="umb-block-list__block" ng-class="{'--open':block.isOpen}">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
index d470ee97cf..4194b5d89e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
@@ -71,7 +71,7 @@
     opacity: 0;
     outline: none;
     height: 12px;
-    margin-top: -6px;
+    margin-top: -9px;
     padding-top: 6px;
     margin-bottom: -6px;
     transition: opacity 240ms;
@@ -79,7 +79,9 @@
     &::before {
         content: '';
         position: absolute;
-        background-color: @ui-outline;
+        background-color: @blueMid;
+        border-top:1px solid white;
+        border-bottom:1px solid white;
         border-radius: 2px;
         top:5px;
         right: 0;
@@ -92,21 +94,21 @@
             100% { opacity: 0.5; }
         }
     }
-    &::after {
-        content: "+";
-        margin-left: auto;
-        margin-right: auto;
+    > .__plus {
+        position: absolute;
+        pointer-events: none;// lets stop avoiding the mouse values in JS move event.
+        margin-left: -18px - 10px;
         margin-top: -18px;
         margin-bottom: -18px;
         width: 28px;
         height: 25px;
         padding-bottom: 3px;
         border-radius: 3em;
-        border: 2px solid @ui-outline;
+        border: 2px solid @blueMid;
         display: flex;
         justify-content: center;
         align-items: center;
-        color: @ui-outline;
+        color: @blueMid;
         font-size: 20px;
         font-weight: 800;
         background-color: rgba(255, 255, 255, .96);
@@ -115,20 +117,20 @@
         transition: transform 240ms ease-in;
         animation: umb-block-list__block--create-button_after 800ms ease-in-out infinite;
         @keyframes umb-block-list__block--create-button_after {
-            0%   { color: rgba(@ui-outline, 0.8); }
-            50% { color: rgba(@ui-outline, 1); }
-            100% { color: rgba(@ui-outline, 0.8); }
+            0%   { color: rgba(@blueMid, 0.8); }
+            50% { color: rgba(@blueMid, 1); }
+            100% { color: rgba(@blueMid, 0.8); }
         }
     }
     &:focus {
-        &::after {
+        > .__plus {
             border: 2px solid @ui-outline;
         }
     }
     &:hover, &:focus {
         opacity: 1;
         transition-duration: 120ms;
-        &::after {
+        > .__plus {
             transform: scale(1);
             transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }