mirror of
https://github.com/nasa/openmct.git
synced 2024-12-27 08:32:28 +00:00
4b07930305
* [ViewAPI] Update view API with more support 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. * [Summary Widgets] Add summary widgets Add a summary widget domain object type Implement basic interface and style configuration for rules * [Summary Widgets] Implementation for Rules Add rule configuration inputs, populated with domain objects, metadata, and appropriate operations for a given type * [Inputs] Add implementation for icon palette Issue #1644 Wire up icon palette inputs to widget, and make icon class a persistable property of a rule * [Summary Widgets] Implementation for conditions Support configuring and persisting multiple conditions per rule Issue #1644 * [Summary Widgets] Generate Rule Descriptions Dynamically update the rule description based on the current state of the rules' conditions * [Summary Widgets] 'Any/All Telemetry' in conditions Add UI and implemenetion for evaluating any telemetry or all telemetry in an individual condition. Add related unit tests. * [Summary Widgets] Rule Reorders Implement drag and drop rule reorders using the native HTML5 API * [Summary Widget] Test Data Issue #1644 Add user-configurable mock data to test rules. Modify evaluator to gracefully handle uninitialzed test data points. * [Summary Widgets] Edit Mode Enable edit mode for summary widgets, and make configuration interface visible only when the user has entered edit mode Fix collision between widget palettes and other interfaces where palettes would permanently hide other menus * [Summary Widgets] UI for scripted conditions * [Sumamry Widgets] Destroy Implement destroy * [Summary Widgets] Cleanup Remove unnecessary persist calls in Rule.js. Remove generateDescription from refreshConditions and add it after refreshConditions to initCondition and deleteCondition Throw error when unsupported callback is passed in condition.js, return summary widget instance in plugin.js instead of wrapping in new object for view Add request properties to telemetry request for providers that support it Remove check for editing when persisting, in SummaryWidget.js
169 lines
9.6 KiB
HTML
169 lines
9.6 KiB
HTML
<!--
|
|
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>Menus</h1>
|
|
|
|
<div class="l-section">
|
|
<h2>Context Menus</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="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 <a class="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>
|
|
</div>
|
|
<mct-example><div style="height: 120px">
|
|
<div class="menu-element context-menu-wrapper mobile-disable-select">
|
|
<div class="menu context-menu">
|
|
<ul>
|
|
<li onclick="alert('Perform an action')" title="Open in a new browser tab" class="icon-new-window">Open In New Tab</li>
|
|
<li onclick="alert('Perform an action')" title="Remove this object from its containing object." class="icon-trash">Remove</li>
|
|
<li onclick="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>
|
|
|
|
<div class="l-section">
|
|
<h2>Dropdown Menus</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="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 <span class="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><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
|
|
|
|
<div class="l-flex-row flex-elem grows object-header">
|
|
<span class="type-icon flex-elem icon-layout"></span>
|
|
<span class="l-elem-wrapper l-flex-row flex-elem grows">
|
|
<span class="title-label flex-elem holder flex-can-shrink ng-binding">Object Header</span>
|
|
<span class="flex-elem context-available-w">
|
|
<span ng-controller="MenuArrowController as menuArrow" class="ng-scope">
|
|
<a class="context-available" ng-click="menuArrow.showMenu($event)"></a>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
</div></mct-example>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Checkbox Menus</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<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><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
|
|
<div ng-controller="SearchMenuController as controller" class="ng-scope">
|
|
<div class="menu checkbox-menu" mct-click-elsewhere="parameters.menuVisible(false)">
|
|
<ul>
|
|
<!-- First element is special - it's a reset option -->
|
|
<li class="search-menu-item special icon-asterisk" title="Select all filters" ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
|
|
<label class="checkbox custom no-text">
|
|
<input type="checkbox" class="checkbox ng-untouched ng-valid ng-dirty" ng-model="ngModel.checkAll" ng-change="controller.checkAll()">
|
|
<em></em>
|
|
</label>
|
|
All
|
|
</li>
|
|
<li class="search-menu-item icon-folder">
|
|
<label class="checkbox custom no-text">
|
|
<input type="checkbox" class="checkbox">
|
|
<em></em>
|
|
</label>
|
|
Folder
|
|
</li>
|
|
<li class="search-menu-item icon-layout">
|
|
<label class="checkbox custom no-text">
|
|
<input type="checkbox" class="checkbox">
|
|
<em></em>
|
|
</label>
|
|
Display Layout
|
|
</li>
|
|
<li class="search-menu-item icon-box-with-dashed-lines">
|
|
<label class="checkbox custom no-text">
|
|
<input type="checkbox" class="checkbox">
|
|
<em></em>
|
|
</label>
|
|
Fixed Position Display
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mct-example>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Palettes</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<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><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
|
|
|
|
<div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
|
|
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
|
<span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
|
|
<div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
|
|
<div class="l-palette-row l-option-row">
|
|
<div class="l-palette-item s-palette-item no-selection"></div>
|
|
<span class="l-palette-item-label">None</span>
|
|
</div>
|
|
<div class="l-palette-row">
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(0, 0, 0);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(28, 28, 28);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(57, 57, 57);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(85, 85, 85);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(113, 113, 113);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(142, 142, 142);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(170, 170, 170);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(198, 198, 198);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(227, 227, 227);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
|
|
</div>
|
|
<div class="l-palette-row">
|
|
<div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(128, 240, 72);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(128, 248, 248);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(88, 144, 224);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(0, 72, 240);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(136, 80, 240);"></div>
|
|
<div class="l-palette-item s-palette-item" style="background: rgb(224, 96, 248);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div></mct-example>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|