mirror of
https://github.com/nasa/openmct.git
synced 2025-06-05 09:00:49 +00:00
Merge branch 'mobile-integration' into open-master
This commit is contained in:
Pete Richards
commit
aba0969312
@ -8,6 +8,7 @@
|
|||||||
"platform/commonUI/dialog",
|
"platform/commonUI/dialog",
|
||||||
"platform/commonUI/general",
|
"platform/commonUI/general",
|
||||||
"platform/commonUI/inspect",
|
"platform/commonUI/inspect",
|
||||||
|
"platform/commonUI/mobile",
|
||||||
"platform/containment",
|
"platform/containment",
|
||||||
"platform/execution",
|
"platform/execution",
|
||||||
"platform/telemetry",
|
"platform/telemetry",
|
||||||
|
|||||||
@ -8,3 +8,7 @@ deployment:
|
|||||||
branch: search
|
branch: search
|
||||||
heroku:
|
heroku:
|
||||||
appname: openmctweb-staging-un
|
appname: openmctweb-staging-un
|
||||||
|
openmctweb-staging-deux:
|
||||||
|
branch: mobile
|
||||||
|
heroku:
|
||||||
|
appname: openmctweb-staging-deux
|
||||||
|
|||||||
@ -23,6 +23,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head lang="en">
|
<head lang="en">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<title></title>
|
<title></title>
|
||||||
<script type="text/javascript"
|
<script type="text/javascript"
|
||||||
src="platform/framework/lib/require.js"
|
src="platform/framework/lib/require.js"
|
||||||
|
|||||||
@ -16,7 +16,20 @@
|
|||||||
{
|
{
|
||||||
"key": "BrowseController",
|
"key": "BrowseController",
|
||||||
"implementation": "BrowseController.js",
|
"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",
|
"key": "BrowseObjectController",
|
||||||
@ -25,17 +38,17 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"key": "CreateMenuController",
|
"key": "CreateMenuController",
|
||||||
"implementation": "creation/CreateMenuController",
|
"implementation": "creation/CreateMenuController.js",
|
||||||
"depends": [ "$scope" ]
|
"depends": [ "$scope" ]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"key": "LocatorController",
|
"key": "LocatorController",
|
||||||
"implementation": "creation/LocatorController",
|
"implementation": "creation/LocatorController.js",
|
||||||
"depends": [ "$scope", "$timeout" ]
|
"depends": [ "$scope", "$timeout" ]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"key": "MenuArrowController",
|
"key": "MenuArrowController",
|
||||||
"implementation": "MenuArrowController",
|
"implementation": "MenuArrowController.js",
|
||||||
"depends": [ "$scope" ]
|
"depends": [ "$scope" ]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@ -82,6 +95,11 @@
|
|||||||
"templateUrl": "templates/menu-arrow.html",
|
"templateUrl": "templates/menu-arrow.html",
|
||||||
"uses": [ "action" ],
|
"uses": [ "action" ],
|
||||||
"gestures": [ "menu" ]
|
"gestures": [ "menu" ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "back-arrow",
|
||||||
|
"uses": [ "context" ],
|
||||||
|
"templateUrl": "templates/back-arrow.html"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"services": [
|
"services": [
|
||||||
|
|||||||
29
platform/commonUI/browse/res/templates/back-arrow.html
Normal file
29
platform/commonUI/browse/res/templates/back-arrow.html
Normal 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>
|
||||||
@ -20,22 +20,25 @@
|
|||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<span ng-controller="BrowseObjectController">
|
<span ng-controller="BrowseObjectController">
|
||||||
<div class="object-browse-bar bar abs">
|
<div class="object-browse-bar bar l-flex">
|
||||||
<div class="items-select left abs">
|
<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 key="'object-header'" mct-object="domainObject">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="btn-bar right">
|
||||||
<div class="btn-bar right abs">
|
|
||||||
<mct-representation key="'action-group'"
|
|
||||||
mct-object="domainObject"
|
|
||||||
parameters="{ category: 'view-control' }">
|
|
||||||
</mct-representation>
|
|
||||||
|
|
||||||
<mct-representation key="'switcher'"
|
<mct-representation key="'switcher'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
ng-model="representation">
|
ng-model="representation">
|
||||||
</mct-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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -19,38 +19,49 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
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>
|
<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'>
|
<mct-split-pane class='contents abs' anchor='left'>
|
||||||
<div
|
<div class='split-pane-component treeview pane left'>
|
||||||
class='split-pane-component treeview pane left'
|
<div class="holder abs l-mobile">
|
||||||
>
|
<mct-representation key="'create-button'" mct-object="navigatedObject">
|
||||||
<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">
|
|
||||||
</mct-representation>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<mct-splitter></mct-splitter>
|
|
||||||
<div class='split-pane-component items pane'>
|
<mct-splitter class="mobile-hide"></mct-splitter>
|
||||||
<div class='holder abs' id='content-area'>
|
|
||||||
<mct-representation mct-object="navigatedObject" key="'browse-object'">
|
<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>
|
</mct-representation>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
|
||||||
|
mct-device="mobile"
|
||||||
|
ng-click="tree.toggle()">m</div>
|
||||||
</div>
|
</div>
|
||||||
</mct-split-pane>
|
</mct-split-pane>
|
||||||
</div>
|
</div>
|
||||||
<mct-include key="'bottombar'"></mct-include>
|
<mct-include key="'bottombar'"></mct-include>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -19,11 +19,11 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class='object-header'>
|
<div class='object-header object-header-mobile'>
|
||||||
<span class="label s-label">
|
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
|
||||||
<span class='type-icon 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 ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
|
||||||
<span class='type-name'>{{type.getName()}}</span>
|
|
||||||
<span class='title-label'>{{model.name}}</span>
|
<span class='title-label'>{{model.name}}</span>
|
||||||
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
|
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -21,31 +21,27 @@
|
|||||||
-->
|
-->
|
||||||
<!-- For selected, add class 'selected' to outer div -->
|
<!-- For selected, add class 'selected' to outer div -->
|
||||||
<div class='item grid-item' ng-click='action.perform("navigate")'>
|
<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='top-bar bar abs'>
|
||||||
<div class='left abs'>
|
<div class='ui-symbol profile' title='Shared'>O</div>
|
||||||
<mct-include key="_checkbox"></mct-include>
|
<mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
|
||||||
</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>
|
</div>
|
||||||
<div class='item-main abs'>
|
<div class='item-main abs'>
|
||||||
<div class='ui-symbol icon lg item-type'>
|
<div class='ui-symbol icon lg item-type'>
|
||||||
{{type.getGlyph()}}
|
{{type.getGlyph()}}
|
||||||
<span
|
<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()"
|
ng-show="location.isLink()"
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
<div class='ui-symbol icon abs item-open'>}</div>
|
<div class='ui-symbol abs item-open'>}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class='bottom-bar bar abs'>
|
<div class='bottom-bar bar abs'>
|
||||||
<div class='title'>{{model.name}}</div>
|
<div class='title'>{{model.name}}</div>
|
||||||
<div class='details'>
|
<div class='details'>
|
||||||
|
<span>{{type.getName()}}</span>
|
||||||
<span ng-show="model.composition !== undefined">
|
<span ng-show="model.composition !== undefined">
|
||||||
{{model.composition.length}} Items
|
- {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
78
platform/commonUI/browse/src/BrowseTreeController.js
Normal file
78
platform/commonUI/browse/src/BrowseTreeController.js
Normal 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
90
platform/commonUI/browse/test/BrowseTreeControllerSpec.js
Normal 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,6 +1,7 @@
|
|||||||
[
|
[
|
||||||
"BrowseController",
|
"BrowseController",
|
||||||
"BrowseObjectController",
|
"BrowseObjectController",
|
||||||
|
"BrowseTreeController",
|
||||||
"MenuArrowController",
|
"MenuArrowController",
|
||||||
"creation/CreateAction",
|
"creation/CreateAction",
|
||||||
"creation/CreateActionProvider",
|
"creation/CreateActionProvider",
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
All fields marked <span class="ui-symbol req">*</span> are required.
|
All fields marked <span class="ui-symbol req">*</span> are required.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="abs form outline editor">
|
<div class="abs form editor">
|
||||||
<div class='abs contents l-dialog'>
|
<div class='abs contents l-dialog'>
|
||||||
<mct-form ng-model="ngModel.value"
|
<mct-form ng-model="ngModel.value"
|
||||||
structure="ngModel.structure"
|
structure="ngModel.structure"
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
<a href=""
|
<a href=""
|
||||||
ng-click="ngModel.cancel()"
|
ng-click="ngModel.cancel()"
|
||||||
ng-if="ngModel.cancel"
|
ng-if="ngModel.cancel"
|
||||||
class="btn normal ui-symbol close">
|
class="clk-icon icon ui-symbol close">
|
||||||
x
|
x
|
||||||
</a>
|
</a>
|
||||||
<div class="abs contents" ng-transclude>
|
<div class="abs contents" ng-transclude>
|
||||||
|
|||||||
@ -94,8 +94,7 @@ define(
|
|||||||
context;
|
context;
|
||||||
|
|
||||||
// Stop when object is not defined (above ROOT)
|
// Stop when object is not defined (above ROOT)
|
||||||
while (traverseObject) {
|
while (traverseObject && traverseObject.getCapability('context')) {
|
||||||
|
|
||||||
// If object currently traversed to is object being removed
|
// If object currently traversed to is object being removed
|
||||||
// navigate to parent of current object and then exit loop
|
// navigate to parent of current object and then exit loop
|
||||||
if (traverseObject.getId() === object.getId()) {
|
if (traverseObject.getId() === object.getId()) {
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
"services": [
|
"services": [
|
||||||
{
|
{
|
||||||
"key": "urlService",
|
"key": "urlService",
|
||||||
"implementation": "/services/UrlService.js",
|
"implementation": "services/UrlService.js",
|
||||||
"depends": [ "$location" ]
|
"depends": [ "$location" ]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
@ -48,6 +48,34 @@
|
|||||||
/************************** CONTROLS */
|
/************************** CONTROLS */
|
||||||
/************************** PATHS */
|
/************************** PATHS */
|
||||||
/************************** TIMINGS */
|
/************************** 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
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* 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
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* 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 */
|
/* line 22, ../sass/forms/_elems.scss */
|
||||||
.section-header {
|
.section-header {
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 2px;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 2px;
|
||||||
border-radius: 3px;
|
border-radius: 2px;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #cccccc;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
margin-top: 5px;
|
padding: 5px 5px;
|
||||||
padding: 5px; }
|
text-transform: uppercase; }
|
||||||
/* line 28, ../sass/forms/_elems.scss */
|
|
||||||
.section-header:first-child {
|
|
||||||
margin-top: 0; }
|
|
||||||
|
|
||||||
/* line 35, ../sass/forms/_elems.scss */
|
/* line 35, ../sass/forms/_elems.scss */
|
||||||
.form .form-section {
|
.form .form-section {
|
||||||
position: relative; }
|
position: relative;
|
||||||
/* line 39, ../sass/forms/_elems.scss */
|
margin-bottom: 20px; }
|
||||||
|
/* line 40, ../sass/forms/_elems.scss */
|
||||||
.form .form-row {
|
.form .form-row {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
border-top: 1px solid #4d4d4d;
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
padding: 5px;
|
padding: 5px 0;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
/* line 46, ../sass/forms/_elems.scss */
|
/* line 48, ../sass/forms/_elems.scss */
|
||||||
.form .form-row.first {
|
.form .form-row.first {
|
||||||
border-top: none; }
|
border-top: none; }
|
||||||
/* line 50, ../sass/forms/_elems.scss */
|
/* line 52, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .label,
|
.form .form-row > .label,
|
||||||
.form .form-row .controls {
|
.form .form-row > .controls {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
box-sizing: border-box;
|
font-size: 0.8rem;
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
min-height: 22px; }
|
min-height: 22px; }
|
||||||
/* line 61, ../sass/forms/_elems.scss */
|
/* line 61, ../sass/forms/_elems.scss */
|
||||||
.form .form-row > .label {
|
.form .form-row > .label {
|
||||||
float: left;
|
float: left;
|
||||||
|
min-width: 120px;
|
||||||
position: relative;
|
position: relative;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 20%; }
|
width: 30%; }
|
||||||
/* line 69, ../sass/forms/_elems.scss */
|
/* line 71, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .value {
|
.form .form-row .value {
|
||||||
color: #cccccc; }
|
color: #cccccc; }
|
||||||
/* line 73, ../sass/forms/_elems.scss */
|
/* line 75, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .controls {
|
.form .form-row .controls {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 79.9%; }
|
width: 69.9%; }
|
||||||
/* line 80, ../sass/forms/_elems.scss */
|
/* line 82, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
margin-right: 5px; }
|
margin-right: 5px; }
|
||||||
/* line 89, ../sass/forms/_elems.scss */
|
/* line 91, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .controls .l-med input[type="text"] {
|
.form .form-row .controls .l-med input[type="text"] {
|
||||||
width: 200px; }
|
width: 200px; }
|
||||||
/* line 93, ../sass/forms/_elems.scss */
|
/* line 95, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .controls .l-small input[type="text"] {
|
.form .form-row .controls .l-small input[type="text"] {
|
||||||
width: 50px; }
|
width: 50px; }
|
||||||
/* line 97, ../sass/forms/_elems.scss */
|
/* line 99, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .controls .l-numeric input[type="text"] {
|
.form .form-row .controls .l-numeric input[type="text"] {
|
||||||
text-align: right; }
|
text-align: right; }
|
||||||
/* line 101, ../sass/forms/_elems.scss */
|
/* line 103, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .controls .select {
|
.form .form-row .controls .select {
|
||||||
margin-right: 5px; }
|
margin-right: 5px; }
|
||||||
/* line 106, ../sass/forms/_elems.scss */
|
/* line 108, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .field-hints {
|
.form .form-row .field-hints {
|
||||||
color: #666666; }
|
color: #666666; }
|
||||||
/* line 110, ../sass/forms/_elems.scss */
|
/* line 112, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .selector-list {
|
.form .form-row .selector-list {
|
||||||
-moz-border-radius: 2px;
|
-moz-border-radius: 2px;
|
||||||
-webkit-border-radius: 2px;
|
-webkit-border-radius: 2px;
|
||||||
@ -210,7 +258,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
overflow: auto; }
|
overflow: auto; }
|
||||||
/* line 121, ../sass/forms/_elems.scss */
|
/* line 123, ../sass/forms/_elems.scss */
|
||||||
.form .form-row .selector-list .wrapper {
|
.form .form-row .selector-list .wrapper {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -219,24 +267,24 @@
|
|||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
left: 5px; }
|
left: 5px; }
|
||||||
|
|
||||||
/* line 135, ../sass/forms/_elems.scss */
|
/* line 137, ../sass/forms/_elems.scss */
|
||||||
label.form-control.checkbox input {
|
label.form-control.checkbox input {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
vertical-align: top; }
|
vertical-align: top; }
|
||||||
|
|
||||||
/* line 141, ../sass/forms/_elems.scss */
|
/* line 143, ../sass/forms/_elems.scss */
|
||||||
.hint,
|
.hint,
|
||||||
.s-hint {
|
.s-hint {
|
||||||
font-size: 0.9em; }
|
font-size: 0.9em; }
|
||||||
|
|
||||||
/* line 146, ../sass/forms/_elems.scss */
|
/* line 148, ../sass/forms/_elems.scss */
|
||||||
.l-result {
|
.l-result {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
min-height: 32px;
|
min-height: 32px;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top; }
|
vertical-align: top; }
|
||||||
/* line 153, ../sass/forms/_elems.scss */
|
/* line 155, ../sass/forms/_elems.scss */
|
||||||
.l-result div.s-hint {
|
.l-result div.s-hint {
|
||||||
-moz-border-radius: 2px;
|
-moz-border-radius: 2px;
|
||||||
-webkit-border-radius: 2px;
|
-webkit-border-radius: 2px;
|
||||||
@ -385,7 +433,7 @@ input[type="text"] {
|
|||||||
margin: 0 0 2px 2px;
|
margin: 0 0 2px 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
/* line 162, ../sass/_mixins.scss */
|
/* line 167, ../sass/_mixins.scss */
|
||||||
.form-control.select:not(.disabled):hover {
|
.form-control.select:not(.disabled):hover {
|
||||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
@ -394,10 +442,10 @@ input[type="text"] {
|
|||||||
background-image: -webkit-linear-gradient(#636363, #575757);
|
background-image: -webkit-linear-gradient(#636363, #575757);
|
||||||
background-image: linear-gradient(#636363, #575757);
|
background-image: linear-gradient(#636363, #575757);
|
||||||
color: #bdbdbd; }
|
color: #bdbdbd; }
|
||||||
/* line 165, ../sass/_mixins.scss */
|
/* line 170, ../sass/_mixins.scss */
|
||||||
.form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
|
.form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
|
||||||
color: #878787; }
|
color: #878787; }
|
||||||
/* line 170, ../sass/_mixins.scss */
|
/* line 175, ../sass/_mixins.scss */
|
||||||
.form-control.select.btn-menu .invoke-menu {
|
.form-control.select.btn-menu .invoke-menu {
|
||||||
color: #757575; }
|
color: #757575; }
|
||||||
/* line 29, ../sass/forms/_selects.scss */
|
/* line 29, ../sass/forms/_selects.scss */
|
||||||
|
|||||||
@ -48,6 +48,34 @@
|
|||||||
/************************** CONTROLS */
|
/************************** CONTROLS */
|
||||||
/************************** PATHS */
|
/************************** PATHS */
|
||||||
/************************** TIMINGS */
|
/************************** 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
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* 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
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
@ -137,7 +186,7 @@
|
|||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
/* line 162, ../sass/_mixins.scss */
|
/* line 167, ../sass/_mixins.scss */
|
||||||
.items-holder .item.grid-item:not(.disabled):hover {
|
.items-holder .item.grid-item:not(.disabled):hover {
|
||||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
@ -146,15 +195,15 @@
|
|||||||
background-image: -webkit-linear-gradient(#707070, #636363);
|
background-image: -webkit-linear-gradient(#707070, #636363);
|
||||||
background-image: linear-gradient(#707070, #636363);
|
background-image: linear-gradient(#707070, #636363);
|
||||||
color: #bdbdbd; }
|
color: #bdbdbd; }
|
||||||
/* line 165, ../sass/_mixins.scss */
|
/* line 170, ../sass/_mixins.scss */
|
||||||
.items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
|
.items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
|
||||||
color: #949494; }
|
color: #949494; }
|
||||||
/* line 170, ../sass/_mixins.scss */
|
/* line 175, ../sass/_mixins.scss */
|
||||||
.items-holder .item.grid-item.btn-menu .invoke-menu {
|
.items-holder .item.grid-item.btn-menu .invoke-menu {
|
||||||
color: #828282; }
|
color: #828282; }
|
||||||
/* line 46, ../sass/items/_item.scss */
|
/* line 46, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item:hover .item-main .item-type {
|
.items-holder .item.grid-item:hover .item-main .item-type {
|
||||||
color: #0099cc !important; }
|
color: deepskyblue !important; }
|
||||||
/* line 48, ../sass/items/_item.scss */
|
/* line 48, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
|
.items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
|
||||||
color: #49dedb; }
|
color: #49dedb; }
|
||||||
@ -163,35 +212,35 @@
|
|||||||
opacity: 1; }
|
opacity: 1; }
|
||||||
/* line 57, ../sass/items/_item.scss */
|
/* line 57, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .contents {
|
.items-holder .item.grid-item .contents {
|
||||||
top: 5px;
|
top: 10px;
|
||||||
right: 5px;
|
right: 10px;
|
||||||
bottom: 5px;
|
bottom: 10px;
|
||||||
left: 5px; }
|
left: 10px; }
|
||||||
/* line 61, ../sass/items/_item.scss */
|
/* line 63, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .bar.top-bar.abs {
|
.items-holder .item.grid-item .bar.top-bar {
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
text-align: right;
|
||||||
z-index: 5; }
|
z-index: 5; }
|
||||||
/* line 66, ../sass/items/_item.scss */
|
/* line 69, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
|
.items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
|
||||||
width: auto; }
|
width: auto; }
|
||||||
/* line 68, ../sass/items/_item.scss */
|
/* line 71, ../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 {
|
.items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
|
||||||
margin-left: 3px; }
|
margin-left: 3px; }
|
||||||
/* line 70, ../sass/items/_item.scss */
|
/* line 73, ../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 {
|
.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; }
|
color: #49dedb; }
|
||||||
/* line 76, ../sass/items/_item.scss */
|
/* line 79, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .bar.bottom-bar.abs {
|
.items-holder .item.grid-item .bar.bottom-bar {
|
||||||
top: auto;
|
top: auto;
|
||||||
height: 30px;
|
line-height: 110%; }
|
||||||
padding: 5px; }
|
/* line 85, ../sass/items/_item.scss */
|
||||||
/* line 82, ../sass/items/_item.scss */
|
|
||||||
.items-holder .item.grid-item .item-main {
|
.items-holder .item.grid-item .item-main {
|
||||||
line-height: 160px;
|
line-height: 160px;
|
||||||
z-index: 1; }
|
z-index: 1; }
|
||||||
/* line 88, ../sass/items/_item.scss */
|
/* line 91, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .item-main .item-type {
|
.items-holder .item.grid-item .item-main .item-type {
|
||||||
overflow: false;
|
overflow: false;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -201,24 +250,23 @@
|
|||||||
left: 40px;
|
left: 40px;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
color: #737373;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 96.9px;
|
font-size: 96.9px;
|
||||||
line-height: 102px;
|
line-height: 102px;
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
height: 102px;
|
height: 102px;
|
||||||
top: 30px; }
|
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 {
|
.items-holder .item.grid-item .item-main .item-type .l-icon-link {
|
||||||
color: #1a8e8b;
|
color: #49dedb;
|
||||||
height: 36px;
|
height: auto;
|
||||||
line-height: 36px;
|
line-height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 32px;
|
font-size: 0.3em;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
z-index: 2; }
|
z-index: 2; }
|
||||||
/* line 112, ../sass/items/_item.scss */
|
/* line 116, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .item-main .item-open {
|
.items-holder .item.grid-item .item-main .item-open {
|
||||||
-moz-transition-property: "opacity";
|
-moz-transition-property: "opacity";
|
||||||
-o-transition-property: "opacity";
|
-o-transition-property: "opacity";
|
||||||
@ -238,17 +286,20 @@
|
|||||||
width: 50px;
|
width: 50px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
text-align: right; }
|
text-align: right; }
|
||||||
/* line 124, ../sass/items/_item.scss */
|
/* line 128, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .title {
|
.items-holder .item.grid-item .title {
|
||||||
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
|
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
|
||||||
color: #cccccc;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis; }
|
color: #cccccc; }
|
||||||
/* line 132, ../sass/items/_item.scss */
|
/* line 133, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item .details {
|
.items-holder .item.grid-item .details {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
font-size: 0.8em; }
|
font-size: 0.8em; }
|
||||||
/* line 135, ../sass/items/_item.scss */
|
/* line 137, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item.selected {
|
.items-holder .item.grid-item.selected {
|
||||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
@ -270,7 +321,7 @@
|
|||||||
color: #999;
|
color: #999;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #80dfff; }
|
color: #80dfff; }
|
||||||
/* line 162, ../sass/_mixins.scss */
|
/* line 167, ../sass/_mixins.scss */
|
||||||
.items-holder .item.grid-item.selected:not(.disabled):hover {
|
.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-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
@ -279,21 +330,123 @@
|
|||||||
background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
|
background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
|
||||||
background-image: linear-gradient(#2ecbff, #14c4ff);
|
background-image: linear-gradient(#2ecbff, #14c4ff);
|
||||||
color: #bdbdbd; }
|
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 {
|
.items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
|
||||||
color: #75ddff; }
|
color: #75ddff; }
|
||||||
/* line 170, ../sass/_mixins.scss */
|
/* line 175, ../sass/_mixins.scss */
|
||||||
.items-holder .item.grid-item.selected.btn-menu .invoke-menu {
|
.items-holder .item.grid-item.selected.btn-menu .invoke-menu {
|
||||||
color: #52d4ff; }
|
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) {
|
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
|
||||||
color: #80dfff; }
|
color: #80dfff; }
|
||||||
/* line 141, ../sass/items/_item.scss */
|
/* line 143, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item.selected .item-main .item-open {
|
.items-holder .item.grid-item.selected .item-main .item-open {
|
||||||
color: #80dfff; }
|
color: #80dfff; }
|
||||||
/* line 142, ../sass/items/_item.scss */
|
/* line 144, ../sass/items/_item.scss */
|
||||||
.items-holder .item.grid-item.selected .title {
|
.items-holder .item.grid-item.selected .title {
|
||||||
color: white; }
|
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 {
|
.items-holder .item.grid-item.selected:hover .item-main .item-type {
|
||||||
color: white !important; }
|
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; } }
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -48,6 +48,34 @@
|
|||||||
/************************** CONTROLS */
|
/************************** CONTROLS */
|
||||||
/************************** PATHS */
|
/************************** PATHS */
|
||||||
/************************** TIMINGS */
|
/************************** 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
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* 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
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
@ -104,7 +153,7 @@
|
|||||||
ul.tree {
|
ul.tree {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
/* line 308, ../sass/_mixins.scss */
|
/* line 314, ../sass/_mixins.scss */
|
||||||
ul.tree li {
|
ul.tree li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -113,144 +162,175 @@ ul.tree {
|
|||||||
ul.tree li {
|
ul.tree li {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
/* line 28, ../sass/tree/_tree.scss */
|
/* line 29, ../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 */
|
|
||||||
ul.tree ul.tree {
|
ul.tree ul.tree {
|
||||||
margin-left: 15px; }
|
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
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* 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
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
/* line 23, ../sass/search/_search.scss */
|
@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) {
|
||||||
.abs.search-holder {
|
/* line 27, ../sass/mobile/_tree.scss */
|
||||||
height: 25px;
|
ul.tree ul.tree {
|
||||||
bottom: 0;
|
margin-left: 20px; }
|
||||||
z-index: 5; }
|
|
||||||
/* line 27, ../sass/search/_search.scss */
|
|
||||||
.abs.search-holder.active {
|
|
||||||
height: auto;
|
|
||||||
bottom: 0; }
|
|
||||||
|
|
||||||
/* line 38, ../sass/search/_search.scss */
|
/* line 31, ../sass/mobile/_tree.scss */
|
||||||
.search {
|
.tree-item,
|
||||||
display: flex;
|
.search-result-item {
|
||||||
flex-direction: column;
|
height: 35px;
|
||||||
height: 100%; }
|
line-height: 35px;
|
||||||
/* line 49, ../sass/search/_search.scss */
|
margin-bottom: 0px; }
|
||||||
.search .search-bar {
|
/* line 36, ../sass/mobile/_tree.scss */
|
||||||
font-size: 0.8em;
|
.tree-item .view-control,
|
||||||
position: relative;
|
.search-result-item .view-control {
|
||||||
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;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
font-size: 1.1em;
|
||||||
top: 4px; }
|
right: 0px;
|
||||||
/* line 86, ../sass/search/_search.scss */
|
width: 30px;
|
||||||
.search .search-bar .clear-icon,
|
text-align: center; }
|
||||||
.search .search-bar .menu-icon {
|
/* line 45, ../sass/mobile/_tree.scss */
|
||||||
cursor: pointer;
|
.tree-item .label,
|
||||||
transition: color .25s; }
|
.search-result-item .label {
|
||||||
/* line 93, ../sass/search/_search.scss */
|
left: 0;
|
||||||
.search .search-bar .search-input {
|
right: 35px;
|
||||||
position: relative;
|
line-height: 35px; }
|
||||||
width: 100%;
|
/* line 50, ../sass/mobile/_tree.scss */
|
||||||
padding-left: 22px !important;
|
.tree-item .label .type-icon,
|
||||||
padding-right: 44px !important; }
|
.search-result-item .label .type-icon {
|
||||||
/* line 100, ../sass/search/_search.scss */
|
top: 9px;
|
||||||
.search .search-bar .search-input input {
|
bottom: auto;
|
||||||
width: 100%; }
|
height: 16px; } }
|
||||||
/* 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; }
|
|
||||||
|
|||||||
Binary file not shown.
@ -83,7 +83,8 @@
|
|||||||
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
|
<glyph unicode="" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
|
||||||
<glyph unicode="" 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" />
|
<glyph unicode="" 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>
|
</font></defs></svg>
|
||||||
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
Binary file not shown.
@ -47,6 +47,8 @@ $colorPausedBg: #c56f01;
|
|||||||
$colorPausedFg: #fff;
|
$colorPausedFg: #fff;
|
||||||
$colorCreateBtn: $colorKey;
|
$colorCreateBtn: $colorKey;
|
||||||
$colorGridLines: rgba(#fff, 0.05);
|
$colorGridLines: rgba(#fff, 0.05);
|
||||||
|
$colorFormLines: rgba(#fff, 0.1);
|
||||||
|
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||||
// Menu colors
|
// Menu colors
|
||||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||||
@ -104,6 +106,7 @@ $treeSearchInputBarH: 25px;
|
|||||||
// Overlay
|
// Overlay
|
||||||
$ovrTopBarH: 60px;
|
$ovrTopBarH: 60px;
|
||||||
$ovrFooterH: 40px;
|
$ovrFooterH: 40px;
|
||||||
|
$overlayMargin: 25px;
|
||||||
// Items
|
// Items
|
||||||
$ueBrowseGridItemLg: 200px;
|
$ueBrowseGridItemLg: 200px;
|
||||||
$ueBrowseGridItemTopBarH: 20px;
|
$ueBrowseGridItemTopBarH: 20px;
|
||||||
@ -111,6 +114,7 @@ $ueBrowseGridItemBottomBarH: 30px;
|
|||||||
$itemPadLR: 5px;
|
$itemPadLR: 5px;
|
||||||
// Tree
|
// Tree
|
||||||
$treeVCW: 10px;
|
$treeVCW: 10px;
|
||||||
|
$treeTypeIconH: 16px;
|
||||||
$treeTypeIconW: 20px;
|
$treeTypeIconW: 20px;
|
||||||
$treeContextTriggerW: 20px;
|
$treeContextTriggerW: 20px;
|
||||||
$colorItemTreeIcon: $colorKey;
|
$colorItemTreeIcon: $colorKey;
|
||||||
@ -144,10 +148,13 @@ $reqSymbolFontSize: 0.7em;
|
|||||||
|
|
||||||
/************************** CONTROLS */
|
/************************** CONTROLS */
|
||||||
$controlDisabledOpacity: 0.3;
|
$controlDisabledOpacity: 0.3;
|
||||||
$formLabelW: 20%;
|
$formLabelW: 30%;
|
||||||
$formInputH: 22px;
|
$formInputH: 22px;
|
||||||
$formRowCtrlsH: 14px;
|
$formRowCtrlsH: 14px;
|
||||||
|
$formTBPad: $interiorMargin;
|
||||||
|
$formLRPad: $interiorMargin;
|
||||||
$menuLineH: 1.5rem;
|
$menuLineH: 1.5rem;
|
||||||
|
$menuLineHPx: 24px;
|
||||||
$scrollbarTrackSize: 10px;
|
$scrollbarTrackSize: 10px;
|
||||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||||
$btnStdH: 25px;
|
$btnStdH: 25px;
|
||||||
|
|||||||
@ -71,12 +71,6 @@ p {
|
|||||||
margin-bottom: $interiorMarginLg;
|
margin-bottom: $interiorMarginLg;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
/* 618 DEBUG
|
|
||||||
box-sizing: border-box;
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
mct-container {
|
mct-container {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -45,7 +45,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar .icon {
|
.bar .ui-symbol {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,9 +65,9 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree-item .type-icon {
|
//.tree-item .type-icon {
|
||||||
font-size: 16px; // 16px is crisp size
|
// font-size: 16px; // 16px is crisp size
|
||||||
}
|
//}
|
||||||
|
|
||||||
.l-icon-link:before {
|
.l-icon-link:before {
|
||||||
content: "\f4";
|
content: "\f4";
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
/*****************************************************************************
|
|
||||||
/*****************************************************************************
|
/*****************************************************************************
|
||||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
* as represented by the Administrator of the National Aeronautics and Space
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
@ -28,11 +27,13 @@
|
|||||||
@import "compass/utilities";
|
@import "compass/utilities";
|
||||||
|
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
@import "mobile/mixins";
|
||||||
|
|
||||||
@import "effects";
|
@import "effects";
|
||||||
@import "global";
|
@import "global";
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
@import "user-environ/layout";
|
@import "user-environ/layout";
|
||||||
//@import "search/layout";
|
@import "mobile/layout";
|
||||||
@import "fixed-position";
|
@import "fixed-position";
|
||||||
@import "about";
|
@import "about";
|
||||||
@import "text";
|
@import "text";
|
||||||
@ -46,6 +47,7 @@
|
|||||||
@import "controls/controls";
|
@import "controls/controls";
|
||||||
@import "controls/lists";
|
@import "controls/lists";
|
||||||
@import "controls/menus";
|
@import "controls/menus";
|
||||||
|
@import "mobile/controls/menus";
|
||||||
@import "controls/time-controller";
|
@import "controls/time-controller";
|
||||||
@import "edit/editor";
|
@import "edit/editor";
|
||||||
@import "features/imagery";
|
@import "features/imagery";
|
||||||
@ -58,11 +60,14 @@
|
|||||||
@import "forms/datetime";
|
@import "forms/datetime";
|
||||||
@import "forms/filter";
|
@import "forms/filter";
|
||||||
@import "plots/plots-main";
|
@import "plots/plots-main";
|
||||||
|
@import "search/search";
|
||||||
|
@import "mobile/search/search";
|
||||||
@import "overlay/overlay";
|
@import "overlay/overlay";
|
||||||
|
@import "mobile/overlay/overlay";
|
||||||
@import "user-environ/frame";
|
@import "user-environ/frame";
|
||||||
@import "user-environ/top-bar";
|
@import "user-environ/top-bar";
|
||||||
@import "user-environ/bottom-bar";
|
@import "user-environ/bottom-bar";
|
||||||
@import "user-environ/object-browse";
|
//@import "user-environ/object-browse";
|
||||||
@import "user-environ/tool-bar";
|
@import "user-environ/tool-bar";
|
||||||
@import "helpers/bubbles";
|
@import "helpers/bubbles";
|
||||||
@import "helpers/splitter";
|
@import "helpers/splitter";
|
||||||
|
|||||||
@ -19,157 +19,162 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
|
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
|
||||||
overflow: $overflowHidden;
|
overflow: $overflowHidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $offset; right: $offset; bottom: $offset; left: $offset;
|
top: $offset;
|
||||||
width: auto; height: auto;
|
right: $offset;
|
||||||
|
bottom: $offset;
|
||||||
|
left: $offset;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin ancillaryIcon($d, $c) {
|
@mixin ancillaryIcon($d, $c) {
|
||||||
// Used for small icons used in combination with larger icons,
|
// Used for small icons used in combination with larger icons,
|
||||||
// like the link and alert icons in tree items.
|
// like the link and alert icons in tree items.
|
||||||
color: $c;
|
color: $c;
|
||||||
font-size: $d;
|
font-size: $d;
|
||||||
line-height: $d;
|
line-height: $d;
|
||||||
height: $d;
|
height: $d;
|
||||||
width: $d;
|
width: $d;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin trans-prop-nice($props, $t: 500ms) {
|
@mixin trans-prop-nice($props, $t: 500ms) {
|
||||||
@if $t == 0 {
|
@if $t == 0 {
|
||||||
@include transition-property(none);
|
@include transition-property(none);
|
||||||
} @else {
|
} @else {
|
||||||
@include transition-property($props);
|
@include transition-property($props);
|
||||||
@include transition-duration($t);
|
@include transition-duration($t);
|
||||||
@include transition-timing-function(ease-in-out);
|
@include transition-timing-function(ease-in-out);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin trans-prop-nice-fade($t: 0.5s) {
|
@mixin trans-prop-nice-fade($t: 0.5s) {
|
||||||
@if $t == 0 {
|
@if $t == 0 {
|
||||||
@include transition-property(none);
|
@include transition-property(none);
|
||||||
} @else {
|
} @else {
|
||||||
@include transition-property(visibility, opacity, background-color, border-color);
|
@include transition-property(visibility, opacity, background-color, border-color);
|
||||||
@include transition-duration($t);
|
@include transition-duration($t);
|
||||||
@include transition-timing-function(ease-in-out);
|
@include transition-timing-function(ease-in-out);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin trans-prop-nice-resize-h($t: 0.5s) {
|
@mixin trans-prop-nice-resize-h($t: 0.5s) {
|
||||||
@include transition-property(height, bottom, top);
|
@include transition-property(height, bottom, top);
|
||||||
@include transition-duration($t);
|
@include transition-duration($t);
|
||||||
@include transition-timing-function(ease-in-out);
|
@include transition-timing-function(ease-in-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin trans-prop-nice-resize-w($t: 0.5s) {
|
@mixin trans-prop-nice-resize-w($t: 0.5s) {
|
||||||
@include transition-property(width, left, right);
|
@include transition-property(width, left, right);
|
||||||
@include transition-duration($t);
|
@include transition-duration($t);
|
||||||
@include transition-timing-function(ease-in-out);
|
@include transition-timing-function(ease-in-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin triangle-right($size, $color) {
|
@mixin triangle-right($size, $color) {
|
||||||
$size: $size/2;
|
$size: $size/2;
|
||||||
$ratio: 1;
|
$ratio: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: $size/$ratio solid transparent;
|
border-top: $size/$ratio solid transparent;
|
||||||
border-left: $size solid $color;
|
border-left: $size solid $color;
|
||||||
border-bottom: $size/$ratio solid transparent;
|
border-bottom: $size/$ratio solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin triangle-down($size, $color) {
|
@mixin triangle-down($size, $color) {
|
||||||
$size: $size/2;
|
$size: $size/2;
|
||||||
$ratio: 1;
|
$ratio: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-left: $size/$ratio solid transparent;
|
border-left: $size/$ratio solid transparent;
|
||||||
border-top: $size solid $color;
|
border-top: $size solid $color;
|
||||||
border-right: $size/$ratio solid transparent;
|
border-right: $size/$ratio solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
|
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
|
||||||
//$size: $size*2;
|
//$size: $size*2;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
$slopedB: $size/$ratio solid transparent;
|
$slopedB: $size/$ratio solid transparent;
|
||||||
$straightB: $size solid $color;
|
$straightB: $size solid $color;
|
||||||
@if $dir == "up" {
|
@if $dir == "up" {
|
||||||
border-left: $slopedB;
|
border-left: $slopedB;
|
||||||
border-right: $slopedB;
|
border-right: $slopedB;
|
||||||
border-bottom: $straightB;
|
border-bottom: $straightB;
|
||||||
} @else if $dir == "right" {
|
} @else if $dir == "right" {
|
||||||
border-top: $slopedB;
|
border-top: $slopedB;
|
||||||
border-bottom: $slopedB;
|
border-bottom: $slopedB;
|
||||||
border-left: $straightB;
|
border-left: $straightB;
|
||||||
} @else if $dir == "down" {
|
} @else if $dir == "down" {
|
||||||
border-left: $slopedB;
|
border-left: $slopedB;
|
||||||
border-right: $slopedB;
|
border-right: $slopedB;
|
||||||
border-top: $straightB;
|
border-top: $straightB;
|
||||||
} @else {
|
} @else {
|
||||||
border-top: $slopedB;
|
border-top: $slopedB;
|
||||||
border-bottom: $slopedB;
|
border-bottom: $slopedB;
|
||||||
border-right: $straightB;
|
border-right: $straightB;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||||
@include background-image(linear-gradient(-45deg,
|
@include background-image(linear-gradient(-45deg,
|
||||||
rgba($c, $a) 25%, transparent 25%,
|
rgba($c, $a) 25%, transparent 25%,
|
||||||
transparent 50%, rgba($c, $a) 50%,
|
transparent 50%, rgba($c, $a) 50%,
|
||||||
rgba($c, $a) 75%, transparent 75%,
|
rgba($c, $a) 75%, transparent 75%,
|
||||||
transparent 100%
|
transparent 100%
|
||||||
));
|
));
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-size: $d $d;
|
background-size: $d $d;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
|
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
|
||||||
$deg: 90deg;
|
$deg: 90deg;
|
||||||
@if ($repeatDir != 'x') {
|
@if ($repeatDir != 'x') {
|
||||||
$deg: 0deg;
|
$deg: 0deg;
|
||||||
$repeatDir: repeat-y;
|
$repeatDir: repeat-y;
|
||||||
} @else {
|
} @else {
|
||||||
$repeatDir: repeat-x;
|
$repeatDir: repeat-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include background-image(linear-gradient($deg,
|
@include background-image(linear-gradient($deg,
|
||||||
$c 1px, transparent 1px,
|
$c 1px, transparent 1px,
|
||||||
transparent 100%
|
transparent 100%
|
||||||
));
|
));
|
||||||
background-repeat: $repeatDir;
|
background-repeat: $repeatDir;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
||||||
$ltnRatio: 7%;
|
$ltnRatio: 7%;
|
||||||
$gradRatio: 5%;
|
$gradRatio: 5%;
|
||||||
$hovRatio: 7%;
|
$hovRatio: 7%;
|
||||||
$bgBase: lighten($bg, $ltnRatio);
|
$bgBase: lighten($bg, $ltnRatio);
|
||||||
$fgBase: lighten($fg, $ltnRatio);
|
$fgBase: lighten($fg, $ltnRatio);
|
||||||
$gradC1: lighten($bgBase, $gradRatio);
|
$gradC1: lighten($bgBase, $gradRatio);
|
||||||
$gradC2: $bgBase;
|
$gradC2: $bgBase;
|
||||||
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
|
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
|
||||||
|
|
||||||
@include background-image(linear-gradient($gradC1, $gradC2));
|
@include background-image(linear-gradient($gradC1, $gradC2));
|
||||||
@include border-radius($controlCr);
|
@include border-radius($controlCr);
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@include boxShdwSubtle();
|
@include boxShdwSubtle();
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 1px solid lighten($gradC1, 2%);
|
border-top: 1px solid lighten($gradC1, 2%);
|
||||||
color: $fg;
|
color: $fg;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@if $hover == true {
|
@if $hover == true {
|
||||||
&:not(.disabled):hover {
|
&:not(.disabled):hover {
|
||||||
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
|
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
|
||||||
color: lighten($fgBase, $hovRatio);
|
color: lighten($fgBase, $hovRatio);
|
||||||
&.btn-menu .invoke-menu {
|
&.btn-menu .invoke-menu {
|
||||||
color: lighten($cInvokeBase, $hovRatio);
|
color: lighten($cInvokeBase, $hovRatio);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.btn-menu .invoke-menu {
|
&.btn-menu .invoke-menu {
|
||||||
color: $cInvokeBase;
|
color: $cInvokeBase;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||||
@ -183,45 +188,45 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||||
&:before {
|
&:before {
|
||||||
@include trans-prop-nice("border-color",0.75s);
|
@include trans-prop-nice("border-color", 0.75s);
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
height: auto;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
@if $direction == "horizontal" {
|
@if $direction == "horizontal" {
|
||||||
border-top: $w $style darken($b, 15%);
|
border-top: $w $style darken($b, 15%);
|
||||||
top: 2px;
|
top: 2px;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
|
|
||||||
} @else if $direction == "vertical" {
|
} @else if $direction == "vertical" {
|
||||||
border-left: $w $style darken($b, 15%);
|
border-left: $w $style darken($b, 15%);
|
||||||
left: 2px;
|
left: 2px;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.disabled):hover:before {
|
&:not(.disabled):hover:before {
|
||||||
@include trans-prop-nice("border-color",50ms);
|
@include trans-prop-nice("border-color", 50ms);
|
||||||
border-color: $colorKey;
|
border-color: $colorKey;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
@include containerSubtle($bg, $fg, true);
|
@include containerSubtle($bg, $fg, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
// No longer should be used; use btnSubtle instead
|
// No longer should be used; use btnSubtle instead
|
||||||
//@include containerSubtle($bg, $fg, true);
|
//@include containerSubtle($bg, $fg, true);
|
||||||
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
||||||
/* &:not(.disabled):hover {
|
/* &:not(.disabled):hover {
|
||||||
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
|
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
|
||||||
}*/
|
}*/
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin boxIncised($sVal: 0.6) {
|
@mixin boxIncised($sVal: 0.6) {
|
||||||
@ -237,59 +242,60 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin boxShdwLarge($sVal: 0.7) {
|
@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) {
|
@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) {
|
@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) {
|
@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) {
|
@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) {
|
@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 */
|
/*********************************************** FORM ELEMENTS */
|
||||||
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
@include appearance(none);
|
@include appearance(none);
|
||||||
@include border-radius($controlCr);
|
@include border-radius($controlCr);
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
|
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
|
||||||
// background: lighten($bg, 20%);
|
// background: lighten($bg, 20%);
|
||||||
background: rgba(#fff, 0.1);
|
background: rgba(#fff, 0.1);
|
||||||
border: none;
|
border: none;
|
||||||
//border-bottom: 1px solid rgba(#fff, 0.1);
|
//border-bottom: 1px solid rgba(#fff, 0.1);
|
||||||
color: lighten($fg, 20%);
|
color: lighten($fg, 20%);
|
||||||
outline: none;
|
outline: none;
|
||||||
&.error {
|
&.error {
|
||||||
background: rgba(red, 0.5);
|
background: rgba(red, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
@include input-base($bg, $fg);
|
@include input-base($bg, $fg);
|
||||||
padding: 0 $interiorMarginSm;
|
padding: 0 $interiorMarginSm;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
@include input-base($bg, $fg);
|
@include input-base($bg, $fg);
|
||||||
padding: $interiorMargin;
|
padding: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
@include nice-input($bg, $fg);
|
@include nice-input($bg, $fg);
|
||||||
background: lighten($bg, 3%);
|
background: lighten($bg, 3%);
|
||||||
border-bottom: 1px solid lighten($bg, 10%);
|
border-bottom: 1px solid lighten($bg, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -307,24 +313,40 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
li {
|
li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin:0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin vertical-align {
|
@mixin webkitProp($name, $val) {
|
||||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
#{$name}: #{$val};
|
||||||
position: relative;
|
-webkit-#{$name}: #{$val};
|
||||||
top: 50%;
|
}
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-ms-transform: translateY(-50%);
|
@mixin webkitVal($name, $val) {
|
||||||
transform: translateY(-50%);
|
#{$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() {
|
@mixin ellipsize() {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin scrollH($showBar: auto) {
|
@mixin scrollH($showBar: auto) {
|
||||||
@ -338,21 +360,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
|
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-webkit-animation: rotation .6s infinite linear;
|
-webkit-animation: rotation .6s infinite linear;
|
||||||
-moz-animation: rotation .6s infinite linear;
|
-moz-animation: rotation .6s infinite linear;
|
||||||
-o-animation: rotation .6s infinite linear;
|
-o-animation: rotation .6s infinite linear;
|
||||||
animation: rotation .6s infinite linear;
|
animation: rotation .6s infinite linear;
|
||||||
border-color: rgba($c, 0.25);
|
border-color: rgba($c, 0.25);
|
||||||
border-top-color: rgba($c, 1.0);
|
border-top-color: rgba($c, 1.0);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: $b;
|
border-width: $b;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin test($c: #ffcc00, $a: 0.2) {
|
@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) {
|
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
|
||||||
@ -373,6 +400,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin s-stale($a: 0.5) {
|
@mixin s-stale($a: 0.5) {
|
||||||
color: rgba($colorTelemFresh, $a) !important;
|
color: rgba($colorTelemFresh, $a) !important;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
|
|||||||
.btn,
|
.btn,
|
||||||
.l-btn {
|
.l-btn {
|
||||||
@include user-select(none);
|
@include user-select(none);
|
||||||
line-height: 1.5em; // Was 1.25em
|
//line-height: 1.5em; // Was 1.25em
|
||||||
|
line-height: 150%;
|
||||||
padding: 0 $pad;
|
padding: 0 $pad;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&.lg,
|
&.lg,
|
||||||
|
|||||||
@ -102,7 +102,7 @@
|
|||||||
|
|
||||||
.btn-bar {
|
.btn-bar {
|
||||||
// position: relative;
|
// position: relative;
|
||||||
.btn,
|
/* .btn,
|
||||||
.btn-set,
|
.btn-set,
|
||||||
.t-btn {
|
.t-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -113,7 +113,7 @@
|
|||||||
&:first-child {
|
&:first-child {
|
||||||
// margin-left: 0;
|
// margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-composite-control {
|
.l-composite-control {
|
||||||
@ -153,6 +153,7 @@
|
|||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
.btn-set {
|
.btn-set {
|
||||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -171,37 +172,33 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
.object-browse-bar .btn,
|
.object-browse-bar .btn,
|
||||||
.object-browse-bar .t-btn,
|
.object-browse-bar .t-btn,
|
||||||
|
.object-browse-bar .view-switcher,
|
||||||
.top-bar .buttons-main .btn,
|
.top-bar .buttons-main .btn,
|
||||||
.top-bar .buttons-main .t-btn,
|
.top-bar .buttons-main .t-btn,
|
||||||
|
.top-bar .view-switcher,
|
||||||
.tool-bar .btn,
|
.tool-bar .btn,
|
||||||
.tool-bar .t-btn {
|
.tool-bar .t-btn {
|
||||||
$h: $btnToolbarH;
|
$h: $btnToolbarH;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: $h * $btnFontSizeToH;
|
font-size: $h * $btnFontSizeToH;
|
||||||
height: $h;
|
line-height: 200%;
|
||||||
line-height: $h - 3;
|
vertical-align: top;
|
||||||
.icon:not(.invoke-menu) {
|
|
||||||
// position: relative;
|
|
||||||
// top: -0.04em;
|
|
||||||
//font-size: 150%;
|
|
||||||
//vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label.checkbox.custom {
|
label.checkbox.custom {
|
||||||
$bg: lighten($colorBodyBg, $ltGamma);
|
$bg: lighten($colorBodyBg, $ltGamma);
|
||||||
$d: $formRowCtrlsH;
|
$d: $formRowCtrlsH;
|
||||||
// @include vertical-align();
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: $d;
|
line-height: $d;
|
||||||
margin-right: $interiorMargin * 4;
|
margin-right: $interiorMargin * 4;
|
||||||
padding-left: $d + $interiorMargin;
|
padding-left: $d + $interiorMargin;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: middle; // was top
|
||||||
em {
|
em {
|
||||||
color: $colorBodyFg;
|
color: $colorBodyFg;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -326,9 +323,9 @@ label.checkbox.custom {
|
|||||||
$p: 10px;
|
$p: 10px;
|
||||||
$badgeM: $interiorMargin;
|
$badgeM: $interiorMargin;
|
||||||
$badgeD: $h - ($badgeM * 2);
|
$badgeD: $h - ($badgeM * 2);
|
||||||
height: $h;
|
//height: $h;
|
||||||
line-height: $h;
|
//line-height: $h;
|
||||||
padding-right: 10px;
|
//padding-right: 10px;
|
||||||
&.browse-btn {
|
&.browse-btn {
|
||||||
margin-right: $interiorMargin;
|
margin-right: $interiorMargin;
|
||||||
padding-left: $badgeD + $badgeM * 2;
|
padding-left: $badgeD + $badgeM * 2;
|
||||||
@ -351,7 +348,6 @@ label.checkbox.custom {
|
|||||||
.context-available {
|
.context-available {
|
||||||
$c: $colorKey;
|
$c: $colorKey;
|
||||||
color: $c;
|
color: $c;
|
||||||
//padding: 0 5px;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: lighten($c, 10%);
|
color: lighten($c, 10%);
|
||||||
}
|
}
|
||||||
@ -359,24 +355,63 @@ label.checkbox.custom {
|
|||||||
|
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
@include trans-prop-nice-fade($controlFadeMs);
|
@include trans-prop-nice-fade($controlFadeMs);
|
||||||
|
.type-icon {
|
||||||
|
//vertical-align: top;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/******************************************************** OBJECT-HEADER */
|
/******************************************************** OBJECT-HEADER */
|
||||||
.object-header {
|
.object-header {
|
||||||
display: inline-block;
|
//@include test();
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
.label {
|
|
||||||
.title-label {
|
//> .title-label,
|
||||||
color: lighten($colorBodyFg, 40%);
|
//> .type-icon,
|
||||||
}
|
//> .context-available {
|
||||||
.type-icon {
|
// //@include tmpBorder(#6666ff);
|
||||||
font-size: 120%;
|
// //vertical-align: middle;
|
||||||
margin-right: $interiorMargin;
|
//}
|
||||||
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 {
|
.context-available {
|
||||||
|
@include trans-prop-nice(opacity, 0.25s);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.context-available {
|
.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 */
|
/******************************************************** SLIDERS */
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
@ -449,24 +474,26 @@ label.checkbox.custom {
|
|||||||
|
|
||||||
/******************************************************** BROWSER ELEMENTS */
|
/******************************************************** BROWSER ELEMENTS */
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
@include desktop {
|
||||||
@include sliderTrack();
|
::-webkit-scrollbar {
|
||||||
height: $scrollbarTrackSize;
|
@include sliderTrack();
|
||||||
width: $scrollbarTrackSize;
|
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));
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
::-webkit-scrollbar-thumb {
|
||||||
background: rgba(#000, 0.4);
|
$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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,8 +1,6 @@
|
|||||||
.l-image-main-wrapper,
|
.l-image-main-wrapper,
|
||||||
.l-image-main,
|
.l-image-main,
|
||||||
.l-image-main-controlbar,
|
.l-image-main-controlbar,
|
||||||
.l-image-main-controlbar .left,
|
|
||||||
.l-image-main-controlbar .right,
|
|
||||||
.l-image-thumbs-wrapper {
|
.l-image-thumbs-wrapper {
|
||||||
@include absPosDefault(0, false);
|
@include absPosDefault(0, false);
|
||||||
}
|
}
|
||||||
@ -61,12 +59,9 @@
|
|||||||
.left {
|
.left {
|
||||||
//@include test(red);
|
//@include test(red);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 75% !important;
|
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
//@include test(green);
|
//@include test(green);
|
||||||
min-width: 40px;
|
|
||||||
width: 25% !important;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.l-date,
|
.l-date,
|
||||||
|
|||||||
@ -26,8 +26,10 @@
|
|||||||
@import "compass/utilities";
|
@import "compass/utilities";
|
||||||
|
|
||||||
@import "constants";
|
@import "constants";
|
||||||
|
@import "mobile/constants";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "forms/mixins";
|
@import "forms/mixins";
|
||||||
|
@import "mobile/mixins";
|
||||||
@import "forms/elems";
|
@import "forms/elems";
|
||||||
@import "forms/textarea";
|
@import "forms/textarea";
|
||||||
@import "forms/text-input";
|
@import "forms/text-input";
|
||||||
|
|||||||
@ -20,47 +20,49 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.section-header {
|
.section-header {
|
||||||
@include border-radius(3px);
|
@include border-radius($basicCr);
|
||||||
background: rgba(white, 0.1);
|
background: rgba(#fff, 0.1);
|
||||||
|
$c: lighten($colorBodyFg, 20%);
|
||||||
|
//border-bottom: 1px solid rgba(#fff, 0.3);
|
||||||
|
color: $c;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
margin-top: $interiorMargin;
|
padding: $formTBPad $formLRPad;
|
||||||
padding: $interiorMargin;
|
text-transform: uppercase;
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
// @include test(orange);
|
// @include test(orange);
|
||||||
.form-section {
|
.form-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-bottom: $interiorMarginLg * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row {
|
.form-row {
|
||||||
|
$m: $interiorMargin;
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
border-top: 1px solid $colorInteriorBorder;
|
border-top: 1px solid $colorFormLines;
|
||||||
margin-top: $interiorMargin;
|
margin-top: $m;
|
||||||
padding: $interiorMargin;
|
padding: $formTBPad 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
&.first {
|
&.first {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label,
|
>.label,
|
||||||
.controls {
|
>.controls {
|
||||||
// @include test(orange);
|
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
box-sizing: border-box;
|
font-size: 0.8rem;
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: $formInputH;
|
line-height: $formInputH;
|
||||||
min-height: $formInputH;
|
min-height: $formInputH;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.label {
|
>.label {
|
||||||
// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
|
// 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;
|
float: left;
|
||||||
|
min-width: 120px;
|
||||||
position: relative;
|
position: relative;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: $formLabelW;
|
width: $formLabelW;
|
||||||
|
|||||||
@ -25,18 +25,18 @@
|
|||||||
padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
|
padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
|
||||||
&::after {
|
&::after {
|
||||||
// @include test(yellow, 0.3);
|
// @include test(yellow, 0.3);
|
||||||
display: block;
|
/* display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: $reqSymbolM;
|
right: $reqSymbolM;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: $reqSymbolW;
|
width: $reqSymbolW;*/
|
||||||
font-family: symbolsfont;
|
font-family: symbolsfont;
|
||||||
font-size: $reqSymbolFontSize;
|
font-size: $reqSymbolFontSize;
|
||||||
text-align: right;
|
//text-align: right;
|
||||||
vertical-align: middle;
|
//vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.invalid,
|
&.invalid,
|
||||||
|
|||||||
@ -75,15 +75,32 @@
|
|||||||
margin-left: $bubbleArwSize*2;
|
margin-left: $bubbleArwSize*2;
|
||||||
.l-infobubble::before {
|
.l-infobubble::before {
|
||||||
right: 100%;
|
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 {
|
&.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 {
|
.l-infobubble::before {
|
||||||
left: 100%;
|
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
|
//************************************************* LOOK AND FEEL
|
||||||
|
|
||||||
.l-thumbsbubble-wrapper {
|
.l-thumbsbubble-wrapper {
|
||||||
.arw-up {
|
.arw-up {
|
||||||
@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
||||||
}
|
}
|
||||||
.arw-down {
|
.arw-down {
|
||||||
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-infobubble {
|
.s-infobubble {
|
||||||
|
|||||||
@ -26,5 +26,8 @@
|
|||||||
@import "compass/utilities";
|
@import "compass/utilities";
|
||||||
|
|
||||||
@import "constants";
|
@import "constants";
|
||||||
|
@import "mobile/constants";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "items/item";
|
@import "mobile/mixins";
|
||||||
|
@import "items/item";
|
||||||
|
@import "mobile/item";
|
||||||
@ -44,7 +44,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
&:hover .item-main {
|
&:hover .item-main {
|
||||||
.item-type {
|
.item-type {
|
||||||
color: $colorKey !important;
|
color: lighten($colorKey, 10%) !important;
|
||||||
.l-icon-link {
|
.l-icon-link {
|
||||||
color: $colorIconLink;
|
color: $colorIconLink;
|
||||||
}
|
}
|
||||||
@ -55,13 +55,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.contents {
|
.contents {
|
||||||
top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
|
//@include test(red);
|
||||||
|
$m: $interiorMarginLg;
|
||||||
|
top: $m; right: $m; bottom: $m; left: $m;
|
||||||
}
|
}
|
||||||
.bar {
|
.bar {
|
||||||
&.top-bar.abs {
|
&.top-bar {
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
height: $ueBrowseGridItemTopBarH;
|
height: $ueBrowseGridItemTopBarH;
|
||||||
line-height: $ueBrowseGridItemTopBarH;
|
line-height: $ueBrowseGridItemTopBarH;
|
||||||
|
text-align: right;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
.left, .right {
|
.left, .right {
|
||||||
width: auto;
|
width: auto;
|
||||||
@ -73,10 +76,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.bottom-bar.abs {
|
&.bottom-bar {
|
||||||
top: auto;
|
top: auto;
|
||||||
height: $ueBrowseGridItemBottomBarH;
|
//height: $ueBrowseGridItemBottomBarH;
|
||||||
padding: $interiorMargin;
|
line-height: 110%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.item-main {
|
.item-main {
|
||||||
@ -89,7 +92,7 @@
|
|||||||
//@include trans-prop-nice("color", $transTime);
|
//@include trans-prop-nice("color", $transTime);
|
||||||
@include absPosDefault($iconMargin, false);
|
@include absPosDefault($iconMargin, false);
|
||||||
//@include test(red);
|
//@include test(red);
|
||||||
color: $colorItemFg;
|
//color: $colorItemFg;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: $iconD * 0.95; //6em;
|
font-size: $iconD * 0.95; //6em;
|
||||||
line-height: $iconD;
|
line-height: $iconD;
|
||||||
@ -99,11 +102,12 @@
|
|||||||
//line-height: $lh;
|
//line-height: $lh;
|
||||||
.l-icon-link {
|
.l-icon-link {
|
||||||
// When the link icon is in the item-type icon holder
|
// When the link icon is in the item-type icon holder
|
||||||
color: darken($colorIconLink, 25%);
|
//color: darken($colorIconLink, 25%);
|
||||||
height: 36px;
|
color: $colorIconLink;
|
||||||
line-height: 36px;
|
height: auto;
|
||||||
|
line-height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 32px;
|
font-size: 0.3em;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -123,13 +127,11 @@
|
|||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
@include txtShdwSubtle();
|
@include txtShdwSubtle();
|
||||||
|
@include ellipsize();
|
||||||
color: lighten($colorBodyFg, 20%);
|
color: lighten($colorBodyFg, 20%);
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
// font-weight: bold;
|
|
||||||
}
|
}
|
||||||
.details {
|
.details {
|
||||||
|
@include ellipsize();
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
&.selected {
|
&.selected {
|
||||||
|
|||||||
86
platform/commonUI/general/res/sass/mobile/_constants.scss
Normal file
86
platform/commonUI/general/res/sass/mobile/_constants.scss
Normal 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
119
platform/commonUI/general/res/sass/mobile/_item.scss
Normal 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
174
platform/commonUI/general/res/sass/mobile/_layout.scss
Normal 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
107
platform/commonUI/general/res/sass/mobile/_mixins.scss
Normal 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;
|
||||||
|
}
|
||||||
@ -20,12 +20,38 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
// Overrides some styling in user-environ/_layout.scss
|
@include phoneandtablet {
|
||||||
.pane {
|
ul.tree {
|
||||||
&.treeview.left {
|
// Sets the margin on the left, which causes the
|
||||||
.tree-holder {
|
// running indentation after each folder is made
|
||||||
// Want tree holder to start right below the search bar.
|
ul.tree {
|
||||||
top: 60px;
|
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 {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -19,12 +19,25 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.object-browse-bar {
|
|
||||||
height: $ueTopBarH;
|
// Override the Create menu for mobile
|
||||||
line-height: $ueTopBarH;
|
@include phoneandtablet {
|
||||||
.items-select {
|
.menu-element {
|
||||||
.btn-menu {
|
.super-menu {
|
||||||
margin-right: $interiorMargin * 3;
|
$d: 250px;
|
||||||
|
width: $d;
|
||||||
|
height: $d;
|
||||||
|
|
||||||
|
.pane {
|
||||||
|
&.left {
|
||||||
|
border-right: none;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -24,16 +24,10 @@
|
|||||||
background: $colorOvrBlocker;
|
background: $colorOvrBlocker;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
.btn.close {
|
.clk-icon.close {
|
||||||
@include border-radius($basicCr * 2);
|
|
||||||
padding: 3px 6px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: none;
|
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
|
||||||
top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
|
||||||
.editor {
|
|
||||||
// background: $colorBodyBg;
|
|
||||||
}
|
}
|
||||||
>.holder {
|
>.holder {
|
||||||
$i: 15%;
|
$i: 15%;
|
||||||
@ -43,13 +37,13 @@
|
|||||||
top: $i; right: $i; bottom: $i; left: $i;
|
top: $i; right: $i; bottom: $i; left: $i;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
>.contents {
|
>.contents {
|
||||||
$m: 25px;
|
$m: $overlayMargin;
|
||||||
top: $m; right: $m; bottom: $m; left: $m;
|
top: $m; right: $m; bottom: $m; left: $m;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
@include ellipsize();
|
@include ellipsize();
|
||||||
font-size: 1.3em;
|
font-size: 1.2em;
|
||||||
margin-bottom: $interiorMargin;
|
margin-bottom: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -28,7 +28,7 @@
|
|||||||
height: auto;
|
height: auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
//top: 23px;
|
top: 23px;
|
||||||
|
|
||||||
// Align with the top of the divider bar, below create button
|
// Align with the top of the divider bar, below create button
|
||||||
//margin-top: 10px; // CH comment out
|
//margin-top: 10px; // CH comment out
|
||||||
@ -39,26 +39,20 @@
|
|||||||
$iconWidth: 20px;
|
$iconWidth: 20px;
|
||||||
$leftMargin: 6px;
|
$leftMargin: 6px;
|
||||||
$rightPadding: 5px;
|
$rightPadding: 5px;
|
||||||
|
@include webkitVal(display, flex);
|
||||||
//padding-right: $rightPadding;
|
//display: flex;
|
||||||
//@include test();
|
@include webkitProp(flex-direction, column);
|
||||||
display: flex; //block;
|
//flex-direction: column;
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
//$heightAdjust: 4px;
|
|
||||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||||
$iconEdgeM: 4px;
|
$iconEdgeM: 4px;
|
||||||
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
max-width: 250px;
|
||||||
//order: 1;
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
//height: $textInputHeight;
|
|
||||||
//margin-top: $heightAdjust;
|
|
||||||
.search-input,
|
.search-input,
|
||||||
.search-icon {
|
.search-icon {
|
||||||
}
|
}
|
||||||
@ -230,86 +224,6 @@
|
|||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
position: relative;
|
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 {
|
.load-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
&.loading {
|
&.loading {
|
||||||
|
|||||||
@ -20,5 +20,6 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
@import "constants";
|
@import "constants";
|
||||||
|
@import "mobile/constants";
|
||||||
@import "themes/theme-espresso";
|
@import "themes/theme-espresso";
|
||||||
@import "main";
|
@import "main";
|
||||||
@ -19,4 +19,6 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
/* CONSTANTS */
|
/* CONSTANTS */
|
||||||
|
//$colorBodyBg: #fff;
|
||||||
|
//$colorBodyFg: #666;
|
||||||
@ -21,11 +21,11 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
@import "compass";
|
@import "compass";
|
||||||
@import "compass/css3";
|
@import "compass/css3";
|
||||||
@import "compass/css3/border-radius";
|
|
||||||
@import "compass/css3/opacity";
|
|
||||||
@import "compass/utilities";
|
@import "compass/utilities";
|
||||||
|
|
||||||
@import "constants";
|
@import "constants";
|
||||||
|
@import "mobile/constants";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
@import "mobile/mixins";
|
||||||
@import "tree/tree";
|
@import "tree/tree";
|
||||||
@import "search/search";
|
@import "mobile/tree";
|
||||||
|
|||||||
@ -25,133 +25,152 @@ ul.tree {
|
|||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
span.tree-item {
|
}
|
||||||
$runningItemW: 0;
|
ul.tree {
|
||||||
@include border-radius($basicCr);
|
margin-left: $treeVCW + $interiorMargin;
|
||||||
@include single-transition(background-color, 0.25s);
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
display: block;
|
||||||
font-size: 0.8em;
|
left: $runningItemW + ($interiorMargin * 3);
|
||||||
height: $menuLineH;
|
//right: $treeContextTriggerW + $interiorMargin;
|
||||||
line-height: $menuLineH;
|
overflow: hidden;
|
||||||
margin-bottom: $interiorMarginSm;
|
text-overflow: ellipsis;
|
||||||
position: relative;
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.view-control {
|
&.loading {
|
||||||
display: inline-block;
|
pointer-events: none;
|
||||||
margin-left: $interiorMargin;
|
.label {
|
||||||
font-size: 0.75em;
|
opacity: 0.5;
|
||||||
width: $treeVCW;
|
.title-label {
|
||||||
$runningItemW: $interiorMargin + $treeVCW;
|
font-style: italic;
|
||||||
&:hover {
|
|
||||||
color: $colorItemTreeVCHover;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.wait-spinner {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
&.selected {
|
||||||
display: block;
|
$c: #fff;
|
||||||
// @include test(orange);
|
background: $colorKeySelectedBg;
|
||||||
@include absPosDefault();
|
color: $c;
|
||||||
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
|
.view-control {
|
||||||
left: $runningItemW;
|
color: $colorItemTreeIcon;
|
||||||
|
}
|
||||||
|
.label .type-icon {
|
||||||
|
color: #fff; //$colorItemTreeIconHover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.type-icon {
|
&:not(.selected) {
|
||||||
@include absPosDefault(0, false);
|
// NOTE: [Mobile] Removed Hover on Mobile
|
||||||
@include txtShdwSubtle(0.6);
|
@include desktop {
|
||||||
color: $colorItemTreeIcon;
|
&:hover {
|
||||||
left: $interiorMargin;
|
background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
|
||||||
right: auto; width: 1em;
|
color: lighten($colorBodyFg, 20%);
|
||||||
|
.context-trigger {
|
||||||
.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();
|
|
||||||
display: block;
|
display: block;
|
||||||
left: $runningItemW + ($interiorMargin * 3);
|
|
||||||
//right: $treeContextTriggerW + $interiorMargin;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
}
|
.icon {
|
||||||
|
color: $colorItemTreeIconHover;
|
||||||
&.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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree {
|
&:not(.loading) {
|
||||||
margin-left: $treeVCW + $interiorMargin;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -20,25 +20,23 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.frame {
|
.frame {
|
||||||
$ohH: 20px;
|
$ohH: 16px;
|
||||||
$bc: $colorInteriorBorder;
|
$bc: $colorInteriorBorder;
|
||||||
&.child-frame.panel {
|
&.child-frame.panel {
|
||||||
background: $colorBodyBg;
|
background: $colorBodyBg;
|
||||||
border: 1px solid $bc;
|
border: 1px solid $bc;
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: lighten($bc, 10%);
|
border-color: lighten($bc, 10%);
|
||||||
//z-index: 2;
|
|
||||||
}
|
|
||||||
.contents {
|
|
||||||
// overflow: hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>.object-header.abs {
|
>.object-header.abs {
|
||||||
|
//@include test(red);
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
height: $ohH;
|
height: $ohH;
|
||||||
|
line-height: $ohH;
|
||||||
}
|
}
|
||||||
>.object-holder.abs {
|
>.object-holder.abs {
|
||||||
top: $ohH + $interiorMarginSm;
|
top: $ohH + $interiorMargin;
|
||||||
}
|
}
|
||||||
.contents {
|
.contents {
|
||||||
$myM: $interiorMargin;
|
$myM: $interiorMargin;
|
||||||
@ -48,16 +46,20 @@
|
|||||||
left: $myM;
|
left: $myM;
|
||||||
}
|
}
|
||||||
&.frame-template {
|
&.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 {
|
.view-switcher {
|
||||||
opacity: 0;
|
line-height: $ohH;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
&:hover .view-switcher {
|
// Hide the view switcher by default when it's in an element that's in a frame context
|
||||||
// Show the view switcher on frame hover
|
// Frame template is used because we need to target the lowest nested frame
|
||||||
//display: inline-block !important;
|
@include desktop {
|
||||||
opacity: 1;
|
.view-switcher {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&:hover .view-switcher {
|
||||||
|
// Show the view switcher on frame hover
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
|
|||||||
@ -70,19 +70,26 @@
|
|||||||
&.abs {
|
&.abs {
|
||||||
text-wrap: none;
|
text-wrap: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
&.left,
|
||||||
&.left,
|
.left {
|
||||||
.left {
|
width: 45%;
|
||||||
width: 45% !important;
|
right: auto;
|
||||||
right: auto !important;
|
}
|
||||||
}
|
&.right,
|
||||||
&.right,
|
.right {
|
||||||
.right {
|
width: 45%;
|
||||||
width: 45% !important;
|
left: auto;
|
||||||
left: auto !important;
|
text-align: right;
|
||||||
text-align: right;
|
.icon.major {
|
||||||
.icon.major {
|
margin-left: $interiorMargin * 3;
|
||||||
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($bodyMargin);
|
||||||
@include absPosDefault(0);// New status bar design
|
@include absPosDefault(0);// New status bar design
|
||||||
top: auto;
|
top: auto;
|
||||||
@ -200,7 +207,8 @@
|
|||||||
.split-layout {
|
.split-layout {
|
||||||
.split-pane-component.pane.left {
|
.split-pane-component.pane.left {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
max-width: 50%;
|
max-width: 800px;
|
||||||
|
width: $ueBrowseLeftPaneW;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -208,8 +216,8 @@
|
|||||||
.edit-mode {
|
.edit-mode {
|
||||||
.split-layout {
|
.split-layout {
|
||||||
.split-pane-component.pane.right {
|
.split-pane-component.pane.right {
|
||||||
min-width: 150px;
|
//min-width: 150px;
|
||||||
max-width: 50%;
|
//max-width: 50%;
|
||||||
.split-pane-component.pane.bottom {
|
.split-pane-component.pane.bottom {
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
max-height: 80%;
|
max-height: 80%;
|
||||||
@ -243,6 +251,12 @@
|
|||||||
.right.abs {
|
.right.abs {
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
|
//.left.abs {
|
||||||
|
// @include tmpBorder(green);
|
||||||
|
//}
|
||||||
|
//.right.abs {
|
||||||
|
// @include tmpBorder(red);
|
||||||
|
//}
|
||||||
}
|
}
|
||||||
.object-holder {
|
.object-holder {
|
||||||
top: $ueTopBarH + $interiorMarginLg;
|
top: $ueTopBarH + $interiorMarginLg;
|
||||||
@ -267,6 +281,7 @@
|
|||||||
&.vertical {
|
&.vertical {
|
||||||
// Slides left and right
|
// Slides left and right
|
||||||
>.pane {
|
>.pane {
|
||||||
|
// @include test();
|
||||||
margin-left: $interiorMargin;
|
margin-left: $interiorMargin;
|
||||||
>.holder {
|
>.holder {
|
||||||
left: 0;
|
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 {
|
.vscroll {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,23 +20,16 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.top-bar {
|
.top-bar {
|
||||||
// $h: $ueTopBarH - 5px;
|
|
||||||
// background: rgba(#ff0000, 0.2);
|
|
||||||
// line-height: $ueTopBarBtnH;
|
|
||||||
|
|
||||||
&.browse,
|
&.browse,
|
||||||
&.edit {
|
&.edit {
|
||||||
border-bottom: 1px solid $colorInteriorBorder;
|
border-bottom: 1px solid $colorInteriorBorder;
|
||||||
top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
|
top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
|
||||||
height: $ueTopBarEditH;
|
height: $ueTopBarEditH;
|
||||||
|
line-height: $ueTopBarH;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
// font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons-main {
|
.buttons-main {
|
||||||
@ -44,9 +37,9 @@
|
|||||||
left: auto;
|
left: auto;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
// width: 200px;
|
// width: 200px;
|
||||||
.btn {
|
// .btn {
|
||||||
margin-left: $interiorMargin;
|
// margin-left: $interiorMargin;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
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'>
|
<div id='status' class='status-holder'>
|
||||||
<mct-include ng-repeat="indicator in bar.getIndicators()"
|
<mct-include ng-repeat="indicator in bar.getIndicators()"
|
||||||
ng-model="indicator.ngModel"
|
ng-model="indicator.ngModel"
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
-->
|
-->
|
||||||
<span ng-controller="ViewSwitcherController">
|
<span ng-controller="ViewSwitcherController">
|
||||||
<div
|
<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-if="view.length > 1"
|
||||||
ng-controller="ClickAwayController as toggle"
|
ng-controller="ClickAwayController as toggle"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
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">
|
<div class="menu context-menu dropdown">
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
|
|||||||
@ -29,6 +29,7 @@
|
|||||||
<li ng-repeat="child in composition">
|
<li ng-repeat="child in composition">
|
||||||
<mct-representation key="'tree-node'"
|
<mct-representation key="'tree-node'"
|
||||||
mct-object="child"
|
mct-object="child"
|
||||||
|
parameters="parameters"
|
||||||
ng-model="ngModel">
|
ng-model="ngModel">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@ -26,19 +26,41 @@
|
|||||||
ng-class="{selected: treeNode.isSelected()}"
|
ng-class="{selected: treeNode.isSelected()}"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
mct-device="desktop"
|
||||||
class='ui-symbol view-control'
|
class='ui-symbol view-control'
|
||||||
ng-click="toggle.toggle(); treeNode.trackExpansion()"
|
ng-click="toggle.toggle(); treeNode.trackExpansion()"
|
||||||
ng-if="model.composition !== undefined"
|
ng-if="model.composition !== undefined"
|
||||||
>
|
>
|
||||||
{{toggle.isActive() ? "v" : ">"}}
|
{{toggle.isActive() ? "v" : ">"}}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<mct-representation
|
<mct-representation
|
||||||
|
mct-device="desktop"
|
||||||
|
class="mobile-hide"
|
||||||
key="'label'"
|
key="'label'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
ng-model="ngModel"
|
ng-click="treeNode.select()"
|
||||||
ng-click="ngModel.selectedObject = domainObject"
|
|
||||||
>
|
>
|
||||||
</mct-representation>
|
</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>
|
||||||
<span
|
<span
|
||||||
class="tree-item-subtree"
|
class="tree-item-subtree"
|
||||||
@ -48,9 +70,10 @@
|
|||||||
|
|
||||||
<mct-representation key="'subtree'"
|
<mct-representation key="'subtree'"
|
||||||
ng-model="ngModel"
|
ng-model="ngModel"
|
||||||
|
parameters="parameters"
|
||||||
mct-object="treeNode.hasBeenExpanded() && domainObject">
|
mct-object="treeNode.hasBeenExpanded() && domainObject">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -23,7 +23,8 @@
|
|||||||
<li>
|
<li>
|
||||||
<mct-representation key="'tree-node'"
|
<mct-representation key="'tree-node'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
ng-model="ngModel">
|
ng-model="ngModel"
|
||||||
|
parameters="parameters">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -48,12 +48,23 @@ define(
|
|||||||
* node expansion when this tree node's _subtree_ will contain
|
* node expansion when this tree node's _subtree_ will contain
|
||||||
* the navigated object (recursively, this becomes an
|
* the navigated object (recursively, this becomes an
|
||||||
* expand-to-show-navigated-object behavior.)
|
* 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
|
* @memberof platform/commonUI/general
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
function TreeNodeController($scope, $timeout) {
|
function TreeNodeController($scope, $timeout) {
|
||||||
var self = this,
|
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
|
// Look up the id for a domain object. A convenience
|
||||||
// for mapping; additionally does some undefined-checking.
|
// for mapping; additionally does some undefined-checking.
|
||||||
@ -131,12 +142,29 @@ define(
|
|||||||
this.isSelectedFlag = false;
|
this.isSelectedFlag = false;
|
||||||
this.hasBeenExpandedFlag = false;
|
this.hasBeenExpandedFlag = false;
|
||||||
this.$timeout = $timeout;
|
this.$timeout = $timeout;
|
||||||
|
this.$scope = $scope;
|
||||||
|
|
||||||
// Listen for changes which will effect display parameters
|
// Listen for changes which will effect display parameters
|
||||||
$scope.$watch("ngModel.selectedObject", setSelection);
|
$scope.$watch("ngModel.selectedObject", setSelection);
|
||||||
$scope.$watch("domainObject", checkSelection);
|
$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
|
* This method should be called when a node is expanded
|
||||||
* to record that this has occurred, to support one-time
|
* to record that this has occurred, to support one-time
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* 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(
|
define(
|
||||||
["../../src/controllers/TreeNodeController"],
|
["../../src/controllers/TreeNodeController"],
|
||||||
@ -29,6 +29,7 @@ define(
|
|||||||
describe("The tree node controller", function () {
|
describe("The tree node controller", function () {
|
||||||
var mockScope,
|
var mockScope,
|
||||||
mockTimeout,
|
mockTimeout,
|
||||||
|
mockDomainObject,
|
||||||
controller;
|
controller;
|
||||||
|
|
||||||
function TestObject(id, context) {
|
function TestObject(id, context) {
|
||||||
@ -41,8 +42,13 @@ define(
|
|||||||
}
|
}
|
||||||
|
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
|
mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
|
||||||
mockTimeout = jasmine.createSpy("$timeout");
|
mockTimeout = jasmine.createSpy("$timeout");
|
||||||
|
mockDomainObject = jasmine.createSpyObj(
|
||||||
|
"domainObject",
|
||||||
|
[ "getId", "getCapability", "getModel", "useCapability" ]
|
||||||
|
);
|
||||||
|
|
||||||
controller = new TreeNodeController(mockScope, mockTimeout);
|
controller = new TreeNodeController(mockScope, mockTimeout);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -183,6 +189,22 @@ define(
|
|||||||
expect(controller.isSelected()).toBeFalsy();
|
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();
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -91,7 +91,7 @@ define(
|
|||||||
|
|
||||||
it("get url for a new tab using domainObject and mode", function () {
|
it("get url for a new tab using domainObject and mode", function () {
|
||||||
urlService.urlForNewTab(mockMode, mockDomainObject);
|
urlService.urlForNewTab(mockMode, mockDomainObject);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -15,4 +15,4 @@
|
|||||||
"directives/MCTScroll",
|
"directives/MCTScroll",
|
||||||
"services/UrlService",
|
"services/UrlService",
|
||||||
"StyleSheetLoader"
|
"StyleSheetLoader"
|
||||||
]
|
]
|
||||||
|
|||||||
@ -24,9 +24,19 @@
|
|||||||
"implementation": "gestures/InfoGesture.js",
|
"implementation": "gestures/InfoGesture.js",
|
||||||
"depends": [
|
"depends": [
|
||||||
"$timeout",
|
"$timeout",
|
||||||
|
"agentService",
|
||||||
"infoService",
|
"infoService",
|
||||||
"INFO_HOVER_DELAY"
|
"INFO_HOVER_DELAY"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "infobutton",
|
||||||
|
"implementation": "gestures/InfoButtonGesture.js",
|
||||||
|
"depends": [
|
||||||
|
"$document",
|
||||||
|
"agentService",
|
||||||
|
"infoService"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"services": [
|
"services": [
|
||||||
@ -37,15 +47,23 @@
|
|||||||
"$compile",
|
"$compile",
|
||||||
"$document",
|
"$document",
|
||||||
"$window",
|
"$window",
|
||||||
"$rootScope"
|
"$rootScope",
|
||||||
|
"agentService"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"constants": [
|
"constants": [
|
||||||
{
|
{
|
||||||
"key": "INFO_HOVER_DELAY",
|
"key": "INFO_HOVER_DELAY",
|
||||||
"value": 2000
|
"value": 2000
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"representations": [
|
||||||
|
{
|
||||||
|
"key": "info-button",
|
||||||
|
"templateUrl": "templates/info-button.html",
|
||||||
|
"gestures": [ "infobutton" ]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
25
platform/commonUI/inspect/res/templates/info-button.html
Normal file
25
platform/commonUI/inspect/res/templates/info-button.html
Normal 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'></a>
|
||||||
|
|
||||||
123
platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
Normal file
123
platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
Normal 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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
@ -40,7 +40,7 @@ define(
|
|||||||
* @param {DomainObject} domainObject the domain object for which to
|
* @param {DomainObject} domainObject the domain object for which to
|
||||||
* show information
|
* show information
|
||||||
*/
|
*/
|
||||||
function InfoGesture($timeout, infoService, delay, element, domainObject) {
|
function InfoGesture($timeout, agentService, infoService, delay, element, domainObject) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
// Callback functions to preserve the "this" pointer (in the
|
// Callback functions to preserve the "this" pointer (in the
|
||||||
@ -66,8 +66,13 @@ define(
|
|||||||
this.delay = delay;
|
this.delay = delay;
|
||||||
this.domainObject = domainObject;
|
this.domainObject = domainObject;
|
||||||
|
|
||||||
// Show bubble (on a timeout) on mouse over
|
// Checks if you are on a mobile device, if the device is
|
||||||
element.on('mouseenter', this.showBubbleCallback);
|
// 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) {
|
InfoGesture.prototype.trackPosition = function (event) {
|
||||||
@ -128,6 +133,7 @@ define(
|
|||||||
this.element.on('mouseleave', this.hideBubbleCallback);
|
this.element.on('mouseleave', this.hideBubbleCallback);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Detach any event handlers associated with this gesture.
|
* Detach any event handlers associated with this gesture.
|
||||||
* @method
|
* @method
|
||||||
|
|||||||
@ -34,11 +34,12 @@ define(
|
|||||||
* @memberof platform/commonUI/inspect
|
* @memberof platform/commonUI/inspect
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
function InfoService($compile, $document, $window, $rootScope) {
|
function InfoService($compile, $document, $window, $rootScope, agentService) {
|
||||||
this.$compile = $compile;
|
this.$compile = $compile;
|
||||||
this.$document = $document;
|
this.$document = $document;
|
||||||
this.$window = $window;
|
this.$window = $window;
|
||||||
this.$rootScope = $rootScope;
|
this.$rootScope = $rootScope;
|
||||||
|
this.agentService = agentService;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -64,7 +65,7 @@ define(
|
|||||||
goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
|
goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
|
||||||
goUp = position[1] > (winDim[1] / 2),
|
goUp = position[1] > (winDim[1] / 2),
|
||||||
bubble;
|
bubble;
|
||||||
|
|
||||||
// Pass model & container parameters into the scope
|
// Pass model & container parameters into the scope
|
||||||
scope.bubbleModel = content;
|
scope.bubbleModel = content;
|
||||||
scope.bubbleTemplate = templateKey;
|
scope.bubbleTemplate = templateKey;
|
||||||
@ -77,15 +78,22 @@ define(
|
|||||||
|
|
||||||
// Position the bubble
|
// Position the bubble
|
||||||
bubble.css('position', 'absolute');
|
bubble.css('position', 'absolute');
|
||||||
if (goLeft) {
|
if (this.agentService.isPhone(navigator.userAgent)) {
|
||||||
bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
|
bubble.css('right', '0px');
|
||||||
|
bubble.css('left', '0px');
|
||||||
|
bubble.css('top', 'auto');
|
||||||
|
bubble.css('bottom', '25px');
|
||||||
} else {
|
} else {
|
||||||
bubble.css('left', position[0] + OFFSET[0] + 'px');
|
if (goLeft) {
|
||||||
}
|
bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
|
||||||
if (goUp) {
|
} else {
|
||||||
bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
|
bubble.css('left', position[0] + OFFSET[0] + 'px');
|
||||||
} else {
|
}
|
||||||
bubble.css('top', position[1] + OFFSET[1] + '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
|
// Add the menu to the body
|
||||||
|
|||||||
144
platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
Normal file
144
platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
Normal 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)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
@ -19,7 +19,7 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* 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(
|
define(
|
||||||
['../../src/gestures/InfoGesture'],
|
['../../src/gestures/InfoGesture'],
|
||||||
@ -28,6 +28,7 @@ define(
|
|||||||
|
|
||||||
describe("The info gesture", function () {
|
describe("The info gesture", function () {
|
||||||
var mockTimeout,
|
var mockTimeout,
|
||||||
|
mockAgentService,
|
||||||
mockInfoService,
|
mockInfoService,
|
||||||
testDelay = 12321,
|
testDelay = 12321,
|
||||||
mockElement,
|
mockElement,
|
||||||
@ -50,6 +51,7 @@ define(
|
|||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
mockTimeout = jasmine.createSpy('$timeout');
|
mockTimeout = jasmine.createSpy('$timeout');
|
||||||
mockTimeout.cancel = jasmine.createSpy('cancel');
|
mockTimeout.cancel = jasmine.createSpy('cancel');
|
||||||
|
mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
|
||||||
mockInfoService = jasmine.createSpyObj(
|
mockInfoService = jasmine.createSpyObj(
|
||||||
'infoService',
|
'infoService',
|
||||||
[ 'display' ]
|
[ 'display' ]
|
||||||
@ -79,6 +81,7 @@ define(
|
|||||||
|
|
||||||
gesture = new InfoGesture(
|
gesture = new InfoGesture(
|
||||||
mockTimeout,
|
mockTimeout,
|
||||||
|
mockAgentService,
|
||||||
mockInfoService,
|
mockInfoService,
|
||||||
testDelay,
|
testDelay,
|
||||||
mockElement,
|
mockElement,
|
||||||
|
|||||||
@ -31,6 +31,7 @@ define(
|
|||||||
mockDocument,
|
mockDocument,
|
||||||
testWindow,
|
testWindow,
|
||||||
mockRootScope,
|
mockRootScope,
|
||||||
|
mockAgentService,
|
||||||
mockCompiledTemplate,
|
mockCompiledTemplate,
|
||||||
testScope,
|
testScope,
|
||||||
mockBody,
|
mockBody,
|
||||||
@ -42,6 +43,7 @@ define(
|
|||||||
mockDocument = jasmine.createSpyObj('$document', ['find']);
|
mockDocument = jasmine.createSpyObj('$document', ['find']);
|
||||||
testWindow = { innerWidth: 1000, innerHeight: 100 };
|
testWindow = { innerWidth: 1000, innerHeight: 100 };
|
||||||
mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
|
mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
|
||||||
|
mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
|
||||||
mockCompiledTemplate = jasmine.createSpy('template');
|
mockCompiledTemplate = jasmine.createSpy('template');
|
||||||
testScope = {};
|
testScope = {};
|
||||||
mockBody = jasmine.createSpyObj('body', ['append']);
|
mockBody = jasmine.createSpyObj('body', ['append']);
|
||||||
@ -58,7 +60,8 @@ define(
|
|||||||
mockCompile,
|
mockCompile,
|
||||||
mockDocument,
|
mockDocument,
|
||||||
testWindow,
|
testWindow,
|
||||||
mockRootScope
|
mockRootScope,
|
||||||
|
mockAgentService
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -124,6 +127,18 @@ define(
|
|||||||
(40 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
|
(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,4 +1,5 @@
|
|||||||
[
|
[
|
||||||
"gestures/InfoGesture",
|
"gestures/InfoGesture",
|
||||||
|
"gestures/InfoButtonGesture",
|
||||||
"services/InfoService"
|
"services/InfoService"
|
||||||
]
|
]
|
||||||
|
|||||||
18
platform/commonUI/mobile/bundle.json
Normal file
18
platform/commonUI/mobile/bundle.json
Normal 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
96
platform/commonUI/mobile/src/AgentService.js
Normal 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
108
platform/commonUI/mobile/src/MCTDevice.js
Normal 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
86
platform/commonUI/mobile/test/AgentServiceSpec.js
Normal 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
165
platform/commonUI/mobile/test/MCTDeviceSpec.js
Normal 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
4
platform/commonUI/mobile/test/suite.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
[
|
||||||
|
"AgentService",
|
||||||
|
"MCTDevice"
|
||||||
|
]
|
||||||
@ -136,7 +136,11 @@
|
|||||||
{
|
{
|
||||||
"key": "unknown",
|
"key": "unknown",
|
||||||
"name": "Unknown Type",
|
"name": "Unknown Type",
|
||||||
"glyph": "?"
|
"glyph": "\u003f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Unknown Type",
|
||||||
|
"glyph": "\u003f"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"capabilities": [
|
"capabilities": [
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="l-image-main-controlbar bar">
|
<div class="l-image-main-controlbar l-flex bar">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<a
|
<a
|
||||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
|
class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
|
||||||
|
|||||||
@ -20,13 +20,12 @@
|
|||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class="frame frame-template abs">
|
<div class="frame frame-template abs">
|
||||||
<div class="bar abs object-header object-top-bar">
|
<div class="bar abs l-flex object-header object-top-bar">
|
||||||
<div class="title left abs">
|
<div class="left">
|
||||||
<mct-representation key="'node'"
|
<mct-representation key="'object-header'" mct-object="domainObject">
|
||||||
mct-object="domainObject">
|
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-bar right abs">
|
<div class="btn-bar right">
|
||||||
<mct-representation key="'switcher'"
|
<mct-representation key="'switcher'"
|
||||||
ng-model="representation"
|
ng-model="representation"
|
||||||
mct-object="domainObject">
|
mct-object="domainObject">
|
||||||
|
|||||||
@ -39,6 +39,7 @@ define(
|
|||||||
function CustomRegistrars(app, $log) {
|
function CustomRegistrars(app, $log) {
|
||||||
this.app = app;
|
this.app = app;
|
||||||
this.$log = $log;
|
this.$log = $log;
|
||||||
|
this.registered = {}; // Track registered keys by extension
|
||||||
}
|
}
|
||||||
|
|
||||||
// Utility; bind a function to a "this" pointer
|
// Utility; bind a function to a "this" pointer
|
||||||
@ -56,7 +57,10 @@ define(
|
|||||||
var app = this.app,
|
var app = this.app,
|
||||||
$log = this.$log,
|
$log = this.$log,
|
||||||
key = extension.key,
|
key = extension.key,
|
||||||
dependencies = extension.depends || [];
|
dependencies = extension.depends || [],
|
||||||
|
registered = this.registered[angularFunction] || {};
|
||||||
|
|
||||||
|
this.registered[angularFunction] = registered;
|
||||||
|
|
||||||
if (!key) {
|
if (!key) {
|
||||||
$log.warn([
|
$log.warn([
|
||||||
@ -67,6 +71,14 @@ define(
|
|||||||
", no key specified. ",
|
", no key specified. ",
|
||||||
JSON.stringify(extension)
|
JSON.stringify(extension)
|
||||||
].join(""));
|
].join(""));
|
||||||
|
} else if (registered[key]) {
|
||||||
|
$log.debug([
|
||||||
|
"Already registered ",
|
||||||
|
angularFunction,
|
||||||
|
" with key ",
|
||||||
|
key,
|
||||||
|
"; skipping."
|
||||||
|
].join(""));
|
||||||
} else {
|
} else {
|
||||||
$log.info([
|
$log.info([
|
||||||
"Registering ",
|
"Registering ",
|
||||||
@ -74,6 +86,7 @@ define(
|
|||||||
": ",
|
": ",
|
||||||
key
|
key
|
||||||
].join(""));
|
].join(""));
|
||||||
|
registered[key] = true;
|
||||||
app[angularFunction](
|
app[angularFunction](
|
||||||
key,
|
key,
|
||||||
dependencies.concat([extension])
|
dependencies.concat([extension])
|
||||||
|
|||||||
@ -113,6 +113,25 @@ define(
|
|||||||
// Notably, keys are not needed for run calls
|
// 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 () {
|
it("allows routes to be registered", function () {
|
||||||
var mockRouteProvider = jasmine.createSpyObj(
|
var mockRouteProvider = jasmine.createSpyObj(
|
||||||
"$routeProvider",
|
"$routeProvider",
|
||||||
@ -166,4 +185,4 @@ define(
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
{
|
{
|
||||||
"key": "menu",
|
"key": "menu",
|
||||||
"implementation": "gestures/ContextMenuGesture.js",
|
"implementation": "gestures/ContextMenuGesture.js",
|
||||||
"depends": []
|
"depends": ["$timeout", "agentService"]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"components": [
|
"components": [
|
||||||
@ -54,7 +54,7 @@
|
|||||||
{
|
{
|
||||||
"key": "menu",
|
"key": "menu",
|
||||||
"implementation": "actions/ContextMenuAction.js",
|
"implementation": "actions/ContextMenuAction.js",
|
||||||
"depends": [ "$compile", "$document", "$window", "$rootScope" ]
|
"depends": [ "$compile", "$document", "$window", "$rootScope", "agentService" ]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -49,8 +49,9 @@ define(
|
|||||||
* should be performed
|
* should be performed
|
||||||
* @implements {Action}
|
* @implements {Action}
|
||||||
*/
|
*/
|
||||||
function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
|
function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) {
|
||||||
this.$compile = $compile;
|
this.$compile = $compile;
|
||||||
|
this.agentService = agentService;
|
||||||
this.actionContext = actionContext;
|
this.actionContext = actionContext;
|
||||||
this.getDocument = function () { return $document; };
|
this.getDocument = function () { return $document; };
|
||||||
this.getWindow = function () { return $window; };
|
this.getWindow = function () { return $window; };
|
||||||
@ -70,6 +71,7 @@ define(
|
|||||||
scope = $rootScope.$new(),
|
scope = $rootScope.$new(),
|
||||||
goLeft = eventCoors[0] + menuDim[0] > winDim[0],
|
goLeft = eventCoors[0] + menuDim[0] > winDim[0],
|
||||||
goUp = eventCoors[1] + menuDim[1] > winDim[1],
|
goUp = eventCoors[1] + menuDim[1] > winDim[1],
|
||||||
|
initiatingEvent = this.agentService.isMobile() ? 'touchstart' : 'mousedown',
|
||||||
menu;
|
menu;
|
||||||
|
|
||||||
// Remove the context menu
|
// Remove the context menu
|
||||||
@ -99,21 +101,22 @@ define(
|
|||||||
"go-up": goUp,
|
"go-up": goUp,
|
||||||
"context-menu-holder": true
|
"context-menu-holder": true
|
||||||
};
|
};
|
||||||
|
|
||||||
// Create the context menu
|
// Create the context menu
|
||||||
menu = $compile(MENU_TEMPLATE)(scope);
|
menu = $compile(MENU_TEMPLATE)(scope);
|
||||||
|
|
||||||
// Add the menu to the body
|
// Add the menu to the body
|
||||||
body.append(menu);
|
body.append(menu);
|
||||||
|
|
||||||
// Stop propagation so that clicks on the menu do not close the menu
|
// Stop propagation so that clicks or touches on the menu do not close the menu
|
||||||
menu.on('mousedown', function (event) {
|
menu.on(initiatingEvent, function (event) {
|
||||||
event.stopPropagation();
|
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)
|
// ('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);
|
menu.on('click', dismiss);
|
||||||
|
|
||||||
// Don't launch browser's context menu
|
// Don't launch browser's context menu
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
/*global define,Promise*/
|
/*global define,Promise*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Module defining ContextMenuGesture.
|
* Module defining ContextMenuGesture.
|
||||||
* Created by vwoeltje on 11/17/14. Modified by shale on 06/30/2015.
|
* Created by vwoeltje on 11/17/14. Modified by shale on 06/30/2015.
|
||||||
*/
|
*/
|
||||||
define(
|
define(
|
||||||
@ -41,7 +41,10 @@ define(
|
|||||||
* in the context menu will be performed
|
* in the context menu will be performed
|
||||||
* @implements {Gesture}
|
* @implements {Gesture}
|
||||||
*/
|
*/
|
||||||
function ContextMenuGesture(element, domainObject) {
|
function ContextMenuGesture($timeout, agentService, element, domainObject) {
|
||||||
|
var isPressing,
|
||||||
|
longTouchTime = 500;
|
||||||
|
|
||||||
function showMenu(event) {
|
function showMenu(event) {
|
||||||
domainObject.getCapability('action').perform({
|
domainObject.getCapability('action').perform({
|
||||||
key: 'menu',
|
key: 'menu',
|
||||||
@ -51,7 +54,33 @@ define(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// When context menu event occurs, show object actions instead
|
// 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.showMenuCallback = showMenu;
|
||||||
this.element = element;
|
this.element = element;
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* 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,
|
mockBody,
|
||||||
mockWindow,
|
mockWindow,
|
||||||
mockRootScope,
|
mockRootScope,
|
||||||
|
mockAgentService,
|
||||||
mockScope,
|
mockScope,
|
||||||
mockElement,
|
mockElement,
|
||||||
mockDomainObject,
|
mockDomainObject,
|
||||||
@ -58,10 +59,11 @@ define(
|
|||||||
mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
|
mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
|
||||||
mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
|
mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
|
||||||
mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
|
mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
|
||||||
|
mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
|
||||||
mockScope = {};
|
mockScope = {};
|
||||||
mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
|
mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
|
||||||
mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
|
mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
|
||||||
mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
|
mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
|
||||||
mockEvent.pageX = 0;
|
mockEvent.pageX = 0;
|
||||||
mockEvent.pageY = 0;
|
mockEvent.pageY = 0;
|
||||||
|
|
||||||
@ -77,6 +79,7 @@ define(
|
|||||||
mockDocument,
|
mockDocument,
|
||||||
mockWindow,
|
mockWindow,
|
||||||
mockRootScope,
|
mockRootScope,
|
||||||
|
mockAgentService,
|
||||||
mockActionContext
|
mockActionContext
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@ -156,6 +159,42 @@ define(
|
|||||||
// Menu should have been removed
|
// Menu should have been removed
|
||||||
expect(mockMenu.remove).toHaveBeenCalled();
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -31,28 +31,54 @@ define(
|
|||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var JQLITE_FUNCTIONS = [ "on", "off", "find", "append", "remove" ],
|
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 () {
|
describe("The 'context menu' gesture", function () {
|
||||||
var mockElement,
|
var mockTimeout,
|
||||||
|
mockElement,
|
||||||
|
mockAgentService,
|
||||||
mockDomainObject,
|
mockDomainObject,
|
||||||
mockEvent,
|
mockEvent,
|
||||||
|
mockTouchEvent,
|
||||||
|
mockContextMenuAction,
|
||||||
|
mockActionContext,
|
||||||
|
mockTouch,
|
||||||
gesture,
|
gesture,
|
||||||
fireGesture;
|
fireGesture,
|
||||||
|
fireTouchStartGesture,
|
||||||
|
fireTouchEndGesture;
|
||||||
|
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
|
mockTimeout = jasmine.createSpy("$timeout");
|
||||||
mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
|
mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
|
||||||
|
mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
|
||||||
mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
|
mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
|
||||||
mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
|
mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
|
||||||
|
mockContextMenuAction = jasmine.createSpyObj(
|
||||||
gesture = new ContextMenuGesture(mockElement, mockDomainObject);
|
"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
|
// Capture the contextmenu callback
|
||||||
fireGesture = mockElement.on.mostRecentCall.args[1];
|
fireGesture = mockElement.on.mostRecentCall.args[1];
|
||||||
});
|
});
|
||||||
|
|
||||||
it("attaches a callback for context menu events", function () {
|
it("attaches a callback for context menu events", function () {
|
||||||
|
// Fire a click and expect it to happen
|
||||||
|
fireGesture();
|
||||||
expect(mockElement.on).toHaveBeenCalledWith(
|
expect(mockElement.on).toHaveBeenCalledWith(
|
||||||
"contextmenu",
|
"contextmenu",
|
||||||
jasmine.any(Function)
|
jasmine.any(Function)
|
||||||
@ -70,6 +96,34 @@ define(
|
|||||||
mockDomainObject.calls
|
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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
Loading…
x
Reference in New Issue
Block a user