ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-25 05:25:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Merge] Merging in latest master

Browse Source 
open #188
This commit is contained in:
Charles Hacskaylo 2015-11-04 13:52:31 -08:00
commit 32fb84a3cd
173 changed files with 17964 additions and 5107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Procfile
View File

@ -1 +1 @@
web: node app.js --port $PORT --include example/localstorage
web: node app.js --port $PORT

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",

27
docs/gendocs.js
View File

@ -30,7 +30,8 @@
var CONSTANTS = {
DIAGRAM_WIDTH: 800,
DIAGRAM_HEIGHT: 500
};
},
TOC_HEAD = "# Table of Contents";
GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be defined
(function () {
@ -44,6 +45,7 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
split = require("split"),
stream = require("stream"),
nomnoml = require('nomnoml'),
toc = require("markdown-toc"),
Canvas = require('canvas'),
options = require("minimist")(process.argv.slice(2));
@ -110,6 +112,9 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
done();
};
transform._flush = function (done) {
// Prepend table of contents
markdown =
[ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
this.push("<html><body>\n");
this.push(marked(markdown));
this.push("\n</body></html>\n");
@ -133,8 +138,8 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
customRenderer.link = function (href, title, text) {
// ...but only if they look like relative paths
return (href || "").indexOf(":") === -1 && href[0] !== "/" ?
renderer.link(href.replace(/\.md/, ".html"), title, text) :
renderer.link.apply(renderer, arguments);
renderer.link(href.replace(/\.md/, ".html"), title, text) :
renderer.link.apply(renderer, arguments);
};
return customRenderer;
}
@ -179,13 +184,17 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define
glob(options['in'] + "/**/*.@(html|css|png)", {}, function (err, files) {
files.forEach(function (file) {
var destination = file.replace(options['in'], options.out),
destPath = path.dirname(destination);
destPath = path.dirname(destination),
streamOptions = {};
if (file.match(/png$/)){
streamOptions.encoding = null;
} else {
streamOptions.encoding = 'utf8';
}
mkdirp(destPath, function (err) {
fs.createReadStream(file, { encoding: 'utf8' })
.pipe(fs.createWriteStream(destination, {
encoding: 'utf8'
}));
fs.createReadStream(file, streamOptions)
.pipe(fs.createWriteStream(destination, streamOptions));
});
});
});

22
docs/src/architecture/Platform.md
View File

@ -35,16 +35,26 @@ in __any of these tiers__.
* _DOM_: The rendered HTML document, composed from HTML templates which
have been processed by AngularJS and will be updated by AngularJS
to reflect changes from the presentation layer. User interactions
are initiated from here and invoke behavior in the presentation layer.
are initiated from here and invoke behavior in the presentation layer. HTML 
templates are written in Angular’s template syntax; see the [Angular documentation on templates](https://docs.angularjs.org/guide/templates)​. 
These describe the page as actually seen by the user. Conceptually, 
stylesheets (controlling the look­and­feel of the rendered templates) belong 
in this grouping as well. 
* [_Presentation layer_](#presentation-layer): The presentation layer
is responsible for updating (and providing information to update)
the displayed state of the application. The presentation layer consists
primarily of _controllers_ and _directives_. The presentation layer is
concerned with inspecting the information model and preparing it for
display.
* [_Information model_](#information-model): The information model
describes the state and behavior of the objects with which the user
interacts.
* [_Information model_](#information-model): ​Provides a common (within Open MCT 
Web) set of interfaces for dealing with “things” ­ domain objects ­ within the 
system. User­facing concerns in a Open MCT Web application are expressed as 
domain objects; examples include folders (used to organize other domain 
objects), layouts (used to build displays), or telemetry points (used as 
handles for streams of remote measurements.) These domain objects expose a 
common set of interfaces to allow reusable user interfaces to be built in the 
presentation and template tiers; the specifics of these behaviors are then 
mapped to interactions with underlying services. 
* [_Service infrastructure_](#service-infrastructure): The service
infrastructure is responsible for providing the underlying general
functionality needed to support the information model. This includes
@ -52,7 +62,9 @@ in __any of these tiers__.
back-end.
* _Back-end_: The back-end is out of the scope of Open MCT Web, except
for the interfaces which are utilized by adapters participating in the
service infrastructure.
service infrastructure. Includes the underlying persistence stores, telemetry 
streams, and so forth which the Open MCT Web client is being used to interact 
with.
## Application Start-up

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

File diff suppressed because it is too large Load Diff

3
docs/src/index.html
View File

@ -29,8 +29,9 @@
Sections:
<ul>
<li><a href="api/">API</a></li>
<li><a href="guide/">Developer Guide</a></li>
<li><a href="architecture/">Architecture Overview</a></li>
<li><a href="guide/">Developer Guide</a></li>
<li><a href="tutorials/">Tutorials</a></li>
</ul>
</body>
</html>

BIN
docs/src/tutorials/images/add-task.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/src/tutorials/images/bar-plot-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/src/tutorials/images/bar-plot-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
docs/src/tutorials/images/bar-plot-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/src/tutorials/images/bar-plot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
docs/src/tutorials/images/chrome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
docs/src/tutorials/images/remove-task.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/src/tutorials/images/telemetry-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/src/tutorials/images/telemetry-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/src/tutorials/images/telemetry-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
docs/src/tutorials/images/todo-edit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/src/tutorials/images/todo-list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/src/tutorials/images/todo-restyled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/src/tutorials/images/todo-selection.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
docs/src/tutorials/images/todo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

3055
docs/src/tutorials/index.md Normal file
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"

9
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,6 +58,9 @@ 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);
};

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;
}
);

3
package.json
View File

@ -22,7 +22,8 @@
"split": "^1.0.0",
"mkdirp": "^0.5.1",
"nomnoml": "^0.0.3",
"canvas": "^1.2.7"
"canvas": "^1.2.7",
"markdown-toc": "^0.11.7"
},
"scripts": {
"start": "node app.js",

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

@ -1,4 +1,9 @@
{
"configuration": {
"paths": {
"uuid": "uuid"
}
},
"extensions": {
"routes": [
{
@ -26,10 +31,10 @@
]
},
{
"key": "BrowseTreeController",
"implementation": "BrowseTreeController.js",
"key": "PaneController",
"implementation": "PaneController.js",
"priority": "preferred",
"depends": [ "$scope", "agentService" ]
"depends": [ "$scope", "agentService","$window" ]
},
{
"key": "BrowseObjectController",

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

@ -41,7 +41,6 @@
</mct-representation>
</div>
</div>
<mct-representation key="representation.selected.key"
mct-object="representation.selected.key && domainObject"
class="abs object-holder">

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

@ -22,22 +22,27 @@
<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">
<!--<a class="mini-tab-icon anchor-left toggle-pane toggle-search mobile-hide"
title="Enable search"
ng-click="modelPaneTree.toggle()"
ng-class="{ collapsed : !modelPaneTree.visible() }"
ng-style="{ opacity: modelPaneTree.visible()? 0:1 }"></a>-->
<div class="holder holder-create-and-search abs l-mobile">
<mct-representation key="'create-button'"
mct-object="navigatedObject"
mct-device="desktop">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
mct-object="domainObject"
<mct-include key="'search'"
ng-model="treeModel">
</mct-representation>
</mct-include>
</div>
<div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search">
@ -50,17 +55,40 @@
</div>
</div>
<mct-splitter class="mobile-hide"></mct-splitter>
<mct-splitter class="splitter-treeview 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 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 l-mobile' 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 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>

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

@ -19,7 +19,7 @@
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'>
<div class='object-header'>
<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">

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;
}
);

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

@ -25,7 +25,7 @@
* Module defining CreateService. Created by vwoeltje on 11/10/14.
*/
define(
["../../lib/uuid"],
["uuid"],
function (uuid) {
"use strict";

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 () {

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": [

16
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'>
<mct-form ng-model="ngModel.value"
structure="ngModel.structure"
name="createForm">
</mct-form>
</div>
<div class='abs editor'>
<mct-form ng-model="ngModel.value"
structure="ngModel.structure"
name="createForm">
</mct-form>
</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>

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

@ -24,13 +24,11 @@
<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'>
<mct-include key="ngModel.dialog.template"
parameters="ngModel.dialog.parameters"
ng-model="ngModel.dialog.model">
</mct-include>
</div>
<div class='abs editor'>
<mct-include key="ngModel.dialog.template"
parameters="ngModel.dialog.parameters"
ng-model="ngModel.dialog.model">
</mct-include>
</div>
<div class="abs bottom-bar">
<a ng-repeat="option in ngModel.dialog.options"

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} action 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);

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

@ -116,10 +116,22 @@ 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"
);
});
});
}
);
);

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"
]

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

@ -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": [
@ -232,6 +255,10 @@
"key": "switcher",
"templateUrl": "templates/controls/switcher.html",
"uses": [ "view" ]
},
{
"key": "object-inspector",
"templateUrl": "templates/object-inspector.html"
}
],
"controls": [
@ -242,6 +269,10 @@
{
"key": "datetime-picker",
"templateUrl": "templates/controls/datetime-picker.html"
},
{
"key": "datetime-field",
"templateUrl": "templates/controls/datetime-field.html"
}
],
"licenses": [

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

@ -42,13 +42,17 @@ $ueFooterH: 25px;
$ueColMargin: 1.5%;
$ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueBrowseLeftPaneTreeW: 25%;
$ueBrowseRightPaneInspectW: 20%;
$ueCollapsedPaneEdgeM: 20px;
$uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabW: 9px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 30px;
$ovrTopBarH: 45px;
$ovrFooterH: 24px;
$overlayMargin: 25px;
// Items
$ueBrowseGridItemLg: 200px;
@ -57,7 +61,8 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
// Tabular
@ -106,3 +111,8 @@ $dirImgs: $dirCommonRes + 'images/';
/************************** TIMINGS */
$controlFadeMs: 100ms;
/************************** LIMITS */
$glyphLimit: '\e603';
$glyphLimitUpr: '\0000eb';
$glyphLimitLwr: '\0000ee';

6
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;

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,18 +72,32 @@
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 {
color: $colorAlert;
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;
}
}
}

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

@ -0,0 +1,107 @@
/*****************************************************************************
* 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 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;
}
}
}

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

@ -1,26 +1,39 @@
@mixin limit($bg, $ic, $glyph) {
background: $bg !important;
//color: $fg !important;
&:before {
//@include pulse(1000ms);
color: $ic;
content: $glyph;
}
@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
&:before {
color: $iconColor;
content: $glyph;
font-family: symbolsfont;
font-size: 0.8em;
display: inline;
margin-right: $interiorMarginSm;
}
}
[class*="s-limit"] {
//white-space: nowrap;
&:before {
display: inline-block;
font-family: symbolsfont;
font-size: 0.75em;
font-style: normal !important;
margin-right: $interiorMarginSm;
vertical-align: middle;
}
.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; }
}
.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"); };
// 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; }
}

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

@ -29,8 +29,7 @@
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
@import "messages";
@import "properties";
@import "inspector";
/********************************* CONTROLS */
@import "controls/breadcrumb";
@ -39,6 +38,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
@import "controls/messages";
@import "controls/time-controller";
@import "mobile/controls/menus";
@ -62,7 +62,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 +69,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%);
}
}

114
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,31 +178,28 @@
}
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
&:before {
@include trans-prop-nice("border-color", 0.75s);
content: '';
display: block;
height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
//&:before {
//@include trans-prop-nice("border-color", 25ms);
content: '';
display: block;
//height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
@if $direction == "horizontal" {
border-top: $w $style darken($b, 15%);
top: 2px;
left: 5px;
right: 5px;
@if $direction == "horizontal" {
border-top: $w $style darken($b, 15%);
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;
} @else if $direction == "vertical" {
border-left: $w $style darken($b, 15%);
left: 2px;
bottom: 5px;
top: 5px;
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) {
@ -375,20 +397,6 @@
overflow-y: $showBar;
}
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
display: block;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-color: rgba($c, 0.25);
border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: $b;
border-radius: 100%;
}
@mixin test($c: #ffcc00, $a: 0.2) {
background-color: rgba($c, $a) !important;
}

157
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,155 @@ $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;
&: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

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

@ -19,462 +19,507 @@
* 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;
margin-top: $interiorMargin;
&:first-child {
margin-top: 0;
}
.accordion-head {
$op: 0.2;
@include border-radius($basicCr * 0.75);
@include box-sizing("border-box");
background: rgba($colorBodyFg, $op);
cursor: pointer;
font-size: 0.75em;
line-height: $accordionHeadH;
margin-bottom: $interiorMargin;
padding: 0 $interiorMargin;
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: $accordionHeadH;
text-transform: uppercase;
&:hover {
background: rgba($colorBodyFg, $op * 2);
}
&:after {
content: "^";
display: block;
font-family: 'symbolsfont';
font-size: 0.9em;
position: absolute;
right: $interiorMargin;
text-transform: none;
top: 0;
}
&:not(.expanded):after {
content: "v";
}
}
.accordion-contents {
position: absolute;
top: $accordionHeadH + $interiorMargin;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
}
$accordionHeadH: 18px;
margin-top: $interiorMargin;
&:first-child {
margin-top: 0;
}
.accordion-head {
$op: 0.2;
@include border-radius($basicCr * 0.75);
@include box-sizing("border-box");
background: rgba($colorBodyFg, $op);
cursor: pointer;
font-size: 0.75em;
line-height: $accordionHeadH;
margin-bottom: $interiorMargin;
padding: 0 $interiorMargin;
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: $accordionHeadH;
text-transform: uppercase;
&:hover {
background: rgba($colorBodyFg, $op * 2);
}
&:after {
content: "^";
display: block;
font-family: 'symbolsfont';
font-size: 0.9em;
position: absolute;
right: $interiorMargin;
text-transform: none;
top: 0;
}
&:not(.expanded):after {
content: "v";
}
}
.accordion-contents {
position: absolute;
top: $accordionHeadH + $interiorMargin;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
}
}
.l-composite-control {
vertical-align: middle;
&.l-checkbox {
.composite-control-label {
line-height: 18px;
}
}
vertical-align: middle;
&.l-checkbox {
.composite-control-label {
line-height: 18px;
}
}
}
.l-control-group {
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
// @include test();
@include box-sizing(border-box);
border-left: 1px solid $colorInteriorBorder;
display: inline-block;
padding: 0 $interiorMargin;
position: relative;
&:first-child {
border-left: none;
padding-left: 0;
}
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
// @include test();
@include box-sizing(border-box);
border-left: 1px solid $colorInteriorBorder;
display: inline-block;
padding: 0 $interiorMargin;
position: relative;
&:first-child {
border-left: none;
padding-left: 0;
}
}
.l-local-controls {
// Control shown when hovering over an object, like plots and imagery
// Default position is upper right
$p: $interiorMargin;
position: absolute;
top: $p;
right: $p;
z-index: 5;
// Control shown when hovering over an object, like plots and imagery
// Default position is upper right
$p: $interiorMargin;
position: absolute;
top: $p;
right: $p;
z-index: 5;
}
.s-local-controls {
font-size: 0.7rem;
font-size: 0.7rem;
}
label.checkbox.custom {
$bg: pullForward($colorBodyBg, 10%);
$d: $formRowCtrlsH;
cursor: pointer;
display: inline-block;
line-height: $d;
margin-right: $interiorMargin * 4;
padding-left: $d + $interiorMargin;
position: relative;
vertical-align: middle; // was top
em {
color: $colorBodyFg;
display: inline-block;
height: $d;
min-width: $d;
&: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: " ";
font-family: 'symbolsfont';
font-size: 0.8em;
display: inline-block;
margin-right: $interiorMargin;
height: $d;
width: $d;
left: 0;
top: 0;
position: absolute;
text-align: center;
}
}
&.no-text {
overflow: hidden;
margin-right: 0;
padding-left: 0;
height: $d;
width: $d;
em {
overflow: hidden;
}
}
input {
display: none;
&:checked ~ em:before {
background: $colorCheck;
color: lighten($colorCheck, 50%);
content: "2";
}
}
$bg: pullForward($colorBodyBg, 10%);
$d: $formRowCtrlsH;
cursor: pointer;
display: inline-block;
line-height: $d;
margin-right: $interiorMargin * 4;
padding-left: $d + $interiorMargin;
position: relative;
vertical-align: middle; // was top
em {
color: $colorBodyFg;
display: inline-block;
height: $d;
min-width: $d;
&: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: " ";
font-family: 'symbolsfont';
font-size: 0.8em;
display: inline-block;
margin-right: $interiorMargin;
height: $d;
width: $d;
left: 0;
top: 0;
position: absolute;
text-align: center;
}
}
&.no-text {
overflow: hidden;
margin-right: 0;
padding-left: 0;
height: $d;
width: $d;
em {
overflow: hidden;
}
}
input {
display: none;
&:checked ~ em:before {
background: $colorCheck;
color: lighten($colorCheck, 50%);
content: "2";
}
}
}
.input-labeled {
margin-left: $interiorMargin;
label {
display: inline-block;
margin-right: $interiorMarginSm;
}
&.inline {
display: inline-block;
}
&:first-child {
margin-left: 0;
}
margin-left: $interiorMargin;
label {
display: inline-block;
margin-right: $interiorMarginSm;
}
&.inline {
display: inline-block;
}
&:first-child {
margin-left: 0;
}
}
.s-menu-btn label.checkbox.custom {
margin-left: 5px;
margin-left: 5px;
}
.item .checkbox {
&.checked label {
@include box-shadow(none);
border-bottom: none;
}
&.checked label {
@include box-shadow(none);
border-bottom: none;
}
}
.context-available {
$c: $colorKey;
color: $c;
&:hover {
color: lighten($c, 10%);
}
$c: $colorKey;
color: $c;
&:hover {
color: lighten($c, 10%);
}
}
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** OBJECT-HEADER */
.object-header {
//@include test();
font-size: 1em;
//@include test();
font-size: 1em;
//> .title-label,
//> .type-icon,
//> .context-available {
// //@include tmpBorder(#6666ff);
// //vertical-align: middle;
//}
> .type-icon {
color: $colorObjHdrIc;
font-size: 120%;
float: left;
margin-right: $interiorMargin;
}
> .type-icon {
color: $colorObjHdrIc;
font-size: 120%;
float: left;
margin-right: $interiorMargin;
}
.l-elem-wrapper {
//@include test(#66f, 0.2);
@include justify-content(flex-start);
mct-representation {
// Holds the context-available item
// Must have min-width to make flex work properly
// in Safari
min-width: 0.7em;
}
}
.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
// in Safari
min-width: 0.7em;
}
}
.action {
margin-right: $interiorMargin;
}
.action {
margin-right: $interiorMargin;
}
.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;
}
.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;
}
.context-available {
font-size: 0.7em;
@include webkitProp(flex, '0 0 1');
//margin-right: $interiorMargin;
}
@include desktop {
.context-available {
@include trans-prop-nice(opacity, 0.25s);
opacity: 0;
}
&:hover {
.context-available {
opacity: 1;
}
}
}
}
@include desktop {
.context-available {
@include trans-prop-nice(opacity, 0.25s);
opacity: 0;
}
&:hover {
.context-available {
opacity: 1;
}
}
}
/******************************************************** 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;
//border:1px solid $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;
right: 0;
bottom: 0;
left: 0;
}
.knob {
//@include btnSubtle();
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorKnob;
&:hover {
background-color: $sliderColorKnobHov;
}
position: absolute;
height: $knobH;
width: $sliderKnobW;
top: 0;
auto: 0;
bottom: auto;
left: auto;
}
.knob-l {
@include border-left-radius($sliderKnobW);
cursor: w-resize;
}
.knob-r {
@include border-right-radius($sliderKnobW);
cursor: e-resize;
}
.range {
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorRange;
cursor: ew-resize;
position: absolute;
top: 0; //$tbOffset;
right: auto;
bottom: 0;
left: auto;
height: auto;
width: auto;
&:hover {
background-color: $sliderColorRangeHov;
}
}
$knobH: 100%; //14px;
.slot {
// @include border-radius($basicCr * .75);
//@include sliderTrack();
width: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.knob {
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorKnob;
&:hover {
background-color: $sliderColorKnobHov;
}
position: absolute;
height: $knobH;
width: $sliderKnobW;
top: 0;
auto: 0;
bottom: auto;
left: auto;
}
.knob-l {
@include border-left-radius($sliderKnobW);
cursor: w-resize;
}
.knob-r {
@include border-right-radius($sliderKnobW);
cursor: e-resize;
}
.range {
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorRange;
cursor: ew-resize;
position: absolute;
top: 0; //$tbOffset;
right: auto;
bottom: 0;
left: auto;
height: auto;
width: auto;
&:hover {
background-color: $sliderColorRangeHov;
}
}
}
/******************************************************** DATETIME PICKER */
.l-datetime-picker {
$r1H: 15px;
@include user-select(none);
font-size: 0.8rem;
padding: $interiorMarginLg !important;
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 {
width: $pagerW;
@extend .ui-symbol;
&.prev {
right: auto;
&:before {
content: "\3c";
}
}
&.next {
left: auto;
text-align: right;
&:before {
content: "\3e";
}
}
}
.val {
text-align: center;
left: $pagerW + $interiorMargin;
right: $pagerW + $interiorMargin;
}
}
.l-calendar,
.l-time-selects {
border-top: 1px solid $colorInteriorBorder
}
.l-time-selects {
line-height: $formInputH;
}
$r1H: 15px;
@include user-select(none);
font-size: 0.8rem;
padding: $interiorMarginLg !important;
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 {
width: $pagerW;
@extend .ui-symbol;
&.prev {
right: auto;
&:before {
content: "\3c";
}
}
&.next {
left: auto;
text-align: right;
&:before {
content: "\3e";
}
}
}
.val {
text-align: center;
left: $pagerW + $interiorMargin;
right: $pagerW + $interiorMargin;
}
}
.l-calendar,
.l-time-selects {
border-top: 1px solid $colorInteriorBorder
}
.l-time-selects {
line-height: $formInputH;
}
}
/******************************************************** CALENDAR */
.l-calendar {
$colorMuted: pushBack($colorMenuFg, 30%);
ul.l-cal-row {
@include display-flex;
@include flex-flow(row nowrap);
margin-top: 1px;
&:first-child {
margin-top: 0;
}
li {
@include flex(1 0);
//@include test();
margin-left: 1px;
padding: $interiorMargin;
text-align: center;
&:first-child {
margin-left: 0;
}
}
&.l-header li {
color: $colorMuted;
}
&.l-body li {
@include trans-prop-nice(background-color, .25s);
cursor: pointer;
&.in-month {
background-color: $colorCalCellInMonthBg;
}
.sub {
color: $colorMuted;
font-size: 0.8em;
}
&.selected {
background: $colorCalCellSelectedBg;
color: $colorCalCellSelectedFg;
.sub {
color: inherit;
}
}
&:hover {
background-color: $colorCalCellHovBg;
color: $colorCalCellHovFg;
.sub {
color: inherit;
}
}
}
}
$colorMuted: pushBack($colorMenuFg, 30%);
ul.l-cal-row {
@include display-flex;
@include flex-flow(row nowrap);
margin-top: 1px;
&:first-child {
margin-top: 0;
}
li {
@include flex(1 0);
//@include test();
margin-left: 1px;
padding: $interiorMargin;
text-align: center;
&:first-child {
margin-left: 0;
}
}
&.l-header li {
color: $colorMuted;
}
&.l-body li {
@include trans-prop-nice(background-color, .25s);
cursor: pointer;
&.in-month {
background-color: $colorCalCellInMonthBg;
}
.sub {
color: $colorMuted;
font-size: 0.8em;
}
&.selected {
background: $colorCalCellSelectedBg;
color: $colorCalCellSelectedFg;
.sub {
color: inherit;
}
}
&:hover {
background-color: $colorCalCellHovBg;
color: $colorCalCellHovFg;
.sub {
color: inherit;
}
}
}
}
}
/******************************************************** BROWSER ELEMENTS */
@include desktop {
::-webkit-scrollbar {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}
::-webkit-scrollbar {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}
::-webkit-scrollbar-thumb {
$bg: $scrollbarThumbColor;
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@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));
}
}
::-webkit-scrollbar-thumb {
$bg: $scrollbarThumbColor;
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@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));
}
}
::-webkit-scrollbar-corner {
background: $scrollbarTrackColorBg;
}
}
::-webkit-scrollbar-corner {
background: $scrollbarTrackColorBg;
}
}

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; }
}
}

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

@ -19,68 +19,114 @@
* 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;
position: absolute;
z-index: 1;
//@if $colorSplitterHover != 'none' {
&:hover {
background-color: $colorSplitterHover;
}
//}
}
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
.pane {
left: 0;
right: 0;
&.top {
bottom: auto;
}
&.bottom {
top: auto;
}
}
>.splitter {
@include controlGrippy($colorSplitterInterior, horizontal);
cursor: row-resize;
left: 0; right: 0;
width: auto;
height: $splitterW;
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
}
&.right {
left: auto;
}
}
>.splitter {
@include controlGrippy($colorBodyBg, vertical);
bottom: 0;
cursor: col-resize;
width: $splitterW;
}
}
.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;
&:after {
// The handle
content:"";
pointer-events: none;
@include absPosDefault(0);
background: $colorSplitterBg;
display: block;
@if $splitterEndCr != 'none' {
@include border-radius($splitterEndCr);
}
}
&:active {
//@include test();
&:after {
background-color: $colorSplitterActive !important;
}
}
@if $colorSplitterHover != 'none' {
&:not(:active) {
&:hover {
&:after {
background-color: $colorSplitterHover !important;
@include trans-prop-nice(background-color, 150ms);
}
}
}
}
}
.browse-area .splitter {
top: $ueTopBarH + $interiorMarginLg;
.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
.pane {
left: 0;
right: 0;
&.top {
bottom: auto;
}
&.bottom {
top: auto;
}
}
>.splitter {
cursor: row-resize;
left: 0;
right: 0;
height: $splitterD;
&:after {
top: $inset; bottom: $inset;
}
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
}
&.right {
left: auto;
}
}
>.splitter {
cursor: col-resize;
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%));
}
}
}
}
}
/*.browse-area .splitter {
top: 0; //$ueTopBarH + $interiorMarginLg;
}
.edit-area .splitter {
top: 0;
}
}*/

73
platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
View File

@ -19,24 +19,45 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
@include keyframes(rotation) {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
@include keyframes(rotateCentered) {
0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
}
@include animation-name(rotateCentered);
@include animation-duration(0.5s);
@include animation-iteration-count(infinite);
@include animation-timing-function(linear);
border-color: rgba($c, 0.25);
border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: 5px;
@include border-radius(100%);
@include box-sizing(border-box);
display: block;
position: absolute;
height: 0; width: 0;
padding: 7%;
left: 50%; top: 50%;
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
display: block;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-color: rgba($c, 0.25);
border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: $b;
@include border-radius(100%);
}
.t-wait-spinner,
@ -96,4 +117,28 @@
margin-top: 0 !important;
padding: 0 !important;
top: 0; left: 0;
}
.loading {
// Can be applied to any block element with height and width
pointer-events: none;
&:before,
&:after {
content: '';
}
&:before {
@include wait-spinner2(5px, $colorLoadingFg);
z-index: 10;
}
&:after {
@include absPosDefault();
background: $colorLoadingBg;
display: block;
z-index: 9;
}
&.tree-item:before {
padding: $menuLineH / 4;
border-width: 2px;
}
}

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;
.item-type,
.t-item-icon {
//@include test();
@include transform(translateX(-50%) translateY(-55%));
position: absolute;
top: 50%; left: 50%;
//height: $iconD; width: $iconD;
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%;
position: absolute;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2;
}
//line-height: normal;
//text-align: center;
}
.item-open {
@include trans-prop-nice("opacity", $transTime);

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

@ -23,7 +23,7 @@
/************************** 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;

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

@ -32,7 +32,7 @@
background-color: $colorMobilePaneLeft;
}
.pane.right-repr {
.pane.right.items {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
@ -42,78 +42,66 @@
}
}
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
top: 0; left: 0; right: 0; bottom: $ueFooterH;
}
.holder.l-mobile {
top: $bodyMargin !important;
.holder.holder-create-and-search {
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);
//right: 100% !important;
//width: auto !important;
//overflow-y: hidden;
//overflow-x: hidden;
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);
//@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,13 +141,13 @@
}
@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));
@include transform(translateX($proporMenuOnly));
#content-area {
opacity: 0;
}

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;
}
}
}

83
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,35 +18,64 @@
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 {
> .label,
> .controls {
//@include test(blue);
display: block;
float: none;
width: 100%;
.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);
display: block;
float: none;
width: 100%;
}
> .label {
&:after {
float: none;
}
}
}
.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;
}
> .label {
&:after {
float: none;
}
}
}
}

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

@ -20,79 +20,124 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.overlay {
.blocker {
background: $colorOvrBlocker;
z-index: 100;
}
font-size: 90%;
.blocker {
background: $colorOvrBlocker;
z-index: 100;
}
.clk-icon.close {
font-size: 0.8rem;
position: absolute;
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
z-index: 100;
top: $interiorMarginLg;
right: $interiorMarginLg;
bottom: auto;
left: auto;
z-index: 100;
}
>.holder {
$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3);
color: $colorOvrFg;
top: $i; right: $i; bottom: $i; left: $i;
z-index: 101;
>.contents {
> .holder {
//$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3);
color: $colorOvrFg;
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 {
$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;
margin-bottom: $interiorMargin;
}
.top-bar {
.title {
@include ellipsize();
font-size: 1.2em;
line-height: 120%;
margin-bottom: $interiorMargin;
}
.hint {
color: pushBack($colorOvrFg, 20%);
}
.abs.top-bar {
height: $ovrTopBarH;
}
.editor {
top: $ovrTopBarH + ($interiorMargin * 2);
bottom: $ovrFooterH + $interiorMargin * 2;
left: 0; right: 0;
}
.bottom-bar {
top: auto; right: 0; bottom: 0; left: 0;
overflow: visible;
//font-size: 1em;
height: $ovrFooterH;
text-align: right;
.s-btn {
$bg: $colorOvrBtnBg;
&:not(.major) {
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
}
font-size: 95%;
height: $ovrFooterH;
line-height: $ovrFooterH;
margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3;
//&.major {
// @extend .s-btn.major;
// &:hover {
// @extend .s-btn.major:hover;
// }
//}
.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%;
}
}
}
.contents.l-dialog {
$myM: $interiorMargin;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
overflow: auto;
.field.l-med {
input[type='text'] {
width: 100%;
}
}
.bottom-bar {
text-align: right;
.s-btn {
$bg: $colorOvrBtnBg;
&:not(.major) {
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
}
font-size: 95%;
height: $ovrFooterH;
line-height: $ovrFooterH;
margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3;
&:first-child {
margin-left: 0;
}
}
}
.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;
}

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

@ -214,8 +214,6 @@
.search-scroll {
order: 3;
//padding-right: $rightPadding;
margin-top: 4px;
// Adjustable scrolling size
@ -227,28 +225,6 @@
.load-icon {
position: relative;
&.loading {
pointer-events: none;
margin-left: $leftMargin;
.title-label {
// Text styling
font-style: italic;
font-size: .9em;
opacity: 0.5;
// Text positioning
margin-left: $iconWidth + $leftMargin;
line-height: 24px;
}
.wait-spinner {
margin-left: $leftMargin;
}
}
&:not(.loading) {
cursor: pointer;
}
}
.load-more-button {

58
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,30 +59,38 @@ 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,
&.l-icon-alert {
//@include txtShdw($shdwItemTreeIcon);
position: absolute;
z-index: 2;
}
@ -101,37 +108,24 @@ ul.tree {
}
}
}
.title-label {
.title-label,
.t-title-label {
@include absPosDefault();
display: block;
left: $runningItemW + ($interiorMargin * 3);
//right: $treeContextTriggerW + $interiorMargin;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.loading {
pointer-events: none;
.label {
opacity: 0.5;
.title-label {
font-style: italic;
}
}
.wait-spinner {
margin-left: 14px;
}
}
&.selected {
background: $colorItemTreeSelectedBg;
color: $colorItemTreeSelectedFg;
.view-control {
color: $colorItemTreeSelectedVC;
}
.label .type-icon {
.t-object-label .t-item-icon {
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
}
}
@ -140,12 +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%);
//.context-trigger {
// display: block;
//}
.icon {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.t-item-icon {
color: $colorItemTreeIconHover;
}
}
@ -158,7 +149,6 @@ ul.tree {
.context-trigger {
$h: 0.9rem;
//display: none;
top: -1px;
position: absolute;
right: $interiorMarginSm;
@ -171,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;
}
}
}

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

@ -29,13 +29,13 @@
}
}
.holder-all {
/*.holder-all {
$myM: 0; // $interiorMarginSm;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
}
}*/
.browse-area,
.edit-area,
@ -96,12 +96,8 @@
.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,31 +111,51 @@
.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;
}
}
.ue-bottom-bar {
//@include absPosDefault($bodyMargin);
@include absPosDefault(0); // New status bar design
top: auto;
height: $ueFooterH;
.status-holder {
//right: $ueAppLogoW + $bodyMargin; New status bar design
z-index: 1;
}
.app-logo {
left: auto;
width: $ueAppLogoW;
z-index: 2;
}
}
// from _bottom-bar.scss
.ue-bottom-bar {
@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 {
@include box-sizing(border-box);
@include absPosDefault($interiorMargin);
@include ellipsize();
//line-height: $ueFooterH - ($interiorMargin * 2);
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 {
@ -205,10 +221,19 @@
.browse-mode {
.split-layout {
.split-pane-component.pane.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneW;
.split-pane-component.pane {
//@include test(green);
&.treeview.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneTreeW;
}
&.t-inspect.right {
min-width: 200px;
max-width: 600px;
//padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
width: $ueBrowseRightPaneInspectW;
}
}
}
}
@ -226,16 +251,33 @@
}
.pane {
@include box-sizing(border-box);
position: absolute;
.pane-header {
text-transform: uppercase;
height: $ueTopBarH;
line-height: $ueTopBarH;
margin-bottom: $interiorMargin;
}
.primary-pane {
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
z-index: 2;
}
&.treeview.left {
.create-btn-holder {
bottom: auto;
top: 0;
height: $ueTopBarH;
.wrapper.menu-element {
position: absolute;
bottom: $interiorMargin;
}
//.create-btn-holder {
// //bottom: auto;
// //top: 0;
// height: $ueTopBarH;
// .wrapper.menu-element {
// position: absolute;
// bottom: $interiorMargin;
// }
//}
.holder-create-and-search{
}
.search-holder {
top: $ueTopBarH + $interiorMarginLg;
@ -245,6 +287,54 @@
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
}
}
.mini-tab-icon.toggle-pane {
//@include test(blue, 0.3);
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;
}
}
&.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;
}
}
}
}
&.items {
.object-browse-bar {
.left.abs,
@ -266,32 +356,50 @@
}
}
}
&.vertical {
/* &.vertical {
// Slides left and right
> .pane {
// @include test();
margin-left: $interiorMargin;
> .pane.left {
> .holder {
left: 0;
right: 0;
}
&:first-child {
margin-left: 0;
.holder {
right: $interiorMarginSm;
}
left: $bodyMargin;
}
}
> .pane.right {
> .holder {
right: $bodyMargin;
}
}
}*/
// Specific elements margins
.holder.holder-create-and-search {
top: $bodyMargin;
right: 0;
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
@include absPosDefault(0, auto);
top: $ueTopBarH + $interiorMarginLg;
> ng-include {
@include absPosDefault(0, auto);
}
&.l-controls-visible {
&.l-time-controller-visible {
bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
@ -343,4 +451,84 @@
@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.
//.pane.left.treeview,
.tree-holder,
.splitter-treeview,
.holder-create-and-search {
opacity: 0;
}
/*.holder-create-and-search {
@include trans-prop-nice((top, left), 250ms);
top: $ueTopBarH + $interiorMargin;
left: -1 * $bodyMargin !important;
.create-btn {
@include border-left-radius(0);
@include trans-prop-nice((width), 250ms);
width: $uePaneMiniTabW !important;
text-align: center !important;
padding: 0;
.title-label,
&:after {
display: none;
}
&:before {
font-size: 9px;
}
}
}*/
}
.pane-tree-showing {
// Sets the left tree menu when the tree is shown.
//.pane.left.treeview,
.tree-holder,
.splitter-treeview {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
.holder-create-and-search {
@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 {
.l-inspect,
.splitter-inspect {
opacity: 0;
}
}
}
@include desktop {
.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);
}
}

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="pickerActive = !pickerActive">
</a>
<mct-popup ng-if="pickerActive">
<div mct-click-elsewhere="pickerActive = false">
<mct-control key="'datetime-picker'"
ng-model="ngModel"
field="field"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>

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

@ -19,84 +19,67 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<!-- MINE -->
<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" ng-click="t1.toggle()">
<span class="val">{{startOuterText}}</span>
<a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t1.isActive()">
<div mct-click-elsewhere="t1.setState(false)">
<mct-control key="'datetime-picker'"
ng-model="ngModel.outer"
field="'start'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>
</span>
<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">
<mct-control key="'datetime-field'"
structure="{ format: parameters.format }"
ng-model="ngModel.outer"
field="'start'"
class="time-range-start">
</mct-control>
</span>
<span class="l-time-range-inputs-elem lbl">to</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" ng-click="t2.toggle()">
<span class="val">{{endOuterText}}</span>
<a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t2.isActive()">
<div mct-click-elsewhere="t2.setState(false)">
<mct-control key="'datetime-picker'"
ng-model="ngModel.outer"
field="'end'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>&nbsp;
</span>
</div>
<span class="l-time-range-input" ng-controller="ToggleController as t2">
<mct-control key="'datetime-field'"
structure="{ format: parameters.format }"
ng-model="ngModel.outer"
field="'end'"
class="time-range-end">
</mct-control>&nbsp;
</span>
</div>
<div class="l-time-range-slider-holder">
<div class="l-time-range-slider">
<div class="slider"
mct-resize="spanWidth = bounds.width">
<div class="knob knob-l"
mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r"
mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div>
</div>
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
<div class="toi-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="l-time-range-slider-holder">
<div class="l-time-range-slider">
<div class="slider"
mct-resize="spanWidth = bounds.width">
<div class="knob knob-l"
mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r"
mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div>
</div>
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
<div class="toi-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks">
<div
ng-repeat="tick in ticks"
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
class="tick tick-x"
>
<span class="l-time-range-tick-label">{{tick}}</span>
</div>
</div>
</div>
</div>
<div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks">
<div
ng-repeat="tick in ticks track by $index"
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
class="tick tick-x"
>
<span class="l-time-range-tick-label">{{tick}}</span>
</div>
</div>
</div>
</div>

27
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-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator"
ng-class='ngModel.getGlyphClass()'>
{{ngModel.getGlyph()}}
</span>
<span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
</span>
<a href=''
title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()'
ng-class='ngModel.getGlyphClass()'
ng-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator">
{{ngModel.getGlyph()}}
</span><span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
</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">
<div class="pane-header">Inspection</div>
<ul>
<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>

68
platform/commonUI/general/src/controllers/BannerController.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*/
define(
[],
function () {
"use strict";
/**
* A controller for banner notifications. Banner notifications are a
* non-blocking way of drawing the user's attention to an event such
* as system errors, or the progress or successful completion of an
* ongoing task. This controller provides scoped functions for
* dismissing and 'maximizing' notifications. See {@link NotificationService}
* for more details on Notifications.
*
* @param $scope
* @param notificationService
* @param dialogService
* @constructor
*/
function BannerController($scope, notificationService, dialogService) {
$scope.active = notificationService.active;
$scope.action = function (action, $event){
/*
Prevents default 'maximize' behaviour when clicking on
notification button
*/
$event.stopPropagation();
return action();
};
$scope.dismiss = function(notification, $event) {
$event.stopPropagation();
notification.dismissOrMinimize();
};
$scope.maximize = function(notification) {
if (notification.model.severity !== "info"){
notification.model.cancel = function(){
dialogService.dismiss();
};
dialogService.showBlockingMessage(notification.model);
}
};
}
return BannerController;
});

79
platform/commonUI/general/src/controllers/DateTimeFieldController.js Normal file
View File

@ -0,0 +1,79 @@
/*****************************************************************************
* 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(
[],
function () {
'use strict';
/**
* Controller to support the date-time entry field.
*
* Accepts a `format` property in the `structure` attribute
* which allows a date/time to be specified via its symbolic
* key (as will be used to look up said format from the
* `formatService`.)
*
* {@see FormatService}
* @constructor
* @memberof platform/commonUI/general
* @param $scope the Angular scope for this controller
* @param {FormatService} formatService the service to user to format
* domain values
* @param {string} defaultFormat the format to request when no
* format has been otherwise specified
*/
function DateTimeFieldController($scope, formatService, defaultFormat) {
var formatter = formatService.getFormat(defaultFormat);
function updateFromModel(value) {
// Only reformat if the value is different from user
// input (to avoid reformatting valid input while typing.)
if (!formatter.validate($scope.textValue) ||
formatter.parse($scope.textValue) !== value) {
$scope.textValue = formatter.format(value);
$scope.textInvalid = false;
}
}
function updateFromView(textValue) {
$scope.textInvalid = !formatter.validate(textValue);
if (!$scope.textInvalid) {
$scope.ngModel[$scope.field] =
formatter.parse(textValue);
}
}
function setFormat(format) {
formatter = formatService.getFormat(format || defaultFormat);
updateFromModel($scope.ngModel[$scope.field]);
}
$scope.$watch('structure.format', setFormat);
$scope.$watch('ngModel[field]', updateFromModel);
$scope.$watch('textValue', updateFromView);
}
return DateTimeFieldController;
}
);

117
platform/commonUI/general/src/controllers/ObjectInspectorController.js Normal file
View File

@ -0,0 +1,117 @@
/*****************************************************************************
* 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*/
/**
* Module defining ObjectInspectorController. Created by shale on 08/21/2015.
*/
define(
[],
function () {
"use strict";
/**
* The ObjectInspectorController gets and formats the data for
* the inspector display
*
* @constructor
*/
function ObjectInspectorController($scope, objectService) {
$scope.primaryParents = [];
$scope.contextutalParents = [];
//$scope.isLink = false;
// Gets an array of the contextual parents/anscestors of the selected object
function getContextualPath() {
var currentObj = $scope.ngModel.selectedObject,
currentParent,
parents = [];
currentParent = currentObj &&
currentObj.hasCapability('context') &&
currentObj.getCapability('context').getParent();
while (currentParent && currentParent.getModel().type !== 'root' &&
currentParent.hasCapability('context')) {
// Record this object
parents.unshift(currentParent);
// Get the next one up the tree
currentObj = currentParent;
currentParent = currentObj.getCapability('context').getParent();
}
$scope.contextutalParents = parents;
}
// Gets an array of the parents/anscestors of the selected object's
// primary location (locational of original non-link)
function getPrimaryPath(current) {
var location;
// If this the the initial call of this recursive function
if (!current) {
current = $scope.ngModel.selectedObject;
$scope.primaryParents = [];
}
location = current.getModel().location;
if (location && location !== 'root') {
objectService.getObjects([location]).then(function (obj) {
var next = obj[location];
$scope.primaryParents.unshift(next);
getPrimaryPath(next);
});
}
}
// Gets the metadata for the selected object
function getMetadata() {
$scope.metadata = $scope.ngModel.selectedObject &&
$scope.ngModel.selectedObject.hasCapability('metadata') &&
$scope.ngModel.selectedObject.useCapability('metadata');
}
// Set scope variables when the selected object changes
$scope.$watch('ngModel.selectedObject', function () {
$scope.isLink = $scope.ngModel.selectedObject &&
$scope.ngModel.selectedObject.hasCapability('location') &&
$scope.ngModel.selectedObject.getCapability('location').isLink();
if ($scope.isLink) {
getPrimaryPath();
getContextualPath();
} else {
$scope.primaryParents = [];
getContextualPath();
}
getMetadata();
});
}
return ObjectInspectorController;
}
);

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