Add button trait

src/styles/scss/_gjs_inputs.scss

@@ -319,17 +319,23 @@
   }
 }
 
-.#{$app-prefix}btn-prim {
+.#{$app-prefix}btn {
-  color: inherit;
+  &-prim {
-  background-color: $mainLhColor;
+    color: inherit;
-  border-radius: 2px;
-  padding: 3px 6px;
-  padding: $inputPadding;
-  cursor: pointer;
-  border: none;
-
-  &:active {
     background-color: $mainLhColor;
+    border-radius: 2px;
+    padding: 3px 6px;
+    padding: $inputPadding;
+    cursor: pointer;
+    border: none;
+
+    &:active {
+      background-color: $mainLhColor;
+    }
+  }
+
+  &--full {
+    width: 100%;
   }
 }
 

src/trait_manager/view/TraitButtonView.js

@@ -0,0 +1,50 @@
+import { isString, isObject } from 'underscore';
+const TraitView = require('./TraitView');
+
+module.exports = TraitView.extend({
+  events: {
+    'click button': 'handleClick'
+  },
+
+  handleClick() {
+    const { model, em } = this;
+    const command = model.get('command');
+
+    if (command) {
+      if (isString(command)) {
+        em.get('Commands').run(command);
+      } else {
+        command(em.get('Editor'), model);
+      }
+    }
+  },
+
+  renderLabel() {
+    if (this.model.get('label')) {
+      TraitView.prototype.renderLabel.apply(this, arguments);
+    }
+  },
+
+  getInputEl() {
+    if (!this.input) {
+      const { model, ppfx } = this;
+      const value = this.getModelValue();
+      const label = model.get('labelButton') || '';
+      const full = model.get('full');
+      const className = `${ppfx}btn`;
+      const input = `<button type="button" class="${className}-prim${
+        full ? ` ${className}--full` : ''
+      }">
+        ${label}</button>`;
+      this.input = input;
+    }
+
+    return this.input;
+  },
+
+  renderField() {
+    if (!this.$input) {
+      this.$el.append(this.getInputEl());
+    }
+  }
+});

src/trait_manager/view/TraitView.js

@@ -17,6 +17,7 @@ module.exports = Backbone.View.extend({
     const name = model.get('name');
     const target = model.target;
     this.config = o.config || {};
+    this.em = this.config.em;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
     this.target = target;

src/trait_manager/view/TraitsView.js

@@ -1,9 +1,10 @@
-var DomainViews = require('domain_abstract/view/DomainViews');
+const DomainViews = require('domain_abstract/view/DomainViews');
-var TraitView = require('./TraitView');
+const TraitView = require('./TraitView');
-var TraitSelectView = require('./TraitSelectView');
+const TraitSelectView = require('./TraitSelectView');
-var TraitCheckboxView = require('./TraitCheckboxView');
+const TraitCheckboxView = require('./TraitCheckboxView');
-var TraitNumberView = require('./TraitNumberView');
+const TraitNumberView = require('./TraitNumberView');
-var TraitColorView = require('./TraitColorView');
+const TraitColorView = require('./TraitColorView');
+const TraitButtonView = require('./TraitButtonView');
 
 module.exports = DomainViews.extend({
   itemView: TraitView,
@@ -13,7 +14,8 @@ module.exports = DomainViews.extend({
     number: TraitNumberView,
     select: TraitSelectView,
     checkbox: TraitCheckboxView,
-    color: TraitColorView
+    color: TraitColorView,
+    button: TraitButtonView
   },
 
   initialize(o = {}) {