Merge pull request #929 from ryandeba/trait-manager-no-comp-msg Closes #869

Show message in trait manager panel when there is no comp selected

src/commands/view/OpenTraitManager.js

@@ -2,34 +2,74 @@ const $ = Backbone.$;
 
 module.exports = {
   run(editor, sender) {
+    this.sender = sender;
+
     var config = editor.Config;
     var pfx = config.stylePrefix;
     var tm = editor.TraitManager;
     var panelC;
-    if (!this.obj) {
+
+    if (!this.$cn) {
       var tmView = tm.getTraitsViewer();
       var confTm = tm.getConfig();
-      this.obj = $('<div></div>')
-        .append(
-          '<div class="' +
-            pfx +
-            'traits-label">' +
-            confTm.labelContainer +
-            '</div>'
-        )
-        .get(0);
-      this.obj.appendChild(tmView.render().el);
+
+      // Main container
+      this.$cn = $('<div></div>');
+      // Secondary container
+      this.$cn2 = $('<div></div>');
+      this.$cn.append(this.$cn2);
+
+      this.$header = $('<div>').append(
+        `<div class="${confTm.stylePrefix}header">${confTm.textNoElement}</div>`
+      );
+
+      this.$cn.append(this.$header);
+
+      this.$cn2.append(
+        '<div class="' +
+          pfx +
+          'traits-label">' +
+          confTm.labelContainer +
+          '</div>'
+      );
+      this.$cn2.append(tmView.render().el);
+
       var panels = editor.Panels;
+
       if (!panels.getPanel('views-container'))
         panelC = panels.addPanel({ id: 'views-container' });
       else panelC = panels.getPanel('views-container');
-      panelC.set('appendContent', this.obj).trigger('change:appendContent');
+
+      panelC
+        .set('appendContent', this.$cn.get(0))
+        .trigger('change:appendContent');
+
+      this.target = editor.getModel();
+      this.listenTo(this.target, 'change:selectedComponent', this.toggleTm);
     }
 
-    this.obj.style.display = 'block';
+    this.toggleTm();
+  },
+
+  /**
+   * Toggle Trait Manager visibility
+   * @private
+   */
+  toggleTm() {
+    const sender = this.sender;
+    if (sender && sender.get && !sender.get('active')) return;
+
+    if (this.target.get('selectedComponent')) {
+      this.$cn2.show();
+      this.$header.hide();
+    } else {
+      this.$cn2.hide();
+      this.$header.show();
+    }
   },
 
   stop() {
-    if (this.obj) this.obj.style.display = 'none';
+    this.$cn2 && this.$cn2.hide();
+    this.$header && this.$header.hide();
   }
 };

src/styles/scss/_gjs_traits.scss

@@ -8,6 +8,11 @@
   }
 }
 
+.#{$trt-prefix}header {
+  font-weight: lighter;
+  padding: 10px;
+}
+
 .#{$trt-prefix}trait {
   display: flex;
   justify-content: start;

src/trait_manager/config/config.js

@@ -17,5 +17,8 @@ module.exports = {
   optionsTarget: [
     { value: '', name: 'This window' },
     { value: '_blank', name: 'New window' }
-  ]
+  ],
+
+  // Text to show in case no element selected
+  textNoElement: 'Select an element before using Trait Manager'
 };