Fix: Add missing subtitle text alignment option (fix #555)

Author: swashbuck

example.json

@@ -30,6 +30,7 @@
     "_pageHeader": {
         "_textAlignment": {
             "_title": "",
+            "_subtitle": "",
             "_body": "",
             "_instruction": ""
         },

js/themePageView.js

@@ -25,6 +25,7 @@ export default class ThemePageView extends ThemeView {
     if (!textAlignment) return;
 
     if (textAlignment._title) this.$el.addClass(`title-align-${textAlignment._title}`);
+    if (textAlignment._subtitle) this.$el.addClass(`subtitle-align-${textAlignment._subtitle}`);
     if (textAlignment._body) this.$el.addClass(`body-align-${textAlignment._body}`);
     if (textAlignment._instruction) this.$el.addClass(`instruction-align-${textAlignment._instruction}`);
   }

js/themeView.js

@@ -43,6 +43,7 @@ export default class ThemeView extends Backbone.View {
     if (!textAlignment) return;
 
     if (textAlignment._title) this.$el.addClass(`title-align-${textAlignment._title}`);
+    if (textAlignment._subtitle) this.$el.addClass(`subtitle-align-${textAlignment._subtitle}`);
     if (textAlignment._body) this.$el.addClass(`body-align-${textAlignment._body}`);
     if (textAlignment._instruction) this.$el.addClass(`instruction-align-${textAlignment._instruction}`);
   }

less/project/theme-common.less

@@ -92,18 +92,21 @@
 
 .@{selector} {
   &.title-align-left &__title,
+  &.subtitle-align-left &__subtitle,
   &.body-align-left &__body,
   &.instruction-align-left &__instruction {
     text-align: start;
   }
 
   &.title-align-center &__title,
+  &.subtitle-align-center &__subtitle,
   &.body-align-center &__body,
   &.instruction-align-center &__instruction {
     text-align: center;
   }
 
   &.title-align-right &__title,
+  &.subtitle-align-right &__subtitle,
   &.body-align-right &__body,
   &.instruction-align-right &__instruction {
     text-align: end;

properties.schema

@@ -1274,6 +1274,14 @@
                           "title": "Title alignment",
                           "help": "Set the alignment of the page title. Left: Aligns the title to the left of the container. Center: Aligns the title to the center of the container. Right: Aligns the title to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction."
                         },
+                        "_subtitle": {
+                          "type": "string",
+                          "required": false,
+                          "default": "",
+                          "inputType": {"type":"Select", "options":["","left","center","right"]},
+                          "title": "Subtitle alignment",
+                          "help": "Set the alignment of the page subtitle. Left: Aligns the subtitle to the left of the container. Center: Aligns the subtitle to the center of the container. Right: Aligns the subtitle to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction."
+                        },
                         "_body": {
                           "type": "string",
                           "required": false,

schema/contentobject.schema.json

@@ -161,6 +161,19 @@
                       ],
                       "_backboneForms": "Select"
                     },
+                    "_subtitle": {
+                      "type": "string",
+                      "title": "Subtitle alignment",
+                      "description": "Set the alignment of the page subtitle. Left: Aligns the subtitle to the left of the container. Center: Aligns the subtitle to the center of the container. Right: Aligns the subtitle to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.",
+                      "default": "",
+                      "enum": [
+                        "",
+                        "left",
+                        "center",
+                        "right"
+                      ],
+                      "_backboneForms": "Select"
+                    },
                     "_body": {
                       "type": "string",
                       "title": "Body alignment",