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

Merge branch 'mobile-integration' into open-master

Browse Source
This commit is contained in:
Pete Richards 2015-09-22 13:53:22 -07:00
commit aba0969312
90 changed files with 4235 additions and 1637 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bundles.json
View File

@ -8,6 +8,7 @@
"platform/commonUI/dialog",
"platform/commonUI/general",
"platform/commonUI/inspect",
"platform/commonUI/mobile",
"platform/containment",
"platform/execution",
"platform/telemetry",

4
circle.yml
View File

@ -8,3 +8,7 @@ deployment:
branch: search
heroku:
appname: openmctweb-staging-un
openmctweb-staging-deux:
branch: mobile
heroku:
appname: openmctweb-staging-deux

1
index.html
View File

@ -23,6 +23,7 @@
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript"
src="platform/framework/lib/require.js"

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

@ -16,7 +16,20 @@
{
"key": "BrowseController",
"implementation": "BrowseController.js",
"depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
"depends": [
"$scope",
"$route",
"$location",
"objectService",
"navigationService",
"urlService"
]
},
{
"key": "BrowseTreeController",
"implementation": "BrowseTreeController.js",
"priority": "preferred",
"depends": [ "$scope", "agentService" ]
},
{
"key": "BrowseObjectController",
@ -25,17 +38,17 @@
},
{
"key": "CreateMenuController",
"implementation": "creation/CreateMenuController",
"implementation": "creation/CreateMenuController.js",
"depends": [ "$scope" ]
},
{
"key": "LocatorController",
"implementation": "creation/LocatorController",
"implementation": "creation/LocatorController.js",
"depends": [ "$scope", "$timeout" ]
},
{
"key": "MenuArrowController",
"implementation": "MenuArrowController",
"implementation": "MenuArrowController.js",
"depends": [ "$scope" ]
}
],
@ -82,6 +95,11 @@
"templateUrl": "templates/menu-arrow.html",
"uses": [ "action" ],
"gestures": [ "menu" ]
},
{
"key": "back-arrow",
"uses": [ "context" ],
"templateUrl": "templates/back-arrow.html"
}
],
"services": [

29
platform/commonUI/browse/res/templates/back-arrow.html Normal file
View File

@ -0,0 +1,29 @@
<!--
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.
-->
<!-- Back Arrow Icon used on mobile-->
<a
class='type-icon icon ui-symbol s-back'
ng-show="context.getPath().length > 2"
ng-click="context.getParent().getCapability('action').perform('navigate')">
{
</a>

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

@ -20,22 +20,25 @@
at runtime from the About dialog for additional information.
-->
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar abs">
<div class="items-select left abs">
<div class="object-browse-bar bar l-flex">
<div class="items-select left">
<mct-representation key="'back-arrow'"
mct-object="domainObject"
class="l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject">
</mct-representation>
</div>
<div class="btn-bar right abs">
<mct-representation key="'action-group'"
mct-object="domainObject"
parameters="{ category: 'view-control' }">
</mct-representation>
<div class="btn-bar right">
<mct-representation key="'switcher'"
mct-object="domainObject"
ng-model="representation">
</mct-representation>
<!-- Temporarily, on mobile, the action buttons are hidden-->
<mct-representation key="'action-group'"
mct-object="domainObject"
parameters="{ category: 'view-control' }"
class="mobile-hide">
</mct-representation>
</div>
</div>

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

@ -19,38 +19,49 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div content="jquery-wrapper" class="abs holder-all browse-mode">
<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" ng-controller="BrowseController">
<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='split-pane-component treeview pane left'
>
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
<div class='holder tree-holder abs'
ng-hide="treeModel.search">
<mct-representation key="'tree'"
mct-object="domainObject"
ng-model="treeModel">
<div class='split-pane-component treeview pane left'>
<div class="holder abs l-mobile">
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
<div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search">
<mct-representation key="'tree'"
mct-object="domainObject"
parameters="tree"
ng-model="treeModel">
</mct-representation>
</div>
</div>
</div>
<mct-splitter></mct-splitter>
<div class='split-pane-component items pane'>
<div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'">
<mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject"
key="'browse-object'">
</mct-representation>
</div>
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
mct-device="mobile"
ng-click="tree.toggle()">m</div>
</div>
</mct-split-pane>
</div>
<mct-include key="'bottombar'"></mct-include>
</div>

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

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

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

@ -21,31 +21,27 @@
-->
<!-- For selected, add class 'selected' to outer div -->
<div class='item grid-item' ng-click='action.perform("navigate")'>
<div class="contents abs">
<div class='contents abs'>
<div class='top-bar bar abs'>
<div class='left abs'>
<mct-include key="_checkbox"></mct-include>
</div>
<div class='right abs'>
<div class='ui-symbol icon l-icon-alert'></div>
<div class='ui-symbol icon profile' title="Shared">P</div>
</div>
<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 icon l-icon-link" title="This object is a link"
class="ui-symbol l-icon-link" title="This object is a link"
ng-show="location.isLink()"
></span>
</div>
<div class='ui-symbol icon abs item-open'>}</div>
<div class='ui-symbol abs item-open'>}</div>
</div>
<div class='bottom-bar bar abs'>
<div class='title'>{{model.name}}</div>
<div class='details'>
<span>{{type.getName()}}</span>
<span ng-show="model.composition !== undefined">
{{model.composition.length}} Items
- {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
</span>
</div>
</div>

78
platform/commonUI/browse/src/BrowseTreeController.js Normal file
View File

@ -0,0 +1,78 @@
/*****************************************************************************
* 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 provide the ability to show/hide the tree in
* Browse mode.
* @constructor
* @memberof platform/commonUI/browse
*/
function BrowseTreeController($scope, agentService) {
var self = this;
this.agentService = agentService;
this.state = true;
/**
* Callback to invoke when any selection occurs in the tree.
* This controller can be passed in as the `parameters` object
* to the tree representation.
*
* @property {Function} callback
* @memberof platform/commonUI/browse.BrowseTreeController#
*/
this.callback = function () {
// Note that, since this is a callback to pass, this is not
// declared as a method but as a property which happens to
// be a function.
if (agentService.isPhone() && agentService.isPortrait()) {
// On phones, trees should collapse in portrait mode
// when something is navigated-to.
self.state = false;
}
};
}
/**
* Toggle the visibility of the tree.
*/
BrowseTreeController.prototype.toggle = function () {
this.state = !this.state;
};
/**
* Get the desired visibility state of the tree.
* @returns {boolean} true when visible
*/
BrowseTreeController.prototype.visible = function () {
return this.state;
};
return BrowseTreeController;
}
);

90
platform/commonUI/browse/test/BrowseTreeControllerSpec.js Normal file
View File

@ -0,0 +1,90 @@
/*****************************************************************************
* 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/BrowseTreeController"],
function (BrowseTreeController) {
'use strict';
describe("The BrowseTreeController", function () {
var mockScope,
mockAgentService,
mockDomainObjects,
controller;
// We want to reinstantiate for each test case
// because device state can influence constructor-time behavior
function instantiateController() {
return new BrowseTreeController(
mockScope,
mockAgentService
);
}
beforeEach(function () {
mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
mockDomainObjects = ['a', 'b'].map(function (id) {
var mockDomainObject = jasmine.createSpyObj(
'domainObject-' + id,
[ 'getId', 'getModel', 'getCapability' ]
);
mockDomainObject.getId.andReturn(id);
mockDomainObject.getModel.andReturn({});
return mockDomainObject;
});
mockAgentService = jasmine.createSpyObj(
"agentService",
[ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
);
});
it("is initially visible", function () {
expect(instantiateController().visible()).toBeTruthy();
});
it("allows visibility to be toggled", function () {
controller = instantiateController();
controller.toggle();
expect(controller.visible()).toBeFalsy();
controller.toggle();
expect(controller.visible()).toBeTruthy();
});
it("collapses on navigation changes on portrait-oriented phones", function () {
mockAgentService.isMobile.andReturn(true);
mockAgentService.isPhone.andReturn(true);
mockAgentService.isPortrait.andReturn(true);
controller = instantiateController();
expect(controller.visible()).toBeTruthy();
// Simulate a change from the tree by invoking controller's
controller.callback();
// Tree should have collapsed
expect(controller.visible()).toBeFalsy();
});
});
}
);

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

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

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

@ -25,7 +25,7 @@
All fields marked <span class="ui-symbol req">*</span> are required.
</div>
</div>
<div class="abs form outline editor">
<div class="abs form editor">
<div class='abs contents l-dialog'>
<mct-form ng-model="ngModel.value"
structure="ngModel.structure"

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

@ -25,7 +25,7 @@
<a href=""
ng-click="ngModel.cancel()"
ng-if="ngModel.cancel"
class="btn normal ui-symbol close">
class="clk-icon icon ui-symbol close">
x
</a>
<div class="abs contents" ng-transclude>

3
platform/commonUI/edit/src/actions/RemoveAction.js
View File

@ -94,8 +94,7 @@ define(
context;
// Stop when object is not defined (above ROOT)
while (traverseObject) {
while (traverseObject && traverseObject.getCapability('context')) {
// If object currently traversed to is object being removed
// navigate to parent of current object and then exit loop
if (traverseObject.getId() === object.getId()) {

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

@ -6,7 +6,7 @@
"services": [
{
"key": "urlService",
"implementation": "/services/UrlService.js",
"implementation": "services/UrlService.js",
"depends": [ "$location" ]
}
],

122
platform/commonUI/general/res/css/forms.css
View File

@ -48,6 +48,34 @@
/************************** CONTROLS */
/************************** PATHS */
/************************** TIMINGS */
/*****************************************************************************
* 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.
*****************************************************************************/
/************************** STYLE */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -121,83 +149,103 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 22, ../sass/forms/_elems.scss */
.section-header {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.1);
color: #cccccc;
font-size: 0.8em;
margin-top: 5px;
padding: 5px; }
/* line 28, ../sass/forms/_elems.scss */
.section-header:first-child {
margin-top: 0; }
padding: 5px 5px;
text-transform: uppercase; }
/* line 35, ../sass/forms/_elems.scss */
.form .form-section {
position: relative; }
/* line 39, ../sass/forms/_elems.scss */
position: relative;
margin-bottom: 20px; }
/* line 40, ../sass/forms/_elems.scss */
.form .form-row {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
*zoom: 1;
border-top: 1px solid #4d4d4d;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 5px;
padding: 5px;
padding: 5px 0;
position: relative; }
/* line 46, ../sass/forms/_elems.scss */
/* line 48, ../sass/forms/_elems.scss */
.form .form-row.first {
border-top: none; }
/* line 50, ../sass/forms/_elems.scss */
.form .form-row .label,
.form .form-row .controls {
/* line 52, ../sass/forms/_elems.scss */
.form .form-row > .label,
.form .form-row > .controls {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
*zoom: 1;
box-sizing: border-box;
font-size: 0.75rem;
font-size: 0.8rem;
line-height: 22px;
min-height: 22px; }
/* line 61, ../sass/forms/_elems.scss */
.form .form-row > .label {
float: left;
min-width: 120px;
position: relative;
white-space: nowrap;
width: 20%; }
/* line 69, ../sass/forms/_elems.scss */
width: 30%; }
/* line 71, ../sass/forms/_elems.scss */
.form .form-row .value {
color: #cccccc; }
/* line 73, ../sass/forms/_elems.scss */
/* line 75, ../sass/forms/_elems.scss */
.form .form-row .controls {
float: left;
position: relative;
width: 79.9%; }
/* line 80, ../sass/forms/_elems.scss */
width: 69.9%; }
/* line 82, ../sass/forms/_elems.scss */
.form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block;
line-height: 14px;
margin-right: 5px; }
/* line 89, ../sass/forms/_elems.scss */
/* line 91, ../sass/forms/_elems.scss */
.form .form-row .controls .l-med input[type="text"] {
width: 200px; }
/* line 93, ../sass/forms/_elems.scss */
/* line 95, ../sass/forms/_elems.scss */
.form .form-row .controls .l-small input[type="text"] {
width: 50px; }
/* line 97, ../sass/forms/_elems.scss */
/* line 99, ../sass/forms/_elems.scss */
.form .form-row .controls .l-numeric input[type="text"] {
text-align: right; }
/* line 101, ../sass/forms/_elems.scss */
/* line 103, ../sass/forms/_elems.scss */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 106, ../sass/forms/_elems.scss */
/* line 108, ../sass/forms/_elems.scss */
.form .form-row .field-hints {
color: #666666; }
/* line 110, ../sass/forms/_elems.scss */
/* line 112, ../sass/forms/_elems.scss */
.form .form-row .selector-list {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -210,7 +258,7 @@
position: relative;
height: 150px;
overflow: auto; }
/* line 121, ../sass/forms/_elems.scss */
/* line 123, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper {
overflow-y: auto;
position: absolute;
@ -219,24 +267,24 @@
bottom: 5px;
left: 5px; }
/* line 135, ../sass/forms/_elems.scss */
/* line 137, ../sass/forms/_elems.scss */
label.form-control.checkbox input {
margin-right: 5px;
vertical-align: top; }
/* line 141, ../sass/forms/_elems.scss */
/* line 143, ../sass/forms/_elems.scss */
.hint,
.s-hint {
font-size: 0.9em; }
/* line 146, ../sass/forms/_elems.scss */
/* line 148, ../sass/forms/_elems.scss */
.l-result {
display: inline-block;
min-width: 32px;
min-height: 32px;
position: relative;
vertical-align: top; }
/* line 153, ../sass/forms/_elems.scss */
/* line 155, ../sass/forms/_elems.scss */
.l-result div.s-hint {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -385,7 +433,7 @@ input[type="text"] {
margin: 0 0 2px 2px;
overflow: hidden;
position: relative; }
/* line 162, ../sass/_mixins.scss */
/* line 167, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -394,10 +442,10 @@ input[type="text"] {
background-image: -webkit-linear-gradient(#636363, #575757);
background-image: linear-gradient(#636363, #575757);
color: #bdbdbd; }
/* line 165, ../sass/_mixins.scss */
/* line 170, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
color: #878787; }
/* line 170, ../sass/_mixins.scss */
/* line 175, ../sass/_mixins.scss */
.form-control.select.btn-menu .invoke-menu {
color: #757575; }
/* line 29, ../sass/forms/_selects.scss */

235
platform/commonUI/general/res/css/items.css
View File

@ -48,6 +48,34 @@
/************************** CONTROLS */
/************************** PATHS */
/************************** TIMINGS */
/*****************************************************************************
* 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.
*****************************************************************************/
/************************** STYLE */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -79,6 +107,27 @@
}
}
*/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -137,7 +186,7 @@
margin-bottom: 3px;
margin-right: 3px;
position: relative; }
/* line 162, ../sass/_mixins.scss */
/* line 167, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -146,15 +195,15 @@
background-image: -webkit-linear-gradient(#707070, #636363);
background-image: linear-gradient(#707070, #636363);
color: #bdbdbd; }
/* line 165, ../sass/_mixins.scss */
/* line 170, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
color: #949494; }
/* line 170, ../sass/_mixins.scss */
/* line 175, ../sass/_mixins.scss */
.items-holder .item.grid-item.btn-menu .invoke-menu {
color: #828282; }
/* line 46, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type {
color: #0099cc !important; }
color: deepskyblue !important; }
/* line 48, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
color: #49dedb; }
@ -163,35 +212,35 @@
opacity: 1; }
/* line 57, ../sass/items/_item.scss */
.items-holder .item.grid-item .contents {
top: 5px;
right: 5px;
bottom: 5px;
left: 5px; }
/* line 61, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs {
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; }
/* line 63, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar {
bottom: auto;
height: 20px;
line-height: 20px;
text-align: right;
z-index: 5; }
/* line 66, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
/* line 69, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
width: auto; }
/* line 68, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
/* line 71, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
margin-left: 3px; }
/* line 70, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
/* line 73, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
color: #49dedb; }
/* line 76, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar.abs {
/* line 79, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar {
top: auto;
height: 30px;
padding: 5px; }
/* line 82, ../sass/items/_item.scss */
line-height: 110%; }
/* line 85, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main {
line-height: 160px;
z-index: 1; }
/* line 88, ../sass/items/_item.scss */
/* line 91, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
overflow: false;
position: absolute;
@ -201,24 +250,23 @@
left: 40px;
width: auto;
height: auto;
color: #737373;
text-align: center;
font-size: 96.9px;
line-height: 102px;
bottom: auto;
height: 102px;
top: 30px; }
/* line 100, ../sass/items/_item.scss */
/* line 103, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-icon-link {
color: #1a8e8b;
height: 36px;
line-height: 36px;
color: #49dedb;
height: auto;
line-height: 100%;
position: absolute;
font-size: 32px;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2; }
/* line 112, ../sass/items/_item.scss */
/* line 116, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity";
-o-transition-property: "opacity";
@ -238,17 +286,20 @@
width: 50px;
pointer-events: none;
text-align: right; }
/* line 124, ../sass/items/_item.scss */
/* line 128, ../sass/items/_item.scss */
.items-holder .item.grid-item .title {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
color: #cccccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-overflow: ellipsis; }
/* line 132, ../sass/items/_item.scss */
color: #cccccc; }
/* line 133, ../sass/items/_item.scss */
.items-holder .item.grid-item .details {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8em; }
/* line 135, ../sass/items/_item.scss */
/* line 137, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -270,7 +321,7 @@
color: #999;
display: inline-block;
color: #80dfff; }
/* line 162, ../sass/_mixins.scss */
/* line 167, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
@ -279,21 +330,123 @@
background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
background-image: linear-gradient(#2ecbff, #14c4ff);
color: #bdbdbd; }
/* line 165, ../sass/_mixins.scss */
/* line 170, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
color: #75ddff; }
/* line 170, ../sass/_mixins.scss */
/* line 175, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected.btn-menu .invoke-menu {
color: #52d4ff; }
/* line 140, ../sass/items/_item.scss */
/* line 142, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; }
/* line 141, ../sass/items/_item.scss */
/* line 143, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-main .item-open {
color: #80dfff; }
/* line 142, ../sass/items/_item.scss */
/* line 144, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .title {
color: white; }
/* line 144, ../sass/items/_item.scss */
/* line 146, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected:hover .item-main .item-type {
color: white !important; }
/*****************************************************************************
* 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.
*****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
width: 100%; }
/* line 33, ../sass/mobile/_item.scss */
.items-holder .item.grid-item > .contents {
top: 0px;
right: 10px;
bottom: 0px;
left: 10px; }
/* line 37, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.top-bar {
bottom: 0 !important;
left: auto !important;
right: 20px !important;
width: 40px !important;
height: auto !important;
text-align: right; }
/* line 44, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar {
left: 40px;
right: 60px; }
/* line 52, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
font-size: 30px;
right: auto;
bottom: auto;
left: 0;
line-height: 100%;
text-align: left;
width: 30px; }
/* line 61, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-icon-link {
bottom: 0; }
/* line 65, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
display: block;
opacity: 1;
font-size: 1em;
width: auto; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
height: 50px; }
/* line 78, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.top-bar {
line-height: 50px !important; }
/* line 82, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar {
top: 7px;
bottom: auto;
height: 35px; }
/* line 87, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
top: 10px;
bottom: auto;
height: 30px; }
/* line 90, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
line-height: 50px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 29, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
height: 66px; }
/* line 100, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.top-bar {
line-height: 66px !important; }
/* line 104, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar {
top: 15px;
bottom: auto;
height: 35px; }
/* line 109, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
top: 18px;
bottom: auto;
height: 30px; }
/* line 112, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
line-height: 66px; } }

1553
platform/commonUI/general/res/css/theme-espresso.css
View File

File diff suppressed because it is too large Load Diff

603
platform/commonUI/general/res/css/tree.css
View File

@ -48,6 +48,34 @@
/************************** CONTROLS */
/************************** PATHS */
/************************** TIMINGS */
/*****************************************************************************
* 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.
*****************************************************************************/
/************************** STYLE */
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
/************************** MOBILE TREE MENU DIMENSIONS */
/************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -79,6 +107,27 @@
}
}
*/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -104,7 +153,7 @@
ul.tree {
margin: 0;
padding: 0; }
/* line 308, ../sass/_mixins.scss */
/* line 314, ../sass/_mixins.scss */
ul.tree li {
list-style-type: none;
margin: 0;
@ -113,144 +162,175 @@ ul.tree {
ul.tree li {
display: block;
position: relative; }
/* line 28, ../sass/tree/_tree.scss */
ul.tree li span.tree-item {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s;
display: block;
font-size: 0.8em;
height: 1.5rem;
line-height: 1.5rem;
margin-bottom: 3px;
position: relative; }
/* line 39, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control {
display: inline-block;
margin-left: 5px;
font-size: 0.75em;
width: 10px; }
/* line 45, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control:hover {
color: #ffc700; }
/* line 50, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label {
display: block;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
left: 15px; }
/* line 57, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon {
overflow: false;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
color: #0099cc;
left: 5px;
right: auto;
width: 1em; }
/* line 65, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
text-shadow: black 0 1px 2px;
position: absolute;
z-index: 2; }
/* line 71, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
color: #ff3c00;
font-size: 8px;
line-height: 8px;
height: 8px;
width: 8px;
top: 1px;
right: -2px; }
/* line 77, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
color: #49dedb;
font-size: 8px;
line-height: 8px;
height: 8px;
width: 8px;
left: -3px;
bottom: 5px; }
/* line 86, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .title-label {
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
display: block;
left: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 97, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading {
pointer-events: none; }
/* line 99, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label {
opacity: 0.5; }
/* line 101, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label .title-label {
font-style: italic; }
/* line 105, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .wait-spinner {
margin-left: 14px; }
/* line 110, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected {
background: #005177;
color: #fff; }
/* line 114, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .view-control {
color: #0099cc; }
/* line 117, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .label .type-icon {
color: #fff; }
/* line 123, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 126, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .context-trigger {
display: block; }
/* line 129, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 135, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.loading) {
cursor: pointer; }
/* line 139, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger {
top: -1px;
position: absolute;
right: 3px; }
/* line 145, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger .invoke-menu {
font-size: 0.75em;
height: 0.9rem;
line-height: 0.9rem; }
/* line 154, ../sass/tree/_tree.scss */
/* line 29, ../sass/tree/_tree.scss */
ul.tree ul.tree {
margin-left: 15px; }
/* line 34, ../sass/tree/_tree.scss */
.tree-item,
.search-result-item {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s;
display: block;
font-size: 0.8rem;
height: 1.5rem;
line-height: 1.5rem;
margin-bottom: 3px;
position: relative; }
/* line 47, ../sass/tree/_tree.scss */
.tree-item .view-control,
.search-result-item .view-control {
display: inline-block;
margin-left: 5px;
font-size: 0.75em;
width: 10px; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 55, ../sass/tree/_tree.scss */
.tree-item .view-control:hover,
.search-result-item .view-control:hover {
color: #ffc700; } }
/* line 61, ../sass/tree/_tree.scss */
.tree-item .label,
.search-result-item .label {
display: block;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
line-height: 1.5rem; }
/* line 69, ../sass/tree/_tree.scss */
.tree-item .label .type-icon,
.search-result-item .label .type-icon {
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
font-size: 16px;
color: #0099cc;
left: 5px;
position: absolute;
top: 4px;
bottom: auto;
height: 16px;
line-height: 100%;
right: auto;
width: 16px; }
/* line 82, ../sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
.search-result-item .label .type-icon .icon.l-icon-link,
.search-result-item .label .type-icon .icon.l-icon-alert {
text-shadow: black 0 1px 2px;
position: absolute;
z-index: 2; }
/* line 88, ../sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-alert,
.search-result-item .label .type-icon .icon.l-icon-alert {
color: #ff3c00;
font-size: 8px;
line-height: 8px;
height: 8px;
width: 8px;
top: 1px;
right: -2px; }
/* line 94, ../sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-link,
.search-result-item .label .type-icon .icon.l-icon-link {
color: #49dedb;
font-size: 8px;
line-height: 8px;
height: 8px;
width: 8px;
left: -3px;
bottom: 0px; }
/* line 102, ../sass/tree/_tree.scss */
.tree-item .label .title-label,
.search-result-item .label .title-label {
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
display: block;
left: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 113, ../sass/tree/_tree.scss */
.tree-item.loading,
.search-result-item.loading {
pointer-events: none; }
/* line 115, ../sass/tree/_tree.scss */
.tree-item.loading .label,
.search-result-item.loading .label {
opacity: 0.5; }
/* line 117, ../sass/tree/_tree.scss */
.tree-item.loading .label .title-label,
.search-result-item.loading .label .title-label {
font-style: italic; }
/* line 121, ../sass/tree/_tree.scss */
.tree-item.loading .wait-spinner,
.search-result-item.loading .wait-spinner {
margin-left: 14px; }
/* line 126, ../sass/tree/_tree.scss */
.tree-item.selected,
.search-result-item.selected {
background: #005177;
color: #fff; }
/* line 130, ../sass/tree/_tree.scss */
.tree-item.selected .view-control,
.search-result-item.selected .view-control {
color: #0099cc; }
/* line 133, ../sass/tree/_tree.scss */
.tree-item.selected .label .type-icon,
.search-result-item.selected .label .type-icon {
color: #fff; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 141, ../sass/tree/_tree.scss */
.tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover {
background: rgba(255, 255, 255, 0.1);
color: #cccccc; }
/* line 144, ../sass/tree/_tree.scss */
.tree-item:not(.selected):hover .context-trigger,
.search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 147, ../sass/tree/_tree.scss */
.tree-item:not(.selected):hover .icon,
.search-result-item:not(.selected):hover .icon {
color: #33ccff; } }
/* line 154, ../sass/tree/_tree.scss */
.tree-item:not(.loading),
.search-result-item:not(.loading) {
cursor: pointer; }
/* line 158, ../sass/tree/_tree.scss */
.tree-item .context-trigger,
.search-result-item .context-trigger {
top: -1px;
position: absolute;
right: 3px; }
/* line 164, ../sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu {
font-size: 0.75em;
height: 0.9rem;
line-height: 0.9rem; }
/* line 173, ../sass/tree/_tree.scss */
.tree-item .label {
left: 15px; }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -272,227 +352,34 @@ ul.tree {
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 23, ../sass/search/_search.scss */
.abs.search-holder {
height: 25px;
bottom: 0;
z-index: 5; }
/* line 27, ../sass/search/_search.scss */
.abs.search-holder.active {
height: auto;
bottom: 0; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 27, ../sass/mobile/_tree.scss */
ul.tree ul.tree {
margin-left: 20px; }
/* line 38, ../sass/search/_search.scss */
.search {
display: flex;
flex-direction: column;
height: 100%; }
/* line 49, ../sass/search/_search.scss */
.search .search-bar {
font-size: 0.8em;
position: relative;
width: 100%; }
/* line 66, ../sass/search/_search.scss */
.search .search-bar .search-input {
height: 25px;
line-height: 25px;
padding-top: 0;
padding-bottom: 0; }
/* line 73, ../sass/search/_search.scss */
.search .search-bar .search-icon,
.search .search-bar .clear-icon,
.search .search-bar .menu-icon {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #737373;
height: 17px;
width: 17px;
line-height: 17px;
/* line 31, ../sass/mobile/_tree.scss */
.tree-item,
.search-result-item {
height: 35px;
line-height: 35px;
margin-bottom: 0px; }
/* line 36, ../sass/mobile/_tree.scss */
.tree-item .view-control,
.search-result-item .view-control {
position: absolute;
text-align: center;
top: 4px; }
/* line 86, ../sass/search/_search.scss */
.search .search-bar .clear-icon,
.search .search-bar .menu-icon {
cursor: pointer;
transition: color .25s; }
/* line 93, ../sass/search/_search.scss */
.search .search-bar .search-input {
position: relative;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 100, ../sass/search/_search.scss */
.search .search-bar .search-input input {
width: 100%; }
/* line 105, ../sass/search/_search.scss */
.search .search-bar .search-icon {
color: #737373;
left: 3px;
transition: visibility .15s, opacity .15s, color .2s;
pointer-events: none; }
/* line 125, ../sass/search/_search.scss */
.search .search-bar .search-input:hover + div.search-icon {
color: #a6a6a6; }
/* line 129, ../sass/search/_search.scss */
.search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0;
transition: visibility .15s, opacity .15s, color .2s; }
/* line 138, ../sass/search/_search.scss */
.search .search-bar .clear-icon.content {
visibility: visible;
opacity: 1; }
/* line 143, ../sass/search/_search.scss */
.search .search-bar .clear-icon:hover {
color: #a6a6a6; }
/* line 148, ../sass/search/_search.scss */
.search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 154, ../sass/search/_search.scss */
.search .search-bar .menu-icon:hover {
color: #a6a6a6; }
/* line 159, ../sass/search/_search.scss */
.search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 1;
transition: visibility .05s, opacity .05s; }
/* line 169, ../sass/search/_search.scss */
.search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 176, ../sass/search/_search.scss */
.search .search-bar .menu-icon:hover + div.search-menu-holder {
visibility: visible; }
/* line 179, ../sass/search/_search.scss */
.search .search-bar div.search-menu-holder:hover {
visibility: visible; }
/* line 184, ../sass/search/_search.scss */
.search .active-filter-display {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 130%;
padding: 5px 0;
padding-left: 1.4625em;
font-size: 0.65em;
margin-top: 3px; }
/* line 199, ../sass/search/_search.scss */
.search .active-filter-display .clear-filters-icon {
opacity: 0.4;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 210, ../sass/search/_search.scss */
.search .active-filter-display.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0; }
/* line 220, ../sass/search/_search.scss */
.search .search-scroll {
order: 3;
margin-top: 4px;
overflow-y: auto;
top: auto;
height: auto;
max-height: 100%;
position: relative; }
/* line 235, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item {
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s;
margin-bottom: 2px;
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px; }
/* line 249, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item .label {
margin-left: 6px; }
/* line 253, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
left: 29px;
right: 5px;
font-size: .8em;
line-height: 17px;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 275, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 279, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 282, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 287, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
display: none;
text-shadow: black 0 1px 2px;
z-index: 2;
color: #49dedb;
font-size: 8px;
line-height: 8px;
height: 8px;
width: 8px;
margin-left: -25px; }
/* line 299, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 302, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 305, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 313, ../sass/search/_search.scss */
.search .search-scroll .load-icon {
position: relative; }
/* line 315, ../sass/search/_search.scss */
.search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 319, ../sass/search/_search.scss */
.search .search-scroll .load-icon.loading .title-label {
font-style: italic;
font-size: .9em;
opacity: 0.5;
margin-left: 26px;
line-height: 24px; }
/* line 329, ../sass/search/_search.scss */
.search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 334, ../sass/search/_search.scss */
.search .search-scroll .load-icon:not(.loading) {
cursor: pointer; }
/* line 339, ../sass/search/_search.scss */
.search .search-scroll .load-more-button {
margin-top: 5px 0;
font-size: 0.8em;
position: relative;
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px;
white-space: nowrap; }
font-size: 1.1em;
right: 0px;
width: 30px;
text-align: center; }
/* line 45, ../sass/mobile/_tree.scss */
.tree-item .label,
.search-result-item .label {
left: 0;
right: 35px;
line-height: 35px; }
/* line 50, ../sass/mobile/_tree.scss */
.tree-item .label .type-icon,
.search-result-item .label .type-icon {
top: 9px;
bottom: auto;
height: 16px; } }

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

Binary file not shown.

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

@ -83,7 +83,8 @@
<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
<glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe608;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h128v128h-128v128h320v-256h64v-128z" />
<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
<glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

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

Binary file not shown.

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

Binary file not shown.

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

@ -47,6 +47,8 @@ $colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
// Menu colors
$colorMenuBg: lighten($colorBodyBg, 23%);
$colorMenuFg: lighten($colorMenuBg, 70%);
@ -104,6 +106,7 @@ $treeSearchInputBarH: 25px;
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 40px;
$overlayMargin: 25px;
// Items
$ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px;
@ -111,6 +114,7 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey;
@ -144,10 +148,13 @@ $reqSymbolFontSize: 0.7em;
/************************** CONTROLS */
$controlDisabledOpacity: 0.3;
$formLabelW: 20%;
$formLabelW: 30%;
$formInputH: 22px;
$formRowCtrlsH: 14px;
$formTBPad: $interiorMargin;
$formLRPad: $interiorMargin;
$menuLineH: 1.5rem;
$menuLineHPx: 24px;
$scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px;

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

@ -71,12 +71,6 @@ p {
margin-bottom: $interiorMarginLg;
}
span {
/* 618 DEBUG
box-sizing: border-box;
*/
}
mct-container {
display: block;
}

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

@ -45,7 +45,7 @@
}
}
.bar .icon {
.bar .ui-symbol {
display: inline-block;
}
@ -65,9 +65,9 @@
position: absolute;
}
.tree-item .type-icon {
font-size: 16px; // 16px is crisp size
}
//.tree-item .type-icon {
// font-size: 16px; // 16px is crisp size
//}
.l-icon-link:before {
content: "\f4";

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

@ -1,4 +1,3 @@
/*****************************************************************************
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -28,11 +27,13 @@
@import "compass/utilities";
@import "mixins";
@import "mobile/mixins";
@import "effects";
@import "global";
@import "fonts";
@import "user-environ/layout";
//@import "search/layout";
@import "mobile/layout";
@import "fixed-position";
@import "about";
@import "text";
@ -46,6 +47,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
@import "mobile/controls/menus";
@import "controls/time-controller";
@import "edit/editor";
@import "features/imagery";
@ -58,11 +60,14 @@
@import "forms/datetime";
@import "forms/filter";
@import "plots/plots-main";
@import "search/search";
@import "mobile/search/search";
@import "overlay/overlay";
@import "mobile/overlay/overlay";
@import "user-environ/frame";
@import "user-environ/top-bar";
@import "user-environ/bottom-bar";
@import "user-environ/object-browse";
//@import "user-environ/object-browse";
@import "user-environ/tool-bar";
@import "helpers/bubbles";
@import "helpers/splitter";

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

@ -19,157 +19,162 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
overflow: $overflowHidden;
position: absolute;
top: $offset; right: $offset; bottom: $offset; left: $offset;
width: auto; height: auto;
top: $offset;
right: $offset;
bottom: $offset;
left: $offset;
width: auto;
height: auto;
}
@mixin ancillaryIcon($d, $c) {
// Used for small icons used in combination with larger icons,
// like the link and alert icons in tree items.
color: $c;
font-size: $d;
line-height: $d;
height: $d;
width: $d;
// Used for small icons used in combination with larger icons,
// like the link and alert icons in tree items.
color: $c;
font-size: $d;
line-height: $d;
height: $d;
width: $d;
}
@mixin trans-prop-nice($props, $t: 500ms) {
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property($props);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property($props);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {
@include transition-property(height, bottom, top);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@include transition-property(height, bottom, top);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@mixin trans-prop-nice-resize-w($t: 0.5s) {
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@mixin triangle-right($size, $color) {
$size: $size/2;
$ratio: 1;
width: 0;
height: 0;
border-top: $size/$ratio solid transparent;
border-left: $size solid $color;
border-bottom: $size/$ratio solid transparent;
$size: $size/2;
$ratio: 1;
width: 0;
height: 0;
border-top: $size/$ratio solid transparent;
border-left: $size solid $color;
border-bottom: $size/$ratio solid transparent;
}
@mixin triangle-down($size, $color) {
$size: $size/2;
$ratio: 1;
width: 0;
height: 0;
border-left: $size/$ratio solid transparent;
border-top: $size solid $color;
border-right: $size/$ratio solid transparent;
$size: $size/2;
$ratio: 1;
width: 0;
height: 0;
border-left: $size/$ratio solid transparent;
border-top: $size solid $color;
border-right: $size/$ratio solid transparent;
}
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
//$size: $size*2;
width: 0;
height: 0;
$slopedB: $size/$ratio solid transparent;
$straightB: $size solid $color;
@if $dir == "up" {
border-left: $slopedB;
border-right: $slopedB;
border-bottom: $straightB;
} @else if $dir == "right" {
border-top: $slopedB;
border-bottom: $slopedB;
border-left: $straightB;
} @else if $dir == "down" {
border-left: $slopedB;
border-right: $slopedB;
border-top: $straightB;
} @else {
border-top: $slopedB;
border-bottom: $slopedB;
border-right: $straightB;
}
//$size: $size*2;
width: 0;
height: 0;
$slopedB: $size/$ratio solid transparent;
$straightB: $size solid $color;
@if $dir == "up" {
border-left: $slopedB;
border-right: $slopedB;
border-bottom: $straightB;
} @else if $dir == "right" {
border-top: $slopedB;
border-bottom: $slopedB;
border-left: $straightB;
} @else if $dir == "down" {
border-left: $slopedB;
border-right: $slopedB;
border-top: $straightB;
} @else {
border-top: $slopedB;
border-bottom: $slopedB;
border-right: $straightB;
}
}
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-45deg,
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 100%
));
background-repeat: repeat;
background-size: $d $d;
@include background-image(linear-gradient(-45deg,
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 100%
));
background-repeat: repeat;
background-size: $d $d;
}
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
$deg: 90deg;
@if ($repeatDir != 'x') {
$deg: 0deg;
$repeatDir: repeat-y;
} @else {
$repeatDir: repeat-x;
}
$deg: 90deg;
@if ($repeatDir != 'x') {
$deg: 0deg;
$repeatDir: repeat-y;
} @else {
$repeatDir: repeat-x;
}
@include background-image(linear-gradient($deg,
$c 1px, transparent 1px,
transparent 100%
));
background-repeat: $repeatDir;
@include background-image(linear-gradient($deg,
$c 1px, transparent 1px,
transparent 100%
));
background-repeat: $repeatDir;
}
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
$ltnRatio: 7%;
$gradRatio: 5%;
$hovRatio: 7%;
$bgBase: lighten($bg, $ltnRatio);
$fgBase: lighten($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio);
$gradC2: $bgBase;
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
$ltnRatio: 7%;
$gradRatio: 5%;
$hovRatio: 7%;
$bgBase: lighten($bg, $ltnRatio);
$fgBase: lighten($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio);
$gradC2: $bgBase;
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
@include background-image(linear-gradient($gradC1, $gradC2));
@include border-radius($controlCr);
@include box-sizing(border-box);
@include boxShdwSubtle();
border: none;
border-top: 1px solid lighten($gradC1, 2%);
color: $fg;
display: inline-block;
@if $hover == true {
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
color: lighten($fgBase, $hovRatio);
&.btn-menu .invoke-menu {
color: lighten($cInvokeBase, $hovRatio);
}
}
}
&.btn-menu .invoke-menu {
color: $cInvokeBase;
}
@include background-image(linear-gradient($gradC1, $gradC2));
@include border-radius($controlCr);
@include box-sizing(border-box);
@include boxShdwSubtle();
border: none;
border-top: 1px solid lighten($gradC1, 2%);
color: $fg;
display: inline-block;
@if $hover == true {
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
color: lighten($fgBase, $hovRatio);
&.btn-menu .invoke-menu {
color: lighten($cInvokeBase, $hovRatio);
}
}
}
&.btn-menu .invoke-menu {
color: $cInvokeBase;
}
}
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@ -183,45 +188,45 @@
}
@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", 0.75s);
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;
} @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",50ms);
border-color: $colorKey;
}
} @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", 50ms);
border-color: $colorKey;
}
}
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerSubtle($bg, $fg, true);
@include containerSubtle($bg, $fg, true);
}
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
// No longer should be used; use btnSubtle instead
//@include containerSubtle($bg, $fg, true);
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
/* &:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
}*/
// No longer should be used; use btnSubtle instead
//@include containerSubtle($bg, $fg, true);
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
/* &:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
}*/
}
@mixin boxIncised($sVal: 0.6) {
@ -237,59 +242,60 @@
}
@mixin boxShdwLarge($sVal: 0.7) {
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
}
@mixin outerGlow($color: #fff, $sVal: 0.3) {
@include box-shadow(rgba($color, $sVal) 0 0 30px);
@include box-shadow(rgba($color, $sVal) 0 0 30px);
}
@mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
@include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
@include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
}
@mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
@include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
}
@mixin txtShdwSubtle($sVal: 0.1) {
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
}
@mixin txtShdwLarge($sVal: 0.7) {
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
}
/*********************************************** FORM ELEMENTS */
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
// background: lighten($bg, 20%);
background: rgba(#fff, 0.1);
border: none;
//border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%);
outline: none;
&.error {
background: rgba(red, 0.5);
}
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
// background: lighten($bg, 20%);
background: rgba(#fff, 0.1);
border: none;
//border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%);
outline: none;
&.error {
background: rgba(red, 0.5);
}
}
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: $interiorMargin;
@include input-base($bg, $fg);
padding: $interiorMargin;
}
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include nice-input($bg, $fg);
background: lighten($bg, 3%);
border-bottom: 1px solid lighten($bg, 10%);
@include nice-input($bg, $fg);
background: lighten($bg, 3%);
border-bottom: 1px solid lighten($bg, 10%);
}
/*
@ -307,24 +313,40 @@
padding: 0;
li {
list-style-type: none;
margin:0;
margin: 0;
padding: 0;
}
}
@mixin vertical-align {
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
@mixin webkitProp($name, $val) {
#{$name}: #{$val};
-webkit-#{$name}: #{$val};
}
@mixin webkitVal($name, $val) {
#{$name}: #{$val};
#{$name}: -webkit-#{$val};
}
@mixin verticalCenter {
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@mixin verticalCenterBlock($holderH, $itemH) {
top: floor(($holderH - $itemH) / 2);
bottom: auto;
height: $itemH;
}
@mixin ellipsize() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin scrollH($showBar: auto) {
@ -338,21 +360,26 @@
}
@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%;
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);
background-color: rgba($c, $a);
}
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
@include box-sizing(border-box);
border: 1px dotted rgba($c, $a);
}
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
@ -373,6 +400,6 @@
}
@mixin s-stale($a: 0.5) {
color: rgba($colorTelemFresh, $a) !important;
font-style: italic;
}
color: rgba($colorTelemFresh, $a) !important;
font-style: italic;
}

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

@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
.btn,
.l-btn {
@include user-select(none);
line-height: 1.5em; // Was 1.25em
//line-height: 1.5em; // Was 1.25em
line-height: 150%;
padding: 0 $pad;
text-decoration: none;
&.lg,

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

@ -102,7 +102,7 @@
.btn-bar {
// position: relative;
.btn,
/* .btn,
.btn-set,
.t-btn {
display: inline-block;
@ -113,7 +113,7 @@
&:first-child {
// margin-left: 0;
}
}
}*/
}
.l-composite-control {
@ -153,6 +153,7 @@
font-size: 0.7rem;
}
/*
.btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
display: inline-block;
@ -171,37 +172,33 @@
}
}
}
*/
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
$h: $btnToolbarH;
display: inline-block;
font-size: $h * $btnFontSizeToH;
height: $h;
line-height: $h - 3;
.icon:not(.invoke-menu) {
// position: relative;
// top: -0.04em;
//font-size: 150%;
//vertical-align: middle;
}
line-height: 200%;
vertical-align: top;
}
label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma);
$d: $formRowCtrlsH;
// @include vertical-align();
cursor: pointer;
display: inline-block;
line-height: $d;
margin-right: $interiorMargin * 4;
padding-left: $d + $interiorMargin;
position: relative;
vertical-align: top;
vertical-align: middle; // was top
em {
color: $colorBodyFg;
display: inline-block;
@ -326,9 +323,9 @@ label.checkbox.custom {
$p: 10px;
$badgeM: $interiorMargin;
$badgeD: $h - ($badgeM * 2);
height: $h;
line-height: $h;
padding-right: 10px;
//height: $h;
//line-height: $h;
//padding-right: 10px;
&.browse-btn {
margin-right: $interiorMargin;
padding-left: $badgeD + $badgeM * 2;
@ -351,7 +348,6 @@ label.checkbox.custom {
.context-available {
$c: $colorKey;
color: $c;
//padding: 0 5px;
&:hover {
color: lighten($c, 10%);
}
@ -359,24 +355,63 @@ label.checkbox.custom {
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
.type-icon {
//vertical-align: top;
}
}
/******************************************************** OBJECT-HEADER */
.object-header {
display: inline-block;
//@include test();
font-size: 1em;
.label {
.title-label {
color: lighten($colorBodyFg, 40%);
}
.type-icon {
font-size: 120%;
margin-right: $interiorMargin;
vertical-align: middle;
//> .title-label,
//> .type-icon,
//> .context-available {
// //@include tmpBorder(#6666ff);
// //vertical-align: middle;
//}
> .type-icon {
font-size: 120%;
float: left;
margin-right: $interiorMargin;
}
.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;
}
.title-label {
//@include test(green, 0.9);
@include ellipsize();
color: lighten($colorBodyFg, 40%);
@include webkitProp(flex, '0 1 auto');
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
//position: relative;
}
.context-available {
font-size: 0.7em;
@include webkitProp(flex, '0 0 1');
//margin-right: $interiorMargin;
}
@include desktop {
.context-available {
@include trans-prop-nice(opacity, 0.25s);
opacity: 0;
font-size: 0.8em;
}
&:hover {
.context-available {
@ -386,16 +421,6 @@ label.checkbox.custom {
}
}
.top-bar,
.object-browse-bar {
.object-header {
font-size: 1.1em;
span {
display: inline-block;
}
}
}
/******************************************************** SLIDERS */
.slider {
@ -449,24 +474,26 @@ label.checkbox.custom {
/******************************************************** BROWSER ELEMENTS */
::-webkit-scrollbar {
@include sliderTrack();
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}
::-webkit-scrollbar-thumb {
$bg: lighten($colorBodyBg, 10%);
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
@include border-radius(1px);
@include box-sizing(border-box);
@include boxShdwSubtle();
border-top: 1px solid lighten($bg, 20%);
&:hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
@include desktop {
::-webkit-scrollbar {
@include sliderTrack();
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}
}
::-webkit-scrollbar-corner {
background: rgba(#000, 0.4);
::-webkit-scrollbar-thumb {
$bg: lighten($colorBodyBg, 10%);
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
@include border-radius(1px);
@include box-sizing(border-box);
@include boxShdwSubtle();
border-top: 1px solid lighten($bg, 20%);
&:hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
}
}
::-webkit-scrollbar-corner {
background: rgba(#000, 0.4);
}
}

5
platform/commonUI/general/res/sass/features/_imagery.scss
View File

@ -1,8 +1,6 @@
.l-image-main-wrapper,
.l-image-main,
.l-image-main-controlbar,
.l-image-main-controlbar .left,
.l-image-main-controlbar .right,
.l-image-thumbs-wrapper {
@include absPosDefault(0, false);
}
@ -61,12 +59,9 @@
.left {
//@include test(red);
text-align: left;
width: 75% !important;
}
.right {
//@include test(green);
min-width: 40px;
width: 25% !important;
z-index: 2;
}
.l-date,

2
platform/commonUI/general/res/sass/forms.scss
View File

@ -26,8 +26,10 @@
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "forms/mixins";
@import "mobile/mixins";
@import "forms/elems";
@import "forms/textarea";
@import "forms/text-input";

32
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@ -20,47 +20,49 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.section-header {
@include border-radius(3px);
background: rgba(white, 0.1);
@include border-radius($basicCr);
background: rgba(#fff, 0.1);
$c: lighten($colorBodyFg, 20%);
//border-bottom: 1px solid rgba(#fff, 0.3);
color: $c;
font-size: 0.8em;
margin-top: $interiorMargin;
padding: $interiorMargin;
&:first-child {
margin-top: 0;
}
padding: $formTBPad $formLRPad;
text-transform: uppercase;
}
.form {
// @include test(orange);
.form-section {
position: relative;
margin-bottom: $interiorMarginLg * 2;
}
.form-row {
$m: $interiorMargin;
@include box-sizing(border-box);
@include clearfix;
border-top: 1px solid $colorInteriorBorder;
margin-top: $interiorMargin;
padding: $interiorMargin;
border-top: 1px solid $colorFormLines;
margin-top: $m;
padding: $formTBPad 0;
position: relative;
&.first {
border-top: none;
}
.label,
.controls {
// @include test(orange);
>.label,
>.controls {
@include box-sizing(border-box);
@include clearfix;
box-sizing: border-box;
font-size: 0.75rem;
font-size: 0.8rem;
line-height: $formInputH;
min-height: $formInputH;
}
>.label {
// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
//@include test(orange, 0.05);
float: left;
min-width: 120px;
position: relative;
white-space: nowrap;
width: $formLabelW;

8
platform/commonUI/general/res/sass/forms/_validation.scss
View File

@ -25,18 +25,18 @@
padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
&::after {
// @include test(yellow, 0.3);
display: block;
/* display: block;
position: absolute;
top: 0;
right: $reqSymbolM;
bottom: 0;
left: auto;
height: auto;
width: $reqSymbolW;
width: $reqSymbolW;*/
font-family: symbolsfont;
font-size: $reqSymbolFontSize;
text-align: right;
vertical-align: middle;
//text-align: right;
//vertical-align: middle;
}
}
&.invalid,

35
platform/commonUI/general/res/sass/helpers/_bubbles.scss
View File

@ -75,15 +75,32 @@
margin-left: $bubbleArwSize*2;
.l-infobubble::before {
right: 100%;
@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
// NOTE: [MOBILE] REMOVES TRIANGLE
// Removes the triangle located on the info
// bubble for phones only, for tablets and
// desktops, triangle remains.
@include desktopandtablet {
@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
}
}
}
&.arw-right {
margin-right: $bubbleArwSize*2;
// NOTE: [MOBILE] REMOVES RIGHT MARGIN
// Removes right margin made for the
// triangle on mobile
@include desktopandtablet {
margin-right: $bubbleArwSize*2;
}
.l-infobubble::before {
left: 100%;
@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
// NOTE: [MOBILE] REMOVES TRIANGLE
// Removes the triangle located on the info
// bubble for phones only, for tablets and
// desktops, triangle remains.
@include desktopandtablet {
@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
}
}
}
@ -122,12 +139,12 @@
//************************************************* LOOK AND FEEL
.l-thumbsbubble-wrapper {
.arw-up {
@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
}
.arw-down {
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
}
.arw-up {
@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
}
.arw-down {
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
}
}
.s-infobubble {

5
platform/commonUI/general/res/sass/items.scss
View File

@ -26,5 +26,8 @@
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "items/item";
@import "mobile/mixins";
@import "items/item";
@import "mobile/item";

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

@ -44,7 +44,7 @@
position: relative;
&:hover .item-main {
.item-type {
color: $colorKey !important;
color: lighten($colorKey, 10%) !important;
.l-icon-link {
color: $colorIconLink;
}
@ -55,13 +55,16 @@
}
}
.contents {
top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
//@include test(red);
$m: $interiorMarginLg;
top: $m; right: $m; bottom: $m; left: $m;
}
.bar {
&.top-bar.abs {
&.top-bar {
bottom: auto;
height: $ueBrowseGridItemTopBarH;
line-height: $ueBrowseGridItemTopBarH;
text-align: right;
z-index: 5;
.left, .right {
width: auto;
@ -73,10 +76,10 @@
}
}
}
&.bottom-bar.abs {
&.bottom-bar {
top: auto;
height: $ueBrowseGridItemBottomBarH;
padding: $interiorMargin;
//height: $ueBrowseGridItemBottomBarH;
line-height: 110%;
}
}
.item-main {
@ -89,7 +92,7 @@
//@include trans-prop-nice("color", $transTime);
@include absPosDefault($iconMargin, false);
//@include test(red);
color: $colorItemFg;
//color: $colorItemFg;
text-align: center;
font-size: $iconD * 0.95; //6em;
line-height: $iconD;
@ -99,11 +102,12 @@
//line-height: $lh;
.l-icon-link {
// When the link icon is in the item-type icon holder
color: darken($colorIconLink, 25%);
height: 36px;
line-height: 36px;
//color: darken($colorIconLink, 25%);
color: $colorIconLink;
height: auto;
line-height: 100%;
position: absolute;
font-size: 32px;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2;
@ -123,13 +127,11 @@
}
.title {
@include txtShdwSubtle();
@include ellipsize();
color: lighten($colorBodyFg, 20%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// font-weight: bold;
}
.details {
@include ellipsize();
font-size: 0.8em;
}
&.selected {

86
platform/commonUI/general/res/sass/mobile/_constants.scss Normal file
View File

@ -0,0 +1,86 @@
/*****************************************************************************
* 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.
*****************************************************************************/
/************************** STYLE */
$colorMobilePaneLeft: #222;
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
$mobileListIconSize: 30px;
$mobileTitleDescH: 35px;
$mobileOverlayMargin: 10px;
$phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */
$mobileTreeItemH: 35px;
$mobileTreeItemIndent: 20px;
$mobileTreeRightArrowW: 30px;
/************************** WINDOW DIMENSIONS FOR RWD */
$phoMaxW: 514px;
$phoMaxH: 740px;
$tabMinW: 515px;
$tabMaxW: 799px;
$tabMinH: 741px;
$tabMaxH: 1024px;
$compMinW: 800px;
$compMinH: 1025px;
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
$screenPortrait: "screen and (orientation: portrait)";
$screenLandscape: "screen and (orientation: landscape)";
$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
$desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
$phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
$desktopPortrait: "screen and #{$desktopPortraitCheck}";
$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$proporMenuOnly: 90%;
$proporMenuWithView: 40%;

119
platform/commonUI/general/res/sass/mobile/_item.scss Normal file
View File

@ -0,0 +1,119 @@
/*****************************************************************************
* 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.
*****************************************************************************/
// Sets the size of the items in the folder
// representation. Instead of a grid,
// a list is used.
.items-holder {
.item {
&.grid-item {
$titleH: 30px;
@include phoneandtablet {
width: 100%;
>.contents {
top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
}
.bar {
&.top-bar {
// Becomes the right side of the item
//@include test(blue);
bottom: 0 !important; left: auto !important; right: 20px !important;
width: 40px !important; height: auto !important;
text-align: right;
}
&.bottom-bar {
// Becomes the left side of the item
left: $mobileListIconSize + $interiorMarginLg;
right: 60px;
}
}
.item-main {
.item-type {
//@include test(blue);
font-size: $mobileListIconSize;
right: auto;
bottom: auto;
left: 0;
line-height: 100%;
text-align: left;
width: $mobileListIconSize;
.l-icon-link {
bottom: 0;
}
}
.item-open {
display: block;
opacity: 1;
font-size: 1em;
width: auto;
}
}
}
@include phone {
$dHei: $phoneItemH;
height: $dHei;
.bar {
&.top-bar {
// Becomes the right side of the item
line-height: $dHei !important;
}
&.bottom-bar {
@include verticalCenterBlock($dHei, $mobileTitleDescH);
}
}
.item-main {
.item-type {
@include verticalCenterBlock($dHei, $mobileListIconSize);
}
.item-open {
line-height: $dHei;
}
}
}
@include tablet {
$dHei: $tabletItemH;
height: $dHei;
.bar {
&.top-bar {
// Becomes the right side of the item
line-height: $dHei !important;
}
&.bottom-bar {
@include verticalCenterBlock($dHei, $mobileTitleDescH);
}
}
.item-main {
.item-type {
@include verticalCenterBlock($dHei, $mobileListIconSize);
}
.item-open {
line-height: $dHei;
}
}
}
}
}
}

174
platform/commonUI/general/res/sass/mobile/_layout.scss Normal file
View File

@ -0,0 +1,174 @@
/*****************************************************************************
* 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.
*****************************************************************************/
@include phoneandtablet {
// Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes
.browse-wrapper,
.pane {
top: 0 !important; right: 0; bottom: 0; left: 0;
}
.pane.left.treeview {
background-color: $colorMobilePaneLeft;
}
.pane.right-repr {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
#content-area {
@include slMenuTransitions;
opacity: 1;
}
}
.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;
right: $bodyMargin !important;
bottom: $bodyMargin !important;
left: $bodyMargin !important;
}
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.browse-hidetree {
@include user-select(none);
// 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;
}
// Sets the right represenation when
// the tree is hidden.
.pane.right-repr {
left: 0 !important;
}
}
.browse-showtree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include user-select(none);
// Sets the left tree menu when the tree is shown.
.pane.left.treeview {
@include trans-prop-nice(opacity, .4s);
@include 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 {
left: $proporMenuWithView !important;
//width: auto !important;
//left: 0 !important;
//transform: translateX($proporMenuWithView);
}
}
.mobile-menu-icon {
font-size: 110%;
position: absolute;
top: $bodyMargin + 2;
left: $bodyMargin;
}
.object-browse-bar {
//@include test();
left: 30px !important;
.context-available {
opacity: 1 !important;
}
.view-switcher {
margin-right: 0 !important;
.name {
// Hide the name in mobile
display: none;
}
}
}
.tree-holder {
overflow-x: hidden !important;
}
.mobile-disable-select {
@include user-select(none);
}
// Hides objects on phone and tablet
.mobile-hide,
.mobile-hide-important {
display: none !important;
}
.mobile-back-hide {
pointer-events: none;
@include trans-prop-nice(opacity, .4s);
opacity: 0;
}
.mobile-back-unhide {
pointer-events: all;
@include trans-prop-nice(opacity, .4s);
opacity: 1;
}
}
@include phonePortrait {
.browse-showtree {
.pane.left.treeview {
width: $proporMenuOnly !important;
}
.pane.right-repr {
left: 0 !important;
@include webkitProp(transform, translateX($proporMenuOnly));
#content-area {
opacity: 0;
}
}
}
}
@include desktop {
.desktop-hide {
display: none;
}
}

107
platform/commonUI/general/res/sass/mobile/_mixins.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.
*****************************************************************************/
// Phones in any orientation
@mixin phone {
@media #{$phonePortrait},
#{$phoneLandscape},
#{$phoneLandscapeEmu} {
@content
}
}
//Phones in portrait orientation
@mixin phonePortrait {
@media #{$phonePortrait} {
@content
}
}
// Phones in landscape orientation
@mixin phoneLandscape {
@media #{$phoneLandscape},
#{$phoneLandscapeEmu} {
@content
}
}
// Tablets in any orientation
@mixin tablet {
@media #{$tabletPortrait},
#{$tabletLandscape},
#{$tabletLandscapeEmu} {
@content
}
}
// Tablets in portrait orientation
@mixin tabletPortrait {
@media #{$tabletPortrait} {
@content
}
}
// Tablets in landscape orientation
@mixin tabletLandscape {
@media #{$tabletLandscape},
#{$tabletLandscapeEmu} {
@content
}
}
// Phones and tablets in any orientation
@mixin phoneandtablet {
@media #{$phonePortrait},
#{$phoneLandscape},
#{$phoneLandscapeEmu},
#{$tabletPortrait},
#{$tabletLandscape},
#{$tabletLandscapeEmu} {
@content
}
}
// Desktop monitors in any orientation
@mixin desktopandtablet {
@media #{$tabletPortrait},
#{$tabletLandscape},
#{$tabletLandscapeEmu},
#{$desktopPortrait},
#{$desktopLandscape} {
@content
}
}
// Desktop monitors in any orientation
@mixin desktop {
@media #{$desktopPortrait},
#{$desktopLandscape} {
@content
}
}
// Transition used for the slide menu
@mixin slMenuTransitions {
@include transition-duration(.35s);
transition-timing-function: ease;
backface-visibility: hidden;
}

42
platform/commonUI/general/res/sass/search/_layout.scss → platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -20,12 +20,38 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
// Overrides some styling in user-environ/_layout.scss
.pane {
&.treeview.left {
.tree-holder {
// Want tree holder to start right below the search bar.
top: 60px;
}
@include phoneandtablet {
ul.tree {
// Sets the margin on the left, which causes the
// running indentation after each folder is made
ul.tree {
margin-left: $mobileTreeItemIndent;
}
}
}
.tree-item,
.search-result-item {
height: $mobileTreeItemH;
line-height: $mobileTreeItemH;
margin-bottom: 0px;
.view-control {
//@include test(red);
position: absolute;
font-size: 1.1em;
right: 0px;
width: $mobileTreeRightArrowW;
text-align: center;
}
.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 {
}
}
}
}

27
platform/commonUI/general/res/sass/user-environ/_object-browse.scss → platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@ -19,12 +19,25 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.object-browse-bar {
height: $ueTopBarH;
line-height: $ueTopBarH;
.items-select {
.btn-menu {
margin-right: $interiorMargin * 3;
// Override the Create menu for mobile
@include phoneandtablet {
.menu-element {
.super-menu {
$d: 250px;
width: $d;
height: $d;
.pane {
&.left {
border-right: none;
padding-right: 0;
width: 100%;
}
&.right {
display: none;
}
}
}
}
}
}

51
platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss Normal file
View File

@ -0,0 +1,51 @@
@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;
> .contents {
top: $mobileOverlayMargin;
right: $mobileOverlayMargin;
bottom: $mobileOverlayMargin;
left: $mobileOverlayMargin;
.top-bar {
> .title {
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%;
}
}
}

13
platform/commonUI/general/res/sass/mobile/search/_search.scss Normal file
View File

@ -0,0 +1,13 @@
@include phone {
.search {
.search-bar {
// Hide menu-icon and adjust spacing when in phone mode
.menu-icon {
display: none;
}
.clear-icon {
right: $interiorMargin;
}
}
}
}

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

@ -24,16 +24,10 @@
background: $colorOvrBlocker;
z-index: 100;
}
.btn.close {
@include border-radius($basicCr * 2);
padding: 3px 6px;
.clk-icon.close {
position: absolute;
border: none;
top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
z-index: 100;
}
.editor {
// background: $colorBodyBg;
}
>.holder {
$i: 15%;
@ -43,13 +37,13 @@
top: $i; right: $i; bottom: $i; left: $i;
z-index: 101;
>.contents {
$m: 25px;
$m: $overlayMargin;
top: $m; right: $m; bottom: $m; left: $m;
}
}
.title {
@include ellipsize();
font-size: 1.3em;
font-size: 1.2em;
margin-bottom: $interiorMargin;
}

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

@ -28,7 +28,7 @@
height: auto;
bottom: 0;
}
//top: 23px;
top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
@ -39,26 +39,20 @@
$iconWidth: 20px;
$leftMargin: 6px;
$rightPadding: 5px;
//padding-right: $rightPadding;
//@include test();
display: flex; //block;
flex-direction: column;
@include webkitVal(display, flex);
//display: flex;
@include webkitProp(flex-direction, column);
//flex-direction: column;
height: 100%;
.search-bar {
//$heightAdjust: 4px;
$textInputHeight: 19px; // This is equal to the default value, 19px
$iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
font-size: 0.8em;
//order: 1;
max-width: 250px;
position: relative;
width: 100%;
//height: $textInputHeight;
//margin-top: $heightAdjust;
.search-input,
.search-icon {
}
@ -230,86 +224,6 @@
max-height: 100%;
position: relative;
.results {
.search-result-item {
// Include transitions (for the highlights)
@include single-transition(background-color, 0.25s);
// Space the results from each other
margin-bottom: 2px;
// Make the highlights the right color and shape.
// Attempting to match the style in the tree, but
// while having these be compact.
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px;
.label {
// Give some padding away from the left side
margin-left: $leftMargin;
.title-label {
display: inline-block;
position: absolute;
// Give some padding away from the left side
left: $leftMargin + 3px + $iconWidth;
// and the right side
right: $rightPadding;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// Change styling when it's selected
&.selected {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff;
}
}
.label .type-icon .l-icon-link {
// Hide links for now. See GitHub issue #84.
display: none;
@include txtShdwSubtle(1);
z-index: 2;
@include ancillaryIcon(8px, $colorIconLink);
margin-left: -25px;
}
// Change styling when it's being hovered over
&:not(.selected) {
&:hover {
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
display: block;
}
.icon {
color: $colorItemTreeIconHover;
}
}
}
}
}
.load-icon {
position: relative;
&.loading {

1
platform/commonUI/general/res/sass/theme-espresso.scss
View File

@ -20,5 +20,6 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
@import "constants";
@import "mobile/constants";
@import "themes/theme-espresso";
@import "main";

4
platform/commonUI/general/res/sass/themes/_theme-espresso.scss
View File

@ -19,4 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* CONSTANTS */
/* CONSTANTS */
//$colorBodyBg: #fff;
//$colorBodyFg: #666;

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

@ -21,11 +21,11 @@
*****************************************************************************/
@import "compass";
@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/opacity";
@import "compass/utilities";
@import "constants";
@import "mobile/constants";
@import "mixins";
@import "mobile/mixins";
@import "tree/tree";
@import "search/search";
@import "mobile/tree";

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

@ -25,133 +25,152 @@ ul.tree {
li {
display: block;
position: relative;
span.tree-item {
$runningItemW: 0;
@include border-radius($basicCr);
@include single-transition(background-color, 0.25s);
}
ul.tree {
margin-left: $treeVCW + $interiorMargin;
}
}
.tree-item,
.search-result-item {
$runningItemW: 0;
@include box-sizing(border-box);
@include border-radius($basicCr);
@include single-transition(background-color, 0.25s);
display: block;
font-size: 0.8rem;
height: $menuLineH;
line-height: $menuLineH;
margin-bottom: $interiorMarginSm;
position: relative;
.view-control {
display: inline-block;
margin-left: $interiorMargin;
font-size: 0.75em;
width: $treeVCW;
$runningItemW: $interiorMargin + $treeVCW;
// NOTE: [Mobile] Removed Hover on Mobile
@include desktop {
&:hover {
color: $colorItemTreeVCHover;
}
}
}
.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;
.type-icon {
//@include absPosDefault(0, false);
$d: $treeTypeIconH; // 16px is crisp size
@include txtShdwSubtle(0.6);
font-size: $d;
color: $colorItemTreeIcon;
left: $interiorMargin;
position: absolute;
@include verticalCenterBlock($menuLineHPx, $d);
line-height: 100%;
right: auto; width: $d;
.icon {
&.l-icon-link,
&.l-icon-alert {
@include txtShdwSubtle(1);
position: absolute;
z-index: 2;
}
&.l-icon-alert {
$d: 8px;
@include ancillaryIcon($d, $colorAlert);
top: 1px;
right: -2px;
}
&.l-icon-link {
$d: 8px;
@include ancillaryIcon($d, $colorIconLink);
left: -3px;
bottom: 0px;
}
}
}
.title-label {
@include absPosDefault();
display: block;
font-size: 0.8em;
height: $menuLineH;
line-height: $menuLineH;
margin-bottom: $interiorMarginSm;
position: relative;
left: $runningItemW + ($interiorMargin * 3);
//right: $treeContextTriggerW + $interiorMargin;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.view-control {
display: inline-block;
margin-left: $interiorMargin;
font-size: 0.75em;
width: $treeVCW;
$runningItemW: $interiorMargin + $treeVCW;
&:hover {
color: $colorItemTreeVCHover;
}
&.loading {
pointer-events: none;
.label {
opacity: 0.5;
.title-label {
font-style: italic;
}
}
.wait-spinner {
margin-left: 14px;
}
}
.label {
display: block;
// @include test(orange);
@include absPosDefault();
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
left: $runningItemW;
&.selected {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff; //$colorItemTreeIconHover;
}
}
.type-icon {
@include absPosDefault(0, false);
@include txtShdwSubtle(0.6);
color: $colorItemTreeIcon;
left: $interiorMargin;
right: auto; width: 1em;
.icon {
&.l-icon-link,
&.l-icon-alert {
@include txtShdwSubtle(1);
position: absolute;
z-index: 2;
}
&.l-icon-alert {
$d: 8px;
@include ancillaryIcon($d, $colorAlert);
top: 1px;
right: -2px;
}
&.l-icon-link {
$d: 8px;
@include ancillaryIcon($d, $colorIconLink);
left: -3px;
bottom: 5px;
}
}
}
.title-label {
@include absPosDefault();
&:not(.selected) {
// NOTE: [Mobile] Removed Hover on Mobile
@include desktop {
&:hover {
background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
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 {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff; //$colorItemTreeIconHover;
}
}
&:not(.selected) {
&:hover {
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
display: block;
}
.icon {
color: $colorItemTreeIconHover;
}
}
}
&:not(.loading) {
cursor: pointer;
}
.context-trigger {
$h: 0.9rem;
//display: none;
top: -1px;
position: absolute;
right: $interiorMarginSm;
.invoke-menu {
font-size: 0.75em;
height: $h;
line-height: $h;
.icon {
color: $colorItemTreeIconHover;
}
}
}
}
ul.tree {
margin-left: $treeVCW + $interiorMargin;
&:not(.loading) {
cursor: pointer;
}
.context-trigger {
$h: 0.9rem;
//display: none;
top: -1px;
position: absolute;
right: $interiorMarginSm;
.invoke-menu {
font-size: 0.75em;
height: $h;
line-height: $h;
}
}
}
.tree-item {
.label {
left: $interiorMargin + $treeVCW;
}
}

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

@ -20,25 +20,23 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.frame {
$ohH: 20px;
$ohH: 16px;
$bc: $colorInteriorBorder;
&.child-frame.panel {
background: $colorBodyBg;
border: 1px solid $bc;
&:hover {
border-color: lighten($bc, 10%);
//z-index: 2;
}
.contents {
// overflow: hidden;
}
}
>.object-header.abs {
//@include test(red);
font-size: 0.75em;
height: $ohH;
line-height: $ohH;
}
>.object-holder.abs {
top: $ohH + $interiorMarginSm;
top: $ohH + $interiorMargin;
}
.contents {
$myM: $interiorMargin;
@ -48,16 +46,20 @@
left: $myM;
}
&.frame-template {
// Hide the view switcher by default when it's in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
.view-switcher {
opacity: 0;
line-height: $ohH;
z-index: 10;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
//display: inline-block !important;
opacity: 1;
// Hide the view switcher by default when it's in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
@include desktop {
.view-switcher {
opacity: 0;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
opacity: 1;
}
}
}
.view-switcher {

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

@ -70,19 +70,26 @@
&.abs {
text-wrap: none;
white-space: nowrap;
}
&.left,
.left {
width: 45% !important;
right: auto !important;
}
&.right,
.right {
width: 45% !important;
left: auto !important;
text-align: right;
.icon.major {
margin-left: $interiorMargin * 3;
&.left,
.left {
width: 45%;
right: auto;
}
&.right,
.right {
width: 45%;
left: auto;
text-align: right;
.icon.major {
margin-left: $interiorMargin * 3;
}
}
.l-flex,
&.l-flex {
.left,
.right {
width: auto;
}
}
}
}
@ -118,7 +125,7 @@
}
}
.bottom-bar {
.ue-bottom-bar {
//@include absPosDefault($bodyMargin);
@include absPosDefault(0);// New status bar design
top: auto;
@ -200,7 +207,8 @@
.split-layout {
.split-pane-component.pane.left {
min-width: 150px;
max-width: 50%;
max-width: 800px;
width: $ueBrowseLeftPaneW;
}
}
}
@ -208,8 +216,8 @@
.edit-mode {
.split-layout {
.split-pane-component.pane.right {
min-width: 150px;
max-width: 50%;
//min-width: 150px;
//max-width: 50%;
.split-pane-component.pane.bottom {
min-height: 50px;
max-height: 80%;
@ -243,6 +251,12 @@
.right.abs {
top: auto;
}
//.left.abs {
// @include tmpBorder(green);
//}
//.right.abs {
// @include tmpBorder(red);
//}
}
.object-holder {
top: $ueTopBarH + $interiorMarginLg;
@ -267,6 +281,7 @@
&.vertical {
// Slides left and right
>.pane {
// @include test();
margin-left: $interiorMargin;
>.holder {
left: 0;
@ -283,6 +298,55 @@
}
}
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
$h: $btnToolbarH;
display: inline-block;
font-size: $h * $btnFontSizeToH;
line-height: 200%;
vertical-align: top;
}
.object-browse-bar,
.top-bar {
.view-switcher {
margin-right: $interiorMarginLg * 2;
}
}
.object-browse-bar {
//@include test(blue);
@include absPosDefault(0, visible);
@include box-sizing(border-box);
height: $ueTopBarH;
line-height: $ueTopBarH;
white-space: nowrap;
.left {
padding-right: $interiorMarginLg * 2;
.l-back {
display: inline-block;
float: left;
margin-right: $interiorMarginLg;
}
}
}
.l-flex {
@include webkitVal('display', 'flex');
@include webkitProp('flex-flow', 'row nowrap');
.left {
//@include test(red);
@include webkitProp(flex, '1 1 0');
}
}
.vscroll {
overflow-y: auto;
}

15
platform/commonUI/general/res/sass/user-environ/_top-bar.scss
View File

@ -20,23 +20,16 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.top-bar {
// $h: $ueTopBarH - 5px;
// background: rgba(#ff0000, 0.2);
// line-height: $ueTopBarBtnH;
&.browse,
&.edit {
border-bottom: 1px solid $colorInteriorBorder;
top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
height: $ueTopBarEditH;
line-height: $ueTopBarH;
}
.action {
}
.title {
color: #fff;
// font-weight: bold;
}
.buttons-main {
@ -44,9 +37,9 @@
left: auto;
text-align: right;
// width: 200px;
.btn {
margin-left: $interiorMargin;
}
// .btn {
// margin-left: $interiorMargin;
// }
}
}

2
platform/commonUI/general/res/templates/bottombar.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='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar">
<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
<div id='status' class='status-holder'>
<mct-include ng-repeat="indicator in bar.getIndicators()"
ng-model="indicator.ngModel"

2
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -21,7 +21,7 @@
-->
<span ng-controller="ViewSwitcherController">
<div
class="view-switcher menu-element btn btn-menu dropdown click-invoke"
class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
ng-if="view.length > 1"
ng-controller="ClickAwayController as toggle"
>

2
platform/commonUI/general/res/templates/menu/context-menu.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="menu-element context-menu-wrapper" ng-controller="ContextMenuController">
<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
<div class="menu context-menu dropdown">
<ul>

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

@ -29,6 +29,7 @@
<li ng-repeat="child in composition">
<mct-representation key="'tree-node'"
mct-object="child"
parameters="parameters"
ng-model="ngModel">
</mct-representation>
</li>

29
platform/commonUI/general/res/templates/tree-node.html
View File

@ -26,19 +26,41 @@
ng-class="{selected: treeNode.isSelected()}"
>
<span
mct-device="desktop"
class='ui-symbol view-control'
ng-click="toggle.toggle(); treeNode.trackExpansion()"
ng-if="model.composition !== undefined"
>
{{toggle.isActive() ? "v" : ">"}}
</span>
<mct-representation
mct-device="desktop"
class="mobile-hide"
key="'label'"
mct-object="domainObject"
ng-model="ngModel"
ng-click="ngModel.selectedObject = domainObject"
ng-click="treeNode.select()"
>
</mct-representation>
<mct-representation
mct-device="mobile"
class="desktop-hide"
key="'label'"
mct-object="domainObject"
ng-click="(model.composition === undefined) && treeNode.select();
toggle.toggle();
treeNode.trackExpansion();"
>
</mct-representation>
<span
mct-device="mobile"
class='ui-symbol view-control'
ng-model="ngModel"
ng-click="treeNode.select()"
>
}
</span>
</span>
<span
class="tree-item-subtree"
@ -48,9 +70,10 @@
<mct-representation key="'subtree'"
ng-model="ngModel"
parameters="parameters"
mct-object="treeNode.hasBeenExpanded() && domainObject">
</mct-representation>
</span>
</span>
</span>
</span>

3
platform/commonUI/general/res/templates/tree.html
View File

@ -23,7 +23,8 @@
<li>
<mct-representation key="'tree-node'"
mct-object="domainObject"
ng-model="ngModel">
ng-model="ngModel"
parameters="parameters">
</mct-representation>
</li>
</ul>

30
platform/commonUI/general/src/controllers/TreeNodeController.js
View File

@ -48,12 +48,23 @@ define(
* node expansion when this tree node's _subtree_ will contain
* the navigated object (recursively, this becomes an
* expand-to-show-navigated-object behavior.)
*
* Finally, if a `callback` property is passed in through the
* `parameters` attribute of the `tree-node`, that callback
* will be invoked whenever a user clicks in a manner which
* would result in a selection. This callback is invoked
* even if the selection does not change (if you are only
* interested in changes, watch the `selectedObject` property
* of the object passed in `ng-model` instead.)
*
* @memberof platform/commonUI/general
* @constructor
*/
function TreeNodeController($scope, $timeout) {
var self = this,
selectedObject = ($scope.ngModel || {}).selectedObject;
selectedObject = ($scope.ngModel || {}).selectedObject,
isSelected = false,
hasBeenExpanded = false;
// Look up the id for a domain object. A convenience
// for mapping; additionally does some undefined-checking.
@ -131,12 +142,29 @@ define(
this.isSelectedFlag = false;
this.hasBeenExpandedFlag = false;
this.$timeout = $timeout;
this.$scope = $scope;
// Listen for changes which will effect display parameters
$scope.$watch("ngModel.selectedObject", setSelection);
$scope.$watch("domainObject", checkSelection);
}
/**
* Select the domain object represented by this node in the tree.
* This will both update the `selectedObject` property in
* the object passed in via `ng-model`, and will fire any `callback`
* passed in via `parameters`.
*/
TreeNodeController.prototype.select = function () {
if (this.$scope.ngModel) {
this.$scope.ngModel.selectedObject =
this.$scope.domainObject;
}
if ((this.$scope.parameters || {}).callback) {
this.$scope.parameters.callback(this.$scope.domainObject);
}
};
/**
* This method should be called when a node is expanded
* to record that this has occurred, to support one-time

28
platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
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.
*****************************************************************************/
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
/*global define,describe,it,expect,beforeEach,jasmine*/
define(
["../../src/controllers/TreeNodeController"],
@ -29,6 +29,7 @@ define(
describe("The tree node controller", function () {
var mockScope,
mockTimeout,
mockDomainObject,
controller;
function TestObject(id, context) {
@ -41,8 +42,13 @@ define(
}
beforeEach(function () {
mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
mockTimeout = jasmine.createSpy("$timeout");
mockDomainObject = jasmine.createSpyObj(
"domainObject",
[ "getId", "getCapability", "getModel", "useCapability" ]
);
controller = new TreeNodeController(mockScope, mockTimeout);
});
@ -183,6 +189,22 @@ define(
expect(controller.isSelected()).toBeFalsy();
});
it("exposes selected objects in scope", function () {
mockScope.domainObject = mockDomainObject;
mockScope.ngModel = {};
controller.select();
expect(mockScope.ngModel.selectedObject)
.toEqual(mockDomainObject);
});
it("invokes optional callbacks upon selection", function () {
mockScope.parameters =
{ callback: jasmine.createSpy('callback') };
controller.select();
expect(mockScope.parameters.callback).toHaveBeenCalled();
});
});
}
);
);

2
platform/commonUI/general/test/services/UrlServiceSpec.js
View File

@ -91,7 +91,7 @@ define(
it("get url for a new tab using domainObject and mode", function () {
urlService.urlForNewTab(mockMode, mockDomainObject);
});
});
});
}
);

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

@ -15,4 +15,4 @@
"directives/MCTScroll",
"services/UrlService",
"StyleSheetLoader"
]
]

22
platform/commonUI/inspect/bundle.json
View File

@ -24,9 +24,19 @@
"implementation": "gestures/InfoGesture.js",
"depends": [
"$timeout",
"agentService",
"infoService",
"INFO_HOVER_DELAY"
]
},
{
"key": "infobutton",
"implementation": "gestures/InfoButtonGesture.js",
"depends": [
"$document",
"agentService",
"infoService"
]
}
],
"services": [
@ -37,15 +47,23 @@
"$compile",
"$document",
"$window",
"$rootScope"
"$rootScope",
"agentService"
]
}
],
],
"constants": [
{
"key": "INFO_HOVER_DELAY",
"value": 2000
}
],
"representations": [
{
"key": "info-button",
"templateUrl": "templates/info-button.html",
"gestures": [ "infobutton" ]
}
]
}
}

25
platform/commonUI/inspect/res/templates/info-button.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.
-->
<!--The icon for the info button appearing in a grid item (list in folder)-->
<a class='ui-symbol icon mobile-info'>&#xe608;</a>

123
platform/commonUI/inspect/src/gestures/InfoButtonGesture.js Normal file
View File

@ -0,0 +1,123 @@
/*****************************************************************************
* 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";
/**
* The `info` gesture displays domain object metadata in a
* bubble on hover.
*
* @constructor
* @param $document Angular's `$document`
* @param {InfoService} infoService a service which shows info bubbles
* @param element jqLite-wrapped DOM element
* @param {DomainObject} domainObject the domain object for which to
* show information
*/
function InfoGestureButton($document, agentService, infoService, element, domainObject) {
var dismissBubble,
touchPosition,
scopeOff,
body = $document.find('body');
function trackPosition(event) {
// Record touch position, so bubble can be shown at latest
// touch position, also offset by 22px to left (accounts for
// a finger-sized touch on the info button)
touchPosition = [ event.clientX - 22, event.clientY ];
}
// Hides the bubble and detaches the
// body hidebubble listener
function hideBubble() {
// If a bubble is showing, dismiss it
if (dismissBubble) {
dismissBubble();
dismissBubble = undefined;
}
// Detaches body touch listener
body.off('touchstart', hideBubble);
}
// Displays the bubble by tracking position of
// touch, using infoService to display the bubble,
// and then on any body touch the bubble is dismissed
function showBubble(event) {
trackPosition(event);
event.stopPropagation();
// Show the bubble, but on any touchstart on the
// body (anywhere) call hidebubble
dismissBubble = infoService.display(
"info-table",
domainObject.getModel().name,
domainObject.useCapability('metadata'),
touchPosition
);
// On any touch on the body, default body touches/events
// are prevented, the bubble is dismissed, and the touchstart
// body event is unbound, reallowing gestures
body.on('touchstart', function (event) {
event.preventDefault();
hideBubble();
body.unbind('touchstart');
});
}
// Checks if you are on a mobile device, if the device is
// mobile (agentService.isMobile() = true), then
// the a click on something (info button) brings up
// the bubble
if (agentService.isMobile()) {
element.on('click', showBubble);
}
// Also make sure we dismiss bubble if representation is destroyed
// before the mouse actually leaves it
scopeOff = element.scope().$on('$destroy', hideBubble);
return {
/**
* Detach any event handlers associated with this gesture.
* @memberof InfoGesture
* @method
*/
destroy: function () {
// Dismiss any active bubble...
hideBubble();
// ...and detach listeners
element.off('click', showBubble);
scopeOff();
}
};
}
return InfoGestureButton;
}
);

12
platform/commonUI/inspect/src/gestures/InfoGesture.js
View File

@ -40,7 +40,7 @@ define(
* @param {DomainObject} domainObject the domain object for which to
* show information
*/
function InfoGesture($timeout, infoService, delay, element, domainObject) {
function InfoGesture($timeout, agentService, infoService, delay, element, domainObject) {
var self = this;
// Callback functions to preserve the "this" pointer (in the
@ -66,8 +66,13 @@ define(
this.delay = delay;
this.domainObject = domainObject;
// Show bubble (on a timeout) on mouse over
element.on('mouseenter', this.showBubbleCallback);
// Checks if you are on a mobile device, if the device is
// not mobile (agentService.isMobile() = false), then
// the pendingBubble and therefore hovering is allowed
if (!agentService.isMobile()) {
// Show bubble (on a timeout) on mouse over
element.on('mouseenter', this.showBubbleCallback);
}
}
InfoGesture.prototype.trackPosition = function (event) {
@ -128,6 +133,7 @@ define(
this.element.on('mouseleave', this.hideBubbleCallback);
};
/**
* Detach any event handlers associated with this gesture.
* @method

28
platform/commonUI/inspect/src/services/InfoService.js
View File

@ -34,11 +34,12 @@ define(
* @memberof platform/commonUI/inspect
* @constructor
*/
function InfoService($compile, $document, $window, $rootScope) {
function InfoService($compile, $document, $window, $rootScope, agentService) {
this.$compile = $compile;
this.$document = $document;
this.$window = $window;
this.$rootScope = $rootScope;
this.agentService = agentService;
}
/**
@ -64,7 +65,7 @@ define(
goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
goUp = position[1] > (winDim[1] / 2),
bubble;
// Pass model & container parameters into the scope
scope.bubbleModel = content;
scope.bubbleTemplate = templateKey;
@ -77,15 +78,22 @@ define(
// Position the bubble
bubble.css('position', 'absolute');
if (goLeft) {
bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
if (this.agentService.isPhone(navigator.userAgent)) {
bubble.css('right', '0px');
bubble.css('left', '0px');
bubble.css('top', 'auto');
bubble.css('bottom', '25px');
} else {
bubble.css('left', position[0] + OFFSET[0] + 'px');
}
if (goUp) {
bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
} else {
bubble.css('top', position[1] + OFFSET[1] + 'px');
if (goLeft) {
bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
} else {
bubble.css('left', position[0] + OFFSET[0] + 'px');
}
if (goUp) {
bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
} else {
bubble.css('top', position[1] + OFFSET[1] + 'px');
}
}
// Add the menu to the body

144
platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js Normal file
View File

@ -0,0 +1,144 @@
/*****************************************************************************
* 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,describe,it,expect,beforeEach,jasmine*/
define(
['../../src/gestures/InfoButtonGesture'],
function (InfoButtonGesture) {
"use strict";
describe("The info button gesture", function () {
var mockTimeout,
mockDocument,
mockBody,
mockAgentService,
mockInfoService,
mockElement,
mockDomainObject,
mockEvent,
mockScope,
mockOff,
testMetadata,
mockHide,
gesture,
fireGesture,
fireDismissGesture;
beforeEach(function () {
mockTimeout = jasmine.createSpy('$timeout');
mockDocument = jasmine.createSpyObj('$document', ['find']);
mockBody = jasmine.createSpyObj('body', [ 'on', 'off', 'scope', 'css', 'unbind' ]);
mockDocument.find.andReturn(mockBody);
mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
mockInfoService = jasmine.createSpyObj(
'infoService',
[ 'display' ]
);
mockElement = jasmine.createSpyObj(
'element',
[ 'on', 'off', 'scope', 'css' ]
);
mockDomainObject = jasmine.createSpyObj(
'domainObject',
[ 'getId', 'getCapability', 'useCapability', 'getModel' ]
);
mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
mockEvent.pageX = 0;
mockEvent.pageY = 0;
mockScope = jasmine.createSpyObj('$scope', [ '$on' ]);
mockOff = jasmine.createSpy('$off');
testMetadata = [ { name: "Test name", value: "Test value" } ];
mockHide = jasmine.createSpy('hide');
mockDomainObject.getModel.andReturn({ name: "Test Object" });
mockDomainObject.useCapability.andCallFake(function (c) {
return (c === 'metadata') ? testMetadata : undefined;
});
mockElement.scope.andReturn(mockScope);
mockScope.$on.andReturn(mockOff);
mockInfoService.display.andReturn(mockHide);
mockAgentService.isMobile.andReturn(true);
gesture = new InfoButtonGesture(
mockDocument,
mockAgentService,
mockInfoService,
mockElement,
mockDomainObject
);
fireGesture = mockElement.on.mostRecentCall.args[1];
});
it("expect click on the representation", function () {
// Fires a click call on element and then
// expects the click to have happened
fireGesture(mockEvent);
expect(mockElement.on).toHaveBeenCalledWith(
"click",
jasmine.any(Function)
);
});
it("expect click then dismiss on the representation", function () {
// Fire the click and then expect the click
fireGesture(mockEvent);
expect(mockElement.on).toHaveBeenCalledWith(
"click",
jasmine.any(Function)
);
// Get the touch start on the body
// and fire the dismiss gesture
fireDismissGesture = mockBody.on.mostRecentCall.args[1];
fireDismissGesture(mockEvent);
// Expect Body to have been touched, event.preventDefault()
// to be called, then the mockBody listener to be detached
// lastly unbind the touchstart used to dismiss so other
// events can be called
expect(mockBody.on).toHaveBeenCalledWith(
"touchstart",
jasmine.any(Function)
);
expect(mockEvent.preventDefault).toHaveBeenCalled();
expect(mockBody.off).toHaveBeenCalledWith(
"touchstart",
jasmine.any(Function)
);
expect(mockBody.unbind).toHaveBeenCalledWith(
'touchstart'
);
});
it("detaches a callback for info bubble events when destroyed", function () {
expect(mockElement.off).not.toHaveBeenCalled();
gesture.destroy();
expect(mockElement.off).toHaveBeenCalledWith(
"click",
jasmine.any(Function)
);
});
});
}
);

5
platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
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.
*****************************************************************************/
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
/*global define,describe,it,expect,beforeEach,jasmine*/
define(
['../../src/gestures/InfoGesture'],
@ -28,6 +28,7 @@ define(
describe("The info gesture", function () {
var mockTimeout,
mockAgentService,
mockInfoService,
testDelay = 12321,
mockElement,
@ -50,6 +51,7 @@ define(
beforeEach(function () {
mockTimeout = jasmine.createSpy('$timeout');
mockTimeout.cancel = jasmine.createSpy('cancel');
mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
mockInfoService = jasmine.createSpyObj(
'infoService',
[ 'display' ]
@ -79,6 +81,7 @@ define(
gesture = new InfoGesture(
mockTimeout,
mockAgentService,
mockInfoService,
testDelay,
mockElement,

17
platform/commonUI/inspect/test/services/InfoServiceSpec.js
View File

@ -31,6 +31,7 @@ define(
mockDocument,
testWindow,
mockRootScope,
mockAgentService,
mockCompiledTemplate,
testScope,
mockBody,
@ -42,6 +43,7 @@ define(
mockDocument = jasmine.createSpyObj('$document', ['find']);
testWindow = { innerWidth: 1000, innerHeight: 100 };
mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
mockCompiledTemplate = jasmine.createSpy('template');
testScope = {};
mockBody = jasmine.createSpyObj('body', ['append']);
@ -58,7 +60,8 @@ define(
mockCompile,
mockDocument,
testWindow,
mockRootScope
mockRootScope,
mockAgentService
);
});
@ -124,6 +127,18 @@ define(
(40 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
);
});
it("when on phone device, positioning is always on bottom", function () {
mockAgentService.isPhone.andReturn(true);
service = new InfoService(
mockCompile,
mockDocument,
testWindow,
mockRootScope,
mockAgentService
);
service.display('', '', {}, [0, 0]);
});
});
});

1
platform/commonUI/inspect/test/suite.json
View File

@ -1,4 +1,5 @@
[
"gestures/InfoGesture",
"gestures/InfoButtonGesture",
"services/InfoService"
]

18
platform/commonUI/mobile/bundle.json Normal file
View File

@ -0,0 +1,18 @@
{
"extensions": {
"directives": [
{
"key": "mctDevice",
"implementation": "MCTDevice.js",
"depends": [ "agentService" ]
}
],
"services": [
{
"key": "agentService",
"implementation": "AgentService.js",
"depends": [ "$window" ]
}
]
}
}

96
platform/commonUI/mobile/src/AgentService.js Normal file
View File

@ -0,0 +1,96 @@
/*****************************************************************************
* 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*/
/**
* Provides features which support variant behavior on mobile devices.
*
* @namespace platform/commonUI/mobile
*/
define(
[],
function () {
"use strict";
/**
* The query service handles calls for browser and userAgent
* info using a comparison between the userAgent and key
* device names
* @constructor
* @param $window Angular-injected instance of the window
* @memberof platform/commonUI/mobile
*/
function AgentService($window) {
var userAgent = $window.navigator.userAgent,
matches = userAgent.match(/iPad|iPhone|Android/i) || [];
this.mobileName = matches[0];
this.$window = $window;
}
/**
* Check if the user is on a mobile device.
* @returns {boolean} true on mobile
*/
AgentService.prototype.isMobile = function () {
return !!this.mobileName;
};
/**
* Check if the user is on a phone-sized mobile device.
* @returns {boolean} true on a phone
*/
AgentService.prototype.isPhone = function () {
// iOS is test-to device for mobile, so only
// make this distinction for iPhones
return this.mobileName === 'iPhone';
};
/**
* Check if the user is on a tablet-sized mobile device.
* @returns {boolean} true on a tablet
*/
AgentService.prototype.isTablet = function () {
return this.isMobile() && !this.isPhone();
};
/**
* Check if the user's device is in a portrait-style
* orientation (display width is narrower than display height.)
* @returns {boolean} true in portrait mode
*/
AgentService.prototype.isPortrait = function () {
return this.$window.innerWidth < this.$window.innerHeight;
};
/**
* Check if the user's device is in a landscape-style
* orientation (display width is greater than display height.)
* @returns {boolean} true in landscape mode
*/
AgentService.prototype.isLandscape = function () {
return !this.isPortrait();
};
return AgentService;
}
);

108
platform/commonUI/mobile/src/MCTDevice.js Normal file
View File

@ -0,0 +1,108 @@
/*****************************************************************************
* 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';
var DEVICE_MATCHERS = {
mobile: function (agentService) {
return agentService.isMobile();
},
phone: function (agentService) {
return agentService.isPhone();
},
tablet: function (agentService) {
return agentService.isTablet();
},
desktop: function (agentService) {
return !agentService.isMobile();
},
portrait: function (agentService) {
return agentService.isPortrait();
},
landscape: function (agentService) {
return agentService.isLandscape();
}
};
/**
* The `mct-device` directive, when applied as an attribute,
* only includes the element when the device being used matches
* a set of characteristics required.
*
* Required characteristics are given as space-separated strings
* as the value to this attribute, e.g.:
*
* <span mct-device="mobile portrait">Hello world!</span>
*
* ...will only show Hello world! when viewed on a mobile device
* in the portrait orientation.
*
* Valid device characteristics to detect are:
*
* * `mobile`: Phones or tablets.
* * `phone`: Phones specifically.
* * `tablet`: Tablets specifically.
* * `desktop`: Non-mobile devices.
* * `portrait`: Devices in a portrait-style orientation.
* * `landscape`: Devices in a landscape-style orientation.
*
* @param {AgentService} agentService used to detect device type
* based on information about the user agent
*/
function MCTDevice(agentService) {
function deviceMatches(tokens) {
tokens = tokens || "";
return tokens.split(" ").every(function (token) {
var fn = DEVICE_MATCHERS[token];
return fn && fn(agentService);
});
}
function link(scope, element, attrs, ctrl, transclude) {
if (deviceMatches(attrs.mctDevice)) {
transclude(function (clone) {
element.parent().append(clone);
});
}
}
return {
link: link,
// We are transcluding the whole element (like ng-if)
transclude: 'element',
// 1 more than ng-if
priority: 601,
// Also terminal, since element will be transcluded
terminal: true,
// Only apply as an attribute
restrict: "A"
};
}
return MCTDevice;
}
);

86
platform/commonUI/mobile/test/AgentServiceSpec.js Normal file
View File

@ -0,0 +1,86 @@
/*****************************************************************************
* 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/AgentService"],
function (AgentService) {
"use strict";
var TEST_USER_AGENTS = {
DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
IPAD: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
IPHONE: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
};
describe("The AgentService", function () {
var testWindow, agentService;
beforeEach(function () {
testWindow = {
innerWidth: 640,
innerHeight: 480,
navigator: {
userAgent: TEST_USER_AGENTS.DESKTOP
}
};
});
it("recognizes desktop devices as non-mobile", function () {
testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
agentService = new AgentService(testWindow);
expect(agentService.isMobile()).toBeFalsy();
expect(agentService.isPhone()).toBeFalsy();
expect(agentService.isTablet()).toBeFalsy();
});
it("detects iPhones", function () {
testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
agentService = new AgentService(testWindow);
expect(agentService.isMobile()).toBeTruthy();
expect(agentService.isPhone()).toBeTruthy();
expect(agentService.isTablet()).toBeFalsy();
});
it("detects iPads", function () {
testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
agentService = new AgentService(testWindow);
expect(agentService.isMobile()).toBeTruthy();
expect(agentService.isPhone()).toBeFalsy();
expect(agentService.isTablet()).toBeTruthy();
});
it("detects display orientation", function () {
var agentService = new AgentService(testWindow);
testWindow.innerWidth = 1024;
testWindow.innerHeight = 400;
expect(agentService.isPortrait()).toBeFalsy();
expect(agentService.isLandscape()).toBeTruthy();
testWindow.innerWidth = 400;
testWindow.innerHeight = 1024;
expect(agentService.isPortrait()).toBeTruthy();
expect(agentService.isLandscape()).toBeFalsy();
});
});
}
);

165
platform/commonUI/mobile/test/MCTDeviceSpec.js Normal file
View File

@ -0,0 +1,165 @@
/*****************************************************************************
* 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/MCTDevice'],
function (MCTDevice) {
"use strict";
var JQLITE_METHODS = [ 'parent', 'append' ];
describe("The mct-device directive", function () {
var mockAgentService,
mockTransclude,
mockElement,
mockParent,
mockClone,
testAttrs,
directive;
function link() {
directive.link(null, mockElement, testAttrs, null, mockTransclude);
}
beforeEach(function () {
mockAgentService = jasmine.createSpyObj(
"agentService",
[ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
);
mockTransclude = jasmine.createSpy("$transclude");
mockElement = jasmine.createSpyObj(name, JQLITE_METHODS);
mockParent = jasmine.createSpyObj(name, JQLITE_METHODS);
mockClone = jasmine.createSpyObj(name, JQLITE_METHODS);
mockElement.parent.andReturn(mockParent);
mockTransclude.andCallFake(function (fn) {
fn(mockClone);
});
// Look desktop-like by default
mockAgentService.isLandscape.andReturn(true);
testAttrs = {};
directive = new MCTDevice(mockAgentService);
});
it("is applicable at the attribute level", function () {
expect(directive.restrict).toEqual("A");
});
it("transcludes at the elmeent level", function () {
expect(directive.transclude).toEqual('element');
});
it("has a greater priority number than ng-if", function () {
expect(directive.priority > 600).toBeTruthy();
});
it("restricts element inclusion for mobile devices", function () {
testAttrs.mctDevice = "mobile";
link();
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isMobile.andReturn(true);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
it("restricts element inclusion for tablet devices", function () {
testAttrs.mctDevice = "tablet";
mockAgentService.isMobile.andReturn(true);
link();
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isTablet.andReturn(true);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
it("restricts element inclusion for phone devices", function () {
testAttrs.mctDevice = "phone";
mockAgentService.isMobile.andReturn(true);
link();
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isPhone.andReturn(true);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
it("restricts element inclusion for desktop devices", function () {
testAttrs.mctDevice = "desktop";
mockAgentService.isMobile.andReturn(true);
link();
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isMobile.andReturn(false);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
it("restricts element inclusion for portrait orientation", function () {
testAttrs.mctDevice = "portrait";
link();
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isPortrait.andReturn(true);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
it("restricts element inclusion for landscape orientation", function () {
testAttrs.mctDevice = "landscape";
mockAgentService.isLandscape.andReturn(false);
mockAgentService.isPortrait.andReturn(true);
link();
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isLandscape.andReturn(true);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
it("allows multiple device characteristics to be requested", function () {
// Won't try to test every permutation here, just
// make sure the multi-characteristic feature has support.
testAttrs.mctDevice = "portrait mobile";
link();
// Neither portrait nor mobile, not called
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isPortrait.andReturn(true);
link();
// Was portrait, but not mobile, so no
expect(mockParent.append).not.toHaveBeenCalled();
mockAgentService.isMobile.andReturn(true);
link();
expect(mockParent.append).toHaveBeenCalledWith(mockClone);
});
});
}
);

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

@ -0,0 +1,4 @@
[
"AgentService",
"MCTDevice"
]

6
platform/core/bundle.json
View File

@ -136,7 +136,11 @@
{
"key": "unknown",
"name": "Unknown Type",
"glyph": "?"
"glyph": "\u003f"
},
{
"name": "Unknown Type",
"glyph": "\u003f"
}
],
"capabilities": [

2
platform/features/imagery/res/templates/imagery.html
View File

@ -33,7 +33,7 @@
>
</div>
<div class="l-image-main-controlbar bar">
<div class="l-image-main-controlbar l-flex bar">
<div class="left">
<a
class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"

9
platform/features/layout/res/templates/frame.html
View File

@ -20,13 +20,12 @@
at runtime from the About dialog for additional information.
-->
<div class="frame frame-template abs">
<div class="bar abs object-header object-top-bar">
<div class="title left abs">
<mct-representation key="'node'"
mct-object="domainObject">
<div class="bar abs l-flex object-header object-top-bar">
<div class="left">
<mct-representation key="'object-header'" mct-object="domainObject">
</mct-representation>
</div>
<div class="btn-bar right abs">
<div class="btn-bar right">
<mct-representation key="'switcher'"
ng-model="representation"
mct-object="domainObject">

15
platform/framework/src/register/CustomRegistrars.js
View File

@ -39,6 +39,7 @@ define(
function CustomRegistrars(app, $log) {
this.app = app;
this.$log = $log;
this.registered = {}; // Track registered keys by extension
}
// Utility; bind a function to a "this" pointer
@ -56,7 +57,10 @@ define(
var app = this.app,
$log = this.$log,
key = extension.key,
dependencies = extension.depends || [];
dependencies = extension.depends || [],
registered = this.registered[angularFunction] || {};
this.registered[angularFunction] = registered;
if (!key) {
$log.warn([
@ -67,6 +71,14 @@ define(
", no key specified. ",
JSON.stringify(extension)
].join(""));
} else if (registered[key]) {
$log.debug([
"Already registered ",
angularFunction,
" with key ",
key,
"; skipping."
].join(""));
} else {
$log.info([
"Registering ",
@ -74,6 +86,7 @@ define(
": ",
key
].join(""));
registered[key] = true;
app[angularFunction](
key,
dependencies.concat([extension])

21
platform/framework/test/register/CustomRegistrarsSpec.js
View File

@ -113,6 +113,25 @@ define(
// Notably, keys are not needed for run calls
});
it("does not re-register duplicate keys", function () {
// Verify preconditions, invoke, expect to have been called
expect(mockApp.directive.calls.length).toEqual(0);
customRegistrars.directives([{ key: "a" }, { key: "a" }]);
expect(mockApp.directive.calls.length).toEqual(1);
expect(mockApp.controller.calls.length).toEqual(0);
customRegistrars.controllers([{ key: "c" }, { key: "c" }, { key: "c" }]);
expect(mockApp.controller.calls.length).toEqual(1);
expect(mockApp.service.calls.length).toEqual(0);
customRegistrars.services([{ key: "b" }, { key: "b" }]);
expect(mockApp.service.calls.length).toEqual(1);
// None of this should have warned, this is all
// nominal behavior
expect(mockLog.warn.calls.length).toEqual(0);
});
it("allows routes to be registered", function () {
var mockRouteProvider = jasmine.createSpyObj(
"$routeProvider",
@ -166,4 +185,4 @@ define(
});
});
}
);
);

4
platform/representation/bundle.json
View File

@ -26,7 +26,7 @@
{
"key": "menu",
"implementation": "gestures/ContextMenuGesture.js",
"depends": []
"depends": ["$timeout", "agentService"]
}
],
"components": [
@ -54,7 +54,7 @@
{
"key": "menu",
"implementation": "actions/ContextMenuAction.js",
"depends": [ "$compile", "$document", "$window", "$rootScope" ]
"depends": [ "$compile", "$document", "$window", "$rootScope", "agentService" ]
}
]
}

15
platform/representation/src/actions/ContextMenuAction.js
View File

@ -49,8 +49,9 @@ define(
* should be performed
* @implements {Action}
*/
function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) {
this.$compile = $compile;
this.agentService = agentService;
this.actionContext = actionContext;
this.getDocument = function () { return $document; };
this.getWindow = function () { return $window; };
@ -70,6 +71,7 @@ define(
scope = $rootScope.$new(),
goLeft = eventCoors[0] + menuDim[0] > winDim[0],
goUp = eventCoors[1] + menuDim[1] > winDim[1],
initiatingEvent = this.agentService.isMobile() ? 'touchstart' : 'mousedown',
menu;
// Remove the context menu
@ -99,21 +101,22 @@ define(
"go-up": goUp,
"context-menu-holder": true
};
// Create the context menu
menu = $compile(MENU_TEMPLATE)(scope);
// Add the menu to the body
body.append(menu);
// Stop propagation so that clicks on the menu do not close the menu
menu.on('mousedown', function (event) {
// Stop propagation so that clicks or touches on the menu do not close the menu
menu.on(initiatingEvent, function (event) {
event.stopPropagation();
});
// Dismiss the menu when body is clicked elsewhere
// Dismiss the menu when body is clicked/touched elsewhere
// ('mousedown' because 'click' breaks left-click context menus)
body.on('mousedown', dismiss);
// ('touchstart' because 'touch' breaks context menus up)
body.on(initiatingEvent, dismiss);
// NOTE: Apply to mobile?
menu.on('click', dismiss);
// Don't launch browser's context menu

35
platform/representation/src/gestures/ContextMenuGesture.js
View File

@ -22,7 +22,7 @@
/*global define,Promise*/
/**
* Module defining ContextMenuGesture.
* Module defining ContextMenuGesture.
* Created by vwoeltje on 11/17/14. Modified by shale on 06/30/2015.
*/
define(
@ -41,7 +41,10 @@ define(
* in the context menu will be performed
* @implements {Gesture}
*/
function ContextMenuGesture(element, domainObject) {
function ContextMenuGesture($timeout, agentService, element, domainObject) {
var isPressing,
longTouchTime = 500;
function showMenu(event) {
domainObject.getCapability('action').perform({
key: 'menu',
@ -51,7 +54,33 @@ define(
}
// When context menu event occurs, show object actions instead
element.on('contextmenu', showMenu);
if (!agentService.isMobile()) {
// When context menu event occurs, show object actions instead
element.on('contextmenu', showMenu);
} else if (agentService.isMobile()) {
// If on mobile device, then start timeout for the single touch event
// during the timeout 'isPressing' is true.
element.on('touchstart', function (event) {
if (event.touches.length < 2) {
isPressing = true;
// After the timeout, if 'isPressing' is
// true, display context menu for object
$timeout(function () {
if (isPressing) {
showMenu(event);
}
}, longTouchTime);
}
});
// Whenever the touch event ends, 'isPressing' is false.
element.on('touchend', function (event) {
isPressing = false;
});
}
this.showMenuCallback = showMenu;
this.element = element;

43
platform/representation/test/actions/ContextMenuActionSpec.js
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.
*****************************************************************************/
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
/*global define,describe,it,expect,beforeEach,jasmine*/
/**
@ -43,6 +43,7 @@ define(
mockBody,
mockWindow,
mockRootScope,
mockAgentService,
mockScope,
mockElement,
mockDomainObject,
@ -58,10 +59,11 @@ define(
mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
mockScope = {};
mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
mockEvent.pageX = 0;
mockEvent.pageY = 0;
@ -77,6 +79,7 @@ define(
mockDocument,
mockWindow,
mockRootScope,
mockAgentService,
mockActionContext
);
});
@ -156,6 +159,42 @@ define(
// Menu should have been removed
expect(mockMenu.remove).toHaveBeenCalled();
});
it("keeps a menu when menu is clicked", function () {
// Show the menu
action.perform();
// Find and fire body's mousedown listener
mockMenu.on.calls.forEach(function (call) {
if (call.args[0] === 'mousedown') {
call.args[1](mockEvent);
}
});
// Menu should have been removed
expect(mockMenu.remove).not.toHaveBeenCalled();
// Listener should have been detached from body
expect(mockBody.off).not.toHaveBeenCalled();
});
it("keeps a menu when menu is clicked on mobile", function () {
mockAgentService.isMobile.andReturn(true);
action = new ContextMenuAction(
mockCompile,
mockDocument,
mockWindow,
mockRootScope,
mockAgentService,
mockActionContext
);
action.perform();
mockMenu.on.calls.forEach(function (call) {
if (call.args[0] === 'touchstart') {
call.args[1](mockEvent);
}
});
});
});
}
);

64
platform/representation/test/gestures/ContextMenuGestureSpec.js
View File

@ -31,28 +31,54 @@ define(
"use strict";
var JQLITE_FUNCTIONS = [ "on", "off", "find", "append", "remove" ],
DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability" ];
DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability"];
describe("The 'context menu' gesture", function () {
var mockElement,
var mockTimeout,
mockElement,
mockAgentService,
mockDomainObject,
mockEvent,
mockTouchEvent,
mockContextMenuAction,
mockActionContext,
mockTouch,
gesture,
fireGesture;
fireGesture,
fireTouchStartGesture,
fireTouchEndGesture;
beforeEach(function () {
mockTimeout = jasmine.createSpy("$timeout");
mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
gesture = new ContextMenuGesture(mockElement, mockDomainObject);
mockContextMenuAction = jasmine.createSpyObj(
"action",
[ "perform", "getActions" ]
);
mockActionContext = jasmine.createSpyObj(
"actionContext",
[ "" ]
);
mockActionContext = {domainObject: mockDomainObject, event: mockEvent};
mockDomainObject.getCapability.andReturn(mockContextMenuAction);
mockContextMenuAction.perform.andReturn(jasmine.any(Function));
mockAgentService.isMobile.andReturn(false);
gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
// Capture the contextmenu callback
fireGesture = mockElement.on.mostRecentCall.args[1];
});
it("attaches a callback for context menu events", function () {
// Fire a click and expect it to happen
fireGesture();
expect(mockElement.on).toHaveBeenCalledWith(
"contextmenu",
jasmine.any(Function)
@ -70,6 +96,34 @@ define(
mockDomainObject.calls
);
});
it("attaches a callback for context menu events on mobile", function () {
// Mock touch event and set to mobile device
mockTouchEvent = jasmine.createSpyObj("event", ["preventDefault", "touches"]);
mockTouch = jasmine.createSpyObj("touch", ["length"]);
mockTouch.length = 1;
mockTouchEvent.touches.andReturn(mockTouch);
mockAgentService.isMobile.andReturn(true);
// Then create new (mobile) gesture
gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
// Set calls for the touchstart and touchend gestures
fireTouchStartGesture = mockElement.on.calls[1].args[1];
fireTouchEndGesture = mockElement.on.mostRecentCall.args[1];
// Fire touchstart and expect touch start to begin
fireTouchStartGesture(mockTouchEvent);
expect(mockElement.on).toHaveBeenCalledWith(
"touchstart",
jasmine.any(Function)
);
// Expect timeout to begin and then fireTouchEnd
expect(mockTimeout).toHaveBeenCalled();
mockTimeout.mostRecentCall.args[0]();
fireTouchEndGesture(mockTouchEvent);
});
});
}
);