Fix the class for disabled state of panel buttons. Closes #1421

src/panels/view/ButtonView.js

@@ -19,8 +19,8 @@ module.exports = Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.id = pfx + this.model.get('id');
     this.activeCls = `${pfx}active ${ppfx}four-color`;
-    this.disableCls = pfx + 'active';
-    this.btnsVisCls = pfx + 'visible';
+    this.disableCls = `${ppfx}disabled`;
+    this.btnsVisCls = `${pfx}visible`;
     this.className = pfx + 'btn' + (cls ? ' ' + cls : '');
     this.listenTo(this.model, 'change', this.render);
     this.listenTo(this.model, 'change:active updateActive', this.updateActive);
@@ -101,11 +101,9 @@ module.exports = Backbone.View.extend({
   },
 
   updateDisable() {
-    if (this.model.get('disable')) {
-      this.$el.addClass(this.disableCls);
-    } else {
-      this.$el.removeClass(this.disableCls);
-    }
+    const { disableCls, model } = this;
+    const disable = model.get('disable');
+    this.$el[disable ? 'addClass' : 'removeClass'](disableCls);
   },
 
   /**
@@ -158,6 +156,7 @@ module.exports = Backbone.View.extend({
     $el.attr('class', this.className);
     label && $el.append(label);
     this.checkActive();
+    this.updateDisable();
 
     return this;
   }

src/styles/scss/main.scss

@@ -218,6 +218,11 @@ $prefix: $app-prefix;
     touch-action: none;
   }
 
+  &disabled {
+    @include user-select(none);
+    @include opacity(0.50);
+  }
+
   &editor {
     font-family: $mainFont;
     font-size: $fontSizeS;