diff --git a/src/commands/view/OpenTraitManager.js b/src/commands/view/OpenTraitManager.js
index fe72334c3..786c8897b 100644
--- a/src/commands/view/OpenTraitManager.js
+++ b/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 = $('
').append(
+ ``
+ );
+
+ this.$cn.append(this.$header);
+
+ this.$cn2.append(
+ '
' +
+ confTm.labelContainer +
+ '
'
+ );
+ 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();
}
};
diff --git a/src/styles/scss/_gjs_traits.scss b/src/styles/scss/_gjs_traits.scss
index f1e888864..f868667b2 100644
--- a/src/styles/scss/_gjs_traits.scss
+++ b/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;
diff --git a/src/trait_manager/config/config.js b/src/trait_manager/config/config.js
index 79b3c72ca..048941a00 100644
--- a/src/trait_manager/config/config.js
+++ b/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'
};