Merge pull request #2662 from jcamejo/placeholder-color-option

Placeholder color as a variable
GrapesJS · Apr 7, 2020 · af602c3 · af602c3
2 parents e060b82 + f65f0d5
commit af602c3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/styles/scss/_gjs_variables.scss b/src/styles/scss/_gjs_variables.scss
@@ -76,3 +76,6 @@ $fontName:          'main-fonts' !default;
 $fontSize:           0.7rem !default;
 $fontSizeS:          0.75rem !default;
 $fontV:              20 !default;//random(1000)
+
+/* Tools */
+$placeholderColor:   $colorGreen !default;
diff --git a/src/styles/scss/main.scss b/src/styles/scss/main.scss
@@ -304,17 +304,32 @@ $colorsAll: (one, $primaryColor),
 .#{$app-prefix}placeholder,
 .#{$nv-prefix}placeholder {
   border-style: solid !important;
-  border-color: $colorGreen;
   outline: none;
   box-sizing: border-box;
   transition: top $animSpeed, left $animSpeed,
     width $animSpeed, height $animSpeed;
 }
 
+.#{$app-prefix}placeholder.horizontal,
+.#{$com-prefix}placeholder.horizontal,
+.#{$nv-prefix}placeholder.horizontal {
+  border-color: transparent $placeholderColor;
+  border-width: 3px 5px;
+  margin: -3px 0 0;
+}
+
+.#{$app-prefix}placeholder.vertical,
+.#{$com-prefix}placeholder.vertical,
+.#{$nv-prefix}placeholder.vertical {
+  border-color: $placeholderColor transparent;
+  border-width: 5px 3px;
+  margin: 0 0 0 -3px;
+}
+
 .#{$app-prefix}placeholder-int,
 .#{$com-prefix}placeholder-int,
 .#{$nv-prefix}placeholder-int {
-	background-color: $colorGreen;
+	background-color: $placeholderColor;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 	height: 100%; width: 100%;
 	pointer-events: none;

diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
@@ -966,23 +966,23 @@ export default Backbone.View.extend({
       h = 0,
       un = 'px',
       margI = 5,
-      brdCol = '#62c462',
-      brd = 3,
       method = pos.method;
     var elDim = dims[pos.index];
-    plh.style.borderColor = 'transparent ' + brdCol;
-    plh.style.borderWidth = brd + un + ' ' + (brd + 2) + un;
-    plh.style.margin = '-' + brd + 'px 0 0';
+
+    // Placeholder orientation
+    plh.classList.remove('vertical');
+    plh.classList.add('horizontal');
+
     if (elDim) {
       // If it's not in flow (like 'float' element)
       if (!elDim[4]) {
         w = 'auto';
         h = elDim[2] - marg * 2 + un;
         t = elDim[0] + marg;
         l = method == 'before' ? elDim[1] - marg : elDim[1] + elDim[3] - marg;
-        plh.style.borderColor = brdCol + ' transparent';
-        plh.style.borderWidth = brd + 2 + un + ' ' + brd + un;
-        plh.style.margin = '0 0 0 -' + brd + 'px';
+
+        plh.classList.remove('horizontal');
+        plh.classList.add('vertical');
       } else {
         w = elDim[3] + un;
         h = 'auto';