Refactor selectable/hoverable editable item UI to workaround Chrome i…

…ssue Fix #678
voidlabs · Mar 1, 2023 · ad4a7aa · ad4a7aa
1 parent c2cae9d
commit ad4a7aa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/css/style_mosaico.less b/src/css/style_mosaico.less
@@ -134,7 +134,7 @@
     display: block;
     position: absolute;
     // z-index: 0;
-    top: -3px; bottom: -3px;
+    top: -2px; bottom: -2px;
     left: -2px - @size;
     right: -2px - @size;
 
@@ -147,6 +147,7 @@
     // Use outline for hover effects
     outline: 1px solid transparent;
     // outline-offset: -1px;
+    opacity: 1;
 
     // otherwise this catches clicks and prevent correct selection of underlying text
     pointer-events: none;
@@ -176,27 +177,24 @@
 
 }
 
-.makeEditableHover(@size, @editableSelector, @borderElementSelector: ~':before') {
-  @{editableSelector}@{borderElementSelector} {
-    content: "";
-    display: block;
-    position: absolute;
-    // z-index: 0;
-    top: -3px; bottom: -3px;
-    left: -7px; right: -7px;
-    border: 1px dashed transparent;
+// Use this on the parent element and pass the editableSelector to the element where you applied .makeSelectable
+.makeSelectableHover(@editableSelector, @selectedSelector: ~'.selected', @borderElementSelector: ~':before') {
+  &:hover @{editableSelector}@{borderElementSelector} {
+    // border-color: @mosaico-outline-color;
+    outline-style: dashed;
+    outline-color: @mosaico-outline-color;
     opacity: 0.3;
-
-    // otherwise this catches clicks and prevent correct selection of underlying text
-    pointer-events: none;
   }
-
-  &:hover @{editableSelector}@{borderElementSelector} {
-    border-color: @mosaico-outline-color;
+  &:hover @{editableSelector}@{selectedSelector}@{borderElementSelector} {
+    outline-style: solid;
+    opacity: 1;
   }
 
-  &:hover @{editableSelector}:hover@{borderElementSelector} {
-    border-color: transparent;
+  &:hover @{editableSelector}:not(@{selectedSelector}):hover@{borderElementSelector} {
+    // border-color: transparent;
+    // outline-color: transparent;
+    outline-style: solid;
+    opacity: 1;
   }
 }
 

diff --git a/src/css/style_mosaico_content.less b/src/css/style_mosaico_content.less
@@ -423,19 +423,21 @@
     // blocks
     .editable {
       .makeSelectable(10px, ~'.selected', 0, ~' .mo-blockselectionhelper');
-
-      .makeEditableHover(10px, ~'.mce-content-body');
-      .makeEditableHover(10px, ~'.selectable-img', ~' .mo-imgselectionhelper:before');
-
     }
+
     // texts
     .mce-content-body {
-      .makeSelectable(5px, ~'.selecteditem', 0);
+      .makeSelectable(4px, ~'.selecteditem', 0, ~':before');
       cursor: text;
     }
     // images
     .selectable-img {
-      .makeSelectable(5px, ~'.selecteditem', 0, ~' .mo-imgselectionhelper:after');
+      .makeSelectable(4px, ~'.selecteditem', 0, ~' .mo-imgselectionhelper:before');
+    }
+
+    .editable {
+      .makeSelectableHover(~'.mce-content-body', ~'.selecteditem', ~':before');
+      .makeSelectableHover(~'.selectable-img', ~'.selecteditem', ~' .mo-imgselectionhelper:before');
     }
   }