Update color trait

src/styles/scss/_gjs_traits.scss

@@ -10,7 +10,7 @@
   &label {
 
     &-wrp {
-      width: 30%;
+      min-width: 30%;
     }
   }
 

src/trait_manager/view/TraitColorView.js

@@ -2,13 +2,15 @@ import TraitView from './TraitView';
 import InputColor from 'domain_abstract/ui/InputColor';
 
 export default TraitView.extend({
+  templateInput: '',
+
   /**
    * Returns input element
    * @return {HTMLElement}
    * @private
    */
   getInputEl() {
-    if (!this.$input) {
+    if (!this.input) {
       const model = this.model;
       const value = this.getModelValue();
       const inputColor = new InputColor({
@@ -18,22 +20,10 @@ export default TraitView.extend({
         ppfx: this.ppfx
       });
       const input = inputColor.render();
-      this.$input = input.colorEl;
       input.setValue(value, { fromTarget: 1 });
-      this.input = input;
+      this.input = input.el;
     }
 
-    return this.$input.get(0);
+    return this.input;
-  },
-
-  /**
-   * Renders input
-   * @private
-   * */
-  renderField() {
-    if (!this.$input) {
-      this.getInputEl();
-      this.$el.append(this.input.el);
-    }
   }
 });

src/trait_manager/view/TraitView.js

@@ -191,14 +191,12 @@ export default Backbone.View.extend({
 
   render() {
     const { $el, pfx, ppfx, model } = this;
-    const { noLabel } = model.attributes;
+    const { noLabel, type } = model.attributes;
     const cls = `${pfx}trait`;
     this.$input = null;
     let tmpl = `<div class="${cls}">
       ${!noLabel ? `<div class="${ppfx}label-wrp" data-label></div>` : ''}
-      <div class="${ppfx}field-wrp ${ppfx}field-wrp--${model.get(
+      <div class="${ppfx}field-wrp ${ppfx}field-wrp--${type}" data-input>
-      'type'
-    )}" data-input>
         ${this.templateInput && this.templateInput()}
       </div>
     </div>`;