New: Add block horizontal alignment option (fixes adaptlearning#393)

example.json

@@ -96,7 +96,8 @@
     "_isDividerBlock": false,
     "_paddingTop": "",
     "_paddingBottom": "",
-    "_componentVerticalAlignment": ""
+    "_componentVerticalAlignment": "",
+    "_componentHorizontalAlignment": ""
 }
 
 // components.json

js/themeBlockView.js

@@ -10,6 +10,7 @@ export default class ThemeBlockView extends ThemeView {
     this.setPaddingTop();
     this.setPaddingBottom();
     this.setComponentVerticalAlignment();
+    this.setComponentHorizontalAlignment();
   }
 
   setPaddingTop() {
@@ -30,6 +31,12 @@ export default class ThemeBlockView extends ThemeView {
     this.$el.addClass(`align-vert-${componentVerticalAlignment}`);
   }
 
+  setComponentHorizontalAlignment() {
+    const componentHorizontalAlignment = this.model.get('_componentHorizontalAlignment');
+    if (!componentHorizontalAlignment) return;
+    this.$el.addClass(`align-horz-${componentHorizontalAlignment}`);
+  }
+
   onRemove() {}
 
 }

less/core/block.less

@@ -54,4 +54,10 @@
 
   // Aligns child components to the bottom of the parent block on the vertical axis
   &.align-vert-bottom .component__container {align-items: flex-end; }
+
+  // Aligns child components centrally on the horizontal axis
+  &.align-horz-center .component__container { justify-content: center; }
+
+  // Aligns child components to the right of the parent block on the horizontal axis
+  &.align-horz-right .component__container { justify-content: flex-end; }
 }

properties.schema

@@ -1263,6 +1263,14 @@
                   "inputType": {"type":"Select", "options":["top","center","bottom"]},
                   "title": "Set the vertical alignment of the child component(s)",
                   "help": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`."
+                },
+                "_componentHorizontalAlignment": {
+                  "type": "string",
+                  "required": false,
+                  "default": "left",
+                  "inputType": {"type":"Select", "options":["left","center","right"]},
+                  "title": "Set the horizontal alignment of the child component(s)",
+                  "help": "Defines the horizontal alignment of the child component(s) in relation to the block. The default alignment is `left`."
                 }
               }
             }

schema/block.schema.json

@@ -243,6 +243,18 @@
                 "bottom"
               ],
               "_backboneForms": "Select"
+            },
+            "_componentHorizontalAlignment": {
+              "type": "string",
+              "title": "Set the horizontal alignment of the child component(s)",
+              "description": "Defines the horizontal alignment of the child component(s) in relation to the block. The default alignment is `left`.",
+              "default": "left",
+              "enum": [
+                "left",
+                "center",
+                "right"
+              ],
+              "_backboneForms": "Select"
             }
           }
         }