Merge pull request #747 from JuanTincho/Categories-order. Closes #742

Categories order

src/block_manager/view/BlocksView.js

@@ -21,7 +21,7 @@ module.exports = Backbone.View.extend({
     this.tac = 'test-tac';
     this.grabbingCls = this.ppfx + 'grabbing';
 
-    if(this.em){
+    if (this.em) {
       this.config.getSorter = this.getSorter;
       this.canvas = this.em.get('Canvas');
     }
@@ -32,9 +32,9 @@ module.exports = Backbone.View.extend({
    * @private
    */
   getSorter() {
-    if(!this.em)
+    if (!this.em)
       return;
-    if(!this.sorter){
+    if (!this.sorter) {
       var utils = this.em.get('Utils');
       var canvas = this.canvas;
       this.sorter = new utils.Sorter({
@@ -79,7 +79,7 @@ module.exports = Backbone.View.extend({
     em.runDefault();
 
     if (model && model.get) {
-      if(model.get('activeOnRender')) {
+      if (model.get('activeOnRender')) {
         model.trigger('active');
         model.set('activeOnRender', 0);
       }
@@ -119,6 +119,8 @@ module.exports = Backbone.View.extend({
           id: category,
           label: category
         };
+      } else if (typeof category === 'object') {
+        category.id = category.label;
       }
 
       var catModel = this.categories.add(category);
@@ -139,7 +141,7 @@ module.exports = Backbone.View.extend({
       return;
     }
 
-    if(frag)
+    if (frag)
       frag.appendChild(rendered);
     else
       this.append(rendered);

src/block_manager/view/CategoryView.js

@@ -21,13 +21,13 @@ module.exports = Backbone.View.extend({
     this.iconClass = `${pfx}caret-icon`;
     this.activeClass = `${pfx}open`;
     this.className = `${pfx}block-category`;
-    this.events[`click .${pfx}title`]  = 'toggle';
+    this.events[`click .${pfx}title`] = 'toggle';
     this.listenTo(this.model, 'change:open', this.updateVisibility);
     this.delegateEvents();
   },
 
   updateVisibility() {
-    if(this.model.get('open'))
+    if (this.model.get('open'))
       this.open();
     else
       this.close();
@@ -76,6 +76,7 @@ module.exports = Backbone.View.extend({
       label: this.model.get('label'),
     });
     this.el.className = this.className;
+    this.$el.css({ 'order': this.model.get('order') });
     this.updateVisibility();
     return this;
   },

src/styles/scss/_gjs_blocks.scss

@@ -4,6 +4,11 @@
   justify-content: flex-start;
 }
 
+.#{$app-prefix}block-categories {
+  display: flex;
+  flex-direction: column;
+}
+
 .#{$app-prefix}block-category {
   width: 100%;