first pass working font size

src/plugins/condition/components/inspector/StyleEditor.vue

@@ -61,6 +61,10 @@
                                :options="isStyleInvisibleOption"
                                @change="updateStyleValue"
         />
+        <toolbar-menu v-if="hasProperty(styleItem.style.fontSize)"
+                      :options="fontSizeOption"
+                      @click="updateStyleValue"
+        />
     </span>
 </div>
 </template>
@@ -70,7 +74,9 @@
 import ToolbarColorPicker from "@/ui/toolbar/components/toolbar-color-picker.vue";
 import ToolbarButton from "@/ui/toolbar/components/toolbar-button.vue";
 import ToolbarToggleButton from "@/ui/toolbar/components/toolbar-toggle-button.vue";
+import ToolbarMenu from "@/ui/toolbar/components/toolbar-menu.vue";
 import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
+import {FONT_SIZE_OPTIONS} from "@/plugins/condition/utils/constants";
 import {getStylesWithoutNoneValue} from "@/plugins/condition/utils/styleUtils";
 
 export default {
@@ -78,7 +84,8 @@ export default {
     components: {
         ToolbarButton,
         ToolbarColorPicker,
-        ToolbarToggleButton
+        ToolbarToggleButton,
+        ToolbarMenu
     },
     inject: [
         'openmct'
@@ -180,6 +187,14 @@ export default {
                 ]
             }
 
+        },
+        fontSizeOption() {
+            return {
+                isEditing: this.isEditing,
+                property: 'fontSize',
+                label: this.styleItem.style.fontSize || '13px',
+                options: FONT_SIZE_OPTIONS
+            }
         }
     },
     methods: {
@@ -200,6 +215,9 @@ export default {
         },
         updateStyleValue(value, item) {
             value = this.normalizeValueForStyle(value);
+            if (item.property === 'fontSize') {
+                value = value.value;
+            }
             if (item.property === 'border') {
                 value = '1px solid ' + value;
             }

src/plugins/condition/utils/constants.js

@@ -52,3 +52,13 @@ export const ERROR = {
         errorText: 'Condition not found'
     }
 };
+
+export const FONT_SIZE_OPTIONS = 
+    [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128].map(size => {
+        let value = size + 'px';
+
+        return {
+            value,
+            name: value
+        };
+    });

src/plugins/condition/utils/styleUtils.js

@@ -61,6 +61,15 @@ const styleProps = {
         applicableForType: type => {
             return !type ? false : type === 'image-view';
         }
+    },
+    fontSize: {
+        svgProperty: 'font-size',
+        noneValue: NONE_VALUE,
+        applicableForType: type => {
+            return !type ? true : (type === 'text-view' ||
+                                    type === 'telemetry-view'||
+                                    type === 'subobject-view');
+        }
     }
 };
 

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -326,27 +326,6 @@ define(['lodash'], function (_) {
                     }
                 }
 
-                function getTextSizeMenu(selectedParent, selection) {
-                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
-                    return {
-                        control: "select-menu",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: selection.filter(selectionPath => {
-                            let type = selectionPath[0].context.layoutItem.type;
-                            return type === 'text-view' || type === 'telemetry-view';
-                        }),
-                        property: function (selectionPath) {
-                            return getPath(selectionPath) + ".size";
-                        },
-                        title: "Set text size",
-                        options: TEXT_SIZE.map(size => {
-                            return {
-                                value: size + "px"
-                            };
-                        })
-                    };
-                }
-
                 function getTextButton(selectedParent, selection) {
                     return {
                         control: "button",
@@ -478,11 +457,6 @@ define(['lodash'], function (_) {
                         if (toolbar['telemetry-value'].length === 0) {
                             toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
                         }
-                        if (toolbar['text-style'].length === 0) {
-                            toolbar['text-style'] = [
-                                getTextSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar.position.length === 0) {
                             toolbar.position = [
                                 getStackOrder(selectedParent, selectionPath),
@@ -496,11 +470,6 @@ define(['lodash'], function (_) {
                             toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'text-view') {
-                        if (toolbar['text-style'].length === 0) {
-                            toolbar['text-style'] = [
-                                getTextSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                         if (toolbar.position.length === 0) {
                             toolbar.position = [
                                 getStackOrder(selectedParent, selectionPath),

src/ui/toolbar/components/toolbar-menu.vue

@@ -48,7 +48,7 @@ export default {
     },
     methods: {
         onClick(option) {
-            this.$emit('click', option)
+            this.$emit('click', option, this.options);
         }
     }
 }