Adds URLIndicator to the build, testable adding
`openmct.install(new openmct.plugins.URLIndicatorPlugin({
url: 'http://localhost:8080/',
icon: 'check',
interval: 15000,
label: 'Localhost'
}))`
to the openmct file. Also added Documentation about the plugin.
* [imagery] fix for issue #1799
if there is no immediately new imagery incoming, forward to latest image in history on un-pause
* add test to check whether image is forwarded to latest image on un-pause
prevent EditorCapability#finish from calling transactionservice#cancel when transactionService was not active - leading to console error everytime user would leave edit mode
Add tests for changes made and also to check for return type in either case (isActive or not)
Update Object API such that get supports calls with either a keystring or an
identifier.
As save and delete are not implemented and have different calling signatures,
implement them as separate methods so they can be documented separately.
* [List] Use standard format for modified/persisted times
This provides consistency with other times and dates in the user interface,
and also provides a meaningful sort order due to the use of ISO formats for
standard date/time presentation. Fixes#1730.
* Remove unused dependency
Clear regions when a view is destroyed. This causes a view's
destroy method to be correctly invoked, allowing views to do
cleanup. Used by NSS heatmap view for sprint Alice,
https://github.com/nasa/openmct/projects/1
Remove the line break that is added when the return key is pressed.
Check the current target directly.
Use textContent for inline editing instead of innerHTML, which will hoist up some HTML content implicitly created around user input for a contenteditable span.
Note that there is a removeAllRanges in addition to a blur here; see
https://stackoverflow.com/questions/4878713/how-can-i-blur-a-div-where-contenteditable-true
Fix broken tests.
Fixes#1757
Made the contenteditable attribute conditional based on whether the object can be edited or not. If the object is not editable, the attribute is removed.
Add Tests.
Fixes#1746
Fixes#1668
Each condition in a rule beyond the first one
now displays the text label "or when" or "and when"
depending on the value of the user's selection in
the "Trigger when" control: "any" or "all"
Fixes#1729
Internal markup and CSS now sets heights
internally - menu height will now not be smaller
than the list of menu items OR the description
area;
* [Plot] Check for telemetry panels
...from plot view policy, and don't try to interrogate them
for telemetry metadata that they will not have.
Fixes#1728
* [Plot] Update test case for policy
...to provide an adapted object with expected properties
* [Plot] Add tests to very plot policy for panels
...to verify fix for #1728
* [Build] Preserve comments instead of adding header
...to avoid disrupting sourcemaps. Fixes#1707
[Build] Remove extraneous horizontal rule from header
[Build] Remove obsolete header-handling
...as this is handled by the replace task after fix for #1707
[Build] Move version headers into start.frag
...so that UMD boilerplate does not wrap it.
[Build] Handle version info entirely in start.frag
[Build] Replace build variables in start.frag explicitly
[Build] Inject build info dynamically
[Build] Test MCT.specifyBuildInfo
[Build] Mark BUILD_CONSTANTS as global for jshint
[Build] Give names to version line items
[Build] Fix specifyBuildInfo test case
* [Build] Update fix to sourcemaps for code review feedback
https://github.com/nasa/openmct/pull/1708
[Build] Move build info registration to plugin
https://github.com/nasa/openmct/pull/1708#discussion_r138999027
[Build] Use build info plugin
...instead of specifyBuildInfo
[Build] Revert changes to MCT, per code review
Fixes#1668Fixes#1644
Added .sm to number inputs; removed padding
from .compact-form label; set inputs and selects
in .compact-form to use $btnStdH for height;
Update policy to detect any range. As a simple way to prevent
detecting messages, it will not apply when every range is a string
format.
fixes https://github.com/nasa/openmct/issues/1713
Add history imagery under large imagery view.
Allow users to click on history imagery thumbs to set main image and pause the imagery view.
Allow users to unpause and continue imagery stream.
Users can adjust the height of the imagery panes, and the user selected height is persisted.
Added context actions for importing and exporting JSON representations of domain objects. Added FileInputService for triggering file picker and retrieving uploaded data. Also added a File Input form control for integration with MCTForms.
Fixes#1669
Updates to allow thumbs to show their associated
icon and label text;
minor CSS tweaks for icon size and ellipsizing;
New rules now don't use first icon by default;
Added ability to show/hide object frames via a toggle button in the
edit toolbar. All objects have frames by default except for ‘hyperlinks’.
Also, implemented object selection in the layout and added tests for new features.
Fixes#1658.
Add textfield input for JavaScript condition input, and modify the
condition manager and condition evaluator to read JS conditions
correctly from the data model. Currently, custom conditions are
not actually executed and will always be evaluated as false.
Fixes#1677
Refactor and re-organize alert and status colors;
Rename _limits.scss to _status.scss;
Style Guide additions in progress;
VERY WIP, NEEDS UNIT TESTING FOR REGRESSION.
New Tab automatically appends hideTree and hideInspector params to hide those panes by default
Add appropriate tests for new functionality and fix broken tests
Enable edit mode for summary widgets, and make configuration interface
visible only when the user has entered edit mode
Standardize usage of 'mutate'
Fix collision between widget palettes and other interfaces where
palettes would permanently hide other menus
Fixes#1677
Removed `<tr>` support; modded existing styles to allow
color-only application for red and yellow limits; added
`*-icon` classes for red and yellow limits;
Fix to Issue #1646
Persist MCTSplitPane widths to local storage, thus when user reloads, the Panes maintain dimensions
Use persisted widths if available otherwise use default
Add tests for localStorage and fix failing tests
Issue #1644
Add user-configurable mock data to test rules. Modify evaluator to
gracefully handle uninitialzed test data points.
Fix DnD bug where drag position was not tracked correctly
Fixes#1669
Changed .selected to avoid icon collision when
applying .selected to a an item in an icon palette;
Moved color defs into theme constants files;
TO-DO: fix custom select alignment issues,
fix menu when no icon is selected,
unit test in Snow theme.
Update example telemetry providers to limit the number of
datums generated so that queries for long time ranges will
not cause undesired behavior in demos.
Merge remote-tracking branch 'origin/summary-widget-styling-2' into
summary-widgets. Issues #1669#1644
Update palette classes to apply a visual indicator for selection
to their items.
Fix a bug in the compsosition object selector where it would not display its
currently selected item on a composition add.
Update names of modules to more accurately describe their function.
Fix color palette bug where the 'none' option was not recognized as
a selectable item
Add ability to toggle 'none' option, and remove it from the text color
control
Remove 'grippy' element when only one user-defined rule exists
Fix format of requirejs headers
Add tooltips
Abstract palette behavior to superclass, and base new color and icon
palette classes on it
Add unit tests
Move private event handler methods out of object prototypes
Update zepto in bower to enforce v1.2.0
Fix bug where summary widget conditions would modify appearance of other summary widgets
Move code to plugins directory
Stub for unit tests
Issue #1644
Add telemetry subscription handling, and implement the execution of
rules.
Provide a toggle for 'any', 'all', or 'JavaScript' trigger
Add documentation
Re-implement widgets in with a module-oriented structure. Fix issues related to
asychronous loading of telemetry and composition.
Package inputs as re-usable, Zepto-based modules.
When loading the application and no time system is set,
the url handler should not cause multiple errors to be
logged.
This adds a test for the case but does not specify the
expected behavior in detail, other than "it should not
crash."
Fixes bugs as reported here.
The telemetry API detects when a subscription has already been made for a
given domain object and does not subscribe for that object a second time.
Removes a concern from those developing telemetry providers.
Also ensures that telemetry providers ALWAYS get request options, even if
no request options were provided.
Adds basic tests for the Telemetry API to validate this behavior.
Fixes https://github.com/nasa/openmct/issues/1594
Update the telemetry adapter to gracefully handle cases where
a range value is not found via hints. This allows telemetry objects
that don't have ranges to still work with some old style displays
Add delete functionality and UI
Improve process for indexing and rendering rules to support deletion,
and eventually reordering
Fix bug where default style was passed by reference and overwritten
on style updates
When browse controller is hijacking a browser navigation event,
it calls preventDefault on the route change. This has the effect
of preventing all changes in the location (including search changes).
This change checks if other changes were made in the route change and
re-applies them after the navigation has completed.
Fixes a bug where navigating via a link that contained additional
search paramterers would have the effect of navigating but not
keeping the parameters in tact.
Discovered in the course of fixing #1636
Update time conductor so that it triggers changes when the user
selects them instead of when the scope is updated. Prevents spurious
changes from being triggered by the conductor when it updates
in response to a time API change.
Fixes#1636.
Implemented auto-scrolling historical imagery view in ImageryController. Imagery domain objects now request historical data on each manual bounds change. Added new specs for ensuring that historical data is requested on bounds change and duplicate bounds / datum are ignored.
Update view provider to allow metadata definitions and to play
nicely with old style views.
Spec out some updates to ViewProviders and ViewRegistry to
support further use of views.
For elements created before this change where useGrid is not defined,
default it to true to ensure consistent display size
Inline constant definitions in unit tests if they are only used once
Update the TimeSettingsURLHandler to check for changes to the search
parameters and only trigger a bounds change when there is a change.
Added integration tests between Time API and settings url handler.
Prevents extraneous bounds events.
Fixes https://github.com/nasa/openmct/issues/1636
Change the input for grid units/pixels to a simple checkbox toggle from a
dropdown menu.
Add a new specialized AccessorMutator class to support this operation.
Fix code style issues per Victor's review
Add toggle to work in pixel space or grid space, per the issue description.
Each element stores a boolean property that determines whether or not it
snaps to grid space or pixel space. Coordinates are converted between spaces
on toggle, preserving the size of the element in pixels.
To complete: change UI element for toggle to a checkbox.
Added individual property inputs to the toolbar for height, width, x,
y, and line endpoint coordinates in fixed/bundle.js.
Added "edit<Property>" AccessorMutators for height and width to each
of the element proxies, so these properties can be exposed only for
elements where it makes sense (e.g. boxes, but not lines, since lines
are better controlled by endpoint coordinates).
Added a method "checkNumeric" to ElementProxy.js , to be used
to restrict inputs to integral values for position and size
textfield inputs.
Current issues: endpoint coordinate inputs have undexpected behvaior,
handles disappear after using the input fields to modify element
properties.
Added individual property inputs to the toolbar for height, width, x,
y, and line endpoint coordinates in fixed/bundle.js.
Added "edit<Property>" AccessorMutators for height and width to each
of the element proxies, so these properties can be exposed only for
elements where it makes sense (e.g. boxes, but not lines, since lines
are better controlled by endpoint coordinates).
Added a method "checkNumeric" to ElementProxy.js , to be used
to restrict inputs to integral values for position and size
textfield inputs.
Current issues: endpoint coordinate inputs have undexpected behvaior,
handles disappear after using the input fields to modify element
properties.
* [Time Conductor] Skeleton class for URL handling
#1550
* [Time Conductor] Scaffold in param handling
* [Time Conductor] Finish sketching in URL handler
* [Time Conductor] Usage correct constants for bounds
* [Time Conductor] Use start/end for bounds/deltas
* [Time] Move URL handler
Per discussion, https://github.com/nasa/openmct/issues/1550#issuecomment-308849449
* [Time] Rename URL handler
* [Time] Rename URL handler script
* [Time] Use Time API from URL handler
* [Time] Utilize Time API
* [Time] Listen for changes, synchronize URL
* [Time] Move URL handler into adapter
...as it uses Angular constructs.
* [Time] Wire URL handler into adapter bundle
* [Time] Pass correct constructor arguments to URL handler
* [Time] Begin debugging URL handling
* [Time] Clarify and correct logic for bounds/deltas in URL
* [Time] Define timeSystem
* [Time] Pass start/end into time API as numbers
...instead of strings.
* [Time] Avoid creating redundant objects
* [Time] Restructure fixed vs clock logic
* [Time] Stop clock correctly for fixed mode
* [Time] Fix hasBounds/hasDeltas logic
...given that both inputs will be strings when read from search params,
_.isFinite was doomed to return false.
* [Time] Check for complete information
...before updating Time API to reflect search state. Additionally,
flatten logic to ease readability.
* [Time] Begin testing TimeSettingsURLHandler
* [Time] Test fixed mode query string updates
* [Time] Test realtime mode query string updates
* [Time] Test update of time API from query params
* [Time] Add missing semicolons
Satisfies JSHint; fixes#1550
* refactored code for listView
* minimum viable folder list functionality
* moved listview directory inside of platform/features
* [Folder ListView] First Code Review Fixes
Changes made:
Updated listview icon as the hamburger menu.
Injecting listview template as textfile instead of using the template's url.
Added callback to $scope to listen for $destroy to release resources for the mutation listener and the gesture recognizer.
Refactored ListViewController formatting function to use map instead of foreach.
Added listview plugin to the default registry.
Updated table styling.
* working progress commit. ListViewControllerSpec is implemented and all tests are passing. MCTGestureSpec is not fully implemented. Testing the gestureService release is in progress.
* All tests in MCTGestureSpec and ListViewControllerSpec are passing.
* ListViewControllerSpec and MCTGesture Tests all passing.
* refactored variable names in ListviewController to make more sense.
* [Frontend] Styling of Luis's list view WIP
Fixes#1615
This will have conflicts with Luis's work,
be careful!
* [Folder ListView] Second Code Review Fixes
Changes made:
updated listview to utilize open-mct sorting style.
added license comments to all files.
modified mctgesture interface to use $scope.eval().
* [Frontend] Styling of Luis's list view WIP
Fixes#1615
New list-view glyph added
* [Frontend] Styling of Luis's list view WIP
Fixes#1615
Changed name of "Items" view to "Grid";
* [Frontend] Styling of Luis's list view WIP
Fixes#1615
Updated icomoon project file with new list-view
glyph e1042;
* [Folder ListView] Second Code Review Fixes
Changes made:
updated listview to utilize open-mct sorting style.
added license comments to all files.
modified mctgesture interface to use $scope.eval().
* [Frontend] Styling of Luis's list view WIP
Fixes#1615
Refined cursor CSS;
* [Frontend] Styling of Luis's list view WIP
Fixes#1615
Added logic to refine how sorting occurs:
now, clicking a table header that wasn't
the orderByField always sorts by its default;
This change is based on the following code review:
- Display the entire list of timezones, regardless of what's currently entered.
- As soon as the user typed (or deleted chars in the input) then that filtration would take over the list display
Fixes#1437
Markup and CSS for `view large` button in frame context;
Sass formatting cleanups; removed unused styles from
_layout.scss; mods to MCTTriggerModal.js to remove
button label functionality;
Added new "icon-expand" glyph and class;
Fixes#1437Fixes#1423
New overlay > l-dialog and l-large-view classes;
Fix context-menu z-index to allow context menu
to appear in the overlay;
.object-top-bar refactored and replaced with
.object-browse-bar;
frame > hover now only displays local controls for
proper level, handles nested layout situation;
Fixed font-weight display issues;
MCTTriggerModal.js modified to do the following:
- Remove .frame classes when displaying object in overlay
- Allow click on this overlay .blocker to dismiss overlay
Fixed min-width issue incorrectly targeting .object-browse-bar in frame context;
Added expand anim to large view holder;
Changed close button icon
Significant mobile styling and cleanups;
Markup mods for overlay.html;
Handles dialog on top of large view;
Form validation now displays better in mobile;
Updated /src/api/ui/dialog.html to be in-line
with /platform/commonUI/dialog/res/templates/overlay.html;
Moved border-radius from containerBase to btnBase mixins;
Animate with scale for GPU acceleration
Change desktop animation to use scale, so that it is hardware
accelerated and buttery smooth. Also fixes text anti-aliasing
to improve readability.
Moved mobile/overlay/_overlay.scss styles into
overlay/_overlay.scss; removed mobile/overlay/_overlay.scss;
Cleanups in _overlay.scss; restored max-width/max-height
to dialogs (removed in #1376 for #1298) and added
min-width;
[Frontend] Mobile fixes in overlay and related
Fixes#1437
Added mobile-specific styling to _messages.scss;
Fixed button layout and margins in _overlay.scss;
Fixed message.html to not default to major style
buttons;
[Frontend] Timing tweaks
Fixes#1437
Moved large view expand transition duration
into theme _constants files; shortened anim
duration
Fix Style errors
[mctTriggerModal] correct scope for toggle
Correct scope for toggleFunction such that #1503 no longer occurs.
Fixes#1503
[Style] Add copyright header
Use private parts of new composition API for generic search indexer
so that all objects are properly accessible in search results.
Also prevent ROOT object from getting indexed but still traverse
composition. That way, "The root object" no longer shows in search
results.
Update tests to cover changes.
Fixes#1579
Allow timeSystem to be changed without specifying bounds when
a clock is present and can provide bounds. This simplifies
bootstrap code.
https://github.com/nasa/openmct/issues/1581
When a menu option that specified an invalid time system with a
clock, the time conductor controller would log an error claiming
that the clock was unknown when in fact the time system is the
culprit.
Remove the error message as the plugin handles this validation
already. Also removed some unused code.
https://github.com/nasa/openmct/issues/1580
Update conductor validation logic to trigger easier-to-understand
error messages for bad configurations.
Update default-setting-behavior to properly set clock and offsets
when the default option is clock-based menu option.
Only set defaults when timeSystem has not already been configured.
fixes https://github.com/nasa/openmct/issues/1580
Update time API to tick immediately after setting a clock using
the currentValue of the clock. This ensures that bounds will
be set when the clock is set, instead of waiting for the next
tick to occur.
fixes https://github.com/nasa/openmct/issues/1582
Remove examples of format implementations. The docs stated
incorrectly that UTCTimeFormat used the additional parameters
for the format method when it did not actually use those
parameters.
With our current landscape of telemetry providers, parse can
frequently be called on an already parsed value, so added
documentation to highlight the importance of an idempotent
parse method.
Cleanup related to change of file locations in:
https://github.com/nasa/openmct/issues/1574
Always include basic formats; removing them from the utc format
bundle. This way, they can be utilized by third parties without
them having to commit to the utc time system.
Fixes https://github.com/nasa/openmct/issues/1574
Ensure telemetry request options always have a certain number
of fields-- start, end, and domain. This allows telemetry providers
to implement necessary filtering for these types of requests.
Update warning message with correct wording, and change
check for label property such that a blank label will also
trigger the deprecation warning.
Addresses feedback from https://github.com/nasa/openmct/pull/1571
Update docs to reference domain and range. Also added additional
documentation for the Telemetry API based on a previous draft of
the docs.
https://github.com/nasa/openmct/issues/1546
Track the updated composition of an object before notifying any
listeners. Otherwise, any composition listener that mutates the
object would cause an infinite loop.
Detected in implementation of the new plot.
When no path is specified, don't throw error. Navigate
to default, as expected.
When navigating to root, navigate to the last child
of root instead. This handles cases where DEFAULT_PATH
is not found (e.g. deployments without "mine").
Remove a check for an invalid return value, update the spec to
return the proper value. Also updated the subscribe method
to fetch defaults the same as the request method.
https://github.com/nasa/openmct/pull/1544
Update the formatter mock to implement the expected methods, such
that formatting occurs properly.
Remove a test that was validating the execution of a method
as this was smelly-- it's not the method that is important, it's
the result (that couldn't be obtained without the method).
Edited for consistent period and parentheses usage throughout:
- Removed periods at the end of each element in a list of nouns.
- Placed periods outside parenthetical statements that aren't complete sentences themselves.
- Placed periods at the end of sentences without punctuation.
Around line 143, gave "constants" its own bullet point. Although it is a form of variable or field, it also forms a separate style element with a different guideline. It's also easier to find when skimming when separated - for new contributors who need to learn the style, and veteran contributors who are just double checking.
Added TelemetryCollection to handle bounds and buffering. Avoids loss of telemetry due to timing mismatch between telemetry providers and tick sources
Fixed issues with removal and addition of objects
Fixes#1233
Additional content; adding size classes to
input[type="text"] to allow direct application to
the input; added placeholder styling and related
thematic constants.
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, Copyright (c) 2014-2017, 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.
@ -933,9 +933,10 @@ Note that `templateUrl` is not supported for `containers`.
Controls provide options for the `mct-control` directive.
Ten standard control types are included in the forms bundle:
These standard control types are included in the forms bundle:
*`textfield`: An area to enter plain text.
*`textfield`: A text input to enter plain text.
*`numberfield`: A text input to enter numbers.
*`select`: A drop-down list of options.
*`checkbox`: A box which may be checked/unchecked.
*`color`: A color picker.
@ -2261,7 +2262,7 @@ The platform understands the following policy categories (specifiable as the
*`action`: Determines whether or not a given action is allowable. The candidate
argument here is an Action; the context is its action context object.
*`composition`: Determines whether or not domain objects of a given type (first argument, `parentType`) can contain a given object (second argument, `child`).
*`composition`: Determines whether or not a given domain object(first argument, `parent`) can contain a candidate child object (second argument, `child`).
*`view`: Determines whether or not a view is applicable for a domain object.
The candidate argument is the view's extension definition; the context argument
{ 'category': 'Application Status', 'description': 'Colors related to the status of application objects, such as a successful connection to a service.', 'items': [{ 'name': 'Alert Color', 'constant': '$colorAlert', 'valEspresso': '#ff3c00', 'valSnow': '#ff3c00' },
{ 'category': 'Telemetry Status', 'description': 'Telemetry status colors used to indicate limit violations and alarm states. Note that these colors should be reserved exclusively for this usage.', 'items': [{ 'name': 'Yellow Limit Color Background', 'constant': '$colorLimitYellowBg', 'valEspresso': 'rgba(255,170,0,0.3)', 'valSnow': 'rgba(255,170,0,0.3)' },
<p>In mission operations, color is used to convey meaning. Alerts, warnings and status conditions are by convention communicated with colors in the green, yellow and red families. Colors must also be reserved for use in plots. As a result, Open MCT uses color selectively and sparingly. Follow these guidelines:</p>
<ul>
<li>Don't use red, orange, yellow or green colors in any element that isn't conveying some kind of status information.</li>
<li>Each theme has a key color (typically blue-ish) that should be used to emphasize interactive elements and important UI controls.</li>
<li>Within each theme values are used to push elements back or bring them forward, lowering or raising them in visual importance.
<spanclass="themed espresso">In this theme, Espresso, lighter colors are placed on a dark background. The lighter a color is, the more it comes toward the observer and is raised in importance.</span>
<spanclass="themed snow">In this theme, Snow, darker colors are placed on a light background. The darker a color is, the more it comes toward the observer and is raised in importance.</span>
</li>
<li>For consistency, use a theme's pre-defined status colors.</li>
</ul>
</div>
<divclass="l-section"ng-repeat="colorSet in colors">
<h2>{{ colorSet.category }}</h2>
<p>{{ colorSet.description }}</p>
<divclass="items-holder grid">
<divclass="item swatch-item"ng-repeat="color in colorSet.items">
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.
-->
<divclass="l-style-guide s-text">
<pclass="doc-title">Open MCT Style Guide</p>
<h1>Controls</h1>
<divclass="l-section">
<h2>Standard Buttons</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
<p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
<p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
</div>
<mct-example><aclass="s-button major">Ok</a>
<aclass="s-button">Cancel</a>
</mct-example>
</div>
</div>
<divclass="l-section">
<h2>Button Sets</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
<p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
</div>
<mct-example><spanclass="l-btn-set">
<aclass="s-button icon-magnify"></a>
<aclass="s-button icon-magnify-in"></a>
<aclass="s-button icon-magnify-out"></a>
</span>
</mct-example>
</div>
</div>
<divclass="l-section">
<h2>Icon-only Buttons</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the "base" of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.</p>
<p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
<p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
<p>Radio buttons use the same technique as checkboxes above.</p>
</div>
<mct-example><labelclass="radio custom">Red
<inputname="Alarm Status"type="radio"/>
<em></em>
</label>
<br/>
<labelclass="radio custom">Orange
<inputname="Alarm Status"type="radio"checked/>
<em></em>
</label>
<br/>
<labelclass="radio custom">Yellow
<inputname="Alarm Status"type="radio"/>
<em></em>
</label>
</mct-example>
</div>
</div>
<divclass="l-section">
<h2>Selects</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The <code>select</code> element is wrapped by another element, such as a <code>div</code>, which acts as the main display element for the styling. The <code>select</code> provides the click and select functionality, while having all of its native look-and-feel suppressed.</p>
</div>
<mct-example><divclass="select">
<select>
<optionvalue=""selected="selected">- Select One -</option>
<optionvalue="Colussus">Colussus</option>
<optionvalue="HAL 9000">HAL 9000</option>
<optionvalue="Mother">Mother</option>
<optionvalue="Skynet">Skynet</option>
</select>
</div>
</mct-example>
</div>
</div>
<divclass="l-section">
<h2>Local Controls</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Local controls are typically buttons and selects that provide local control to an individual element. Typically, these controls are hidden in order to not block data display until the user hovers their cursor over an element, when the controls are displayed using a transition fade. Mousing out of the element fades the controls from view.</p>
</div>
<mct-example><divclass="plot-display-area"style="height: 100px; padding: 10px; position: relative;">Hover over me
<p>Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.</p>
<p>New glyphs can be added if needed. Take care to observe the following guidelines:
<ul>
<li>Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a "crisp" 16px approach. Find out more about <aclass="link"target="_blank"href="http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon">crisp symbol fonts</a>.</li>
<li>In general, the symbol should occupy most of a square area as possible; avoid symbol aspect ratios that are squat or tall.</li>
<li>For consistency and legibility, symbols are designed as mostly solid shapes. Avoid using thin lines or fine detail that will be lost when the icon is sized down. In general, no stroke should be less than 32 pixels.</li>
<li>Symbols should be legible down to a minimum of 12 x 12 pixels.</li>
</ul>
</p>
</div>
<divclass="l-section">
<h2>How to Use Glyphs</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
<p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.</p>
<p>These glyphs are reserved exclusively to denote types of objects in the application. Only use them if you are referring to a pre-existing object type.</p>
<divclass="items-holder grid">
<divclass="item glyph-item"ng-repeat="glyph in objects">
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.
-->
<divclass="l-style-guide s-text">
<pclass="doc-title">Open MCT Style Guide</p>
<h1>Text Input</h1>
<divclass="l-section">
<p>Text inputs and textareas have a consistent look-and-feel across the application. The input's <code>placeholder</code> attribute is styled to appear visually different from an entered value.</p>
</div>
<divclass="l-section">
<h2>Text Inputs</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Use a text input where the user should enter relatively short text entries.</p>
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
</div>
<mct-example><inputtype="text"placeholder="Enter a value"/>
<br/><br/>
<inputtype="text"placeholder="Enter a value"value="An entered value"/>
<br/><br/>
<inputtype="text"placeholder="Enter a value"class="sm"value="Small"/>
<br/><br/>
<inputtype="text"placeholder="Enter a value"class="med"value="A medium input"/>
<br/><br/>
<inputtype="text"placeholder="Enter a value"class="lg"value="A large input"/>
<br/><br/>
<inputtype="text"placeholder="Enter a value"class="sm numeric"value="10.9"/>
</mct-example>
</div>
</div>
<divclass="l-section">
<h2>Textareas</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
<p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
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.
-->
<divclass="l-style-guide s-text">
<pclass="doc-title">Open MCT Style Guide</p>
<h1>Introduction</h1>
<divclass="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>
<divclass="l-section">
<h2>Everything Is An Object</h2>
<divclass="cols cols1-1">
<divclass="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 similar to how the file management system of all modern computers works: 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>
<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>
<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. A clock can display its time in analog fashion or with digital numbers. In each view, all of the content is present; it’s just represented differently. When providing views for an object, all the content of the object should be present in each view.</p>
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.
-->
<divclass="l-style-guide s-text">
<pclass="doc-title">Open MCT Style Guide</p>
<h1>Menus</h1>
<divclass="l-section">
<h2>Context Menus</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.</p>
<p>See <aclass="link"href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
<lionclick="alert('Perform an action')"title="Open in a new browser tab"class="icon-new-window">Open In New Tab</li>
<lionclick="alert('Perform an action')"title="Remove this object from its containing object."class="icon-trash">Remove</li>
<lionclick="alert('Perform an action')"title="Create Link to object in another location."class="icon-link">Create Link</li>
</ul>
</div>
</div>
</div></mct-example>
</div>
</div>
<divclass="l-section">
<h2>Dropdown Menus</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow <spanclass="context-available"></span> associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.</p>
<p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
</div>
<mct-example><divstyle="height: 220px"title="Ignore me, I'm just here to provide space for this example.">
<p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
<p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
</div>
<mct-example><divstyle="height: 220px"title="Ignore me, I'm just here to provide space for this example.">
<divng-controller="SearchMenuController as controller"class="ng-scope">
<p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
<p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
</div>
<mct-example><divstyle="height: 220px"title="Ignore me, I'm just here to provide space for this example.">
<divclass="s-button s-menu-button menu-element t-color-palette icon-paint-bucket"ng-controller="ClickAwayController as toggle">
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.
-->
<divclass="l-style-guide s-text">
<pclass="doc-title">Open MCT Style Guide</p>
<h1>Standards</h1>
<divclass="l-section">
<h2>Absolute Positioning and Z-Indexing</h2>
<p>Absolute positioning is used in Open MCT in the main envelope interface to handle layout and draggable pane splitters, for elements that must be dynamically created and positioned (like context menus) and for buttons that are placed over other elements, such as a plot's zoom/pan history and reset buttons. When using absolute positioning, follow these guidelines:</p>
<ul>
<li>Don't specify a z-index if you don't have to.</li>
<li>If you must specify a z-index, use the lowest number you that prevents your element from being covered and puts it at the correct level per the table below.</li>
</ul>
<!-- This content maintained at https://docs.google.com/spreadsheets/d/1AzhUY0P3hLCfT8yPa2Cb1dwOOsQXBuSgCrOkhIoVm0A/edit#gid=0 -->
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.
-->
<style>
.w-mct-examplediv[class*="s-limit"],
.w-mct-examplediv[class*="s-status"],
.w-mct-examplediv[class*="s-unsynced"],
.w-mct-examplespan[class*="s-limit"]{
border-radius:4px;
padding:3px7px;
}
.w-mct-exampletable{
width:100%;
}
</style>
<divclass="l-style-guide s-text">
<pclass="doc-title">Open MCT Style Guide</p>
<h1>Status Indication</h1>
<divclass="l-section">
<h2>Overview</h2>
<p>Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:</p>
<ul>
<li><strong>Limits</strong>: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.</li>
<li><strong>Status</strong>: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.</li>
<li><strong>Synchronization</strong>: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.</li>
</ul>
</div>
<divclass="l-section">
<h2>Limits</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. "Level" limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.</p>
<ul>
<li>Color only</li>
<ul>
<li><code>s-limit-yellow</code>: A yellow limit.</li>
<li><code>s-limit-red</code>: A red limit.</li>
</ul>
<li>Color and icon</li>
<ul>
<li><code>s-limit-yellow-icon</code>: A yellow limit with icon.</li>
<li><code>s-limit-red-icon</code>: A red limit with icon.</li>
</ul>
<li>Upper and lower limit indicators. Must be used with a color limit class to be visible.</li>
<divclass="s-status-warning-hi-icon">WARNING HI with icon</div>
<divclass="s-status-warning-lo-icon">WARNING LOW with icon</div>
<divclass="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
<divclass="s-status-info-icon">INFO with icon</div>
<divclass="s-status-ok-icon">OK with icon</div>
<divclass="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
</mct-example>
</div>
</div>
<divclass="l-section">
<h2>Synchronization</h2>
<divclass="cols cols1-1">
<divclass="col">
<p>When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class <code>s-unsynced</code> should be applied to that view.</p>
</div>
<mct-example><divclass="s-unsynced">This element is unsynced</div>
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.