ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'github/master' into open208

Browse Source
This commit is contained in:
Charles Hacskaylo 2015-11-20 08:38:19 -08:00
commit 3d3b250536
310 changed files with 17234 additions and 6875 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -28,3 +28,5 @@ node_modules
# Protractor logs
protractor/logs
# npm-debug log
npm-debug.log

2
bundles.json
View File

@ -6,10 +6,12 @@
"platform/commonUI/browse",
"platform/commonUI/edit",
"platform/commonUI/dialog",
"platform/commonUI/formats",
"platform/commonUI/general",
"platform/commonUI/inspect",
"platform/commonUI/mobile",
"platform/commonUI/themes/espresso",
"platform/commonUI/notification",
"platform/containment",
"platform/execution",
"platform/telemetry",

9
docs/footer.html Normal file
View File

@ -0,0 +1,9 @@
<hr>
<cite>
This document is styled using
<a href="https://github.com/jasonm23/markdown-css-themes">
https://github.com/jasonm23/markdown-css-themes
</a>.
</cite>
</body>
</html>

12
docs/gendocs.js
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*global require,process,GLOBAL*/
/*global require,process,__dirname,GLOBAL*/
/*jslint nomen: false */
@ -47,6 +47,8 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
nomnoml = require('nomnoml'),
toc = require("markdown-toc"),
Canvas = require('canvas'),
header = fs.readFileSync(path.resolve(__dirname, 'header.html')),
footer = fs.readFileSync(path.resolve(__dirname, 'footer.html')),
options = require("minimist")(process.argv.slice(2));
// Convert from nomnoml source to a target PNG file.
@ -115,9 +117,9 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
// Prepend table of contents
markdown =
[ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
this.push("<html><body>\n");
this.push(header);
this.push(marked(markdown));
this.push("\n</body></html>\n");
this.push(footer);
done();
};
return transform;
@ -186,8 +188,8 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
var destination = file.replace(options['in'], options.out),
destPath = path.dirname(destination),
streamOptions = {};
if (file.match(/png$/)){
streamOptions.encoding = 'binary';
if (file.match(/png$/)) {
streamOptions.encoding = null;
} else {
streamOptions.encoding = 'utf8';
}

7
docs/header.html Normal file
View File

@ -0,0 +1,7 @@
<html>
<head>
<link rel="stylesheet"
href="http://jasonm23.github.io/markdown-css-themes/avenir-white.css">
</head>
<body>

0
docs/src/architecture/Framework.md → docs/src/architecture/framework.md
View File

6
docs/src/architecture/index.md
View File

@ -58,13 +58,13 @@ of the software.
These layers are:
* [_Framework_](Framework.md): The framework layer is responsible for
* [_Framework_](framework.md): The framework layer is responsible for
managing the interactions between application components. It has no
application-specific knowledge; at this layer, we have only
established an abstraction by which different software components
may communicate and/or interact.
* [_Platform_](Platform.md): The platform layer defines the general look, feel, and
behavior of Open MCT Web. This includes user-facing components like
* [_Platform_](platform.md): The platform layer defines the general look,
feel, and behavior of Open MCT Web. This includes user-facing components like
Browse mode and Edit mode, as well as underlying elements of the
information model and the general service infrastructure.
* _Application_: The application layer defines specific features of

0
docs/src/architecture/Platform.md → docs/src/architecture/platform.md
View File

68
docs/src/guide/index.md
View File

@ -129,7 +129,7 @@ The framework's role in the application is to manage connections between
bundles. All application-specific behavior is provided by individual bundles, or
as the result of their collaboration.
The framework is described in more detail in the [Framework Overview](../architecture/Framework.md#Overview) of the
The framework is described in more detail in the [Framework Overview](../architecture/framework.md#overview) of the
architecture guide.
### Tiers
@ -186,7 +186,8 @@ as well as the framework layer's role in mediating between these components.
Once the framework layer has wired these software components together, however,
the application's logical architecture emerges.
An overview of the logical architecture of the platform is given in the [Platform Architecture](../architecture/Platform.md#PlatformArchitecture)
An overview of the logical architecture of the platform is given in the
[Platform Architecture](../architecture/platform.md#platform-architecture)
section of the Platform guide
### Web Services
@ -233,7 +234,7 @@ The application is composed of bundles. Plug-ins are bundles.
non-persistent state associated with a domain object.
* __category__: A machine-readable identifier for a group that something may
belong to.
* __composition __: In the context of a domain object, this refers to the set of
* __composition__: In the context of a domain object, this refers to the set of
other domain objects that compose or are contained by that object. A domain
object's composition is the set of domain objects that should appear immediately
beneath it in a tree hierarchy. A domain object's composition is described in
@ -244,10 +245,10 @@ identifiers asynchronously.
readable description of a thing; usually a single sentence or short paragraph.
(Most often used in the context of extensions, domain object models, or other
similar application-specific objects.)
* __domain object __: A meaningful object to the user; a distinct thing in the
* __domain object__: A meaningful object to the user; a distinct thing in the
work support by Open MCT Web. Anything that appears in the left-hand tree is a
domain object.
* __extension __: An extension is a unit of functionality exposed to the platform
* __extension__: An extension is a unit of functionality exposed to the platform
in a declarative fashion by a bundle. The term 'extension category' is used to
distinguish types of extensions from specific extension instances.
* __id__: A string which uniquely identifies a domain object.
@ -609,8 +610,8 @@ path relative to the bundle's resource directory (`res` by default.)
### Composite Services
Composite services are described in the [relevant section](../architecture/Framework.md#Composite-Services)
of the framework guide.
Composite services are described in the [Composite Services](../architecture/framework.md#composite-services)
section of the framework guide.
A component should include the following properties in its extension definition:
@ -724,8 +725,8 @@ interpretations for specific sources.
### Telemetry Responses
When returned from the `telemetryService` (see [Services](#Services) section),
telemetry series data will be packaged in a `source -> key -> TelemetrySeries`
When returned from the `telemetryService` (see [Telemetry Services](#telemetry-service)
section), telemetry series data will be packaged in a `source -> key -> TelemetrySeries`
fashion. That is, telemetry is passed in an object containing key-value pairs.
Keys identify telemetry sources; values are objects containing additional
key-value pairs. In this object, keys identify individual telemetry series (and
@ -1042,7 +1043,7 @@ Angular templates which need to interact with information (e.g. the domain
object being represented) provided by the platform. This information is passed
in through the template's scope, such that simple representations may be created
by providing only templates. (More complex representations will need controllers
which are referenced from templates. See [https://docs.angularjs.org/guide/controller ]()
which are referenced from templates. See https://docs.angularjs.org/guide/controller
for more information on controllers in Angular.)
A representation's scope will contain:
@ -1074,7 +1075,7 @@ representing domain objects in general. For example, support for the _gestures_
extension category is added by a _representer_.
A representer needs only provide an implementation. When an `mct-representation`
is linked (see [https://docs.angularjs.org/guide/directive ]() or when the
is linked (see https://docs.angularjs.org/guide/directive ) or when the
domain object being represented changes, a new _representer_ of each declared
type is instantiated. The constructor arguments for a _representer_ are the same
as the arguments to the link function in an Angular directive: `scope` the
@ -1106,6 +1107,8 @@ property:
* `stylesheetUrl`: Path and filename, including extension, for the stylesheet to
include. This path is relative to the bundle's resources folder (by default,
`res`)
* `theme`: Optional; if present, this stylesheet will only be included if this
value matches the `THEME` constant.
To control the order of CSS files, use priority (see the section on Extension
Definitions above.)
@ -1155,7 +1158,7 @@ capability.
(as should appear in the _Create_ or the _Edit Properties_ dialog.) Each
property is described by an object containing the following properties:
* `control`: The key of the control (see `mct-control` and the `controls`
[extension category](#Controls)) to use for editing this property.
[extension category](#controls-category)) to use for editing this property.
* `property`: A string which will be used as the name of the property in the
domain object's model that the value for this property should be stored
under. If this value should be stored in an object nested within the domain
@ -1178,7 +1181,7 @@ the list of version information in the About dialog.
dialog.
To control the ordering of line items within the About dialog, use `priority`.
(See section on [Extension Definitions](#ExtensionDefinitions) above.)
(See section on [Extensions](#extensions) above.)
This extension category does not have implementations.
@ -1200,7 +1203,7 @@ applicable for domain objects which have the capabilities identified by these
strings.
* `delegation`: Optional boolean, intended to be used in conjunction with
`needs`; if present, allow required capabilities to be satisfied by means of
capability delegation. (See [Delegation](#Delegation))
capability delegation. (See [Delegation](#delegation-capability))
* `toolbar`: Optional; a definition for the toolbar which may appear in a
toolbar when using this view in Edit mode. This should be specified as a
structure for mct-toolbar , with additional properties available for each item in
@ -1231,8 +1234,8 @@ A view's selection state is, conceptually, a set of JavaScript objects. The
presence of methods/properties on these objects determine which toolbar controls
are visible, and what state they manage and/or behavior they invoke.
This set may contain up to two different objects: The _view proxy _, which is
used to make changes to the view as a whole, and the _ selected object _, which is
This set may contain up to two different objects: The _view proxy_, which is
used to make changes to the view as a whole, and the _selected object_, which is
used to represent some state within the view. (Future versions of Open MCT Web
may support multiple selected objects.)
@ -1561,7 +1564,8 @@ extension mechanism is insufficient to achieve a desired result.
### Action Service
The [Action Service](../architecture/platform#action-service) (`actionService`)
The [Action Service](../architecture/platform.md#action-service)
(`actionService`)
provides `Action` instances which are applicable in specific contexts. See Core
API for additional notes on the interface for actions. The `actionService` has
the following interface:
@ -1571,7 +1575,8 @@ in the specified action context.
### Capability Service
The [Capability Service](../architecture/platform#capability-service) (`capabilityService`)
The [Capability Service](../architecture/platform.md#capability-service)
(`capabilityService`)
provides constructors for capabilities which will be exposed for a given domain
object.
@ -1691,7 +1696,7 @@ allowed within the application. It has the following interface:
* `allow(category, candidate, context, [callback])`: Check if this decision
should be allowed. Returns a boolean. Its arguments are interpreted as:
* `category`: A string identifying which kind of decision is being made. See
the [section on Categories](#PolicyCategories) for categories supported by
the [section on Categories](#policy-categories) for categories supported by
the platform; plugins may define and utilize policies of additional
categories, as well.
* `candidate`: An object representing the thing which shall or shall not be
@ -1717,7 +1722,7 @@ When acquiring telemetry for display, it is recommended that the
`telemetryHandler` service be used instead of this service. The
`telemetryHandler` has additional support for subscribing to and requesting
telemetry data associated with domain objects or groups of domain objects. See
the [Other Services](#Other-Services) section for more information.
the [Other Services](#other-services) section for more information.
The `telemetryService` has the following interface:
@ -2152,7 +2157,7 @@ development. A few utilities are included to support development processes.
## Command-line Build
Open MCT Web includes a script for building via command line using Maven 3.0.4
[https://maven.apache.org/]().
https://maven.apache.org/ .
Invoking mvn clean install will:
@ -2169,7 +2174,7 @@ download build dependencies.
## Test Suite
Open MCT Web uses Jasmine [http://jasmine.github.io/]() for automated testing.
Open MCT Web uses Jasmine http://jasmine.github.io/ for automated testing.
The file `test.html` included at the top level of the source repository, can be
run from the browser to perform tests for all active bundles, as defined in
`bundle.json`.
@ -2260,30 +2265,30 @@ Examples of deployment strategies (and the conditions under which they make the
most sense) include:
* If the external services that Open MCT Web will utilize are all running on
Apache Tomcat [https://tomcat.apache.org/](), then it makes sense to run Open
[Apache Tomcat](https://tomcat.apache.org/), then it makes sense to run Open
MCT Web from the same Tomcat instance as a separate web application. The
`.war` artifact produced by the command line build facilitates this deployment
option. (See [https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html() for
option. (See https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html for
general information on deploying in Tomcat.)
* If a variety of external services will be running from a variety of
hosts/ports, then it may make sense to use a web server that supports proxying,
such as the Apache HTTP Server [http://httpd.apache.org/](). In this
such as the [Apache HTTP Server](http://httpd.apache.org/). In this
configuration, the HTTP server would be configured to proxy (or reverse proxy)
requests at specific paths to the various external services, while providing
Open MCT Web as flat files from a different path.
* If a single server component is being developed to handle all server-side
needs of an Open MCT Web instance, it can make sense to serve Open MCT Web (as
flat files) from the same component using an embedded HTTP server such as Nancy
[http://nancyfx.org/]().
flat files) from the same component using an embedded HTTP server such as
[Nancy](http://nancyfx.org/).
* If no external services are needed (or if the 'external services' will just
be generating flat files to read) it makes sense to utilize a lightweight flat
file HTTP server such as Lighttpd [http://www.lighttpd.net/](). In this
file HTTP server such as [Lighttpd](http://www.lighttpd.net/). In this
configuration, Open MCT Web sources/resources would be placed at one path, while
the files generated by the external service are placed at another path.
* If all external services support CORS, it may make sense to have an HTTP
server that is solely responsible for making Open MCT Web sources/resources
available, and to have Open MCT Web contact these external services directly.
Again, lightweight HTTP servers such as Lighttpd [http://www.lighttpd.net/]()
Again, lightweight HTTP servers such as [Lighttpd](http://www.lighttpd.net/)
are useful in this circumstance. The downside of this option is that additional
configuration effort is required, both to enable CORS on the external services,
and to ensure that Open MCT Web can correctly locate these services.
@ -2323,7 +2328,12 @@ default paths to reach external services are all correct.
### Configuration Constants
The following configuration constants are recognized by Open MCT Web bundles:
* Common UI elements - `platform/commonUI/general`
* `THEME`: A string identifying the current theme symbolically. Individual
stylesheets (the `stylesheets` extension category) may specify an optional
`theme` property which will be matched against this before inclusion.
* CouchDB adapter - `platform/persistence/couch`
* `COUCHDB_PATH`: URL or path to the CouchDB database to be used for domain
object persistence. Should not include a trailing slash.

1
docs/src/index.html
View File

@ -32,6 +32,7 @@
<li><a href="architecture/">Architecture Overview</a></li>
<li><a href="guide/">Developer Guide</a></li>
<li><a href="tutorials/">Tutorials</a></li>
<li><a href="process/">Development Process</a></li>
</ul>
</body>
</html>

156
docs/src/process/index.md Normal file
View File

@ -0,0 +1,156 @@
# Development Cycle
Development of Open MCT Web occurs on an iterative cycle of
sprints and releases.
* A _sprint_ is three weeks in duration, and represents a
set of improvements that can be completed and tested by the
development team. Software at the end of the sprint is
"semi-stable"; it will have undergone reduced testing and may carry
defects or usability issues of lower severity, particularly if
there are workarounds.
* A _release_ occurs every four sprints. Releases are stable, and
will have undergone full acceptance testing to ensure that the
software behaves correctly and usably.
## Roles
The sprint process assumes the presence of a __project manager.__
The project manager is responsible for
making tactical decisions about what development work will be
performed, and for coordinating with stakeholders to arrive at
higher-level strategic decisions about desired functionality
and characteristics of the software, major external milestones,
and so forth.
In the absence of a dedicated project manager, this role may be rotated
among members of the development team on a per-sprint basis.
Responsibilities of the project manager including:
* Maintaining (with agreement of stakeholders) a "road map" of work
planned for future releases/sprints; this should be higher-level,
usually expressed as "themes",
with just enough specificity to gauge feasibility of plans,
relate work back to milestones, and identify longer-term
dependencies.
* Determining (with assistance from the rest of the team) which
issues to work on in a given sprint and how they shall be
assigned.
* Pre-planning subsequent sprints to ensure that all members of the
team always have a clear direction.
* Scheduling and/or ensuring adherence to
[process points](#process-points).
* Responding to changes within the sprint (shifting priorities,
new issues) and re-allocating work for the sprint as needed.
## Sprint Calendar
Certain [process points](#process-points) are regularly scheduled in
the sprint cycle.
### Sprints by Release
Allocation of work among sprints should be planned relative to release
goals and milestones. As a general guideline, higher-risk work (large
new features which may carry new defects, major refactoring, design
changes with uncertain effects on usability) should be allocated to
earlier sprints, allowing for time in later sprints to ensure stability.
| Sprint | Focus |
|:------:|:--------------------------------------------------------|
| __1__ | Prototyping, design, experimentation. |
| __2__ | New features, refinements, enhancements. |
| __3__ | Feature completion, low-risk enhancements, bug fixing. |
| __4__ | Stability & quality assurance. |
### Sprints 1-3
The first three sprints of a release are primarily centered around
development work, with regular acceptance testing in the third
week. During this third week, the top priority should be passing
acceptance testing (e.g. by resolving any blockers found); any
resources not needed for this effort should be used to begin work
for the subsequent sprint.
| Week | Mon | Tue | Wed | Thu | Fri |
|:-----:|:-------------------------:|:------:|:---:|:----------------------------:|:-----------:|
| __1__ | Sprint plan | Tag-up | | | |
| __2__ | | Tag-up | | | Code freeze |
| __3__ | Sprint acceptance testing | Triage | | _Sprint acceptance testing*_ | Ship |
&ast; If necessary.
### Sprint 4
The software must be stable at the end of the fourth sprint; because of
this, the fourth sprint is scheduled differently, with a heightened
emphasis on testing.
| Week | Mon | Tue | Wed | Thu | Fri |
|-------:|:-------------------------:|:------:|:---:|:----------------------------:|:-----------:|
| __1__ | Sprint plan | Tag-up | | | Code freeze |
| __2__ | Acceptance testing | Triage | | | |
| __3__ | _Acceptance testing*_ | Triage | | _Acceptance testing*_ | Ship |
&ast; If necessary.
## Process Points
* __Sprint plan.__ Project manager allocates issues based on
theme(s) for sprint, then reviews with team. Each team member
should have roughly two weeks of work allocated (to allow time
in the third week for testing of work completed.)
* Project manager should also sketch out subsequent sprint so
that team may begin work for that sprint during the
third week, since testing and blocker resolution is unlikely
to require all available resources.
* __Tag-up.__ Check in and status update among development team.
May amend plan for sprint as-needed.
* __Code freeze.__ Any new work from this sprint
(features, bug fixes, enhancements) must be integrated by the
end of the second week of the sprint. After code freeze
(and until the end of the sprint) the only changes that should be
merged into the master branch should directly address issues
needed to pass acceptance testing.
* __Acceptance Testing.__ Structured testing with predefined
success criteria. No release should ship without passing
acceptance tests. Time is allocated in each sprint for subsequent
rounds of acceptance testing if issues are identified during a
prior round. Specific details of acceptance testing need to be
agreed-upon with relevant stakeholders and delivery recipients,
and should be flexible enough to allow changes to plans
(e.g. deferring delivery of some feature in order to ensure
stability of other features.) Baseline testing includes:
* __Testathon.__ Multi-user testing, involving as many users as
is feasible, plus development team. Open-ended; should verify
completed work from this sprint, test exploratorily for
regressions, et cetera.
* __24-Hour Test.__ A test to verify that the software remains
stable after running for longer durations. May include some
combination of automated testing and user verification (e.g.
checking to verify that software remains subjectively
responsive at conclusion of test.)
* __Automated Testing.__ Automated testing integrated into the
build. (These tests are verified to pass more often than once
per sprint, as they run before any merge to master, but still
play an important role in acceptance testing.)
* __Sprint Acceptance Testing.__ Subset of Acceptance Testing
which should be performed before shipping at the end of any
sprint. Time is allocated for a second round of
Sprint Acceptance Testing if the first round is not passed.
* __Triage.__ Team reviews issues from acceptance testing and uses
success criteria to determine whether or not they should block
release, then formulates a plan to address these issues before
the next round of acceptance testing. Focus here should be on
ensuring software passes that testing in order to ship on time;
may prefer to disable malfunctioning components and fix them
in a subsequent sprint, for example.
* __Ship.__ Tag a code snapshot that has passed acceptance
testing and deploy that version. (Only true if acceptance
testing has passed by this point; if acceptance testing has not
been passed, will need to make ad hoc decisions with stakeholders,
e.g. "extend the sprint" or "defer shipment until end of next
sprint.")

1293
docs/src/tutorials/index.md
View File

File diff suppressed because it is too large Load Diff

22
example/generator/bundle.json
View File

@ -16,6 +16,23 @@
"implementation": "SinewaveLimitCapability.js"
}
],
"formats": [
{
"key": "example.delta",
"implementation": "SinewaveDeltaFormat.js"
}
],
"constants": [
{
"key": "TIME_CONDUCTOR_DOMAINS",
"value": [
{ "key": "time", "name": "Time" },
{ "key": "yesterday", "name": "Yesterday" },
{ "key": "delta", "name": "Delta", "format": "example.delta" }
],
"priority": -1
}
],
"types": [
{
"key": "generator",
@ -38,6 +55,11 @@
{
"key": "yesterday",
"name": "Yesterday"
},
{
"key": "delta",
"name": "Delta",
"format": "example.delta"
}
],
"ranges": [

18
platform/commonUI/general/res/sass/_hide-non-functional.scss → example/generator/src/SinewaveConstants.js
View File

@ -19,18 +19,8 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
// Styles to temporarily hide non-functional elements
/*global define,Promise*/
/******************************** BROWSE */
.browse-mode {
.browse {
&.top-bar {
display: none;
}
}
.browse-area.holder {
// When .browse.top-bar is hidden, set the top of the browse-area holder
top: $bodyMargin;
}
}
define({
START_TIME: Date.now() - 24 * 60 * 60 * 1000 // Now minus a day.
});

68
example/generator/src/SinewaveDeltaFormat.js Normal file
View File

@ -0,0 +1,68 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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,Promise*/
define(
['./SinewaveConstants', 'moment'],
function (SinewaveConstants, moment) {
"use strict";
var START_TIME = SinewaveConstants.START_TIME,
FORMAT_REGEX = /^-?\d+:\d+:\d+$/,
SECOND = 1000,
MINUTE = SECOND * 60,
HOUR = MINUTE * 60;
function SinewaveDeltaFormat() {
}
function twoDigit(v) {
return v >= 10 ? String(v) : ('0' + v);
}
SinewaveDeltaFormat.prototype.format = function (value) {
var delta = Math.abs(value - START_TIME),
negative = value < START_TIME,
seconds = Math.floor(delta / SECOND) % 60,
minutes = Math.floor(delta / MINUTE) % 60,
hours = Math.floor(delta / HOUR);
return (negative ? "-" : "") +
[ hours, minutes, seconds ].map(twoDigit).join(":");
};
SinewaveDeltaFormat.prototype.validate = function (text) {
return FORMAT_REGEX.test(text);
};
SinewaveDeltaFormat.prototype.parse = function (text) {
var negative = text[0] === "-",
parts = text.replace("-", "").split(":");
return [ HOUR, MINUTE, SECOND ].map(function (sz, i) {
return parseInt(parts[i], 10) * sz;
}).reduce(function (a, b) {
return a + b;
}, 0) * (negative ? -1 : 1) + START_TIME;
};
return SinewaveDeltaFormat;
}
);

8
example/generator/src/SinewaveLimitCapability.js
View File

@ -30,25 +30,25 @@ define(
YELLOW = 0.5,
LIMITS = {
rh: {
cssClass: "s-limit-upr-red",
cssClass: "s-limit-upr s-limit-red",
low: RED,
high: Number.POSITIVE_INFINITY,
name: "Red High"
},
rl: {
cssClass: "s-limit-lwr-red",
cssClass: "s-limit-lwr s-limit-red",
high: -RED,
low: Number.NEGATIVE_INFINITY,
name: "Red Low"
},
yh: {
cssClass: "s-limit-upr-yellow",
cssClass: "s-limit-upr s-limit-yellow",
low: YELLOW,
high: RED,
name: "Yellow High"
},
yl: {
cssClass: "s-limit-lwr-yellow",
cssClass: "s-limit-lwr s-limit-yellow",
low: -RED,
high: -YELLOW,
name: "Yellow Low"

11
example/generator/src/SinewaveTelemetrySeries.js
View File

@ -25,12 +25,12 @@
* Module defining SinewaveTelemetry. Created by vwoeltje on 11/12/14.
*/
define(
[],
function () {
['./SinewaveConstants'],
function (SinewaveConstants) {
"use strict";
var ONE_DAY = 60 * 60 * 24,
firstObservedTime = Math.floor(Date.now() / 1000) - ONE_DAY;
firstObservedTime = Math.floor(SinewaveConstants.START_TIME / 1000);
/**
*
@ -58,8 +58,11 @@ define(
};
generatorData.getDomainValue = function (i, domain) {
// delta uses the same numeric values as the default domain,
// so it's not checked for here, just formatted for display
// differently.
return (i + offset) * 1000 + firstTime * 1000 -
(domain === 'yesterday' ? ONE_DAY : 0);
(domain === 'yesterday' ? (ONE_DAY * 1000) : 0);
};
generatorData.getRangeValue = function (i, range) {

12
example/mobile/bundle.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "Mobile",
"description": "Allows elements with pertinence to mobile usage and development",
"extensions": {
"stylesheets": [
{
"stylesheetUrl": "css/mobile-example.css",
"priority": "mandatory"
}
]
}
}

26
example/mobile/res/config.rb Executable file
View File

@ -0,0 +1,26 @@
# Require any additional compass plugins here.
# require "compass-growl"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# :expanded, :compressed, :nested
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

103
example/mobile/res/css/mobile-example.css Normal file
View File

@ -0,0 +1,103 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
/************************** FEATURES */
/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
/************************** RATIOS */
/************************** LAYOUT */
/************************** CONTROLS */
/************************** PATHS */
/************************** TIMINGS */
/************************** LIMITS */
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
/* REQUIRES mobile/_constants */
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 28, ../sass/mobile-example.scss */
.create-btn-holder {
display: block !important; } }

31
example/mobile/res/sass/mobile-example.scss Normal file
View File

@ -0,0 +1,31 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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 "../../../../platform/commonUI/general/res/sass/constants";
@import "../../../../platform/commonUI/general/res/sass/mobile/constants";
@import "../../../../platform/commonUI/general/res/sass/mobile/mixins";
@include phoneandtablet {
// Show the Create button
.create-btn-holder {
display: block !important;
}
}

47
example/notifications/bundle.json Normal file
View File

@ -0,0 +1,47 @@
{
"extensions": {
"templates": [
{
"key": "dialogLaunchTemplate",
"templateUrl": "dialog-launch.html"
},
{
"key": "notificationLaunchTemplate",
"templateUrl": "notification-launch.html"
}
],
"controllers": [
{
"key": "DialogLaunchController",
"implementation": "DialogLaunchController.js",
"depends": [
"$scope",
"$timeout",
"$log",
"dialogService",
"notificationService"
]
},
{
"key": "NotificationLaunchController",
"implementation": "NotificationLaunchController.js",
"depends": [
"$scope",
"$timeout",
"$log",
"notificationService"
]
}
],
"indicators": [
{
"implementation": "DialogLaunchIndicator.js",
"priority": "fallback"
},
{
"implementation": "NotificationLaunchIndicator.js",
"priority": "fallback"
}
]
}
}

10
example/notifications/res/dialog-launch.html Normal file
View File

@ -0,0 +1,10 @@
<span class="status block ok" ng-controller="DialogLaunchController">
<span class="ui-symbol status-indicator">&#xe600;</span>
<span class="label">
<a ng-click="launchProgress(true)">Known</a> |
<a ng-click="launchProgress(false)">Unknown</a> |
<a ng-click="launchError()">Error</a> |
<a ng-click="launchInfo()">Info</a>
</span>
<span class="count">Dialogs</span>
</span>

10
example/notifications/res/notification-launch.html Normal file
View File

@ -0,0 +1,10 @@
<span class="status block ok" ng-controller="NotificationLaunchController">
<span class="ui-symbol status-indicator">&#xe600;</span>
<span class="label">
<a ng-click="newInfo()">Success</a> |
<a ng-click="newError()">Error</a> |
<a ng-click="newAlert()">Alert</a> |
<a ng-click="newProgress()">Progress</a>
</span>
<span class="count">Notifications</span>
</span>

150
example/notifications/src/DialogLaunchController.js Normal file
View File

@ -0,0 +1,150 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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";
/**
* A controller for the dialog launch view. This view allows manual
* launching of dialogs for demonstration and testing purposes. It
* also demonstrates the use of the DialogService.
* @param $scope
* @param $timeout
* @param $log
* @param dialogService
* @param notificationService
* @constructor
*/
function DialogLaunchController($scope, $timeout, $log, dialogService, notificationService) {
/*
Demonstrates launching a progress dialog and updating it
periodically with the progress of an ongoing process.
*/
$scope.launchProgress = function (knownProgress) {
var model = {
title: "Progress Dialog Example",
progress: 0,
hint: "Do not navigate away from this page or close this browser tab while this operation is in progress.",
actionText: "Calculating...",
unknownProgress: !knownProgress,
unknownDuration: false,
severity: "info",
options: [
{
label: "Cancel Operation",
callback: function () {
$log.debug("Operation cancelled");
dialogService.dismiss();
}
},
{
label: "Do something else...",
callback: function () {
$log.debug("Something else pressed");
}
}
]
};
function incrementProgress() {
model.progress = Math.min(100, Math.floor(model.progress + Math.random() * 30));
model.progressText = ["Estimated time remaining: about ", 60 - Math.floor((model.progress / 100) * 60), " seconds"].join(" ");
if (model.progress < 100) {
$timeout(incrementProgress, 1000);
}
}
if (dialogService.showBlockingMessage(model)) {
//Do processing here
model.actionText = "Processing 100 objects...";
if (knownProgress) {
$timeout(incrementProgress, 1000);
}
} else {
$log.error("Could not display modal dialog");
}
};
/*
Demonstrates launching an error dialog
*/
$scope.launchError = function () {
var model = {
title: "Error Dialog Example",
actionText: "Something happened, and it was not good.",
severity: "error",
options: [
{
label: "Try Again",
callback: function () {
$log.debug("Try Again Pressed");
dialogService.dismiss();
}
},
{
label: "Cancel",
callback: function () {
$log.debug("Cancel Pressed");
dialogService.dismiss();
}
}
]
};
if (!dialogService.showBlockingMessage(model)) {
$log.error("Could not display modal dialog");
}
};
/*
Demonstrates launching an error dialog
*/
$scope.launchInfo = function () {
var model = {
title: "Info Dialog Example",
actionText: "This is an example of a blocking info" +
" dialog. This dialog can be used to draw the user's" +
" attention to an event.",
severity: "info",
primaryOption: {
label: "OK",
callback: function () {
$log.debug("OK Pressed");
dialogService.dismiss();
}
}
};
if (!dialogService.showBlockingMessage(model)) {
$log.error("Could not display modal dialog");
}
};
}
return DialogLaunchController;
}
);

56
example/notifications/src/DialogLaunchIndicator.js Normal file
View File

@ -0,0 +1,56 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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,window*/
define(
[],
function () {
"use strict";
/**
* A tool for manually invoking dialogs. When included this
* indicator will allow for dialogs of different types to be
* launched for demonstration and testing purposes.
* @constructor
*/
function DialogLaunchIndicator() {
}
DialogLaunchIndicator.template = 'dialogLaunchTemplate';
DialogLaunchIndicator.prototype.getGlyph = function () {
return "i";
};
DialogLaunchIndicator.prototype.getGlyphClass = function () {
return 'caution';
};
DialogLaunchIndicator.prototype.getText = function () {
return "Launch test dialog";
};
DialogLaunchIndicator.prototype.getDescription = function () {
return "Launch test dialog";
};
return DialogLaunchIndicator;
}
);

172
example/notifications/src/NotificationLaunchController.js Normal file
View File

@ -0,0 +1,172 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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";
/**
* Allows launching of notification messages for the purposes of
* demonstration and testing. Also demonstrates use of
* the NotificationService. Notifications are non-blocking messages that
* appear at the bottom of the screen to inform the user of events
* in a non-intrusive way. For more information see the
* {@link NotificationService}
* @param $scope
* @param $timeout
* @param $log
* @param notificationService
* @constructor
*/
function NotificationLaunchController($scope, $timeout, $log, notificationService) {
var messageCounter = 1;
function getExampleActionText() {
var actionTexts = [
"Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.",
"Eros turpis, pulvinar turpis eros eu",
"Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!"
];
return actionTexts[Math.floor(Math.random()*3)];
}
function getExampleActions() {
var actions = [
{
label: "Try Again",
callback: function () {
$log.debug("Try Again pressed");
}
},
{
label: "Remove",
callback: function () {
$log.debug("Remove pressed");
}
},
{
label: "Cancel",
callback: function () {
$log.debug("Cancel pressed");
}
}
];
// Randomly remove some actions off the top; leave at least one
actions.splice(0,Math.floor(Math.random() * actions.length));
return actions;
}
function getExampleSeverity() {
var severities = [
"info",
"alert",
"error"
];
return severities[Math.floor(Math.random() * severities.length)];
}
/**
* Launch a new notification with a severity level of 'Error'.
*/
$scope.newError = function(){
notificationService.notify({
title: "Example error notification " + messageCounter++,
hint: "An error has occurred",
severity: "error",
primaryOption: {
label: 'Retry',
callback: function() {
$log.info('Retry clicked');
}
},
options: getExampleActions()});
};
/**
* Launch a new notification with a severity of 'Alert'.
*/
$scope.newAlert = function(){
notificationService.notify({
title: "Alert notification " + (messageCounter++),
hint: "This is an alert message",
severity: "alert",
primaryOption: {
label: 'Retry',
callback: function() {
$log.info('Retry clicked');
}
},
options: getExampleActions()});
};
/**
* Launch a new notification with a progress bar that is updated
* periodically, tracking an ongoing process.
*/
$scope.newProgress = function(){
var notificationModel = {
title: "Progress notification example",
severity: "info",
progress: 0,
actionText: getExampleActionText(),
unknownProgress: false
};
/**
* Simulate an ongoing process and update the progress bar.
* @param notification
*/
function incrementProgress(notificationModel) {
notificationModel.progress = Math.min(100, Math.floor(notificationModel.progress + Math.random() * 30));
notificationModel.progressText = ["Estimated time" +
" remaining:" +
" about ", 60 - Math.floor((notificationModel.progress / 100) * 60), " seconds"].join(" ");
if (notificationModel.progress < 100) {
$timeout(function(){incrementProgress(notificationModel);}, 1000);
}
}
notificationService.notify(notificationModel);
incrementProgress(notificationModel);
};
/**
* Launch a new notification with severity level of INFO.
*/
$scope.newInfo = function(){
notificationService.info({
title: "Example Info notification " + messageCounter++
});
};
}
return NotificationLaunchController;
}
);

50
example/notifications/src/NotificationLaunchIndicator.js Normal file
View File

@ -0,0 +1,50 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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,window*/
define(
[],
function () {
"use strict";
function NotificationLaunchIndicator() {
}
NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
NotificationLaunchIndicator.prototype.getGlyph = function () {
return "i";
};
NotificationLaunchIndicator.prototype.getGlyphClass = function () {
return 'caution';
};
NotificationLaunchIndicator.prototype.getText = function () {
return "Launch notification";
};
NotificationLaunchIndicator.prototype.getDescription = function () {
return "Launch notification";
};
return NotificationLaunchIndicator;
}
);

23
platform/commonUI/browse/bundle.json
View File

@ -1,9 +1,4 @@
{
"configuration": {
"paths": {
"uuid": "uuid"
}
},
"extensions": {
"routes": [
{
@ -31,10 +26,10 @@
]
},
{
"key": "BrowseTreeController",
"implementation": "BrowseTreeController.js",
"key": "PaneController",
"implementation": "PaneController.js",
"priority": "preferred",
"depends": [ "$scope", "agentService" ]
"depends": [ "$scope", "agentService","$window" ]
},
{
"key": "BrowseObjectController",
@ -159,7 +154,7 @@
"provides": "creationService",
"type": "provider",
"implementation": "creation/CreationService.js",
"depends": [ "persistenceService", "now", "$q", "$log" ]
"depends": [ "$q", "$log" ]
}
],
"runs": [
@ -178,16 +173,6 @@
"copyright": "Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)",
"license": "license-mit",
"link": "https://github.com/sindresorhus/screenfull.js/blob/gh-pages/license"
},
{
"name": "Math.uuid.js",
"version": "1.4",
"description": "Unique identifer generation (code adapted.)",
"author": "Robert Kieffer",
"website": "https://github.com/broofa/node-uuid",
"copyright": "Copyright (c) 2010 Robert Kieffer",
"license": "license-mit",
"link": "http://opensource.org/licenses/MIT"
}
]
}

13
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -20,15 +20,17 @@
at runtime from the About dialog for additional information.
-->
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex">
<div class="items-select left">
<div class="object-browse-bar l-flex-row">
<div class="items-select left flex-elem l-flex-row grows">
<mct-representation key="'back-arrow'"
mct-object="domainObject"
class="l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject">
class="flex-elem l-back"></mct-representation>
<mct-representation key="'object-header'"
mct-object="domainObject"
class="l-flex-row flex-elem grows object-header">
</mct-representation>
</div>
<div class="btn-bar right">
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
<mct-representation key="'switcher'"
mct-object="domainObject"
ng-model="representation">
@ -41,7 +43,6 @@
</mct-representation>
</div>
</div>
<mct-representation key="representation.selected.key"
mct-object="representation.selected.key && domainObject"
class="abs object-holder">

77
platform/commonUI/browse/res/templates/browse.html
View File

@ -22,46 +22,67 @@
<div class="abs holder-all browse-mode" ng-controller="BrowseController">
<mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs browse-wrapper"
ng-controller="BrowseTreeController as tree"
ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'>
<div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
ng-controller="PaneController as modelPaneTree"
ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'">
<mct-split-pane class='abs contents'
anchor='left'>
<div class='split-pane-component treeview pane left'>
<div class="holder abs l-mobile">
<div class="abs holder l-flex-col holder-treeview-elements">
<mct-representation key="'create-button'"
mct-object="navigatedObject"
mct-device="desktop">
class="holder flex-elem create-btn-holder">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
<div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search">
<mct-include key="'search'"
ng-model="treeModel"
class="holder l-flex-col flex-elem search-holder"
ng-class="{ active: treeModel.search, grows: treeModel.search }">
</mct-include>
<mct-representation key="'tree'"
mct-object="domainObject"
parameters="tree"
ng-model="treeModel"
class="holder flex-elem grows vscroll tree-holder"
ng-hide="treeModel.search">
</mct-representation>
</div>
</div>
<mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>
<div class='split-pane-component items pane primary-pane right'>
<a class="mini-tab-icon anchor-left toggle-pane toggle-tree"
title="{{ modelPaneTree.visible()? 'Hide' : 'Show' }} this pane"
ng-click="modelPaneTree.toggle()"
ng-class="{ collapsed : !modelPaneTree.visible() }"></a>
<div class='holder holder-object-and-inspector abs' id='content-area'
ng-controller="PaneController as modelPaneInspect"
ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
<mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
<div class='split-pane-component t-object pane primary-pane left'>
<mct-representation mct-object="navigatedObject"
key="'browse-object'"
class="abs holder holder-object">
</mct-representation>
</div>
<mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
<div class="split-pane-component t-inspect pane right mobile-hide">
<mct-representation key="'object-inspector'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
<a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"
title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
ng-click="modelPaneInspect.toggle()"
ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
</div>
</mct-split-pane>
</div>
</div>
<mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject"
key="'browse-object'">
</mct-representation>
</div>
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
mct-device="mobile"
ng-click="tree.toggle()">m</div>
</div>
</mct-split-pane>
</div>
<mct-include key="'bottombar'"></mct-include>

18
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -19,12 +19,12 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class='object-header object-header-mobile'>
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
<!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
<span class="l-elem-wrapper l-flex">
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='title-label'>{{model.name}}</span>
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
</span>
</div>
<span class='type-icon ui-symbol flex-elem'>{{type.getGlyph()}}</span>
<span class="l-elem-wrapper l-flex-row flex-elem grows">
<span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
<span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>
<mct-representation
key="'menu-arrow'"
mct-object='domainObject'
class="flex-elem"></mct-representation>
</span>

5
platform/commonUI/browse/res/templates/create/create-button.html
View File

@ -19,13 +19,12 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
<span ng-controller="ClickAwayController as createController">
<div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
<span class="ui-symbol icon type-icon">&#x2b;</span>
<span class="title-label">Create</span>
</div>
<div class="menu super-menu" ng-show="createController.isActive()">
<mct-representation mct-object="domainObject" key="'create-menu'">
</mct-representation>
</div>
</div>
</span>

10
platform/commonUI/browse/res/templates/items/grid-item.html
View File

@ -26,14 +26,8 @@
<div class='ui-symbol profile' title='Shared'>&#x4f;</div>
<mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
</div>
<div class='item-main abs'>
<div class='ui-symbol icon lg item-type'>
{{type.getGlyph()}}
<span
class="ui-symbol l-icon-link" title="This object is a link"
ng-show="location.isLink()"
></span>
</div>
<div class='item-main abs lg'>
<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
<div class='ui-symbol abs item-open'>}</div>
</div>
<div class='bottom-bar bar abs'>

1
platform/commonUI/browse/src/BrowseController.js
View File

@ -153,7 +153,6 @@ define(
$scope.$on("$destroy", function () {
navigationService.removeListener(setNavigation);
});
}
return BrowseController;

18
platform/commonUI/browse/src/BrowseTreeController.js → platform/commonUI/browse/src/PaneController.js
View File

@ -33,10 +33,12 @@ define(
* @constructor
* @memberof platform/commonUI/browse
*/
function BrowseTreeController($scope, agentService) {
function PaneController($scope, agentService, $window) {
var self = this;
this.agentService = agentService;
this.state = true;
// Fast and cheap: if this has been opened in a new window, hide panes by default
this.state = !$window.opener;
/**
* Callback to invoke when any selection occurs in the tree.
@ -44,7 +46,7 @@ define(
* to the tree representation.
*
* @property {Function} callback
* @memberof platform/commonUI/browse.BrowseTreeController#
* @memberof platform/commonUI/browse.PaneController#
*/
this.callback = function () {
// Note that, since this is a callback to pass, this is not
@ -59,20 +61,20 @@ define(
}
/**
* Toggle the visibility of the tree.
* Toggle the visibility of the pane.
*/
BrowseTreeController.prototype.toggle = function () {
PaneController.prototype.toggle = function () {
this.state = !this.state;
};
/**
* Get the desired visibility state of the tree.
* Get the desired visibility state of the pane.
* @returns {boolean} true when visible
*/
BrowseTreeController.prototype.visible = function () {
PaneController.prototype.visible = function () {
return this.state;
};
return BrowseTreeController;
return PaneController;
}
);

41
platform/commonUI/browse/src/creation/CreationService.js
View File

@ -25,8 +25,8 @@
* Module defining CreateService. Created by vwoeltje on 11/10/14.
*/
define(
["uuid"],
function (uuid) {
[],
function () {
"use strict";
var NON_PERSISTENT_WARNING =
@ -42,11 +42,9 @@ define(
* @memberof platform/commonUI/browse
* @constructor
*/
function CreationService(persistenceService, now, $q, $log) {
this.persistenceService = persistenceService;
function CreationService($q, $log) {
this.$q = $q;
this.$log = $log;
this.now = now;
}
/**
@ -70,26 +68,17 @@ define(
*/
CreationService.prototype.createObject = function (model, parent) {
var persistence = parent.getCapability("persistence"),
newObject = parent.useCapability("instantiation", model),
newObjectPersistence = newObject.getCapability("persistence"),
self = this;
// Persist the new domain object's model; it will be fully
// constituted as a domain object when loaded back, as all
// domain object models are.
function doPersist(space, id, model) {
return self.persistenceService.createObject(
space,
id,
model
).then(function () { return id; });
}
// Add the newly-created object's id to the parent's
// composition, so that it will subsequently appear
// as a child contained by that parent.
function addToComposition(id, parent, parentPersistence) {
function addToComposition() {
var compositionCapability = parent.getCapability('composition'),
addResult = compositionCapability &&
compositionCapability.add(id);
compositionCapability.add(newObject);
return self.$q.when(addResult).then(function (result) {
if (!result) {
@ -97,7 +86,7 @@ define(
return undefined;
}
return parentPersistence.persist().then(function () {
return persistence.persist().then(function () {
return result;
});
});
@ -105,21 +94,13 @@ define(
// We need the parent's persistence capability to determine
// what space to create the new object's model in.
if (!persistence) {
if (!persistence || !newObjectPersistence) {
self.$log.warn(NON_PERSISTENT_WARNING);
return self.$q.reject(new Error(NON_PERSISTENT_WARNING));
}
// We create a new domain object in three sequential steps:
// 1. Get a new UUID for the object
// 2. Create a model with that ID in the persistence space
// 3. Add that ID to
return self.$q.when(uuid()).then(function (id) {
model.persisted = self.now();
return doPersist(persistence.getSpace(), id, model);
}).then(function (id) {
return addToComposition(id, parent, persistence);
});
// Persist the new object, then add it to composition.
return newObjectPersistence.persist().then(addToComposition);
};

13
platform/commonUI/browse/test/BrowseTreeControllerSpec.js → platform/commonUI/browse/test/PaneControllerSpec.js
View File

@ -22,22 +22,24 @@
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
define(
["../src/BrowseTreeController"],
function (BrowseTreeController) {
["../src/PaneController"],
function (PaneController) {
'use strict';
describe("The BrowseTreeController", function () {
describe("The PaneController", function () {
var mockScope,
mockAgentService,
mockDomainObjects,
mockWindow,
controller;
// We want to reinstantiate for each test case
// because device state can influence constructor-time behavior
function instantiateController() {
return new BrowseTreeController(
return new PaneController(
mockScope,
mockAgentService
mockAgentService,
mockWindow
);
}
@ -58,6 +60,7 @@ define(
"agentService",
[ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
);
mockWindow = jasmine.createSpyObj("$window", ["open"]);
});
it("is initially visible", function () {

63
platform/commonUI/browse/test/creation/CreationServiceSpec.js
View File

@ -30,9 +30,7 @@ define(
"use strict";
describe("The creation service", function () {
var mockPersistenceService,
mockNow,
mockQ,
var mockQ,
mockLog,
mockParentObject,
mockNewObject,
@ -40,7 +38,9 @@ define(
mockPersistenceCapability,
mockCompositionCapability,
mockContextCapability,
mockCreationCapability,
mockCapabilities,
mockNewPersistenceCapability,
creationService;
function mockPromise(value) {
@ -60,11 +60,6 @@ define(
}
beforeEach(function () {
mockPersistenceService = jasmine.createSpyObj(
"persistenceService",
[ "createObject" ]
);
mockNow = jasmine.createSpy('now');
mockQ = { when: mockPromise, reject: mockReject };
mockLog = jasmine.createSpyObj(
"$log",
@ -76,7 +71,7 @@ define(
);
mockNewObject = jasmine.createSpyObj(
"newObject",
[ "getId" ]
[ "getId", "getCapability", "useCapability" ]
);
mockMutationCapability = jasmine.createSpyObj(
"mutation",
@ -94,19 +89,22 @@ define(
"context",
["getPath"]
);
mockCreationCapability = jasmine.createSpyObj(
"creation",
["instantiate", "invoke"]
);
mockCapabilities = {
mutation: mockMutationCapability,
persistence: mockPersistenceCapability,
composition: mockCompositionCapability,
context: mockContextCapability
context: mockContextCapability,
instantiation: mockCreationCapability
};
mockPersistenceService.createObject.andReturn(
mockPromise(true)
mockNewPersistenceCapability = jasmine.createSpyObj(
"new-persistence",
[ "persist", "getSpace" ]
);
mockNow.andReturn(12321);
mockParentObject.getCapability.andCallFake(function (key) {
return mockCapabilities[key];
});
@ -115,9 +113,16 @@ define(
});
mockParentObject.getId.andReturn('parentId');
mockPersistenceCapability.persist.andReturn(
mockPromise(true)
);
mockNewObject.getId.andReturn('newId');
mockNewObject.getCapability.andCallFake(function (c) {
return c === 'persistence' ?
mockNewPersistenceCapability : undefined;
});
mockPersistenceCapability.persist
.andReturn(mockPromise(true));
mockNewPersistenceCapability.persist
.andReturn(mockPromise(true));
mockMutationCapability.invoke.andReturn(mockPromise(true));
mockPersistenceCapability.getSpace.andReturn("testSpace");
@ -125,10 +130,12 @@ define(
mockPromise([mockNewObject])
);
mockCompositionCapability.add.andReturn(mockPromise(true));
mockCreationCapability.instantiate.andReturn(mockNewObject);
mockCreationCapability.invoke.andCallFake(function (model) {
return mockCreationCapability.instantiate(model);
});
creationService = new CreationService(
mockPersistenceService,
mockNow,
mockQ,
mockLog
);
@ -137,21 +144,18 @@ define(
it("allows new objects to be created", function () {
var model = { someKey: "some value" };
creationService.createObject(model, mockParentObject);
expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
"testSpace",
jasmine.any(String), // the object id; generated UUID
model
);
expect(mockCreationCapability.instantiate)
.toHaveBeenCalledWith(model);
});
it("adds new id's to the parent's composition", function () {
it("adds new objects to the parent's composition", function () {
var model = { someKey: "some value" },
parentModel = { composition: ["notAnyUUID"] };
creationService.createObject(model, mockParentObject);
// Verify that a new ID was added
expect(mockCompositionCapability.add)
.toHaveBeenCalledWith(jasmine.any(String));
.toHaveBeenCalledWith(mockNewObject);
});
it("provides the newly-created object", function () {
@ -207,11 +211,6 @@ define(
expect(mockLog.error).toHaveBeenCalled();
});
it("attaches a 'persisted' timestamp", function () {
var model = { someKey: "some value" };
creationService.createObject(model, mockParentObject);
expect(model.persisted).toEqual(mockNow());
});
});
}

2
platform/commonUI/browse/test/suite.json
View File

@ -1,7 +1,7 @@
[
"BrowseController",
"BrowseObjectController",
"BrowseTreeController",
"PaneController",
"MenuArrowController",
"creation/CreateAction",
"creation/CreateActionProvider",

12
platform/commonUI/dialog/bundle.json
View File

@ -24,6 +24,18 @@
{
"key": "form-dialog",
"templateUrl": "templates/dialog.html"
},
{
"key": "overlay-blocking-message",
"templateUrl": "templates/overlay-blocking-message.html"
},
{
"key": "message",
"templateUrl": "templates/message.html"
},
{
"key": "overlay-message-list",
"templateUrl": "templates/overlay-message-list.html"
}
],
"containers": [

8
platform/commonUI/dialog/res/templates/dialog.html
View File

@ -21,17 +21,13 @@
-->
<div class="abs top-bar">
<div class="title">{{ngModel.title}}</div>
<div class="hint">
All fields marked <span class="ui-symbol req">*</span> are required.
</div>
<div class="hint">All fields marked <span class="ui-symbol req">*</span> are required.</div>
</div>
<div class="abs form editor">
<div class='abs contents l-dialog'>
<div class='abs editor'>
<mct-form ng-model="ngModel.value"
structure="ngModel.structure"
name="createForm">
</mct-form>
</div>
</div>
<div class="abs bottom-bar">
<a class='s-btn major'

32
platform/commonUI/dialog/res/templates/message.html Normal file
View File

@ -0,0 +1,32 @@
<div class="l-message"
ng-class="'message-severity-' + ngModel.severity">
<div class="ui-symbol type-icon message-type"></div>
<div class="message-contents">
<div class="top-bar">
<div class="title">{{ngModel.title}}</div>
<div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
</div>
<div class="message-body">
<div class="message-action">
{{ngModel.actionText}}
</div>
<mct-include key="'progress-bar'"
ng-model="ngModel"
ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
</div>
<div class="bottom-bar">
<a ng-repeat="dialogOption in ngModel.options"
class="s-btn major"
ng-click="dialogOption.callback()">
{{dialogOption.label}}
</a>
<a class="s-btn major"
ng-if="ngModel.primaryOption"
ng-click="ngModel.primaryOption.callback()">
{{ngModel.primaryOption.label}}
</a>
</div>
</div>
</div>

25
platform/commonUI/dialog/res/templates/overlay-blocking-message.html Normal file
View File

@ -0,0 +1,25 @@
<!--
Open MCT Web, Copyright (c) 2014-2015, United States Government
as represented by the Administrator of the National Aeronautics and Space
Administration. All rights reserved.
Open MCT Web 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 Web 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.
-->
<mct-container key="overlay" class="t-message-single">
<mct-include key="'message'" ng-model="ngModel">
</mct-include>
</mct-container>

19
platform/commonUI/dialog/res/templates/overlay-message-list.html Normal file
View File

@ -0,0 +1,19 @@
<mct-container key="overlay" class="t-message-list">
<div class="message-contents">
<div class="abs top-bar">
<div class="title">{{ngModel.dialog.title}}</div>
<div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1">s</span>
</div>
</div>
<div class="abs message-body">
<mct-include ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'" key="'message'" ng-model="msg"></mct-include>
</div>
<div class="abs bottom-bar">
<a ng-repeat="dialogAction in ngModel.dialog.actions"
class="s-btn major"
ng-click="dialogAction.action()">
{{dialogAction.label}}
</a>
</div>
</div>
</mct-container>

4
platform/commonUI/dialog/res/templates/overlay-options.html
View File

@ -24,14 +24,12 @@
<div class="title">{{ngModel.dialog.title}}</div>
<div class="hint">{{ngModel.dialog.hint}}</div>
</div>
<div class="abs form outline editor">
<div class='abs contents l-dialog'>
<div class='abs editor'>
<mct-include key="ngModel.dialog.template"
parameters="ngModel.dialog.parameters"
ng-model="ngModel.dialog.model">
</mct-include>
</div>
</div>
<div class="abs bottom-bar">
<a ng-repeat="option in ngModel.dialog.options"
href=''

11
platform/commonUI/dialog/res/templates/overlay.html
View File

@ -22,14 +22,9 @@
<div class="abs overlay">
<div class="abs blocker"></div>
<div class="abs holder">
<a href=""
ng-click="ngModel.cancel()"
<a ng-click="ngModel.cancel()"
ng-if="ngModel.cancel"
class="clk-icon icon ui-symbol close">
x
</a>
<div class="abs contents" ng-transclude>
</div>
class="clk-icon icon ui-symbol close">x</a>
<div class="abs contents" ng-transclude></div>
</div>
</div>

112
platform/commonUI/dialog/src/DialogService.js
View File

@ -55,7 +55,7 @@ define(
this.dialogVisible = false;
};
DialogService.prototype.getDialogResponse = function (key, model, resultGetter) {
DialogService.prototype.getDialogResponse = function (key, model, resultGetter, typeClass) {
// We will return this result as a promise, because user
// input is asynchronous.
var deferred = this.$q.defer(),
@ -84,27 +84,20 @@ define(
model.confirm = confirm;
model.cancel = cancel;
if (this.dialogVisible) {
// Only one dialog should be shown at a time.
// The application design should be such that
// we never even try to do this.
this.$log.warn([
"Dialog already showing; ",
"unable to show ",
model.name
].join(""));
deferred.reject();
} else {
if (this.canShowDialog(model)) {
// Add the overlay using the OverlayService, which
// will handle actual insertion into the DOM
this.overlay = this.overlayService.createOverlay(
key,
model
model,
typeClass || "t-dialog"
);
// Track that a dialog is already visible, to
// avoid spawning multiple dialogs at once.
this.dialogVisible = true;
} else {
deferred.reject();
}
return deferred.promise;
@ -157,6 +150,99 @@ define(
);
};
/**
* Tests if a dialog can be displayed. A modal dialog may only be
* displayed if one is not already visible.
* Will log a warning message if it can't display a dialog.
* @returns {boolean} true if dialog is currently visible, false
* otherwise
*/
DialogService.prototype.canShowDialog = function(dialogModel){
if (this.dialogVisible){
// Only one dialog should be shown at a time.
// The application design should be such that
// we never even try to do this.
this.$log.warn([
"Dialog already showing; ",
"unable to show ",
dialogModel.title
].join(""));
return false;
} else {
return true;
}
};
/**
* A user action that can be performed from a blocking dialog. These
* actions will be rendered as buttons within a blocking dialog.
*
* @typedef DialogOption
* @property {string} label a label to be displayed as the button
* text for this action
* @property {function} callback a function to be called when the
* button is clicked
*/
/**
* A description of the model options that may be passed to the
* showBlockingMessage method. Note that the DialogModel desribed
* here is shared with the Notifications framework.
* @see NotificationService
*
* @typedef DialogModel
* @property {string} title the title to use for the dialog
* @property {string} severity the severity level of this message.
* These are defined in a bundle constant with key 'dialogSeverity'
* @property {string} hint the 'hint' message to show below the title
* @property {string} actionText text that indicates a current action,
* shown above a progress bar to indicate what's happening.
* @property {number} progress a percentage value (1-100)
* indicating the completion of the blocking task
* @property {string} progressText the message to show below a
* progress bar to indicate progress. For example, this might be
* used to indicate time remaining, or items still to process.
* @property {boolean} unknownProgress some tasks may be
* impossible to provide an estimate for. Providing a true value for
* this attribute will indicate to the user that the progress and
* duration cannot be estimated.
* @property {DialogOption} primaryOption an action that will
* be added to the dialog as a button. The primary action can be
* used as the suggested course of action for the user. Making it
* distinct from other actions allows it to be styled differently,
* and treated preferentially in banner mode.
* @property {DialogOption[]} options a list of actions that will
* be added to the dialog as buttons.
*/
/**
* Displays a blocking (modal) dialog. This dialog can be used for
* displaying messages that require the user's
* immediate attention. The message may include an indication of
* progress, as well as a series of actions that
* the user can take if necessary
* @param {DialogModel} dialogModel defines options for the dialog
* @param {typeClass} string tells overlayService that this overlay should use appropriate CSS class
* @returns {boolean}
*/
DialogService.prototype.showBlockingMessage = function(dialogModel) {
if (this.canShowDialog(dialogModel)) {
// Add the overlay using the OverlayService, which
// will handle actual insertion into the DOM
this.overlay = this.overlayService.createOverlay(
"overlay-blocking-message",
dialogModel,
"t-dialog-sm"
);
// Track that a dialog is already visible, to
// avoid spawning multiple dialogs at once.
this.dialogVisible = true;
return true;
} else {
return false;
}
};
return DialogService;
}

8
platform/commonUI/dialog/src/OverlayService.js
View File

@ -28,7 +28,7 @@ define(
// Template to inject into the DOM to show the dialog; really just points to
// the a specific template that can be included via mct-include
var TEMPLATE = '<mct-include ng-model="overlay" key="key"></mct-include>';
var TEMPLATE = '<mct-include ng-model="overlay" key="key" ng-class="typeClass"></mct-include>';
/**
@ -71,8 +71,11 @@ define(
* @param {object} overlayModel the model to pass to the
* included overlay template (this will be passed
* in via ng-model)
* @param {string} typeClass the element class to use in rendering
* the overlay. Can be specified to provide custom styling of
* overlays
*/
OverlayService.prototype.createOverlay = function (key, overlayModel) {
OverlayService.prototype.createOverlay = function (key, overlayModel, typeClass) {
// Create a new scope for this overlay
var scope = this.newScope(),
element;
@ -90,6 +93,7 @@ define(
// Populate the scope; will be passed directly to the template
scope.overlay = overlayModel;
scope.key = key;
scope.typeClass = typeClass || 't-dialog';
// Create the overlay element and add it to the document's body
element = this.$compile(TEMPLATE)(scope);

14
platform/commonUI/dialog/test/DialogServiceSpec.js
View File

@ -116,7 +116,19 @@ define(
dialog: dialogModel,
confirm: jasmine.any(Function),
cancel: jasmine.any(Function)
}
},
't-dialog'
);
});
it("invokes the overlay service with the correct parameters when" +
" a blocking dialog is requested", function() {
var dialogModel = {};
expect(dialogService.showBlockingMessage(dialogModel)).toBe(true);
expect(mockOverlayService.createOverlay).toHaveBeenCalledWith(
"overlay-blocking-message",
dialogModel,
"t-dialog-sm"
);
});

3
platform/commonUI/edit/res/templates/topbar-edit.html
View File

@ -22,7 +22,8 @@
<div class='top-bar edit abs'>
<mct-representation key="'object-header'"
mct-object="domainObject"
parameters="{ mode: 'Edit' }">
parameters="{ mode: 'Edit' }"
class="l-flex-row flex-elem grows object-header">
</mct-representation>
<div class='buttons-main btn-bar buttons abs'>
<mct-representation key="'switcher'"

26
platform/commonUI/formats/bundle.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "Time services bundle",
"description": "Defines interfaces and provides default implementations for handling different time systems.",
"extensions": {
"components": [
{
"provides": "formatService",
"type": "provider",
"implementation": "FormatProvider.js",
"depends": [ "formats[]" ]
}
],
"formats": [
{
"key": "utc",
"implementation": "UTCTimeFormat.js"
}
],
"constants": [
{
"key": "DEFAULT_TIME_FORMAT",
"value": "utc"
}
]
}
}

114
platform/commonUI/formats/src/FormatProvider.js Normal file
View File

@ -0,0 +1,114 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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";
/**
* An object used to convert between numeric values and text values,
* typically used to display these values to the user and to convert
* user input to a numeric format, particularly for time formats.
* @interface {Format}
*/
/**
* Parse text (typically user input) to a numeric value.
* Behavior is undefined when the text cannot be parsed;
* `validate` should be called first if the text may be invalid.
* @method parse
* @memberof Format#
* @param {string} text the text to parse
* @returns {number} the parsed numeric value
*/
/**
* Determine whether or not some text (typically user input) can
* be parsed to a numeric value by this format.
* @method validate
* @memberof Format#
* @param {string} text the text to parse
* @returns {boolean} true if the text can be parsed
*/
/**
* Convert a numeric value to a text value for display using
* this format.
* @method format
* @memberof Format#
* @param {number} value the numeric value to format
* @returns {string} the text representation of the value
*/
/**
* Provides access to `Format` objects which can be used to
* convert values between human-readable text and numeric
* representations.
* @interface FormatService
*/
/**
* Look up a format by its symbolic identifier.
* @method getFormat
* @memberof FormatService#
* @param {string} key the identifier for this format
* @returns {Format} the format
* @throws {Error} errors when the requested format is unrecognized
*/
/**
* Provides formats from the `formats` extension category.
* @constructor
* @implements {FormatService}
* @memberof platform/commonUI/formats
* @param {Array.<function(new : Format)>} format constructors,
* from the `formats` extension category.
*/
function FormatProvider(formats) {
var formatMap = {};
function addToMap(Format) {
var key = Format.key;
if (key && !formatMap[key]) {
formatMap[key] = new Format();
}
}
formats.forEach(addToMap);
this.formatMap = formatMap;
}
FormatProvider.prototype.getFormat = function (key) {
var format = this.formatMap[key];
if (!format) {
throw new Error("FormatProvider: No format found for " + key);
}
return format;
};
return FormatProvider;
});

63
platform/commonUI/formats/src/UTCTimeFormat.js Normal file
View File

@ -0,0 +1,63 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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([
'moment'
], function (
moment
) {
"use strict";
var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
DATE_FORMATS = [
DATE_FORMAT,
"YYYY-MM-DD HH:mm",
"YYYY-MM-DD"
];
/**
* Formatter for UTC timestamps. Interprets numeric values as
* milliseconds since the start of 1970.
*
* @implements {Format}
* @constructor
* @memberof platform/commonUI/formats
*/
function UTCTimeFormat() {
}
UTCTimeFormat.prototype.format = function (value) {
return moment.utc(value).format(DATE_FORMAT);
};
UTCTimeFormat.prototype.parse = function (text) {
return moment.utc(text, DATE_FORMATS).valueOf();
};
UTCTimeFormat.prototype.validate = function (text) {
return moment.utc(text, DATE_FORMATS).isValid();
};
return UTCTimeFormat;
});

68
platform/commonUI/formats/test/FormatProviderSpec.js Normal file
View File

@ -0,0 +1,68 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
define(
['../src/FormatProvider'],
function (FormatProvider) {
'use strict';
var KEYS = [ 'a', 'b', 'c' ];
describe("The FormatProvider", function () {
var mockFormats,
mockLog,
mockFormatInstances,
provider;
beforeEach(function () {
mockFormatInstances = KEYS.map(function (k) {
return jasmine.createSpyObj(
'format-' + k,
[ 'parse', 'validate', 'format' ]
);
});
// Return constructors
mockFormats = KEYS.map(function (k, i) {
function MockFormat() { return mockFormatInstances[i]; }
MockFormat.key = k;
return MockFormat;
});
provider = new FormatProvider(mockFormats);
});
it("looks up formats by key", function () {
KEYS.forEach(function (k, i) {
expect(provider.getFormat(k))
.toEqual(mockFormatInstances[i]);
});
});
it("throws an error about unknown formats", function () {
expect(function () {
provider.getFormat('some-unknown-format');
}).toThrow();
});
});
}
);

56
platform/commonUI/formats/test/UTCTimeFormatSpec.js Normal file
View File

@ -0,0 +1,56 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
define(
['../src/UTCTimeFormat', 'moment'],
function (UTCTimeFormat, moment) {
'use strict';
describe("The UTCTimeFormat", function () {
var format;
beforeEach(function () {
format = new UTCTimeFormat();
});
it("formats UTC timestamps", function () {
var timestamp = 12345670000,
formatted = format.format(timestamp);
expect(formatted).toEqual(jasmine.any(String));
expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
});
it("validates time inputs", function () {
expect(format.validate("1977-05-25 11:21:22")).toBe(true);
expect(format.validate("garbage text")).toBe(false);
});
it("parses valid input", function () {
var text = "1977-05-25 11:21:22",
parsed = format.parse(text);
expect(parsed).toEqual(jasmine.any(Number));
expect(parsed).toEqual(moment.utc(text).valueOf());
});
});
}
);

4
platform/commonUI/formats/test/suite.json Normal file
View File

@ -0,0 +1,4 @@
[
"FormatProvider",
"UTCTimeFormat"
]

40
platform/commonUI/general/bundle.json
View File

@ -18,7 +18,7 @@
"runs": [
{
"implementation": "StyleSheetLoader.js",
"depends": [ "stylesheets[]", "$document" ]
"depends": [ "stylesheets[]", "$document", "THEME" ]
}
],
"stylesheets": [
@ -44,6 +44,14 @@
"key": "indicator",
"templateUrl": "templates/indicator.html"
},
{
"key": "message-banner",
"templateUrl": "templates/message-banner.html"
},
{
"key": "progress-bar",
"templateUrl": "templates/progress-bar.html"
},
{
"key": "time-controller",
"templateUrl": "templates/controls/time-controller.html"
@ -53,13 +61,18 @@
{
"key": "TimeRangeController",
"implementation": "controllers/TimeRangeController.js",
"depends": [ "$scope", "now" ]
"depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT", "now" ]
},
{
"key": "DateTimePickerController",
"implementation": "controllers/DateTimePickerController.js",
"depends": [ "$scope", "now" ]
},
{
"key": "DateTimeFieldController",
"implementation": "controllers/DateTimeFieldController.js",
"depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT" ]
},
{
"key": "TreeNodeController",
"implementation": "controllers/TreeNodeController.js",
@ -107,6 +120,16 @@
"key": "SelectorController",
"implementation": "controllers/SelectorController.js",
"depends": [ "objectService", "$scope" ]
},
{
"key": "ObjectInspectorController",
"implementation": "controllers/ObjectInspectorController.js",
"depends": [ "$scope", "objectService" ]
},
{
"key": "BannerController",
"implementation": "controllers/BannerController.js",
"depends": ["$scope", "notificationService", "dialogService"]
}
],
"directives": [
@ -171,6 +194,11 @@
{
"key": "MCT_SCROLL_Y_ATTRIBUTE",
"value": "mctScrollY"
},
{
"key": "THEME",
"value": "unspecified",
"priority": "fallback"
}
],
"containers": [
@ -232,6 +260,10 @@
"key": "switcher",
"templateUrl": "templates/controls/switcher.html",
"uses": [ "view" ]
},
{
"key": "object-inspector",
"templateUrl": "templates/object-inspector.html"
}
],
"controls": [
@ -242,6 +274,10 @@
{
"key": "datetime-picker",
"templateUrl": "templates/controls/datetime-picker.html"
},
{
"key": "datetime-field",
"templateUrl": "templates/controls/datetime-field.html"
}
],
"licenses": [

492
platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
View File

File diff suppressed because it is too large Load Diff

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
View File

Binary file not shown.

10
platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
View File

@ -76,7 +76,7 @@
<glyph unicode="&#xf4;" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
<glyph unicode="&#xf5;" glyph-name="icon-timer" d="M638 898c0 35.4-28.6 64-64 64h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128c35.4 0 64 28.6 64 64zM510 834c-247.4 0-448-200.6-448-448s200.6-448 448-448 448 200.6 448 448-200.6 448-448 448zM510 386h-336c0 185.2 150.8 336 336 336v-336z" />
<glyph unicode="&#xf6;" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
<glyph unicode="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M832 447.6c0 0.2 0 0.2 0 0.4v320c0 105.6-86.4 192-192 192h-448c-105.6 0-192-86.4-192-192v-320c0-105.6 86.4-192 192-192h263.6l-197.2 445.6 573.6-254zM766.8 300.2l193.8 20.4-576.6 255.4 255.4-576.6 20.4 193.8 257-257.2 107.2 107.2z" />
<glyph unicode="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M894 962h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 322.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
<glyph unicode="&#xe601;" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
<glyph unicode="&#xe602;" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
<glyph unicode="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
@ -85,6 +85,14 @@
<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe608;" glyph-name="icon-info-v15" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
<glyph unicode="&#xe609;" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
<glyph unicode="&#xe610;" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
<glyph unicode="&#xe611;" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
<glyph unicode="&#xe612;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
<glyph unicode="&#xe613;" glyph-name="icon-collapse-pane-left" d="M256 960h-256v-1024h256c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 640l512-320v640z" />
<glyph unicode="&#xe614;" glyph-name="icon-collapse-pane-right" d="M768 960h256v-1024h-256c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192zM512 640l-512-320v640z" />
<glyph unicode="&#xe615;" glyph-name="icon-eye-open" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224z" />
<glyph unicode="&#xe616;" glyph-name="icon-eye-open-no-gleam" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224zM576 416c-53 0-96 43-96 96s43 96 96 96 96-43 96-96c0-53-43-96-96-96z" />
<glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
View File

Binary file not shown.

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
View File

Binary file not shown.

147
platform/commonUI/general/res/sass/_archetypes.scss Normal file
View File

@ -0,0 +1,147 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
/********************************************* COLUMN LAYOUTS STYLES */
@mixin cols($totalCols, $span) {
$cw: 100% / $totalCols;
min-width: (500px / $totalCols) * $span;
@if ($totalCols != $span) {
width: ($cw * $span) - $ueColMargin;
} @else {
width: $cw;
}
}
.cols {
@include clearfix;
.col {
@include box-sizing(border-box);
@include clearfix;
float: left;
margin-left: $ueColMargin;
padding-left: $interiorMargin;
position: relative;
&:first-child {
margin-left: 0;
padding-left: 0;
}
}
&.cols-2 {
$nc: 2;
.col-1 {
@include cols($nc, 1);
}
}
&.cols-2-ff {
// 2 columns, first column is fixed, second is fluid
.col-100px {
width: 100px;
}
}
&.cols-6 {
$nc: 6;
.col-1 {
@include cols($nc, 1);
}
}
&.cols-16 {
$nc: 16;
.col-1 {
@include cols($nc, 1);
}
.col-2 {
@include cols($nc, 2);
}
.col-7 {
@include cols($nc, 7);
}
}
&.cols-32 {
$nc: 32;
.col-2 {
@include cols($nc, 2);
}
.col-15 {
@include cols($nc, 15);
}
}
.l-row {
@include clearfix;
padding: $interiorMargin 0;
}
}
/********************************************* FLEX STYLES */
.l-flex-row,
.l-flex-col {
@include display-flex;
@include flex-wrap(nowrap);
.flex-elem {
min-height: 0; // Needed to allow element to shrink within parent
position: relative;
&:not(.grows) {
@include flex(0 0 auto);
&.flex-can-shrink {
@include flex(0 1 auto);
}
}
&.grows {
@include flex(1 1 auto);
}
}
.flex-container {
// Apply to wrapping elements, mct-includes, etc.
@include display-flex;
@include flex-wrap(nowrap);
@include flex(1 1 auto);
min-height:0;
}
}
.l-flex-row {
@include flex-direction(row);
&.flex-elem { @include flex(1 1 auto); }
.flex-elem {
height: inherit;
line-height: inherit;
min-width: 0;
}
.flex-container { @include flex-direction(row); }
}
.l-flex-col {
@include flex-direction(column);
.flex-elem {
min-height: 0;
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
}
.flex-container { @include flex-direction(column); }
}
.flex-fixed {
@include flex(0 0 auto);
}
.flex-justify-end {
@include justify-content(flex-end);
}

28
platform/commonUI/general/res/sass/_constants.scss
View File

@ -35,20 +35,32 @@ $ltGamma: 20%;
$btnFontSizeToH: 0.45;
/************************** LAYOUT */
$ueTopBarH: 24px; // Change when breadcrumb is enabled
$ueTopBarH: 24px;
$ueTopBarEditH: 30px;
$ueTopBarBtnH: 35px;
$ueFooterH: 25px;
$ueColMargin: 1.5%;
$ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueCollapsedPaneEdgeM: 22px;
$uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabW: 9px;
$uePaneMiniTabCollapsedW: 11px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);
// Panes
$ueBrowseLeftPaneTreeMinW: 150px;
$ueBrowseLeftPaneTreeMaxW: 35%;
$ueBrowseLeftPaneTreeW: 25%;
$ueBrowseRightPaneInspectMinW: 200px;
$ueBrowseRightPaneInspectMaxW: 35%;
$ueBrowseRightPaneInspectW: 20%;
$ueDesktopMinW: 600px;
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 30px;
$ovrTopBarH: 45px;
$ovrFooterH: 24px;
$overlayMargin: 25px;
// Items
$ueBrowseGridItemLg: 200px;
@ -57,7 +69,8 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
// Tabular
@ -106,3 +119,8 @@ $dirImgs: $dirCommonRes + 'images/';
/************************** TIMINGS */
$controlFadeMs: 100ms;
/************************** LIMITS */
$glyphLimit: '\e603';
$glyphLimitUpr: '\0000eb';
$glyphLimitLwr: '\0000ee';

16
platform/commonUI/general/res/sass/_global.scss
View File

@ -34,10 +34,6 @@
font-style: normal;
}
.ui-symbol {
font-family: 'symbolsfont';
}
/************************** HTML ENTITIES */
a {
color: $colorA;
@ -55,7 +51,7 @@ body, html {
color: $colorBodyFg;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
//font-weight: 500;
font-weight: 200;
height: 100%;
width: 100%;
overflow: hidden;
@ -146,6 +142,16 @@ mct-container {
display: none !important;
}
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important;
}
.sep {
color: rgba(#fff, 0.2);
}

33
platform/commonUI/general/res/sass/_icons.scss
View File

@ -29,11 +29,14 @@
}
.ui-symbol {
font-family: 'symbolsfont';
&.type-icon {
color: $colorObjHdrIc;
}
&.icon {
color: $colorKey;
//position: relative;
font-size: inherit;
&.alert {
color: $colorAlert;
&:hover {
@ -69,14 +72,6 @@
position: absolute;
}
//.tree-item .type-icon {
// font-size: 16px; // 16px is crisp size
//}
.l-icon-link:before {
content: "\f4";
}
.l-icon-alert {
display: none !important; // Remove this when alerts are enabled
&:before {
@ -84,3 +79,25 @@
content: "!";
}
}
// NEW!!
.t-item-icon {
// Used in grid-item.html, tree-item, inspector location, more?
@extend .ui-symbol;
@extend .icon;
display: inline-block;
line-height: normal; // This is Ok for the symbolsfont
position: relative;
&.l-icon-link {
&:before {
color: $colorIconLink;
content: "\f4";
height: auto; width: auto;
position: absolute;
left: 0; top: 0; right: 0; bottom: 10%;
@include transform-origin(bottom, left);
@include transform(scale(0.3));
z-index: 2;
}
}
}

112
platform/commonUI/general/res/sass/_inspector.scss Normal file
View File

@ -0,0 +1,112 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
/* Styles for the Inspector pane */
.l-inspect,
.l-inspect table tr td {
font-size: 0.7rem;
}
.l-inspect {
@extend .abs;
background: $colorInspectorBg;
color: $colorInspectorFg;
line-height: 140%;
.pane-header {
color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem;
&:before {
color: pushBack($colorInspectorFg, 10%);
content:'\e615'; // e615 Crosshair symbol
display: inline;
font-family: symbolsfont;
margin-right: $interiorMargin;
vertical-align: bottom;
}
}
ul {
@include box-sizing(border-box);
padding-right: $interiorMargin;
}
ul li,
em {
display: block;
position: relative;
}
ul li {
margin-bottom: $interiorMarginLg;
}
em {
@include border-radius($basicCr);
background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg;
margin-bottom: $interiorMargin;
padding: $formTBPad $formLRPad;
text-transform: uppercase;
}
.inspector-properties {
&:not(.first) {
border-top: 1px solid $colorInspectorSectionHeaderBg;
}
padding: $interiorMarginSm 0;
.label {
color: $colorInspectorPropName;
text-transform: uppercase;
}
.value {
color: $colorInspectorPropVal;
word-break: break-all;
}
}
.inspector-location {
//line-height: 180%;
.location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px;
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.icon {
color: $colorItemTreeIconHover;
}
}
}
&:not(.last) .t-object-label .t-title-label:after {
color: pushBack($colorInspectorFg, 15%);
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
line-height: inherit;
margin-left: $interiorMarginSm;
width: 4px;
}
}
}

51
platform/commonUI/general/res/sass/_limits.scss
View File

@ -1,26 +1,39 @@
@mixin limit($bg, $ic, $glyph) {
background: $bg !important;
//color: $fg !important;
@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
&:before {
//@include pulse(1000ms);
color: $ic;
color: $iconColor;
content: $glyph;
}
}
[class*="s-limit"] {
//white-space: nowrap;
&:before {
display: inline-block;
font-family: symbolsfont;
font-size: 0.75em;
font-style: normal !important;
font-size: 0.8em;
display: inline;
margin-right: $interiorMarginSm;
vertical-align: middle;
}
}
.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };
.s-limit-red { background: $colorLimitRedBg !important; }
.s-limit-yellow { background: $colorLimitYellowBg !important; }
// Handle limit when applied to a tr
tr[class*="s-limit"] {
&.s-limit-red td:first-child {
@include limitGlyph($colorLimitRedIc);
}
&.s-limit-yellow td:first-child {
@include limitGlyph($colorLimitYellowIc);
}
&.s-limit-upr td:first-child:before { content:$glyphLimitUpr; }
&.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
}
// Handle limit when applied directly to a non-tr element
// Assume this is applied to the element that displays the limit value
:not(tr)[class*="s-limit"] {
&.s-limit-red {
@include limitGlyph($colorLimitRedIc);
}
&.s-limit-yellow {
@include limitGlyph($colorLimitYellowIc);
}
&.s-limit-upr:before { content:$glyphLimitUpr; }
&.s-limit-lwr:before { content:$glyphLimitLwr; }
}

7
platform/commonUI/general/res/sass/_main.scss
View File

@ -21,6 +21,7 @@
*****************************************************************************/
@import "effects";
@import "global";
@import "archetypes";
@import "about";
@import "text";
@import "icons";
@ -29,8 +30,7 @@
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
@import "messages";
@import "properties";
@import "inspector";
/********************************* CONTROLS */
@import "controls/breadcrumb";
@ -39,6 +39,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
@import "controls/messages";
@import "controls/time-controller";
@import "mobile/controls/menus";
@ -62,7 +63,6 @@
@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";
@import "user-environ/bottom-bar";
@import "user-environ/tool-bar";
/********************************* VIEWS */
@ -70,7 +70,6 @@
@import "lists/tabular";
@import "plots/plots-main";
@import "iframe";
@import "hide-non-functional";
@import "views";
@import "items/item";
@import "mobile/item";

12
platform/commonUI/general/res/sass/_messages.scss
View File

@ -1,12 +0,0 @@
/* Styles for messages */
.message {
&.block {
@include border-radius($basicCr);
padding: $interiorMarginLg;
}
&.error {
background-color: rgba($colorAlert,0.3);
color: lighten($colorAlert, 20%);
}
}

70
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -41,36 +41,41 @@
width: $d;
}
@mixin trans-prop-nice($props, $t: 500ms) {
@if $t == 0 {
@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
// Multiple $props must be in parans like this: (left, right)
@if $dur == 0 {
@include transition-property(none);
} @else {
@include transition-property($props);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@if $t == 0 {
@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
@if $dur == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-duration($t);
@include transition-property(opacity, background-color, border-color, color);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
@include transition-property(height, bottom, top);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin trans-prop-nice-resize-w($t: 0.5s) {
@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin triangle-right($size, $color) {
@ -94,7 +99,6 @@
}
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
//$size: $size*2;
width: 0;
height: 0;
$slopedB: $size/$ratio solid transparent;
@ -129,6 +133,24 @@
background-size: $d $d;
}
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-90deg,
rgba($c, $a) 0%, rgba($c, $a) 50%,
transparent 50%, transparent 100%
));
background-repeat: repeat;
background-size: $d $d;
}
@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-90deg,
rgba($c, $a) 0%, transparent 50%,
transparent 50%, rgba($c, $a) 100%
));
background-repeat: repeat;
background-size: $d $d;
}
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
$deg: 90deg;
@if ($repeatDir != 'x') {
@ -156,11 +178,11 @@
}
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
&:before {
@include trans-prop-nice("border-color", 0.75s);
//&:before {
//@include trans-prop-nice("border-color", 25ms);
content: '';
display: block;
height: auto;
//height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
@ -170,17 +192,14 @@
top: 2px;
left: 5px;
right: 5px;
height: 1px;
} @else if $direction == "vertical" {
border-left: $w $style darken($b, 15%);
left: 2px;
bottom: 5px;
top: 5px;
}
}
&:not(.disabled):hover:before {
@include trans-prop-nice("border-color", 25ms);
border-color: $colorGrippyInteriorHover;
width: 1px;
}
}
@ -256,6 +275,12 @@
@return percentage($d);
}
@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
// Space to either side of the handle
@return ($splitterD - $splitterHandleD) * 0.5;
}
/*********************************************** CONTROLS, FORM ELEMENTS */
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
@ -347,10 +372,7 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative;
top: 50%;
@include webkitProp(transform, translateY(-50%));
//-webkit-transform: translateY(-50%);
//-ms-transform: translateY(-50%);
//transform: translateY(-50%);
@include transform(translateY(-50%));
}
@mixin verticalCenterBlock($holderH, $itemH) {

162
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@ -22,13 +22,17 @@
$baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;
.s-btn {
@include box-sizing(border-box);
.s-btn,
.s-icon-btn {
@include user-select(none);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
}
.s-btn {
@include box-sizing(border-box);
padding: 0 $pad;
font-size: 0.7rem;
@ -89,6 +93,160 @@ $pad: $interiorMargin * $baseRatio;
}
}
.s-icon-btn {
@extend .ui-symbol;
color: $colorBtnIcon;
&:hover {
color: lighten($colorBtnIcon, $ltGamma);
}
}
.mini-tab {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
//@extend .ui-symbol;
@include desktop {
//@include test(green);
$iconH: $uePaneMiniTabH;
$iconW: $uePaneMiniTabW;
$iconInnerLR: 0;
$arwD: 9px;
$arwOffsetX: 0px;
$arwAnimOffsetX: 2px + $iconInnerLR;
$cBg: pullForward($colorBodyBg, 15%);
$cFg: $cBg;
@include border-radius($basicCr);
//@include boxShdw($shdwBtns);
@include box-sizing(border-box);
@include trans-prop-nice((color, background-color), 100ms);
color: $cFg;
cursor: pointer;
font-family: symbolsfont;
font-size: $arwD;
display: block;
position: absolute;
line-height: $iconH;
height: $iconH; width: $iconW;
text-align: center;
&:hover {
//background-color: $cBg;
color: $colorKey; //pullForward($cFg, $ltGamma);
}
&.collapsed {
// State when the pane this element controls has been collapsed
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
&:before { opacity: 0; }
&:after { opacity: 1; }
&:hover {
&:before { opacity: 1; }
&:after { opacity: 0; }
}
}
&:before,
&:after {
//@include test();
@include trans-prop-nice((left, right, opacity), 250ms);
display: block;
height: 100%;
position: absolute;
}
&:before {
// Always the arrow icon
//@include test(green);
//font-size: $arwD;
width: $arwD;
}
&:after {
// Always icon; content is set in _layout.scss
width: 100%;
text-align: center;
opacity: 0;
}
&.anchor-left {
// |<
text-align: right;
&:before {
content:'\3c'; // Collapse left icon e613
right: $iconInnerLR;
}
//&:hover:before { right: $arwAnimOffsetX; }
&.collapsed {
@include border-left-radius(0);
text-align: left;
&:before {
content:'\3e';
left: $iconInnerLR;
}
&:hover:before { left: $arwAnimOffsetX; }
}
}
&.anchor-right {
// >|
text-align: left;
&:before {
content:'\3e'; // Collapse right icon e614
left: $iconInnerLR;
}
//&:hover:before { left: $arwAnimOffsetX; }
&.collapsed {
@include border-right-radius(0);
&:before {
text-align: right;
content:'\3c';
right: $iconInnerLR;
}
&:hover:before { right: $arwAnimOffsetX; }
}
}
}
}
.mini-tab-icon {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
//@extend .ui-symbol;
@include desktop {
$d: $uePaneMiniTabW;
//@include trans-prop-nice(transform, 150ms);
color: pullForward($colorBodyBg, 15%);
cursor: pointer;
display: block;
font-family: symbolsfont;
font-size: $d;
position: absolute;
height: $d; width: $d;
line-height: $d;
overflow: hidden;
word-break: break-all;
&.collapsed {
$d: $uePaneMiniTabCollapsedW;
width: $d; font-size: $d;
}
&:before,
&:after {
position: absolute;
display: inherit;
}
&:before {
content: '\78'; // X icon
}
&:hover {
color: $colorKey;
//@include transform(scale(1.2));
}
}
}
.l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn

134
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -19,34 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*.control {
// UNUSED?
&.view-control {
.icon {
display: inline-block;
margin: -1px 5px 1px 2px;
vertical-align: middle;
&.triangle-down {
margin: 2px 2px -2px 0px;
}
}
.label {
display: inline-block;
font-size: 11px;
vertical-align: middle;
}
.toggle {
@include border-radius(3px);
display: inline-block;
padding: 1px 6px 4px 4px;
&:hover {
background: rgba(white, 0.1);
}
}
}
}*/
.accordion {
$accordionHeadH: 18px;
@ -155,7 +127,6 @@ label.checkbox.custom {
&:before {
@include border-radius($basicCr * .75);
background: $bg;
//border-bottom: 1px solid lighten($bg, 10%);
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
box-sizing: border-box;
content: " ";
@ -230,16 +201,8 @@ label.checkbox.custom {
/******************************************************** OBJECT-HEADER */
.object-header {
//@include test();
font-size: 1em;
//> .title-label,
//> .type-icon,
//> .context-available {
// //@include tmpBorder(#6666ff);
// //vertical-align: middle;
//}
> .type-icon {
color: $colorObjHdrIc;
font-size: 120%;
@ -248,8 +211,6 @@ label.checkbox.custom {
}
.l-elem-wrapper {
//@include test(#66f, 0.2);
@include webkitProp(justify-content, flex-start);
mct-representation {
// Holds the context-available item
// Must have min-width to make flex work properly
@ -263,19 +224,15 @@ label.checkbox.custom {
}
.title-label {
//@include test(green, 0.9);
color: $colorObjHdrTxt;
@include ellipsize();
//color: pushBack($colorBodyFg, 40%);
@include webkitProp(flex, '0 1 auto');
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
//position: relative;
}
.context-available {
font-size: 0.7em;
@include webkitProp(flex, '0 0 1');
//margin-right: $interiorMargin;
}
@include desktop {
@ -291,13 +248,92 @@ label.checkbox.custom {
}
}
/******************************************************** PROGRESS BAR */
@include keyframes(progress) {
100% { background-position: $progressBarStripeW center; }
}
@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
@include background-image(linear-gradient(-90deg,
rgba($c, $a) 0%, transparent 50%,
transparent 50%, rgba($c, $a) 100%
));
background-position: 0 center;
background-repeat: repeat-x;
background-size: $d 40%;
}
.l-progress-bar {
// Assume will be determinate by default
display: inline-block;
overflow: hidden;
position: relative;
.progress-amt-holder {
@include absPosDefault(1px);
}
.progress-amt,
.progress-amt:before,
.progress-amt:after {
@include absPosDefault();
display: block;
content: '';
}
.progress-amt {
right: auto; // Allow inline width to control }
}
&.indeterminate {
.progress-amt {
width: 100% !important;
}
}
}
.s-progress-bar {
@include border-radius($basicCr);
@include boxIncised(0.3, 4px);
background: $colorProgressBarOuter;
.progress-amt {
@include border-radius($basicCr);
@include boxShdw();
@include border-radius($basicCr - 1);
@include trans-prop-nice(width);
&:before {
background-color: $colorProgressBarAmt;
}
&:after {
// Sheen
@include background-image(linear-gradient(
transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
));
}
}
&:not(.indeterminate) {
.progress-amt:before {
// More subtle anim for determinate progress
@include animation(progress .4s linear infinite);
@include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
}
}
&.indeterminate .progress-amt {
&:before {
// More visible std diag stripe anim for indeterminate progress
@include animation(progress .6s linear infinite);
@include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
}
&:after { display: none; }
}
}
/******************************************************** SLIDERS */
.slider {
$knobH: 100%; //14px;
.slot {
// @include border-radius($basicCr * .75);
//@include sliderTrack();
width: auto;
position: absolute;
top: 0;
@ -306,8 +342,6 @@ label.checkbox.custom {
left: 0;
}
.knob {
//@include btnSubtle();
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorKnob;
&:hover {
@ -355,14 +389,11 @@ label.checkbox.custom {
width: 230px;
.l-month-year-pager {
$pagerW: 20px;
//@include test();
//font-size: 0.8rem;
height: $r1H;
margin-bottom: $interiorMargin;
position: relative;
.pager,
.val {
//@include test(red);
@extend .abs;
}
.pager {
@ -409,7 +440,6 @@ label.checkbox.custom {
}
li {
@include flex(1 0);
//@include test();
margin-left: 1px;
padding: $interiorMargin;
text-align: center;
@ -467,8 +497,6 @@ label.checkbox.custom {
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
@include border-radius(2px);
@include box-sizing(border-box);
//@include boxShdwSubtle();
//border-top: 1px solid lighten($bg, 20%);
&:hover {
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
}

2
platform/commonUI/general/res/sass/controls/_lists.scss
View File

@ -32,7 +32,7 @@
.l-tree-item-flat-list {
// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
.tree-item {
.label {
.t-object-label {
left: $interiorMargin !important;
}
}

7
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -43,6 +43,11 @@
}
&.create-btn {
&:before {
content:'\2b';
display: inline;
font-family: symbolsfont;
}
.title-label {
font-size: 1rem;
}
@ -83,7 +88,7 @@
@include menuUlReset();
li {
@include box-sizing(border-box);
border-top: 1px solid lighten($colorMenuBg, 20%);
border-top: 1px solid pullForward($colorMenuBg, 10%);
color: pullForward($colorMenuBg, 60%);
line-height: $menuLineH;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;

306
platform/commonUI/general/res/sass/controls/_messages.scss Normal file
View File

@ -0,0 +1,306 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
$bgPb: 30%;
$bgPbD: 10%;
background-color: darken($bg, $bgPb);
color: $fg;
&:hover {
background-color: darken($bg, $bgPb - $bgPbD);
}
.s-action {
background-color: darken($bg, $bgPb + $bgPbD);
&:hover {
background-color: darken($bg, $bgPb);
}
}
}
.status.block {
color: $colorStatusDefault;
cursor: default;
display: inline-block;
margin-right: $interiorMargin;
.status-indicator,
.label,
.count {
//@include test(#00ff00);
display: inline-block;
vertical-align: top;
}
.status-indicator {
margin-right: $interiorMarginSm;
}
&.ok .status-indicator,
&.info .status-indicator {
color: $colorStatusInfo;
}
&.alert .status-indicator,
&.warning .status-indicator,
&.caution .status-indicator {
color: $colorStatusAlert;
}
&.error .status-indicator {
color: $colorStatusError;
}
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, .25s);
overflow: hidden;
max-width: 0px;
}
.count {
@include trans-prop-nice(opacity, .25s);
font-weight: bold;
opacity: 1;
}
&:hover {
.label {
max-width: 450px;
width: auto;
}
.count {
opacity: 0;
}
}
}
/* Styles for messages and message banners */
.message {
&.block {
@include border-radius($basicCr);
padding: $interiorMarginLg;
}
&.error {
background-color: rgba($colorAlert,0.3);
color: lighten($colorAlert, 20%);
}
}
.l-message-banner {
$m: $interiorMarginSm;
$lh: $ueFooterH - ($m*2) - 1;
@include box-sizing(border-box);
@include ellipsize();
@include display-flex;
@include flex-direction(row);
@include align-items(center);
position: absolute;
top: $m; right: auto; bottom: $m; left: 50%;
height: auto; width: auto;
line-height: $lh;
max-width: 300px;
padding: 0 $interiorMargin 0 $interiorMargin;
@include transform(translateX(-50%));
&.minimized {
@include transition-property(left, opacity);
@include transition-duration(0.3s);
@include transition-timing-function(ease-in-out);
left: 0;
opacity: 0;
}
&.new {
left: 50%;
opacity: 1;
&:not(.info) {
@include pulse(100ms, 10);
}
}
.banner-elem {
@include flex(0 1 auto);
margin-left: $interiorMargin;
}
a {
display: inline-block;
}
.l-action {
line-height: $lh - 3;
padding: 0 $interiorMargin;
}
.close {
//@include test(red, 0.7);
cursor: pointer;
font-size: 7px;
width: 8px;
}
.l-progress-bar {
$h: $lh - 10;
height: $h;
line-height: $h;
width: 100px;
}
.progress-info { display: none; }
z-index: 10;
}
.s-message-banner {
//@include transition-property(left, opacity);
//@include transition-duration(0.35s);
//@include transition-timing-function(ease-in-out);
}
.s-message-banner {
@include border-radius($controlCr);
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
cursor: pointer;
a { color: inherit; }
.s-action {
@include border-radius($basicCr);
@include trans-prop-nice(background-color);
}
.close {
opacity: 0.5;
&:hover {
opacity: 1;
}
}
&.ok,
&.info {
@include statusBannerColors($colorStatusInfo);
}
&.caution,
&.warning,
&.alert {
@include statusBannerColors($colorStatusAlert);
}
&.error {
@include statusBannerColors($colorStatusError);
}
}
@mixin messageBlock($iconW: 32px) {
.type-icon.message-type {
@include txtShdw($shdwStatusIc);
&:before { content:"\e608"; }
color: $colorStatusDefault;
font-size: $iconW;
padding: 1px;
width: $iconW + 2;
}
.message-severity-info .type-icon.message-type {
&:before { content:"\e608"; }
color: $colorStatusInfo;
}
.message-severity-alert .type-icon.message-type {
&:before { content:"\e610"; }
color: $colorStatusAlert;
}
.message-severity-error .type-icon.message-type {
&:before { content:"\21"; }
color: $colorStatusError;
}
}
/* Paths:
t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
message-type > (icon)
message-contents >
top-bar >
title
hint
editor >
(if displaying list of messages)
ul > li > l-message >
... same as above
bottom-bar
*/
.l-message {
@include display-flex;
@include flex-direction(row);
@include align-items(stretch);
.type-icon.message-type {
//@include test(red);
@include flex(0 1 auto);
position: relative;
}
.message-contents {
//@include test(blue);
@include flex(1 1 auto);
margin-left: $overlayMargin;
position: relative;
.top-bar,
.message-body {
margin-bottom: $interiorMarginLg * 2;
}
}
}
// Message as singleton
.t-message-single {
@include messageBlock(80px);
@include desktop {
.l-message,
.bottom-bar {
@include absPosDefault();
}
.bottom-bar {
top: auto;
height: $ovrFooterH;
}
}
}
// Messages in list
.t-message-list {
@include messageBlock(32px);
.message-contents {
.l-message {
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
@include border-radius($controlCr);
background: rgba($colorOvrFg, 0.1);
margin-bottom: $interiorMargin;
padding: $interiorMarginLg;
.message-contents,
.bottom-bar {
//@include test(green);
position: relative;
}
.message-contents {
font-size: 0.9em;
margin-left: $interiorMarginLg;
.message-action { color: pushBack($colorOvrFg, 20%); }
.bottom-bar { text-align: left; }
}
.top-bar,
.message-body {
margin-bottom: $interiorMarginLg;
}
}
}
@include desktop {
.message-contents .l-message { margin-right: $interiorMarginLg; }
}
}

91
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@ -19,22 +19,49 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.split-layout {
$b: pullForward($colorBodyBg, $contrastRatioPercent);
.splitter {
background-color: $b;
@include border-radius($splitterEndCr);
@include boxShdw($splitterShdw);
overflow: hidden;
.splitter {
// Redo the splitter.
// New look is a simple line.
// Main width is used to provide a good click area, and is always transparent
// :after will be a positioned and colored element that is the handle
//@include test(red);
display: block;
position: absolute;
z-index: 1;
//@if $colorSplitterHover != 'none' {
z-index: 3;
&:after {
// The handle
content:"";
pointer-events: none;
@include absPosDefault(0);
background: $colorSplitterBg;
display: block;
@if $splitterEndCr != 'none' {
@include border-radius($splitterEndCr);
}
}
&:active {
&:after {
background-color: $colorSplitterActive !important;
}
}
@if $colorSplitterHover != 'none' {
&:not(:active) {
&:hover {
background-color: $colorSplitterHover;
&:after {
background-color: $colorSplitterHover !important;
@include trans-prop-nice(background-color, 150ms);
}
//}
}
}
}
}
.split-layout {
$inset: splitterHandleInset($splitterD,$splitterHandleD);
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
@ -49,13 +76,16 @@
}
}
>.splitter {
@include controlGrippy($colorSplitterInterior, horizontal);
cursor: row-resize;
left: 0; right: 0;
width: auto;
height: $splitterW;
left: 0;
right: 0;
height: $splitterD;
&:after {
top: $inset; bottom: $inset;
}
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
@ -69,18 +99,25 @@
}
}
>.splitter {
@include controlGrippy($colorBodyBg, vertical);
bottom: 0;
cursor: col-resize;
width: $splitterW;
}
}
}
.browse-area .splitter {
top: $ueTopBarH + $interiorMarginLg;
}
.edit-area .splitter {
top: 0;
bottom: 0;
&:not(.flush-right) {
width: $splitterD;
&:after {
left: $inset; right: $inset;
}
}
&.flush-right {
width: ceil($splitterD / 2);
&:after {
background-color: transparent;
left: auto; right: 0; width: $splitterHandleD;
}
&.edge-shdw {
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
}
}
}
}
}

29
platform/commonUI/general/res/sass/items/_item.scss
View File

@ -86,27 +86,16 @@
//top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
line-height: $lh;
z-index: 1;
.item-type {
//@include trans-prop-nice("color", $transTime);
@include absPosDefault($iconMargin, false);
//@include test(red);
//color: $colorItemIc;
text-align: center;
font-size: $iconD * 0.95; //6em;
line-height: $iconD;
bottom: auto;
height: $iconD;
top: $iconMargin - 10;
.l-icon-link {
color: $colorIconLink;
height: auto;
line-height: 100%;
.item-type,
.t-item-icon {
//@include test();
@include transform(translateX(-50%) translateY(-55%));
position: absolute;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2;
}
top: 50%; left: 50%;
//height: $iconD; width: $iconD;
font-size: $iconD * 0.95; //6em;
//line-height: normal;
//text-align: center;
}
.item-open {
@include trans-prop-nice("opacity", $transTime);

4
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@ -20,10 +20,12 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
$mobileListIconSize: 30px;
$mobileTitleDescH: 35px;
$mobileOverlayMargin: 10px;
$mobileOverlayMargin: 20px;
$phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3);

15
platform/commonUI/general/res/sass/mobile/_item.scss
View File

@ -49,18 +49,11 @@
}
.item-main {
.item-type {
//@include test(blue);
.item-type,
.t-item-icon {
font-size: $mobileListIconSize;
right: auto;
bottom: auto;
left: 0;
line-height: 100%;
text-align: left;
width: $mobileListIconSize;
.l-icon-link {
bottom: 0;
}
left: $interiorMarginLg + $interiorMargin;
line-height: normal;
}
.item-open {
display: block;

67
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -32,88 +32,77 @@
background-color: $colorMobilePaneLeft;
}
.pane.right-repr {
.pane.right.items {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
#content-area {
.holder-object-and-inspector {
@include slMenuTransitions;
left: $bodyMargin;
right: $bodyMargin;
opacity: 1;
}
}
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
top: 0; left: 0; right: 0; bottom: $ueFooterH;
.create-btn-holder {
// Hide the create button by default in mobile;
// This can be overridden by the examples/mobile bundle
display: none;
}
.holder.l-mobile {
top: $bodyMargin !important;
.holder.holder-treeview-elements {
right: $bodyMargin !important;
bottom: $bodyMargin !important;
left: $bodyMargin !important;
}
// When the tree is hidden, these are the
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.browse-hidetree {
@include user-select(none);
.pane-tree-hidden {
// Sets the left tree menu when the tree
// is hidden.
.pane.left.treeview {
opacity: 0;
right: 100% !important;
width: auto !important;
overflow-y: hidden;
overflow-x: hidden;
@include trans-prop-nice(opacity, 150ms);
opacity: 0 !important;
}
// Sets the right represenation when
// the tree is hidden.
.pane.right-repr {
.pane.right.items {
left: 0 !important;
}
}
.browse-showtree {
.pane-tree-showing {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include user-select(none);
// Sets the left tree menu when the tree is shown.
.pane.left.treeview {
@include trans-prop-nice(opacity, .4s);
@include trans-prop-nice(opacity, 250ms, $delay: 250ms);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1;
display: block !important;
//width: auto !important; // CH CO
right: auto !important;
width: $proporMenuWithView !important;
}
// Sets the right representation when the tree is shown.
.pane.right-repr {
.pane.right.items {
left: $proporMenuWithView !important;
//width: auto !important;
//left: 0 !important;
//transform: translateX($proporMenuWithView);
}
}
.mobile-menu-icon {
.toggle-tree {
color: $colorKey !important;
font-size: 110%;
position: absolute;
top: $bodyMargin + 2;
left: $bodyMargin;
&:after {
content:'m' !important;
font-family: symbolsfont;
}
}
.object-browse-bar {
//@include test();
left: 30px !important;
left: 45px !important;
.context-available {
opacity: 1 !important;
}
@ -153,14 +142,14 @@
}
@include phonePortrait {
.browse-showtree {
.pane-tree-showing {
.pane.left.treeview {
width: $proporMenuOnly !important;
}
.pane.right-repr {
.pane.right.items {
left: 0 !important;
@include webkitProp(transform, translateX($proporMenuOnly));
#content-area {
@include transform(translateX($proporMenuOnly));
.holder-object-and-inspector {
opacity: 0;
}
}

2
platform/commonUI/general/res/sass/mobile/_mixins.scss
View File

@ -20,6 +20,8 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* REQUIRES /platform/commonUI/general/res/sass/mobile/_constants.scss */
// Phones in any orientation
@mixin phone {
@media #{$phonePortrait},

13
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -37,21 +37,18 @@
//@include test(red);
position: absolute;
font-size: 1.1em;
height: $mobileTreeItemH;
line-height: inherit;
right: 0px;
width: $mobileTreeRightArrowW;
text-align: center;
}
.label {
.label,
.t-object-label {
left: 0;
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
line-height: $mobileTreeItemH;
//font-size: 1.1em; // CH CO
.type-icon {
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
}
.title-label {
}
line-height: inherit;
}
}
}

2
platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@ -22,7 +22,6 @@
// Override the Create menu for mobile
@include phoneandtablet {
.menu-element {
.super-menu {
$d: 250px;
width: $d;
@ -39,5 +38,4 @@
}
}
}
}
}

61
platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
View File

@ -1,16 +1,12 @@
@include phoneandtablet {
.overlay {
$m: 0;
.clk-icon.close {
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
}
> .holder {
@include border-radius($m);
top: $m;
right: $m;
bottom: $m;
left: $m;
height: 90%; width: 90%;
> .contents {
top: $mobileOverlayMargin;
right: $mobileOverlayMargin;
@ -22,24 +18,27 @@
margin-right: 1.2em;
}
}
.form.editor {
border: none;
.contents {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
}
}
@include phone {
.overlay > .holder > .contents .form.editor .contents .form-row {
.overlay > .holder {
//@include test(orange); // This works!
$m: 0;
@include border-radius($m);
top: $m;
right: $m;
bottom: $m;
left: $m;
height: auto; width: auto;
min-width: 200px; min-height: 200px;
max-height: 100%; max-width: 100%;
overflow: auto;
@include transform(none);
.editor .form .form-row {
> .label,
> .controls {
//@include test(blue);
@ -53,4 +52,30 @@
}
}
}
.contents {
.abs.top-bar,
.abs.editor,
.abs.message-body,
.abs.bottom-bar {
//@include test(orange);
top: auto; right: auto; bottom: auto; left: auto;
height: auto; width: auto;
margin-bottom: $interiorMarginLg * 2;
position: relative;
}
}
}
.t-dialog-sm .overlay > .holder {
//@include test(blue);
height: auto; max-height: 100%;
}
}
@include phonePortrait {
.overlay > .holder {
.contents .bottom-bar {
text-align: center;
}
}
}

109
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -20,6 +20,7 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.overlay {
font-size: 90%;
.blocker {
background: $colorOvrBlocker;
z-index: 100;
@ -27,42 +28,74 @@
.clk-icon.close {
font-size: 0.8rem;
position: absolute;
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
top: $interiorMarginLg;
right: $interiorMarginLg;
bottom: auto;
left: auto;
z-index: 100;
}
>.holder {
$i: 15%;
> .holder {
//$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3);
color: $colorOvrFg;
top: $i; right: $i; bottom: $i; left: $i;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
@include transform(translateX(-50%) translateY(-50%));
height: 70%;
width: 50%;
min-height: 300px;
max-height: 800px;
min-width: 600px;
max-width: 1000px;
z-index: 101;
>.contents {
> .contents {
$m: $overlayMargin;
top: $m; right: $m; bottom: $m; left: $m;
top: $m;
right: $m;
bottom: $m;
left: $m;
//.top-bar,
//.editor,
//.bottom-bar {
// @include absPosDefault();
//}
}
}
.title {
@include ellipsize();
font-size: 1.2em;
line-height: 120%;
margin-bottom: $interiorMargin;
}
.top-bar {
.hint {
color: pushBack($colorOvrFg, 20%);
}
.abs.top-bar {
height: $ovrTopBarH;
}
.editor {
top: $ovrTopBarH + ($interiorMargin * 2);
bottom: $ovrFooterH + $interiorMargin * 2;
left: 0; right: 0;
.abs.editor,
.abs.message-body {
top: $ovrTopBarH + $interiorMarginLg;
bottom: $ovrFooterH + $interiorMarginLg;
left: 0;
right: 0;
overflow: auto;
.field.l-med {
input[type='text'] {
width: 100%;
}
}
}
.bottom-bar {
top: auto; right: 0; bottom: 0; left: 0;
overflow: visible;
//font-size: 1em;
height: $ovrFooterH;
text-align: right;
.s-btn {
$bg: $colorOvrBtnBg;
@ -74,25 +107,37 @@
line-height: $ovrFooterH;
margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3;
//&.major {
// @extend .s-btn.major;
// &:hover {
// @extend .s-btn.major:hover;
// }
//}
&:first-child {
margin-left: 0;
}
}
.contents.l-dialog {
$myM: $interiorMargin;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
overflow: auto;
.field.l-med {
input[type='text'] {
}
.abs.bottom-bar {
top: auto;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
//font-size: 1em;
height: $ovrFooterH;
}
.l-progress-bar {
$h: $progressBarHOverlay;
display: block;
height: $h;
line-height: $h;
margin: .5em 0;
width: 100%;
}
}
}
}
.t-dialog-sm .overlay > .holder {
// Used for blocker and in-progress dialogs, modal alerts, etc.
//@include test(red);
$h: 225px;
min-height: $h;
height: $h;
}

161
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -20,30 +20,22 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.abs.search-holder {
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;
&.active {
height: auto;
bottom: 0;
}
top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
z-index:5;
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
.search {
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
.holder-search {
$iconWidth: 20px;
$leftMargin: 6px;
$rightPadding: 5px;
@include webkitVal(display, flex);
//display: flex;
@include webkitProp(flex-direction, column);
//flex-direction: column;
height: 100%;
.search-bar {
$textInputHeight: 19px; // This is equal to the default value, 19px
@ -52,38 +44,25 @@
font-size: 0.8em;
max-width: 250px;
position: relative;
width: 100%;
.search-input,
.search-icon {
}
.search-input {
height: $treeSearchInputBarH;
line-height: $treeSearchInputBarH;
padding-top: 0;
padding-bottom: 0;
}
.search-icon,
&:before,
.clear-icon,
.menu-icon {
//@include test(#008800);
@include box-sizing(border-box);
color: $colorInputIcon;
height: $iconD; width: $iconD;
height: $iconD;
width: $iconD;
line-height: $iconD;
position: absolute;
text-align: center;
top: $iconEdgeM;
}
.clear-icon,
.menu-icon {
cursor: pointer;
@include transition(color, .25s);
}
.search-input {
position: relative;
width: 100%;
@ -92,31 +71,21 @@
// Make work for mct-control textfield
input {
width: 100%;
width: inherit; // was 100%
}
}
.search-icon {
//color: $colorItemFg;
&:before {
// Magnify glass icon
content:'\4d';
font-family: symbolsfont;
left: $interiorMarginSm;
transition: visibility .15s, opacity .15s, color .2s;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
&.content {
// Make icon invisible whenever there is text input
//visibility: hidden;
//opacity: 0;
}
}
// Make icon invisible when the text input is focused
.search-input:focus + div.search-icon {
//visibility: hidden;
//opacity: 0;
}
// Make icon lighten when hovering over search bar
.search-input:hover + div.search-icon {
&:hover:before {
color: pullForward($colorInputIcon, 10%);
}
@ -126,10 +95,7 @@
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
transition: visibility .15s, opacity .15s, color .2s;
&.content {
&.show {
visibility: visible;
opacity: 1;
}
@ -140,6 +106,8 @@
}
.menu-icon {
// 'v' invoke menu icon
&:before { content: '\76'; }
font-size: 0.8em;
padding-right: $iconEdgeM;
right: $iconEdgeM;
@ -152,43 +120,19 @@
.search-menu-holder {
float: right;
//margin-top: $textInputHeight - 2px;
//left: -50px;
left: -20px;
z-index: 1;
z-index: 70;
transition: visibility .05s, opacity .05s;
&.off {
visibility: hidden;
opacity: 0;
}
}
// Hovering reveals menu
.menu-icon:hover + div.search-menu-holder {
visibility: visible;
}
div.search-menu-holder:hover {
visibility: visible;
}
}
.active-filter-display {
//order: 2;
$s: 0.65em;
$p: $interiorMargin;
@include border-radius($basicCr);
@include box-sizing(border-box);
line-height: 130%;
padding: $p 0;
padding-left: $s * 2.25;
font-size: $s;
//background-color: rgba(#000, 0.3);
//border-radius: $basicCr;
margin-top: $interiorMarginSm;
.clear-filters-icon {
color: $colorInputIcon;
@ -198,43 +142,28 @@
left: 1px;
cursor: pointer;
}
// Transition looks weird when the results list has none
//transition: visibility .2s, opacity .2s;
&.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
}
}
.search-scroll {
order: 3;
margin-top: 4px;
// Adjustable scrolling size
overflow-y: auto;
top: auto;
height: auto;
max-height: 100%;
position: relative;
.load-icon {
position: relative;
.search-results {
@include trans-prop-nice((opacity, visibility), 250ms);
margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
padding-right: $interiorMargin;
.hint {
margin-bottom: $interiorMarginLg;
font-size: 0.65em;
opacity: 0.6;
}
&.active {
visibility: visible;
opacity: 1;
}
.load-more-button {
margin-top: $interiorMargin 0;
font-size: 0.8em;
position: relative;
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px;
@include transform(translateX(-50%));
display: inline-block;
margin-top: $interiorMargin;
padding: 0 $interiorMarginLg;
font-size: 0.75em;
margin-left: 50%;
white-space: nowrap;
}
}

39
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -52,7 +52,6 @@ ul.tree {
font-size: 0.75em;
width: $treeVCW;
$runningItemW: $interiorMargin + $treeVCW;
// NOTE: [Mobile] Removed Hover on Mobile
@include desktop {
&:hover {
color: $colorItemTreeVCHover !important;
@ -60,25 +59,34 @@ ul.tree {
}
}
.label {
.label,
.t-object-label {
display: block;
// @include test(orange);
@include absPosDefault();
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
line-height: $menuLineH;
//left: $runningItemW;
.t-item-icon {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
position: absolute;
left: $interiorMargin;
top: 50%;
width: $treeTypeIconH;
@include transform(translateY(-50%));
}
.type-icon {
//@include absPosDefault(0, false);
$d: $treeTypeIconH; // 16px is crisp size
$d: $treeTypeIconH;
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $d;
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
left: $interiorMargin;
position: absolute;
@include verticalCenterBlock($menuLineHPx, $d);
@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
line-height: 100%;
right: auto; width: $d;
right: auto; width: $treeTypeIconH;
.icon {
&.l-icon-link,
@ -100,7 +108,8 @@ ul.tree {
}
}
}
.title-label {
.title-label,
.t-title-label {
@include absPosDefault();
display: block;
left: $runningItemW + ($interiorMargin * 3);
@ -116,7 +125,7 @@ ul.tree {
.view-control {
color: $colorItemTreeSelectedVC;
}
.label .type-icon {
.t-object-label .t-item-icon {
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
}
}
@ -125,9 +134,9 @@ ul.tree {
// NOTE: [Mobile] Removed Hover on Mobile
@include desktop {
&:hover {
background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
color: pullForward($colorBodyFg, 20%);
.icon {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.t-item-icon {
color: $colorItemTreeIconHover;
}
}
@ -152,7 +161,7 @@ ul.tree {
}
.tree-item {
.label {
.t-object-label {
left: $interiorMargin + $treeVCW;
}
}

72
platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
View File

@ -1,72 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web 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 Web 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.
*****************************************************************************/
.ue-bottom-bar {
background: $colorFooterBg;
color: lighten($colorBodyBg, 30%);
font-size: .7rem;
//line-height: $ueFooterH - 4px;
//line-height: $ueFooterH; // New status bar design
.status-holder {
//@include border-radius($basicCr * 1.75); // New status bar design
@include box-sizing(border-box);
//background: $colorFooterBg;
//border-bottom: 1px solid lighten($colorBodyBg, 10%); // New status bar design
@include absPosDefault($interiorMargin);
@include ellipsize();
line-height: $ueFooterH - ($interiorMargin * 2);
right: 120px;
text-transform: uppercase;
}
.app-logo {
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
left: auto;
cursor: pointer;
//font-size: 0.8em;
//line-height: $ueFooterH - 10px;
//padding-top: 1px;
//text-transform: uppercase;
&.logo-openmctweb {
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
}
}
}
.status.block {
//display: inline-block;
display: inline; // New status bar design. Inline to support ellipsis overflow
margin-right: $interiorMarginLg;
.status-indicator {
//@include border-radius($controlCr * 0.9);
//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
//@include text-shadow(rgba(black, 0.3) 0 0 2px);
display: inline-block;
margin-right: $interiorMarginSm;
color: $colorKey;
&.ok {
color: #009900;
}
&.caution {
color: #ffaa00;
}
}
}

6
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -29,11 +29,13 @@
border-color: lighten($bc, 10%);
}
}
>.object-header.abs {
//@include test(red);
.object-top-bar {
font-size: 0.75em;
height: $ohH;
line-height: $ohH;
.left {
padding-right: $interiorMarginLg;
}
}
>.object-holder.abs {
top: $ohH + $interiorMargin;

359
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -19,23 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@mixin cols($totalCols, $span) {
$cw: 100% / $totalCols;
min-width: (500px / $totalCols) * $span;
@if ($totalCols != $span) {
width: ($cw * $span) - $ueColMargin;
} @else {
width: $cw;
}
}
.holder-all {
$myM: 0; // $interiorMarginSm;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
}
.browse-area,
.edit-area,
@ -48,7 +31,7 @@
}
.contents {
$myM: 0; //$interiorMargin;
$myM: 0;
box-sizing: border-box;
position: absolute;
top: $myM;
@ -63,45 +46,10 @@
}
}
.bar {
.icon.major {
margin-right: $interiorMargin;
}
&.abs {
text-wrap: none;
white-space: nowrap;
&.left,
.left {
width: 45%;
right: auto;
}
&.right,
.right {
width: 45%;
left: auto;
text-align: right;
.icon.major {
margin-left: $interiorMargin * 3;
}
}
.l-flex,
&.l-flex {
.left,
.right {
width: auto;
}
}
}
}
.user-environ {
.browse-area,
.edit-area,
.editor {
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
right: $bodyMargin;
bottom: $ueFooterH + $bodyMargin;
left: $bodyMargin;
top: 0; left: 0; right: 0; bottom: $ueFooterH;
}
.browse-area,
@ -115,101 +63,48 @@
.edit-area {
$tbH: $btnToolbarH + $interiorMargin;
top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
left: $bodyMargin;
right: $bodyMargin;
bottom: $bodyMargin + $ueFooterH;
.tool-bar {
bottom: auto;
height: $tbH;
line-height: $btnToolbarH;
}
.work-area {
.object-holder.work-area {
top: $tbH + $interiorMargin * 2;
overflow: auto;
}
}
// from _bottom-bar.scss
.ue-bottom-bar {
//@include absPosDefault($bodyMargin);
@include absPosDefault(0); // New status bar design
@include absPosDefault(0);// New status bar design
top: auto;
height: $ueFooterH;
line-height: $ueFooterH - ($interiorMargin * 2);
background: $colorFooterBg;
color: lighten($colorBodyBg, 30%);
font-size: .7rem;
.status-holder {
//right: $ueAppLogoW + $bodyMargin; New status bar design
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
@include ellipsize();
right: 120px;
text-transform: uppercase;
z-index: 1;
}
.app-logo {
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
cursor: pointer;
left: auto;
width: $ueAppLogoW;
z-index: 2;
&.logo-openmctweb {
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
}
}
}
.cols {
@include clearfix;
.col {
@include box-sizing(border-box);
@include clearfix;
// background: rgba(#ffcc00, 0.2);
float: left;
margin-left: $ueColMargin;
padding-left: $interiorMargin;
position: relative;
&:first-child {
margin-left: 0;
padding-left: 0;
}
}
&.cols-2 {
$nc: 2;
.col-1 {
@include cols($nc, 1);
}
}
&.cols-2-ff {
// 2 columns, first column is fixed, second is fluid
.col-100px {
width: 100px;
}
}
&.cols-6 {
$nc: 6;
.col-1 {
@include cols($nc, 1);
}
}
&.cols-16 {
$nc: 16;
.col-1 {
@include cols($nc, 1);
}
.col-2 {
@include cols($nc, 2);
}
.col-7 {
@include cols($nc, 7);
}
}
&.cols-32 {
$nc: 32;
.col-2 {
@include cols($nc, 2);
}
.col-15 {
@include cols($nc, 15);
}
}
.l-row {
@include clearfix;
padding: $interiorMargin 0;
}
}
.browse-mode {
.split-layout {
.split-pane-component.pane.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneW;
}
}
}
@ -226,23 +121,63 @@
}
.pane {
@include box-sizing(border-box);
position: absolute;
&.treeview.left {
.create-btn-holder {
bottom: auto;
top: 0;
.pane-header {
text-transform: uppercase;
height: $ueTopBarH;
.wrapper.menu-element {
position: absolute;
bottom: $interiorMargin;
line-height: $ueTopBarH;
}
.primary-pane {
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
z-index: 2;
}
.mini-tab-icon.toggle-pane {
z-index: 5;
@include desktop {
$d: $uePaneMiniTabH;
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
top: $bodyMargin;
height: $d;
line-height: $d;
&:after {
// Always the icon that shows when the pane is collapsed
opacity: 0;
}
&.collapsed {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
.search-holder {
top: $ueTopBarH + $interiorMarginLg;
&.toggle-tree.anchor-left {
left: 0;
@include transform(translateX(-1 * $paneExpandedOffset));
&:after {
content: '\6d'; // Menu 'hamburger' icon
}
&.collapsed {
left: 0;
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
}
&:not(.collapsed):before {
@include trans-prop-nice(opacity, 200ms, 200ms);
}
}
&.toggle-inspect.anchor-right {
right: $bodyMargin;
&:after {
content: '\e615'; // e615: Crosshair icon; was e608: Info "i" icon
}
&.collapsed {
right: $interiorMargin;
}
}
.tree-holder {
overflow: auto;
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
}
}
&.items {
@ -256,42 +191,35 @@
}
.split-layout {
&.horizontal {
// Slides up and down
> .pane {
// @include test();
margin-top: $interiorMargin;
&:first-child {
margin-top: 0;
}
}
}
&.vertical {
// Slides left and right
> .pane {
// @include test();
margin-left: $interiorMargin;
> .holder {
left: 0;
// Specific elements margins
.holder.holder-treeview-elements {
top: $bodyMargin;
right: 0;
}
&:first-child {
margin-left: 0;
.holder {
right: $interiorMarginSm;
}
}
bottom: $bodyMargin;
left: $bodyMargin;
}
.holder.holder-object-and-inspector {
top: 0;
right: 0;
bottom: 0;
left: 0;
.holder-object {
top: $bodyMargin;
bottom: $bodyMargin;
}
.holder-inspector-elements {
top: $bodyMargin;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
}
}
}
.object-holder {
overflow: hidden; // Contained objects need to handle their own overflow now
top: $ueTopBarH + $interiorMarginLg;
> ng-include {
@include absPosDefault(0, auto);
}
top: $ueTopBarH + $interiorMarginLg;
&.l-controls-visible {
&.l-time-controller-visible {
bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
@ -317,30 +245,101 @@
}
}
/***************************************************** OBJECT BROWSE BAR */
.object-browse-bar {
//@include test(blue);
@include absPosDefault(0, visible);
@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
@include box-sizing(border-box);
height: $ueTopBarH;
line-height: $ueTopBarH;
white-space: nowrap;
.left {
padding-right: $interiorMarginLg * 2;
padding-right: $interiorMarginLg;
.l-back {
display: inline-block;
float: left;
margin-right: $interiorMarginLg;
}
}
}
.l-flex {
@include webkitVal('display', 'flex');
@include webkitProp('flex-flow', 'row nowrap');
.left {
//@include test(red);
@include webkitProp(flex, '1 1 0');
padding-right: $interiorMarginLg;
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.pane-tree-hidden {
// Sets the left tree menu when the tree is hidden.
.tree-holder,
.splitter-treeview,
.holder-treeview-elements {
opacity: 0;
}
}
.pane-tree-showing {
// Sets the left tree menu when the tree is shown.
.tree-holder,
.splitter-treeview {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
.holder-treeview-elements {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
}
}
.pane-inspect-showing {
.l-object-and-inspector {
.l-inspect,
.splitter-inspect {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
}
}
.pane-inspect-hidden {
.l-object-and-inspector {
.t-inspect {
z-index: 1 !important; // Move down so that primary pane elements are clickable
}
.l-inspect,
.splitter-inspect {
opacity: 0;
}
}
}
@include desktop {
.holder-all {
min-width: $ueDesktopMinW;
}
.split-layout {
.split-pane-component.pane {
&.treeview.left {
min-width: $ueBrowseLeftPaneTreeMinW;
max-width: $ueBrowseLeftPaneTreeMaxW;
width: $ueBrowseLeftPaneTreeW;
}
&.t-inspect.right {
min-width: $ueBrowseRightPaneInspectMinW;
max-width: $ueBrowseRightPaneInspectMaxW;
width: $ueBrowseRightPaneInspectW;
z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
}
}
}
.pane.treeview.left .tree-holder {
padding-right: $interiorMargin;
}
.pane-tree-hidden {
.pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
}
.pane-inspect-hidden .l-object-and-inspector {
.pane.left { right: $ueCollapsedPaneEdgeM !important; }
}
.pane:not(.resizing) {
@include trans-prop-nice-resize-w(250ms);
}
.pane.primary-pane .object-browse-bar {
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
}
}

1
platform/commonUI/general/res/templates/bottombar.html
View File

@ -26,5 +26,6 @@
key="indicator.template">
</mct-include>
</div>
<mct-include key="'message-banner'"></mct-include>
<mct-include key="'about-logo'"></mct-include>
</div>

20
platform/commonUI/general/res/templates/controls/datetime-field.html Normal file
View File

@ -0,0 +1,20 @@
<span class="s-btn"
ng-controller="DateTimeFieldController">
<input type="text"
ng-model="textValue"
ng-class="{ error: textInvalid }">
</input>
<a class="ui-symbol icon icon-calendar"
ng-if="structure.format === 'utc' || !structure.format"
ng-click="picker.active = !picker.active">
</a>
<mct-popup ng-if="picker.active">
<div mct-click-elsewhere="picker.active = false">
<mct-control key="'datetime-picker'"
ng-model="ngModel"
field="field"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>

41
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -22,47 +22,24 @@
<div ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder">
<span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
<span class="l-time-range-input" ng-controller="ToggleController as t1">
<!--<span class="lbl">Start</span>-->
<span class="s-btn time-range-start">
<input type="text"
ng-model="boundsModel.start"
ng-class="{ error: !boundsModel.startValid }">
</input>
<a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
<mct-popup ng-if="t1.isActive()">
<div mct-click-elsewhere="t1.setState(false)">
<mct-control key="'datetime-picker'"
<span class="l-time-range-input">
<mct-control key="'datetime-field'"
structure="{ format: parameters.format }"
ng-model="ngModel.outer"
field="'start'"
options="{ hours: true }">
class="time-range-start">
</mct-control>
</div>
</mct-popup>
</span>
</span>
<span class="l-time-range-inputs-elem lbl">to</span>
<span class="l-time-range-input" ng-controller="ToggleController as t2">
<!--<span class="lbl">End</span>-->
<span class="s-btn l-time-range-input">
<input type="text"
ng-model="boundsModel.end"
ng-class="{ error: !boundsModel.endValid }">
</input>
<a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()">
</a>
<mct-popup ng-if="t2.isActive()">
<div mct-click-elsewhere="t2.setState(false)">
<mct-control key="'datetime-picker'"
<mct-control key="'datetime-field'"
structure="{ format: parameters.format }"
ng-model="ngModel.outer"
field="'end'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>&nbsp;
class="time-range-end">
</mct-control>&nbsp;
</span>
</div>
@ -97,7 +74,7 @@
<div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks">
<div
ng-repeat="tick in ticks"
ng-repeat="tick in ticks track by $index"
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
class="tick tick-x"
>

15
platform/commonUI/general/res/templates/indicator.html
View File

@ -19,20 +19,21 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
<!--<div ng-init="reps = [1,2,3]"></div>-->
<div class='status block'
title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()'
ng-class='ngModel.getClass()'
ng-class='ngModel.getGlyphClass()'
ng-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator"
ng-class='ngModel.getGlyphClass()'>
<span class="ui-symbol status-indicator">
{{ngModel.getGlyph()}}
</span>
<span class="label"
</span><span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
</span>
<a href=''
</span><span class="count">
<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
</span><a href=''
class="ui-symbol"
ng-if="ngModel.configure">
G

15
platform/commonUI/general/res/templates/label.html
View File

@ -19,16 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<span class="label s-label">
<span class='ui-symbol icon type-icon'>
{{type.getGlyph()}}
<span
class='ui-symbol icon l-icon-link'
ng-show="location.isLink()"
></span>
<span class='ui-symbol icon l-icon-alert'></span>
</span>
<span class='title-label'>
{{model.name}}
</span>
<span class="t-object-label">
<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
<span class='t-title-label'>{{model.name}}</span>
</span>

21
platform/commonUI/general/res/templates/message-banner.html Normal file
View File

@ -0,0 +1,21 @@
<div ng-controller="BannerController" ng-show="active.notification"
class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
'minimized': active.notification.model.minimized,
'new': !active.notification.model.minimized}"
ng-click="maximize(active.notification)">
<span class="banner-elem label">
{{active.notification.model.title}}
</span>
<span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
<mct-include key="'progress-bar'" class="banner-elem"
ng-model="active.notification.model">
</mct-include>
</span>
<a ng-hide="active.notification.model.primaryOption === undefined"
class="banner-elem l-action s-action"
ng-click="action(active.notification.model.primaryOption.callback, $event)">
{{active.notification.model.primaryOption.label}}
</a>
<a class="banner-elem ui-symbol close" ng-click="dismiss(active.notification, $event)">
&#x78;</a>
</div>

63
platform/commonUI/general/res/templates/object-inspector.html Normal file
View File

@ -0,0 +1,63 @@
<!--
Open MCT Web, Copyright (c) 2014-2015, United States Government
as represented by the Administrator of the National Aeronautics and Space
Administration. All rights reserved.
Open MCT Web 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 Web 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.
-->
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="abs holder holder-inspector-elements l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div>
</span>

10
platform/commonUI/general/res/templates/progress-bar.html Normal file
View File

@ -0,0 +1,10 @@
<span class="l-progress-bar s-progress-bar"
ng-class="{ indeterminate:ngModel.unknownProgress }">
<span class="progress-amt-holder">
<span class="progress-amt" style="width: {{ngModel.progress}}%"></span>
</span>
</span>
<div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
<span class="progress-amt-text" ng-show="ngModel.progress > 0">{{ngModel.progress}}% complete. </span>
{{ngModel.progressText}}
</div>

Some files were not shown because too many files have changed in this diff Show More