diff --git a/src/plugins/displayLayout/DisplayLayout.vue b/src/plugins/displayLayout/DisplayLayout.vue deleted file mode 100644 index 694030205d..0000000000 --- a/src/plugins/displayLayout/DisplayLayout.vue +++ /dev/null @@ -1,312 +0,0 @@ -/***************************************************************************** - * Open MCT, Copyright (c) 2014-2018, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT is licensed under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * Open MCT includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ - - - - - - - \ No newline at end of file diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js new file mode 100644 index 0000000000..5c5206d4c7 --- /dev/null +++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js @@ -0,0 +1,151 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +define([], function () { + + function DisplayLayoutToolbar(openmct) { + return { + name: "Display Layout Toolbar", + key: "layout", + description: "A toolbar for objects inside a display layout.", + forSelection: function (selection) { + // Apply the layout toolbar if the selected object is inside a layout, + // and in edit mode. + return (selection && + selection[1] && + selection[1].context.item && + selection[1].context.item.type === 'layout' && + openmct.editor.isEditing()); + }, + toolbar: function (selection) { + let domainObject = selection[1].context.item; + let layoutItem = selection[0].context.layoutItem; + + if (layoutItem && layoutItem.type === 'telemetry-view') { + let path = "configuration.alphanumerics[" + layoutItem.config.alphanumeric.index + "]"; + let metadata = openmct.telemetry.getMetadata(layoutItem.domainObject); + const TEXT_SIZE = [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96]; + + return [ + { + control: "select-menu", + domainObject: domainObject, + property: path + ".displayMode", + title: "Set display mode", + options: [ + { + name: 'Label + Value', + value: 'all' + }, + { + name: "Label only", + value: "label" + }, + { + name: "Value only", + value: "value" + } + ] + }, + { + control: "separator" + }, + { + control: "select-menu", + domainObject: domainObject, + property: path + ".value", + title: "Set value", + options: metadata.values().map(value => { + return { + name: value.name, + value: value.key + } + }) + }, + { + control: "separator" + }, + { + control: "color-picker", + domainObject: domainObject, + property: path + ".fill", + icon: "icon-paint-bucket", + title: "Set fill color" + }, + { + control: "color-picker", + domainObject: domainObject, + property: path + ".stroke", + icon: "icon-line-horz", + title: "Set border color" + }, + { + control: "color-picker", + domainObject: domainObject, + property: path + ".color", + icon: "icon-font", + mandatory: true, + title: "Set text color", + preventNone: true + }, + { + control: "separator" + }, + { + control: "select-menu", + domainObject: domainObject, + property: path + ".size", + title: "Set text size", + options: TEXT_SIZE.map(size => { + return { + value: size + "px" + }; + }) + }, + ]; + } else { + return [ + { + control: "toggle-button", + domainObject: domainObject, + property: "configuration.panels[" + layoutItem.id + "].hasFrame", + options: [ + { + value: false, + icon: 'icon-frame-hide', + title: "Hide frame" + }, + { + value: true, + icon: 'icon-frame-show', + title: "Show frame" + } + ] + } + ]; + } + } + } + } + + return DisplayLayoutToolbar; +}); \ No newline at end of file diff --git a/src/plugins/displayLayout/DisplayLayoutType.js b/src/plugins/displayLayout/DisplayLayoutType.js index c1de4c7204..a21ce0cce3 100644 --- a/src/plugins/displayLayout/DisplayLayoutType.js +++ b/src/plugins/displayLayout/DisplayLayoutType.js @@ -29,9 +29,8 @@ define(function () { initialize(domainObject) { domainObject.composition = []; domainObject.configuration = { - layout: { - panels: {} - } + panels: {}, + alphanumerics: [] }; } } diff --git a/src/plugins/displayLayout/SubobjectViewConfiguration.js b/src/plugins/displayLayout/SubobjectViewConfiguration.js new file mode 100644 index 0000000000..4df2e180ae --- /dev/null +++ b/src/plugins/displayLayout/SubobjectViewConfiguration.js @@ -0,0 +1,74 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +define([], + function () { + class SubobjectViewConfiguration { + /** + * + * @param domainObject the domain object to mutate. + * @param id + * @param rawPosition + * @param openmct + */ + constructor(domainObject, id, hasFrame, rawPosition, openmct) { + this.domainObject = domainObject; + this.id = id; + this.hasFrame = hasFrame; + this.rawPosition = rawPosition; + this.openmct = openmct; + this.mutatePosition = this.mutatePosition.bind(this); + this.listeners = []; + } + + mutatePosition() { + let path = "configuration.panels[" + this.id + "]"; + this.mutate(path + ".dimensions", this.rawPosition.dimensions); + this.mutate(path + ".position", this.rawPosition.position); + } + + mutate(path, value) { + this.openmct.objects.mutate(this.domainObject, path, value); + } + + attachListeners() { + let path = "configuration.panels[" + this.id + "].hasFrame"; + this.listeners.push(this.openmct.objects.observe(this.domainObject, path, function (newValue) { + this.hasFrame = newValue; + }.bind(this))); + + this.listeners.push(this.openmct.objects.observe(this.domainObject, '*', function (obj) { + this.domainObject = JSON.parse(JSON.stringify(obj)); + }.bind(this))); + } + + removeListeners() { + this.listeners.forEach(listener => { + listener(); + }); + this.listeners = []; + } + } + + return SubobjectViewConfiguration; + } +); \ No newline at end of file diff --git a/src/plugins/displayLayout/TelemetryViewConfiguration.js b/src/plugins/displayLayout/TelemetryViewConfiguration.js new file mode 100644 index 0000000000..85a5908f66 --- /dev/null +++ b/src/plugins/displayLayout/TelemetryViewConfiguration.js @@ -0,0 +1,84 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +define([], + function () { + class TelemetryViewConfiguration { + /** + * + * @param domainObject the domain object to mutate. + * @param alphanumeric + * @param rawPosition + * @param openmct + */ + constructor(domainObject, alphanumeric, rawPosition, openmct) { + this.domainObject = domainObject; + this.alphanumeric = alphanumeric; + this.rawPosition = rawPosition; + this.openmct = openmct; + this.mutatePosition = this.mutatePosition.bind(this); + this.listeners = []; + } + + mutatePosition() { + let path = "configuration.alphanumerics[" + this.alphanumeric.index + "]"; + this.mutate(path + ".dimensions", this.rawPosition.dimensions); + this.mutate(path + ".position", this.rawPosition.position); + } + + attachListeners() { + let path = "configuration.alphanumerics[" + this.alphanumeric.index + "]"; + [ + 'displayMode', + 'value', + 'fill', + 'stroke', + 'color', + 'size' + ].forEach(property => { + this.listeners.push( + this.openmct.objects.observe(this.domainObject, path + "." + property, function (newValue) { + this.alphanumeric[property] = newValue; + }.bind(this)) + ); + }); + this.listeners.push(this.openmct.objects.observe(this.domainObject, '*', function (obj) { + this.domainObject = JSON.parse(JSON.stringify(obj)); + }.bind(this))); + } + + removeListeners() { + this.listeners.forEach(listener => { + listener(); + }); + this.listeners = []; + } + + mutate(path, value) { + this.openmct.objects.mutate(this.domainObject, path, value); + } + + } + + return TelemetryViewConfiguration; + } +); \ No newline at end of file diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue new file mode 100644 index 0000000000..0131c8ef4c --- /dev/null +++ b/src/plugins/displayLayout/components/DisplayLayout.vue @@ -0,0 +1,380 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + + + + + + + \ No newline at end of file diff --git a/src/plugins/displayLayout/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutItem.vue similarity index 65% rename from src/plugins/displayLayout/LayoutFrame.vue rename to src/plugins/displayLayout/components/LayoutItem.vue index 10702dff1b..b22cd7f6b6 100644 --- a/src/plugins/displayLayout/LayoutFrame.vue +++ b/src/plugins/displayLayout/components/LayoutItem.vue @@ -25,17 +25,8 @@ :style="item.style" :class="classObject" @dblclick="drill(item.id, $event)"> -
-
-
{{ item.domainObject.name }}
-
-
-
-
-
-
- + +
@@ -60,68 +51,11 @@ .c-frame { display: flex; flex-direction: column; - border-width: 1px; - border-color: transparent; - - /*************************** HEADER */ - &__header { - display: flex; - align-items: center; - flex: 0 0 auto; - margin-bottom: $interiorMargin; - - > [class*="__"] { - display: flex; - align-items: center; - } - - > * + * { - margin-left: $interiorMargin; - } - - [class*="__start"] { - flex: 1 1 auto; - overflow: hidden; - } - - [class*="__end"] { - //justify-content: flex-end; - flex: 0 0 auto; - - [class*="button"] { - font-size: 0.7em; - } - } - } - - &__name { - @include ellipsize(); - flex: 0 1 auto; - font-size: 1.2em; - - &:before { - // Object type icon - flex: 0 0 auto; - margin-right: $interiorMarginSm; - } - } - - /*************************** OBJECT VIEW */ - &__object-view { - flex: 1 1 auto; - overflow: auto; - - .c-object-view { - .u-fills-container { - // Expand component types that fill a container - @include abs(); - } - } - } + border: 1px solid transparent; /*************************** NO-FRAME */ &.no-frame { - > [class*="__header"] { + > [class*="contents"] > [class*="__header"] { display: none; } } @@ -131,15 +65,14 @@ border: 1px solid $colorInteriorBorder; padding: $interiorMargin; } - - // Styles moved to _global.scss; } diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue new file mode 100644 index 0000000000..0a40786e02 --- /dev/null +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -0,0 +1,181 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + + + + + + \ No newline at end of file diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js index 818d984fd7..32d4240622 100644 --- a/src/plugins/displayLayout/plugin.js +++ b/src/plugins/displayLayout/plugin.js @@ -20,10 +20,11 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -import Layout from './DisplayLayout.vue' +import Layout from './components/DisplayLayout.vue' import Vue from 'vue' import objectUtils from '../../api/objects/object-utils.js' import DisplayLayoutType from './DisplayLayoutType.js' +import DisplayLayoutToolbar from './DisplayLayoutToolbar.js' export default function () { return function (openmct) { @@ -63,6 +64,7 @@ export default function () { } }); openmct.types.addType('layout', DisplayLayoutType()); + openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct)); openmct.composition.addPolicy((parent, child) => { if (parent.type === 'layout' && child.type === 'folder') { return false; @@ -70,41 +72,5 @@ export default function () { return true; } }); - openmct.toolbars.addProvider({ - name: "Display Layout Toolbar", - key: "layout", - description: "A toolbar for objects inside a display layout.", - forSelection: function (selection) { - // Apply the layout toolbar if the selected object is inside a layout, - // and in edit mode. - return (selection && - selection[1] && - selection[1].context.item && - selection[1].context.item.type === 'layout' && - openmct.editor.isEditing()); - }, - toolbar: function (selection) { - let id = openmct.objects.makeKeyString(selection[0].context.item.identifier); - return [ - { - control: "toggle-button", - domainObject: selection[1].context.item, - property: "configuration.layout.panels[" + id + "].hasFrame", - options: [ - { - value: false, - icon: 'icon-frame-hide', - title: "Hide frame" - }, - { - value: true, - icon: 'icon-frame-show', - title: "Show frame" - } - ] - } - ]; - } - }); } } diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss index 99258d0c6a..2194ebc823 100644 --- a/src/styles-new/_constants-espresso.scss +++ b/src/styles-new/_constants-espresso.scss @@ -96,7 +96,7 @@ $browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px; $browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6); $editBorderSelectable: 1px dotted rgba($editColor, 1); $editBorderSelectableHov: 1px dashed rgba($editColor, 1); -$editBorderSelected: 1px solid $editColor; +$editBorderSelected: 1px solid rgba($editColor, 0.7); $editBorderDrilledIn: 1px dashed #ff4d9a; $colorGridLines: rgba($editColor, 0.2); diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss index 2d50990374..de5b87223b 100644 --- a/src/styles-new/_controls.scss +++ b/src/styles-new/_controls.scss @@ -386,8 +386,24 @@ input[type=number]::-webkit-outer-spin-button { align-items: stretch; } +@mixin cToolbarSeparator() { + $m: $interiorMargin; + $b: 1px; + display: block; + width: $m + $b; // Allow for border + border-right: $b solid $colorInteriorBorder; + margin-right: $m; +} + .c-toolbar { - height: 24px; // Need to standardize the height + $p: $interiorMargin; + border-top: 1px solid $colorInteriorBorder; + height: $p + 24px; // Need to standardize the height + padding-top: $p; + + &__separator { + @include cToolbarSeparator(); + } .c-click-icon { @include cControl(); @@ -444,14 +460,9 @@ input[type=number]::-webkit-outer-spin-button { } + .c-button-set { - $m: $interiorMargin; - $b: 1px; &:before { + @include cToolbarSeparator(); content: ''; - display: block; - width: $m + $b; // Allow for border - border-right: $b solid $colorInteriorBorder; - margin-right: $m; } } diff --git a/src/ui/components/layout/ObjectView.vue b/src/ui/components/layout/ObjectView.vue index 8b903c49af..46e973be78 100644 --- a/src/ui/components/layout/ObjectView.vue +++ b/src/ui/components/layout/ObjectView.vue @@ -1,12 +1,6 @@ - -