mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 07:16:39 +00:00
Charles Hacskaylo
parent
3ae0fd7bc9
commit
77396093d8
82
example/styleguide/bundle.js
Normal file
82
example/styleguide/bundle.js
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
1
example/styleguide/res/images/diagram-containment.svg
Normal file
1
example/styleguide/res/images/diagram-containment.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
example/styleguide/res/images/diagram-objects.svg
Normal file
1
example/styleguide/res/images/diagram-objects.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 622.47"><defs><style>.a,.d{fill:#fff;}.b,.c,.k,.m,.n,.o{fill:none;}.b{stroke:#000;stroke-linecap:square;}.b,.c,.d,.f,.k,.m,.n,.o{stroke-miterlimit:10;}.b,.k{stroke-width:2px;}.c{stroke:#ababab;stroke-dasharray:5;}.d,.k,.o{stroke:#737373;}.e{opacity:0.5;fill:url(#a);}.f{fill:#d6d6d6;fill-opacity:0.8;stroke:#fff;}.g{mask:url(#b);}.h{fill:#a8a8a8;}.i{fill:#00b1e2;}.j{fill:#f16e86;}.k{stroke-linecap:round;}.l{mask:url(#c);}.m{stroke:#00b1e2;}.m,.n{stroke-width:10px;}.n{stroke:#f16e86;}</style><linearGradient id="a" x1="523.15" y1="-401.02" x2="513.75" y2="-437.16" gradientTransform="translate(90.62 338.26) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><mask id="b" x="-1187.45" y="-269.68" width="1813.84" height="554.26" maskUnits="userSpaceOnUse"><polygon class="a" points="625.33 284.58 452.55 238.2 452.55 170.5 625.33 216.88 625.33 284.58"/><line class="b" x1="486.25" y1="179.55" x2="486.25" y2="247.32"/><line class="b" x1="573.58" y1="202.99" x2="573.58" y2="270.76"/><line class="b" x1="452.46" y1="192.89" x2="625.16" y2="239.25"/><line class="b" x1="452.46" y1="215.48" x2="625.16" y2="261.83"/></mask><mask id="c" x="-1468.9" y="-163.59" width="1866.4" height="673.87" maskUnits="userSpaceOnUse"><polygon class="a" points="344.11 510.28 171.1 462.49 171.1 289.49 344.11 337.28 344.11 510.28"/></mask></defs><title>objects-diagram</title><polyline class="c" points="460.63 153.71 480.14 142.45 513.15 123.39"/><polyline class="c" points="312.69 239.13 336.82 225.2 365.42 208.68"/><polygon class="d" points="742.15 65.53 519.88 5.97 519.88 368.97 742.15 428.53 742.15 65.53"/><polygon class="e" points="742.15 428.53 742.15 377.47 786.44 403 742.15 428.53"/><polyline class="c" points="619.05 308.21 626.95 303.65 636.44 298.17"/><polygon class="f" points="637.26 156.11 443.71 104.25 443.71 402.92 637.26 454.78 637.26 156.11"/><g class="g"><polygon class="h" points="625.33 239.44 452.55 193.07 452.55 170.5 625.33 216.88 625.33 239.44"/><polygon class="i" points="625.33 262.01 452.55 215.64 452.55 193.07 625.33 239.44 625.33 262.01"/><polygon class="j" points="625.33 284.58 452.55 238.2 452.55 215.64 625.33 262.01 625.33 284.58"/></g><polyline class="c" points="467.58 395.66 481.45 387.65 490.54 382.4"/><polygon class="f" points="490.33 240.94 296.78 189.08 296.78 487.75 490.33 539.62 490.33 240.94"/><polygon class="h" points="386.94 387.36 314 367.78 314 238.33 386.94 257.91 386.94 387.36"/><line class="k" x1="402.02" y1="280.97" x2="355.33" y2="284.32"/><line class="k" x1="401.71" y1="316.74" x2="355.33" y2="291.74"/><polygon class="i" points="473.63 301.9 400.69 282.32 400.69 261.6 473.63 281.18 473.63 301.9"/><polygon class="j" points="473.63 337.63 400.69 318.05 400.69 297.32 473.63 316.9 473.63 337.63"/><polyline class="c" points="331.67 474.13 343.85 467.1 356.86 459.58"/><polyline class="c" points="183.35 313.8 207.44 299.89 231.58 285.96"/><polygon class="c" points="710.61 148.05 546.55 104.09 546.55 144.26 710.61 188.22 710.61 148.05"/><polygon class="c" points="710.61 215.05 546.55 171.09 546.55 211.26 710.61 255.22 710.61 215.05"/><line class="c" x1="162.68" y1="266.5" x2="533" y2="52.7"/><line class="c" x1="356.23" y1="617.04" x2="726.54" y2="403.24"/><polygon class="f" points="356.23 318.36 162.68 266.5 162.68 565.18 356.23 617.04 356.23 318.36"/><g class="l"><path class="m" d="M165.1,350.83c12-19.68,24-57.37,47,7s29,42,46,35.71,27,34.46,50,51.81,75,16.72,89,15.59"/><path class="n" d="M349.1,427.78c-9.13-13.05-13.7-31.26-31.2-9.54s-22.07,9.47-35,.86-20.55,6.69-38.05,6.89-67.08-25.38-77.73-30.61"/></g><polygon class="i" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="o" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="j" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><polygon class="o" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><line class="c" x1="513.15" y1="123.39" x2="544.97" y2="105.02"/><line class="c" x1="365.42" y1="208.68" x2="460.63" y2="153.71"/><line class="c" x1="231.58" y1="285.96" x2="312.69" y2="239.13"/><line class="c" x1="48.79" y1="391.49" x2="183.35" y2="313.8"/><line class="c" x1="636.44" y1="298.17" x2="709.92" y2="255.75"/><line class="c" x1="490.54" y1="382.4" x2="619.05" y2="308.21"/><line class="c" x1="356.86" y1="459.58" x2="467.58" y2="395.66"/><line class="c" x1="212.34" y1="543.03" x2="331.67" y2="474.13"/></svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
76
example/styleguide/res/sass/style-guide.scss
Normal file
76
example/styleguide/res/sass/style-guide.scss
Normal file
@ -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%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
25
example/styleguide/res/templates/controls.html
Normal file
25
example/styleguide/res/templates/controls.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<div class="l-about s-about s-text">
|
||||
<h1>Open MCT Style Guide: Controls</h1>
|
||||
<p>This will be the Style Guide Controls page.</p>
|
||||
</div>
|
||||
73
example/styleguide/res/templates/intro.html
Normal file
73
example/styleguide/res/templates/intro.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Introduction</h1>
|
||||
<div class="l-section">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Everything Is An Object</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="/example/styleguide/res/images/diagram-objects.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Object Types</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="/example/styleguide/res/images/diagram-containment.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Object Views</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="/example/styleguide/res/images/diagram-objects.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
52
example/styleguide/src/ExampleStyleGuideModelProvider.js
Normal file
52
example/styleguide/src/ExampleStyleGuideModelProvider.js
Normal file
@ -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
|
||||
}
|
||||
);
|
||||
@ -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)
|
||||
);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user