Update radio and color input styles

GrapesJS · Oct 18, 2017 · 6a79df5 · 6a79df5
1 parent fd82458
commit 6a79df5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js
@@ -36,7 +36,7 @@ module.exports = require('./PropertyView').extend({
         });
 
         const inputHld = this.el.querySelector(`#${pfx}input-holder`);
-        inputHld.innerHTML = `<div>${inputStr}</div>`;
+        inputHld.innerHTML = `<div class="${ppfx}radio-items">${inputStr}</div>`;
         this.input = inputHld.firstChild;
       }
     }

diff --git a/src/styles/scss/_gjs_inputs.scss b/src/styles/scss/_gjs_inputs.scss
@@ -137,6 +137,10 @@
     right: $inputPadding - 2px;
     top: 0;
   }
+
+  &-color {
+    width: 100%;
+  }
 }
 
 .#{$app-prefix}field-color {
@@ -207,7 +211,8 @@
 }
 
 .#{$app-prefix}radio-item {
-  float: left;
+  flex: 1 1 auto;
+  text-align: center;
   border-left: 1px solid $darkTextShadow;
 
   &:first-child {
@@ -225,6 +230,10 @@
   input:checked + .#{$app-prefix}radio-item-label {
     background-color: rgba(255, 255, 255, 0.2);
   }
+
+  &s {
+    display: flex;
+  }
 }
 
 .#{$app-prefix}radio-item-label {

diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
@@ -266,9 +266,9 @@ module.exports = Backbone.View.extend({
       srcModel && srcModel.set && srcModel.set('status', 'freezed');
     }
 
-    on(container, 'mousemove', this.onMove)
-    on(docs, 'mouseup', this.endMove)
-    on(document, 'keydown', this.rollback)
+    on(container, 'mousemove', this.onMove);
+    on(docs, 'mouseup', this.endMove);
+    on(docs, 'keydown', this.rollback);
     onStart && onStart();
 
     // Avoid strange effects on dragging
@@ -770,10 +770,11 @@ module.exports = Backbone.View.extend({
   endMove(e) {
     console.log('endmove');
     var created;
+    const docs = this.getDocuments();
     const container = this.getContainerEl();
     off(container, 'mousemove', this.onMove);
-    off(document, 'mouseup', this.endMove);
-    off(document, 'keydown', this.rollback);
+    off(docs, 'mouseup', this.endMove);
+    off(docs, 'keydown', this.rollback);
     //this.$document.off('mouseup', this.endMove);
     //this.$document.off('keydown', this.rollback);
     this.plh.style.display = 'none';
@@ -885,15 +886,13 @@ module.exports = Backbone.View.extend({
    * @param {Bool} Indicates if rollback in anycase
    * */
   rollback(e) {
-    $(document).off('keydown', this.rollback);
-    this.$document.off('keydown', this.rollback);
-    var key = e.which || e.keyCode;
+    off(this.getDocuments(), 'keydown', this.rollback);
+    const key = e.which || e.keyCode;
 
     if (key == 27) {
-      this.moved = false;
+      this.moved = 0;
       this.endMove();
     }
-    return;
   },
 
 });