diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js new file mode 100644 index 0000000000..15a6089e99 --- /dev/null +++ b/example/styleguide/bundle.js @@ -0,0 +1,82 @@ +define([ + "./src/ExampleStyleGuideModelProvider", + 'legacyRegistry' +], function ( + ExampleStyleGuideModelProvider, + legacyRegistry +) { + legacyRegistry.register("example/styleguide", { + "name": "Open MCT Style Guide", + "description": "Examples and documentation illustrating UI styles in use in Open MCT.", + "extensions": + { + "types": [ + { + "key": "styleguide.intro", + "name": "Introduction", + "cssclass": "icon-page", + "description": "Introduction and overview to the style guide." + }, + { + "key": "styleguide.controls", + "name": "Controls", + "cssclass": "icon-page", + "description": "Open MCT Controls" + } + ], + "views": [ + { + "key": "styleguide.intro", + "type": "styleguide.intro", + "cssclass": "icon-page", + "name": "Introduction", + "templateUrl": "templates/intro.html", + "editable": false + }, + { + "key": "styleguide.controls", + "type": "styleguide.controls", + "cssclass": "icon-page", + "name": "Controls", + "templateUrl": "templates/controls.html", + "editable": false + } + ], + "roots": [ + { + "id": "styleguide:folder" + } + ], + "models": [ + { + "id": "styleguide:folder", + "priority" : "preferred", + "model": { + "type": "folder", + "name": "Style Guide", + "composition": [ + "intro", + "controls" + ] + } + } + ], + "components": [ + { + "provides": "modelService", + "type": "provider", + "implementation": ExampleStyleGuideModelProvider, + "depends": [ + "$q" + ] + } + ], + "stylesheets": [ + { + "stylesheetUrl": "css/style-guide.css", + "priority": "mandatory" + } + ] + } + }); +}); \ No newline at end of file diff --git a/example/styleguide/res/images/diagram-containment.svg b/example/styleguide/res/images/diagram-containment.svg new file mode 100644 index 0000000000..a718ae33ac --- /dev/null +++ b/example/styleguide/res/images/diagram-containment.svg @@ -0,0 +1 @@ +dFolderActivity ModeTelemetry ElementClockTimerWeb PageDisplay LayoutTimelineFixedPacketActivityTablePlotCan contain their own type \ No newline at end of file diff --git a/example/styleguide/res/images/diagram-objects.svg b/example/styleguide/res/images/diagram-objects.svg new file mode 100644 index 0000000000..c62a2fc3a7 --- /dev/null +++ b/example/styleguide/res/images/diagram-objects.svg @@ -0,0 +1 @@ +objects-diagram \ No newline at end of file diff --git a/example/styleguide/res/sass/style-guide.scss b/example/styleguide/res/sass/style-guide.scss new file mode 100644 index 0000000000..8d79c1847c --- /dev/null +++ b/example/styleguide/res/sass/style-guide.scss @@ -0,0 +1,76 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2016, 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. + *****************************************************************************/ +@import "bourbon"; +@import "../../../../platform/commonUI/general/res/sass/constants"; + +.l-style-guide { + font-size: 0.9em; + text-align: justify; + margin: auto 10%; + + h1, h2, h3 { + + } + + .doc-title { + color: rgba(#fff, 0.3); + text-transform: uppercase; + } + + .l-section { + border-top: 1px solid rgba(#999, 0.3); + margin-top: 2em; + padding-top: 1em; + + .cols { + @include display(flex); + @include flex-direction(row); + + .col { + @include flex(1 1 auto); + &:not(:last-child) { margin-right: $interiorMargin * 4; } + min-width: 300px; + img { width: 100%; } + } + + &.cols1-1 { + // 2 cols, equal width + .col { + width: 50%; + } + } + + &.cols1-2 { + // 3 cols, first is 1/3 of the width + .col:first-child { width: 33%; } + .col:last-child { width: 66%; } + } + + &.cols2-1 { + // 3 cols, first is 2/3 of the width + .col:first-child { width: 66%; } + .col:last-child { width: 33%; } + } + } + } +} + diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html new file mode 100644 index 0000000000..5ae3a2f221 --- /dev/null +++ b/example/styleguide/res/templates/controls.html @@ -0,0 +1,25 @@ + +
+

Open MCT Style Guide: Controls

+

This will be the Style Guide Controls page.

+
\ No newline at end of file diff --git a/example/styleguide/res/templates/intro.html b/example/styleguide/res/templates/intro.html new file mode 100644 index 0000000000..ef797669f6 --- /dev/null +++ b/example/styleguide/res/templates/intro.html @@ -0,0 +1,73 @@ + +
+

Open MCT Style Guide

+

Introduction

+
+

Open MCT is a robust, extensible telemetry monitoring and situational awareness system that provides a framework supporting fast and efficient multi-mission deployment. This guide will explore the major concepts and design elements of Open MCT. Its overall goal is to guide you in creating new features and plugins that seamlessly integrate with the base application.

+
+ +
+

Everything Is An Object

+
+
+

First and foremost, Open MCT uses a “object-oriented” approach: everything in the system is an object. Objects come in different types, and some objects can contain other objects of given types. This is a very familiar and ubiquitous model, very similar to how the file management system of all modern computers work. For example, a folder object can contain any other type of object. A presentation file can contain an image. This is conceptually the same in Open MCT.

+

As you develop plugins for Open MCT, consider how a generalized component might be combined with others when designing to create a rich and powerful larger object, rather than adding a single monolithic, non-modular plugin. To solve a particular problem or allow a new feature in Open MCT, you may need to introduce more than just one new object type.

+
+
+ +
+
+
+ +
+

Object Types

+
+
+

In the same way that different types of files might be opened and edited by different applications, objects in Open MCT also have different types. For example, a Display Layout provides a way that other objects that display information can be combined and laid out in a canvas area to create a recallable display that suits the needs of the user that created it. A Telemetry Panel allows a user to collect together Telemetry Points and visualize them as a plot or a table.

+

Object types provide a containment model that guides the user in their choices while creating a new object, and allows view normalization when flipping between different views. When a given object may only contain other objects of certain types, advantages emerge: the result of adding new objects is more predictable, more alternate views can be provided because the similarities between the contained objects is close, and we can provide more helpful and pointed guidance to the user because we know what types of objects they might be working with at a given time.

+

The types of objects that a container can hold should be based on the purpose of the container and the views that it affords. For example, a Folder’s purpose is to allow a user to conceptually organize objects of all other types; a Folder must therefore be able to contain an object of any type.

+
+
+ +
+
+
+ +
+

Object Views

+
+
+

Views are simply different ways to view the content of a given object. For example, telemetry data could be viewed as a plot or a table. In each view, all of the data is present; it’s just represented differently. If we looked at the contents of a Folder and certain files disappeared because we switched from a list to a grid view, the user would find this unexpected and confusing. When providing views for an object, all the content of the object should be present in each view.

+
+
+ +
+
+
+ + + +

+

+

+
\ No newline at end of file diff --git a/example/styleguide/src/ExampleStyleGuideModelProvider.js b/example/styleguide/src/ExampleStyleGuideModelProvider.js new file mode 100644 index 0000000000..7e3ef635c6 --- /dev/null +++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js @@ -0,0 +1,52 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2016, 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. + *****************************************************************************/ +/*global define*/ + +define( + [], + function () { + "use strict"; + + function ExampleStyleGuideModelProvider($q) { + var pages = {}; + + // Add pages + pages['intro'] = { + name: "Intro", + type: "styleguide.intro" + }; + + pages['controls'] = { + name: "Controls", + type: "styleguide.controls" + }; + + return { + getModels: function () { + return $q.when(pages); + } + }; + } + + return ExampleStyleGuideModelProvider + } +); \ No newline at end of file diff --git a/index.html b/index.html index 9526465548..8d2fbb6853 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,11 @@ [ 'example/imagery', 'example/eventGenerator', - 'example/generator' + 'example/generator', + 'example/msl', + 'example/styleguide', + 'platform/features/my-items', + 'platform/persistence/local' ].forEach( openmct.legacyRegistry.enable.bind(openmct.legacyRegistry) ); diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss index a95ed0cd77..bf0b4fd56a 100644 --- a/platform/commonUI/general/res/sass/_about.scss +++ b/platform/commonUI/general/res/sass/_about.scss @@ -42,6 +42,27 @@ a { color: $colorAboutLink; } + + h1, h2, h3 { + color: pullForward($colorBodyFg, 20%); + margin-bottom: 1em; + } + + h1 { + font-size: 2.25em; + } + + h2 { + border-top: 1px solid $colorInteriorBorder; + font-size: 1.5em; + margin-top: 2em; + padding-top: 1em; + } + + h3 { + margin-top: 2em; + } + .s-description, .s-button { line-height: 2em; diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index 206f126fde..7666e026fd 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -21,7 +21,7 @@ *****************************************************************************/ /********************************************* COLUMN LAYOUTS STYLES */ -@mixin cols($totalCols, $span) { +/*@mixin cols($totalCols, $span) { $cw: 100% / $totalCols; min-width: (500px / $totalCols) * $span; @if ($totalCols != $span) { @@ -89,7 +89,7 @@ @include clearfix; padding: $interiorMargin 0; } -} +}*/ /********************************************* FLEX STYLES */ .l-flex-row, diff --git a/platform/commonUI/general/res/sass/_text.scss b/platform/commonUI/general/res/sass/_text.scss index a7b46b0159..9922c1ac55 100644 --- a/platform/commonUI/general/res/sass/_text.scss +++ b/platform/commonUI/general/res/sass/_text.scss @@ -37,20 +37,6 @@ } h1, h2, h3 { - color: pullForward($colorBodyFg, 20%); - font-weight: normal !important; - margin-bottom: 1em; - } - - h2 { - border-top: 1px solid $colorInteriorBorder; - font-size: 1.5em; - margin-top: 2em; - padding-top: 1em; - } - - h3 { - margin-top: 2em; - } - + font-weight: 200 !important; + } } \ No newline at end of file diff --git a/src/defaultRegistry.js b/src/defaultRegistry.js index a974dab2a0..dc260f2c9c 100644 --- a/src/defaultRegistry.js +++ b/src/defaultRegistry.js @@ -44,6 +44,7 @@ define([ '../example/policy/bundle', '../example/profiling/bundle', '../example/scratchpad/bundle', + '../example/styleguide/bundle', '../example/taxonomy/bundle', '../example/worker/bundle', '../example/localTimeSystem/bundle',