ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 09:52:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #240 from nasa/open233b

Browse Source 
[Inspector] Introduce inspector pane
This commit is contained in:
Victor Woeltjen 2015-11-04 11:24:27 -08:00
commit 15f9bc083c
47 changed files with 3902 additions and 1801 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,10 +31,10 @@
]
},
{
"key": "BrowseTreeController",
"implementation": "BrowseTreeController.js",
"key": "PaneController",
"implementation": "PaneController.js",
"priority": "preferred",
"depends": [ "$scope", "agentService" ]
"depends": [ "$scope", "agentService","$window" ]
},
{
"key": "BrowseObjectController",

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

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

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

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

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

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class='object-header object-header-mobile'>
<div class='object-header'>
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
<!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
<span class="l-elem-wrapper l-flex">

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -121,6 +121,11 @@
"implementation": "controllers/SelectorController.js",
"depends": [ "objectService", "$scope" ]
},
{
"key": "ObjectInspectorController",
"implementation": "controllers/ObjectInspectorController.js",
"depends": [ "$scope", "objectService" ]
},
{
"key": "BannerController",
"implementation": "controllers/BannerController.js",
@ -250,6 +255,10 @@
"key": "switcher",
"templateUrl": "templates/controls/switcher.html",
"uses": [ "view" ]
},
{
"key": "object-inspector",
"templateUrl": "templates/object-inspector.html"
}
],
"controls": [

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

@ -1,19 +1,59 @@
{
"metadata": {
"name": "WTD Symbols v2.3",
"lastOpened": 1444267493342,
"created": 1444266013303
"name": "WTD Symbols",
"lastOpened": 1446490786311,
"created": 1446489891263
},
"iconSets": [
{
"selection": [
{
"order": 113,
"id": 92,
"prevSize": 32,
"code": 58901,
"name": "icon-crosshair",
"tempChar": ""
},
{
"order": 110,
"id": 91,
"prevSize": 32,
"code": 58899,
"name": "icon-collapse-pane-left",
"tempChar": ""
},
{
"order": 111,
"id": 90,
"prevSize": 32,
"code": 58900,
"name": "icon-collapse-pane-right",
"tempChar": ""
},
{
"order": 109,
"id": 89,
"prevSize": 32,
"code": 58898,
"name": "icon-save",
"tempChar": ""
},
{
"order": 108,
"id": 88,
"prevSize": 32,
"code": 58897,
"name": "icon-dataset",
"tempChar": ""
},
{
"order": 90,
"id": 87,
"prevSize": 32,
"code": 58896,
"name": "icon-bell",
"tempChar": ""
"tempChar": ""
},
{
"order": 91,
@ -21,7 +61,7 @@
"prevSize": 32,
"code": 58889,
"name": "icon-hourglass",
"tempChar": ""
"tempChar": ""
},
{
"order": 92,
@ -34,7 +74,7 @@
58890
],
"name": "icon-info-v15",
"tempChar": ""
"tempChar": ""
},
{
"order": 93,
@ -42,7 +82,7 @@
"prevSize": 32,
"code": 58887,
"name": "icon-x-in-circle",
"tempChar": ""
"tempChar": ""
},
{
"order": 94,
@ -50,7 +90,7 @@
"prevSize": 32,
"code": 58881,
"name": "icon-datatable",
"tempChar": ""
"tempChar": ""
},
{
"order": 95,
@ -58,7 +98,7 @@
"prevSize": 32,
"code": 58882,
"name": "icon-tabular-scrolling",
"tempChar": ""
"tempChar": ""
},
{
"order": 96,
@ -66,7 +106,7 @@
"prevSize": 32,
"code": 58884,
"name": "icon-tabular",
"tempChar": ""
"tempChar": ""
},
{
"order": 97,
@ -74,7 +114,7 @@
"prevSize": 32,
"code": 58885,
"name": "icon-calendar",
"tempChar": ""
"tempChar": ""
},
{
"order": 98,
@ -82,7 +122,7 @@
"prevSize": 32,
"code": 58886,
"name": "icon-paint-bucket",
"tempChar": ""
"tempChar": ""
},
{
"order": 99,
@ -90,7 +130,7 @@
"prevSize": 32,
"code": 123,
"name": "icon-pointer-left",
"tempChar": ""
"tempChar": ""
},
{
"order": 100,
@ -98,7 +138,7 @@
"prevSize": 32,
"code": 125,
"name": "icon-pointer-right",
"tempChar": ""
"tempChar": ""
},
{
"order": 101,
@ -106,7 +146,7 @@
"prevSize": 32,
"code": 80,
"name": "icon-person",
"tempChar": ""
"tempChar": ""
},
{
"order": 102,
@ -114,7 +154,7 @@
"prevSize": 32,
"code": 232,
"name": "icon-chain-links",
"tempChar": ""
"tempChar": ""
},
{
"order": 103,
@ -122,7 +162,7 @@
"prevSize": 32,
"code": 115,
"name": "icon-database-in-brackets",
"tempChar": ""
"tempChar": ""
},
{
"order": 104,
@ -130,7 +170,7 @@
"prevSize": 32,
"code": 114,
"name": "icon-refresh",
"tempChar": ""
"tempChar": ""
},
{
"order": 105,
@ -138,7 +178,7 @@
"prevSize": 32,
"code": 108,
"name": "icon-lock",
"tempChar": ""
"tempChar": ""
},
{
"order": 106,
@ -146,7 +186,7 @@
"prevSize": 32,
"code": 51,
"name": "icon-box-with-dashed-lines",
"tempChar": ""
"tempChar": ""
},
{
"order": 10,
@ -154,7 +194,7 @@
"prevSize": 32,
"code": 58880,
"name": "icon-box-with-arrow-cursor",
"tempChar": ""
"tempChar": ""
},
{
"order": 11,
@ -162,7 +202,7 @@
"prevSize": 32,
"code": 65,
"name": "icon-activity-mode",
"tempChar": ""
"tempChar": ""
},
{
"order": 12,
@ -170,7 +210,7 @@
"prevSize": 32,
"code": 97,
"name": "icon-activity",
"tempChar": ""
"tempChar": ""
},
{
"order": 87,
@ -178,7 +218,7 @@
"prevSize": 32,
"code": 33,
"name": "icon-alert-rect",
"tempChar": ""
"tempChar": ""
},
{
"order": 14,
@ -186,7 +226,7 @@
"prevSize": 32,
"code": 58883,
"name": "icon-alert-triangle",
"tempChar": ""
"tempChar": ""
},
{
"order": 15,
@ -194,7 +234,7 @@
"prevSize": 32,
"code": 238,
"name": "icon-arrow-double-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 16,
@ -202,7 +242,7 @@
"prevSize": 32,
"code": 235,
"name": "icon-arrow-double-up",
"tempChar": ""
"tempChar": ""
},
{
"order": 2,
@ -210,7 +250,7 @@
"prevSize": 32,
"code": 118,
"name": "icon-arrow-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 19,
@ -218,7 +258,7 @@
"prevSize": 32,
"code": 60,
"name": "icon-arrow-left",
"tempChar": ""
"tempChar": ""
},
{
"order": 20,
@ -226,7 +266,7 @@
"prevSize": 32,
"code": 62,
"name": "icon-arrow-right",
"tempChar": ""
"tempChar": ""
},
{
"order": 21,
@ -234,7 +274,7 @@
"prevSize": 32,
"code": 236,
"name": "icon-arrow-tall-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 22,
@ -242,7 +282,7 @@
"prevSize": 32,
"code": 237,
"name": "icon-arrow-tall-up",
"tempChar": ""
"tempChar": ""
},
{
"order": 23,
@ -250,7 +290,7 @@
"prevSize": 32,
"code": 94,
"name": "icon-arrow-up",
"tempChar": ""
"tempChar": ""
},
{
"order": 24,
@ -258,7 +298,7 @@
"prevSize": 32,
"code": 73,
"name": "icon-arrows-out",
"tempChar": ""
"tempChar": ""
},
{
"order": 25,
@ -266,7 +306,7 @@
"prevSize": 32,
"code": 58893,
"name": "icon-arrows-right-left",
"tempChar": ""
"tempChar": ""
},
{
"order": 33,
@ -274,7 +314,7 @@
"prevSize": 32,
"code": 53,
"name": "icon-arrows-up-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 26,
@ -282,7 +322,7 @@
"prevSize": 32,
"code": 42,
"name": "icon-asterisk",
"tempChar": ""
"tempChar": ""
},
{
"order": 27,
@ -290,7 +330,7 @@
"prevSize": 32,
"code": 72,
"name": "icon-autoflow-tabular",
"tempChar": ""
"tempChar": ""
},
{
"order": 28,
@ -298,7 +338,7 @@
"prevSize": 32,
"code": 224,
"name": "icon-box",
"tempChar": ""
"tempChar": ""
},
{
"order": 29,
@ -306,7 +346,7 @@
"prevSize": 32,
"code": 50,
"name": "icon-check",
"tempChar": ""
"tempChar": ""
},
{
"order": 30,
@ -314,7 +354,7 @@
"prevSize": 32,
"code": 67,
"name": "icon-clock",
"tempChar": ""
"tempChar": ""
},
{
"order": 31,
@ -322,7 +362,7 @@
"prevSize": 32,
"code": 46,
"name": "icon-connectivity",
"tempChar": ""
"tempChar": ""
},
{
"order": 32,
@ -330,7 +370,7 @@
"prevSize": 32,
"code": 100,
"name": "icon-database-query",
"tempChar": ""
"tempChar": ""
},
{
"order": 17,
@ -338,7 +378,7 @@
"prevSize": 32,
"code": 68,
"name": "icon-database",
"tempChar": ""
"tempChar": ""
},
{
"order": 35,
@ -346,7 +386,7 @@
"prevSize": 32,
"code": 81,
"name": "icon-dictionary",
"tempChar": ""
"tempChar": ""
},
{
"order": 36,
@ -354,7 +394,7 @@
"prevSize": 32,
"code": 242,
"name": "icon-duplicate",
"tempChar": ""
"tempChar": ""
},
{
"order": 37,
@ -362,7 +402,7 @@
"prevSize": 32,
"code": 102,
"name": "icon-folder-new",
"tempChar": ""
"tempChar": ""
},
{
"order": 38,
@ -370,7 +410,7 @@
"prevSize": 32,
"code": 70,
"name": "icon-folder",
"tempChar": ""
"tempChar": ""
},
{
"order": 39,
@ -378,7 +418,7 @@
"prevSize": 32,
"code": 95,
"name": "icon-fullscreen-collapse",
"tempChar": ""
"tempChar": ""
},
{
"order": 40,
@ -386,7 +426,7 @@
"prevSize": 32,
"code": 122,
"name": "icon-fullscreen-expand",
"tempChar": ""
"tempChar": ""
},
{
"order": 41,
@ -394,7 +434,7 @@
"prevSize": 32,
"code": 71,
"name": "icon-gear",
"tempChar": ""
"tempChar": ""
},
{
"order": 49,
@ -402,7 +442,7 @@
"prevSize": 32,
"code": 227,
"name": "icon-image",
"tempChar": ""
"tempChar": ""
},
{
"order": 42,
@ -410,7 +450,7 @@
"prevSize": 32,
"code": 225,
"name": "icon-layers",
"tempChar": ""
"tempChar": ""
},
{
"order": 43,
@ -418,7 +458,7 @@
"prevSize": 32,
"code": 76,
"name": "icon-layout",
"tempChar": ""
"tempChar": ""
},
{
"order": 44,
@ -426,7 +466,7 @@
"prevSize": 32,
"code": 226,
"name": "icon-line-horz",
"tempChar": ""
"tempChar": ""
},
{
"order": 75,
@ -434,7 +474,7 @@
"prevSize": 32,
"code": 244,
"name": "icon-link",
"tempChar": ""
"tempChar": ""
},
{
"order": 46,
@ -442,7 +482,7 @@
"prevSize": 32,
"code": 88,
"name": "icon-magnify-in",
"tempChar": ""
"tempChar": ""
},
{
"order": 47,
@ -450,7 +490,7 @@
"prevSize": 32,
"code": 89,
"name": "icon-magnify-out",
"tempChar": ""
"tempChar": ""
},
{
"order": 48,
@ -458,7 +498,7 @@
"prevSize": 32,
"code": 77,
"name": "icon-magnify",
"tempChar": ""
"tempChar": ""
},
{
"order": 34,
@ -466,7 +506,7 @@
"prevSize": 32,
"code": 109,
"name": "icon-menu",
"tempChar": ""
"tempChar": ""
},
{
"order": 50,
@ -474,7 +514,7 @@
"prevSize": 32,
"code": 243,
"name": "icon-move",
"tempChar": ""
"tempChar": ""
},
{
"order": 51,
@ -482,7 +522,7 @@
"prevSize": 32,
"code": 121,
"name": "icon-new-window",
"tempChar": ""
"tempChar": ""
},
{
"order": 52,
@ -490,7 +530,7 @@
"prevSize": 32,
"code": 111,
"name": "icon-object",
"tempChar": ""
"tempChar": ""
},
{
"order": 73,
@ -498,7 +538,7 @@
"prevSize": 32,
"code": 63,
"name": "icon-object-unknown",
"tempChar": ""
"tempChar": ""
},
{
"order": 53,
@ -506,7 +546,7 @@
"prevSize": 32,
"code": 86,
"name": "icon-packet",
"tempChar": ""
"tempChar": ""
},
{
"order": 54,
@ -514,7 +554,7 @@
"prevSize": 32,
"code": 234,
"name": "icon-page",
"tempChar": ""
"tempChar": ""
},
{
"order": 55,
@ -522,7 +562,7 @@
"prevSize": 32,
"code": 241,
"name": "icon-pause",
"tempChar": ""
"tempChar": ""
},
{
"order": 56,
@ -530,7 +570,7 @@
"prevSize": 32,
"code": 112,
"name": "icon-pencil",
"tempChar": ""
"tempChar": ""
},
{
"order": 65,
@ -538,7 +578,7 @@
"prevSize": 32,
"code": 79,
"name": "icon-people",
"tempChar": ""
"tempChar": ""
},
{
"order": 57,
@ -546,7 +586,7 @@
"prevSize": 32,
"code": 239,
"name": "icon-play",
"tempChar": ""
"tempChar": ""
},
{
"order": 58,
@ -554,7 +594,7 @@
"prevSize": 32,
"code": 233,
"name": "icon-plot-resource",
"tempChar": ""
"tempChar": ""
},
{
"order": 59,
@ -562,7 +602,7 @@
"prevSize": 32,
"code": 43,
"name": "icon-plus",
"tempChar": ""
"tempChar": ""
},
{
"order": 60,
@ -570,7 +610,7 @@
"prevSize": 32,
"code": 45,
"name": "icon-minus",
"tempChar": ""
"tempChar": ""
},
{
"order": 61,
@ -578,7 +618,7 @@
"prevSize": 32,
"code": 54,
"name": "icon-sine",
"tempChar": ""
"tempChar": ""
},
{
"order": 62,
@ -586,7 +626,7 @@
"prevSize": 32,
"code": 228,
"name": "icon-T",
"tempChar": ""
"tempChar": ""
},
{
"order": 63,
@ -594,7 +634,7 @@
"prevSize": 32,
"code": 116,
"name": "icon-telemetry-panel",
"tempChar": ""
"tempChar": ""
},
{
"order": 64,
@ -602,7 +642,7 @@
"prevSize": 32,
"code": 84,
"name": "icon-telemetry",
"tempChar": ""
"tempChar": ""
},
{
"order": 18,
@ -610,7 +650,7 @@
"prevSize": 32,
"code": 246,
"name": "icon-thumbs-strip",
"tempChar": ""
"tempChar": ""
},
{
"order": 67,
@ -618,7 +658,7 @@
"prevSize": 32,
"code": 83,
"name": "icon-timeline",
"tempChar": ""
"tempChar": ""
},
{
"order": 68,
@ -626,7 +666,7 @@
"prevSize": 32,
"code": 245,
"name": "icon-timer",
"tempChar": ""
"tempChar": ""
},
{
"order": 69,
@ -634,7 +674,7 @@
"prevSize": 32,
"code": 90,
"name": "icon-trash",
"tempChar": ""
"tempChar": ""
},
{
"order": 70,
@ -642,7 +682,7 @@
"prevSize": 32,
"code": 229,
"name": "icon-two-parts-both",
"tempChar": ""
"tempChar": ""
},
{
"order": 71,
@ -650,7 +690,7 @@
"prevSize": 32,
"code": 231,
"name": "icon-two-parts-one-only",
"tempChar": ""
"tempChar": ""
},
{
"order": 72,
@ -658,7 +698,7 @@
"prevSize": 32,
"code": 120,
"name": "icon-x-heavy",
"tempChar": ""
"tempChar": ""
},
{
"order": 66,
@ -666,7 +706,7 @@
"prevSize": 32,
"code": 58946,
"name": "icon-x",
"tempChar": ""
"tempChar": ""
}
],
"id": 2,
@ -681,6 +721,121 @@
"height": 1024,
"prevSize": 32,
"icons": [
{
"id": 92,
"paths": [
"M514 2c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM860.2 450h-282.2v-282.2c69.6 12.8 133.8 46.2 185 97.4 51 51 84.4 115.2 97.2 184.8zM450 167.8v282.2h-282.2c12.8-69.6 46.2-133.8 97.4-185 51-51 115.2-84.4 184.8-97.2zM167.8 578h282.2v282.2c-69.6-12.8-133.8-46.2-185-97.4-51-51-84.4-115.2-97.2-184.8zM578 860.2v-282.2h282.2c-12.8 69.6-46.2 133.8-97.4 185-51 51-115.2 84.4-184.8 97.2z"
],
"attrs": [
{
"fill": "rgb(0, 0, 0)"
}
],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-crosshair"
],
"colorPermutations": {
"125525525516161751": [
0
]
}
},
{
"id": 91,
"paths": [
"M256 0h-256v1024h256c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192z",
"M512 320l512 320v-640z"
],
"attrs": [
{
"fill": "rgb(0, 0, 0)"
},
{
"fill": "rgb(0, 0, 0)"
}
],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-collapse-pane-left"
],
"colorPermutations": {
"125525525516161751": [
0,
0
]
}
},
{
"id": 90,
"paths": [
"M768 0h256v1024h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192z",
"M512 320l-512 320v-640z"
],
"attrs": [
{
"fill": "rgb(0, 0, 0)"
},
{
"fill": "rgb(0, 0, 0)"
}
],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-collapse-pane-right"
],
"colorPermutations": {
"125525525516161751": [
0,
0
]
}
},
{
"id": 89,
"paths": [
"M192.2 576c-0.2 0-0.2 0 0 0l-0.2 448h640v-447.8c0 0 0 0-0.2-0.2h-639.6z",
"M978.8 210.8l-165.4-165.4c-25-25-74.2-45.4-109.4-45.4h-576c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128v-448c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64v448c70.4 0 128-57.6 128-128v-576c0-35.2-20.4-84.4-45.2-109.2zM704 256c0 35.2-28.8 64-64 64h-448c-35.2 0-64-28.8-64-64v-192h320v192h128v-192h128v192z"
],
"attrs": [
{
"fill": "rgb(0, 0, 0)"
},
{
"fill": "rgb(0, 0, 0)"
}
],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-save-v2"
],
"colorPermutations": {
"125525525516161751": [
0,
0
]
}
},
{
"id": 88,
"paths": [
"M896 192h-320c-16.4-16.4-96.8-96.8-109.2-109.2l-37.4-37.4c-25-25-74.2-45.4-109.4-45.4h-256c-35.2 0-64 28.8-64 64v384c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v-128c0-70.4-57.6-128-128-128z",
"M896 448h-768c-70.4 0-128 57.6-128 128v320c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-320c0-70.4-57.6-128-128-128zM320 896h-128v-320h128v320zM576 896h-128v-320h128v320zM832 896h-128v-320h128v320z"
],
"attrs": [],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-dataset"
],
"colorPermutations": {
"125525525516161751": []
}
},
{
"id": 87,
"paths": [

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

Binary file not shown.

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

@ -88,5 +88,10 @@
<glyph unicode="&#xe609;" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
<glyph unicode="&#xe610;" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
<glyph unicode="&#xe611;" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
<glyph unicode="&#xe612;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
<glyph unicode="&#xe613;" glyph-name="icon-collapse-pane-left" d="M256 960h-256v-1024h256c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 640l512-320v640z" />
<glyph unicode="&#xe614;" glyph-name="icon-collapse-pane-right" d="M768 960h256v-1024h-256c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192zM512 640l-512-320v640z" />
<glyph unicode="&#xe615;" glyph-name="icon-crosshair" d="M514 958c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM860.2 510h-282.2v282.2c69.6-12.8 133.8-46.2 185-97.4 51-51 84.4-115.2 97.2-184.8zM450 792.2v-282.2h-282.2c12.8 69.6 46.2 133.8 97.4 185 51 51 115.2 84.4 184.8 97.2zM167.8 382h282.2v-282.2c-69.6 12.8-133.8 46.2-185 97.4-51 51-84.4 115.2-97.2 184.8zM578 99.8v282.2h282.2c-12.8-69.6-46.2-133.8-97.4-185-51-51-115.2-84.4-184.8-97.2z" />
<glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 29 KiB

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

Binary file not shown.

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

Binary file not shown.

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

@ -42,7 +42,11 @@ $ueFooterH: 25px;
$ueColMargin: 1.5%;
$ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueBrowseLeftPaneTreeW: 25%;
$ueBrowseRightPaneInspectW: 20%;
$ueCollapsedPaneEdgeM: 20px;
$uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabW: 9px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);
@ -57,7 +61,8 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
// Tabular

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

@ -34,10 +34,6 @@
font-style: normal;
}
.ui-symbol {
font-family: 'symbolsfont';
}
/************************** HTML ENTITIES */
a {
color: $colorA;
@ -55,7 +51,7 @@ body, html {
color: $colorBodyFg;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
//font-weight: 500;
font-weight: 200;
height: 100%;
width: 100%;
overflow: hidden;

36
platform/commonUI/general/res/sass/_hide-non-functional.scss
View File

@ -1,36 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
// Styles to temporarily hide non-functional elements
/******************************** BROWSE */
.browse-mode {
.browse {
&.top-bar {
display: none;
}
}
.browse-area.holder {
// When .browse.top-bar is hidden, set the top of the browse-area holder
top: $bodyMargin;
}
}

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

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

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

@ -0,0 +1,107 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* Styles for the Inspector pane */
.l-inspect,
.l-inspect table tr td {
font-size: 0.7rem;
}
.l-inspect {
@extend .abs;
background: $colorInspectorBg;
color: $colorInspectorFg;
line-height: 140%;
.pane-header {
color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem;
&:before {
color: pushBack($colorInspectorFg, 10%);
content:'\e615'; // e615 Crosshair symbol
display: inline;
font-family: symbolsfont;
margin-right: $interiorMargin;
vertical-align: bottom;
}
}
ul li,
em {
display: block;
position: relative;
}
ul li {
margin-bottom: $interiorMarginLg;
}
em {
@include border-radius($basicCr);
background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg;
margin-bottom: $interiorMargin;
padding: $formTBPad $formLRPad;
text-transform: uppercase;
}
.inspector-properties {
&:not(.first) {
border-top: 1px solid $colorInspectorSectionHeaderBg;
}
padding: $interiorMarginSm 0;
.label {
color: $colorInspectorPropName;
text-transform: uppercase;
}
.value {
color: $colorInspectorPropVal;
word-break: break-all;
}
}
.inspector-location {
//line-height: 180%;
.location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px;
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.icon {
color: $colorItemTreeIconHover;
}
}
}
&:not(.last) .t-object-label .t-title-label:after {
color: pushBack($colorInspectorFg, 15%);
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
line-height: inherit;
margin-left: $interiorMarginSm;
width: 4px;
}
}
}

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

@ -29,7 +29,7 @@
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
@import "properties";
@import "inspector";
/********************************* CONTROLS */
@import "controls/breadcrumb";
@ -69,7 +69,6 @@
@import "lists/tabular";
@import "plots/plots-main";
@import "iframe";
@import "hide-non-functional";
@import "views";
@import "items/item";
@import "mobile/item";

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

@ -41,36 +41,41 @@
width: $d;
}
@mixin trans-prop-nice($props, $t: 500ms) {
@if $t == 0 {
@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
// Multiple $props must be in parans like this: (left, right)
@if $dur == 0 {
@include transition-property(none);
} @else {
@include transition-property($props);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@if $t == 0 {
@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
@if $dur == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-duration($t);
@include transition-property(opacity, background-color, border-color, color);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
@include transition-property(height, bottom, top);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin trans-prop-nice-resize-w($t: 0.5s) {
@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin triangle-right($size, $color) {
@ -173,31 +178,28 @@
}
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
&:before {
@include trans-prop-nice("border-color", 0.75s);
content: '';
display: block;
height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
//&:before {
//@include trans-prop-nice("border-color", 25ms);
content: '';
display: block;
//height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
@if $direction == "horizontal" {
border-top: $w $style darken($b, 15%);
top: 2px;
left: 5px;
right: 5px;
@if $direction == "horizontal" {
border-top: $w $style darken($b, 15%);
top: 2px;
left: 5px;
right: 5px;
height: 1px;
} @else if $direction == "vertical" {
border-left: $w $style darken($b, 15%);
left: 2px;
bottom: 5px;
top: 5px;
}
}
&:not(.disabled):hover:before {
@include trans-prop-nice("border-color", 25ms);
border-color: $colorGrippyInteriorHover;
} @else if $direction == "vertical" {
border-left: $w $style darken($b, 15%);
left: 2px;
bottom: 5px;
top: 5px;
width: 1px;
}
}
@ -273,6 +275,12 @@
@return percentage($d);
}
@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
// Space to either side of the handle
@return ($splitterD - $splitterHandleD) * 0.5;
}
/*********************************************** CONTROLS, FORM ELEMENTS */
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
@ -364,10 +372,7 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative;
top: 50%;
@include webkitProp(transform, translateY(-50%));
//-webkit-transform: translateY(-50%);
//-ms-transform: translateY(-50%);
//transform: translateY(-50%);
@include transform(translateY(-50%));
}
@mixin verticalCenterBlock($holderH, $itemH) {

35
platform/commonUI/general/res/sass/_properties.scss
View File

@ -1,35 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* Classes to be used for lists of properties and values */
.properties {
.s-row {
border-top: 1px solid $colorInteriorBorder;
font-size: 0.8em;
&:first-child {
border: none;
}
.s-value {
color: #fff;
}
}
}

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

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

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

@ -221,7 +221,7 @@ label.checkbox.custom {
.l-elem-wrapper {
//@include test(#66f, 0.2);
@include webkitProp(justify-content, flex-start);
@include justify-content(flex-start);
mct-representation {
// Holds the context-available item
// Must have min-width to make flex work properly
@ -360,8 +360,6 @@ label.checkbox.custom {
left: 0;
}
.knob {
//@include btnSubtle();
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorKnob;
&:hover {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -29,13 +29,13 @@
}
}
.holder-all {
/*.holder-all {
$myM: 0; // $interiorMarginSm;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
}
}*/
.browse-area,
.edit-area,
@ -43,9 +43,9 @@
position: absolute;
}
//.editor {
// @include border-radius($basicCr * 1.5);
//}
.editor {
@include border-radius($basicCr * 1.5);
}
.contents {
$myM: 0; //$interiorMargin;
@ -96,12 +96,8 @@
.user-environ {
.browse-area,
.edit-area,
.editor {
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
right: $bodyMargin;
bottom: $ueFooterH + $bodyMargin;
left: $bodyMargin;
top: 0; left: 0; right: 0; bottom: $ueFooterH;
}
.browse-area,
@ -115,13 +111,17 @@
.edit-area {
$tbH: $btnToolbarH + $interiorMargin;
top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
left: $bodyMargin;
right: $bodyMargin;
bottom: $bodyMargin + $ueFooterH;
.tool-bar {
bottom: auto;
height: $tbH;
line-height: $btnToolbarH;
}
.work-area {
.object-holder.work-area {
top: $tbH + $interiorMargin * 2;
overflow: auto;
}
}
@ -221,10 +221,19 @@
.browse-mode {
.split-layout {
.split-pane-component.pane.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneW;
.split-pane-component.pane {
//@include test(green);
&.treeview.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneTreeW;
}
&.t-inspect.right {
min-width: 200px;
max-width: 600px;
//padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
width: $ueBrowseRightPaneInspectW;
}
}
}
}
@ -242,16 +251,33 @@
}
.pane {
@include box-sizing(border-box);
position: absolute;
.pane-header {
text-transform: uppercase;
height: $ueTopBarH;
line-height: $ueTopBarH;
margin-bottom: $interiorMargin;
}
.primary-pane {
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
z-index: 2;
}
&.treeview.left {
.create-btn-holder {
bottom: auto;
top: 0;
height: $ueTopBarH;
.wrapper.menu-element {
position: absolute;
bottom: $interiorMargin;
}
//.create-btn-holder {
// //bottom: auto;
// //top: 0;
// height: $ueTopBarH;
// .wrapper.menu-element {
// position: absolute;
// bottom: $interiorMargin;
// }
//}
.holder-create-and-search{
}
.search-holder {
top: $ueTopBarH + $interiorMarginLg;
@ -261,6 +287,54 @@
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
}
}
.mini-tab-icon.toggle-pane {
//@include test(blue, 0.3);
z-index: 5;
@include desktop {
$d: $uePaneMiniTabH;
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
top: $bodyMargin;
height: $d;
line-height: $d;
&:after {
// Always the icon that shows when the pane is collapsed
opacity: 0;
}
&.collapsed {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
&.toggle-tree.anchor-left {
left: 0;
@include transform(translateX(-1 * $paneExpandedOffset));
&:after {
content: '\6d'; // Menu 'hamburger' icon
}
&.collapsed {
left: 0;
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
}
&:not(.collapsed):before {
@include trans-prop-nice(opacity, 200ms, 200ms);
}
}
&.toggle-inspect.anchor-right {
right: $bodyMargin;
&:after {
content: '\e615'; // e615: Crosshair icon; was e608: Info "i" icon
}
&.collapsed {
right: $interiorMargin;
}
}
}
}
&.items {
.object-browse-bar {
.left.abs,
@ -282,23 +356,44 @@
}
}
}
&.vertical {
/* &.vertical {
// Slides left and right
> .pane {
// @include test();
margin-left: $interiorMargin;
> .pane.left {
> .holder {
left: 0;
right: 0;
}
&:first-child {
margin-left: 0;
.holder {
right: $interiorMarginSm;
}
left: $bodyMargin;
}
}
> .pane.right {
> .holder {
right: $bodyMargin;
}
}
}*/
// Specific elements margins
.holder.holder-create-and-search {
top: $bodyMargin;
right: 0;
bottom: $bodyMargin;
left: $bodyMargin;
}
.holder.holder-object-and-inspector {
top: 0;
right: 0;
bottom: 0;
left: 0;
.holder-object {
top: $bodyMargin;
bottom: $bodyMargin;
}
.holder-inspector-elements {
top: $bodyMargin;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
}
}
}
@ -360,3 +455,83 @@
padding-right: $interiorMarginLg;
}
}
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.pane-tree-hidden {
// Sets the left tree menu when the tree is hidden.
//.pane.left.treeview,
.tree-holder,
.splitter-treeview,
.holder-create-and-search {
opacity: 0;
}
/*.holder-create-and-search {
@include trans-prop-nice((top, left), 250ms);
top: $ueTopBarH + $interiorMargin;
left: -1 * $bodyMargin !important;
.create-btn {
@include border-left-radius(0);
@include trans-prop-nice((width), 250ms);
width: $uePaneMiniTabW !important;
text-align: center !important;
padding: 0;
.title-label,
&:after {
display: none;
}
&:before {
font-size: 9px;
}
}
}*/
}
.pane-tree-showing {
// Sets the left tree menu when the tree is shown.
//.pane.left.treeview,
.tree-holder,
.splitter-treeview {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
.holder-create-and-search {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
}
}
.pane-inspect-showing {
.l-object-and-inspector {
.l-inspect,
.splitter-inspect {
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
}
}
.pane-inspect-hidden {
.l-object-and-inspector {
.l-inspect,
.splitter-inspect {
opacity: 0;
}
}
}
@include desktop {
.pane.treeview.left .tree-holder {
padding-right: $interiorMargin;
}
.pane-tree-hidden {
.pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
}
.pane-inspect-hidden .l-object-and-inspector {
.pane.left { right: $ueCollapsedPaneEdgeM !important; }
}
.pane:not(.resizing) {
@include trans-prop-nice-resize-w(250ms);
}
}

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

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

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

@ -0,0 +1,63 @@
<!--
Open MCT Web, Copyright (c) 2014-2015, United States Government
as represented by the Administrator of the National Aeronautics and Space
Administration. All rights reserved.
Open MCT Web is licensed under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0.
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
Open MCT Web includes source code licensed under additional open source
licenses. See the Open Source Licenses file (LICENSES.md) included with
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="abs holder holder-inspector-elements">
<div class="pane-header">Inspection</div>
<ul>
<li>
<em>Properties</em>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div>
</span>

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

@ -0,0 +1,117 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*global define,Promise*/
/**
* Module defining ObjectInspectorController. Created by shale on 08/21/2015.
*/
define(
[],
function () {
"use strict";
/**
* The ObjectInspectorController gets and formats the data for
* the inspector display
*
* @constructor
*/
function ObjectInspectorController($scope, objectService) {
$scope.primaryParents = [];
$scope.contextutalParents = [];
//$scope.isLink = false;
// Gets an array of the contextual parents/anscestors of the selected object
function getContextualPath() {
var currentObj = $scope.ngModel.selectedObject,
currentParent,
parents = [];
currentParent = currentObj &&
currentObj.hasCapability('context') &&
currentObj.getCapability('context').getParent();
while (currentParent && currentParent.getModel().type !== 'root' &&
currentParent.hasCapability('context')) {
// Record this object
parents.unshift(currentParent);
// Get the next one up the tree
currentObj = currentParent;
currentParent = currentObj.getCapability('context').getParent();
}
$scope.contextutalParents = parents;
}
// Gets an array of the parents/anscestors of the selected object's
// primary location (locational of original non-link)
function getPrimaryPath(current) {
var location;
// If this the the initial call of this recursive function
if (!current) {
current = $scope.ngModel.selectedObject;
$scope.primaryParents = [];
}
location = current.getModel().location;
if (location && location !== 'root') {
objectService.getObjects([location]).then(function (obj) {
var next = obj[location];
$scope.primaryParents.unshift(next);
getPrimaryPath(next);
});
}
}
// Gets the metadata for the selected object
function getMetadata() {
$scope.metadata = $scope.ngModel.selectedObject &&
$scope.ngModel.selectedObject.hasCapability('metadata') &&
$scope.ngModel.selectedObject.useCapability('metadata');
}
// Set scope variables when the selected object changes
$scope.$watch('ngModel.selectedObject', function () {
$scope.isLink = $scope.ngModel.selectedObject &&
$scope.ngModel.selectedObject.hasCapability('location') &&
$scope.ngModel.selectedObject.getCapability('location').isLink();
if ($scope.isLink) {
getPrimaryPath();
getContextualPath();
} else {
$scope.primaryParents = [];
getContextualPath();
}
getMetadata();
});
}
return ObjectInspectorController;
}
);

11
platform/commonUI/general/src/directives/MCTSplitPane.js
View File

@ -132,10 +132,10 @@ define(
// Get actual size (to obey min-width etc.)
firstSize = getSize(first[0]);
first.css(anchor.dimension, firstSize + 'px');
splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
splitter.css(anchor.edge, firstSize + 'px');
splitter.css(anchor.opposite, "auto");
last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px');
last.css(anchor.edge, (firstSize + splitterSize) + 'px');
last.css(anchor.opposite, "0px");
position = firstSize + splitterSize;
@ -178,6 +178,12 @@ define(
return position;
}
// Dynamically apply a CSS class to elements when the user
// is actively resizing
function toggleClass(classToToggle) {
$element.children().toggleClass(classToToggle);
}
// Make sure anchor parameter is something we know
if (!ANCHORS[anchorKey]) {
$log.warn(ANCHOR_WARNING_MESSAGE);
@ -208,6 +214,7 @@ define(
// Interface exposed by controller, for mct-splitter to user
return {
position: getSetPosition,
toggleClass: toggleClass,
anchor: function () {
return anchor;
}

9
platform/commonUI/general/src/directives/MCTSplitter.js
View File

@ -29,7 +29,8 @@ define(
// Pixel width to allocate for the splitter itself
var SPLITTER_TEMPLATE = "<div class='abs'" +
"mct-drag-down=\"splitter.startMove()\" " +
"mct-drag=\"splitter.move(delta)\"></div>",
"mct-drag=\"splitter.move(delta)\" " +
"mct-drag-up=\"splitter.endMove()\"></div>",
OFFSETS_BY_EDGE = {
left: "offsetLeft",
right: "offsetRight",
@ -53,6 +54,7 @@ define(
startMove: function () {
var splitter = element[0];
initialPosition = mctSplitPane.position();
mctSplitPane.toggleClass('resizing');
},
// Handle user changes to splitter position
move: function (delta) {
@ -63,6 +65,11 @@ define(
// Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta);
},
// Grab the event when the user is done moving
// the splitter and pass it on
endMove: function() {
mctSplitPane.toggleClass('resizing');
}
};
}

112
platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js Normal file
View File

@ -0,0 +1,112 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
/**
* Created by shale on 08/24/2015.
*/
define(
["../../src/controllers/ObjectInspectorController"],
function (ObjectInspectorController) {
"use strict";
describe("The object inspector controller ", function () {
var mockScope,
mockObjectService,
mockPromise,
mockDomainObject,
mockContextCapability,
mockLocationCapability,
controller;
beforeEach(function () {
mockScope = jasmine.createSpyObj(
"$scope",
[ "$watch" ]
);
mockScope.ngModel = {};
mockScope.ngModel.selectedObject = 'mock selected object';
mockObjectService = jasmine.createSpyObj(
"objectService",
[ "getObjects" ]
);
mockPromise = jasmine.createSpyObj(
"promise",
[ "then" ]
);
mockObjectService.getObjects.andReturn(mockPromise);
mockDomainObject = jasmine.createSpyObj(
"selectedObject",
[ "hasCapability", "getCapability", "useCapability", "getModel" ]
);
mockDomainObject.getModel.andReturn({location: 'somewhere'});
mockDomainObject.hasCapability.andReturn(true);
mockContextCapability = jasmine.createSpyObj(
"context capability",
[ "getParent" ]
);
mockLocationCapability = jasmine.createSpyObj(
"location capability",
[ "isLink" ]
);
mockDomainObject.getCapability.andCallFake(function (param) {
if (param === 'location') {
return mockLocationCapability;
} else if (param === 'context') {
return mockContextCapability;
}
});
controller = new ObjectInspectorController(mockScope, mockObjectService);
// Change the selected object to trigger the watch call
mockScope.ngModel.selectedObject = mockDomainObject;
});
it("watches for changes to the selected object", function () {
expect(mockScope.$watch).toHaveBeenCalledWith('ngModel.selectedObject', jasmine.any(Function));
});
it("looks for contextual parent objects", function () {
mockScope.$watch.mostRecentCall.args[1]();
expect(mockContextCapability.getParent).toHaveBeenCalled();
});
it("if link, looks for primary parent objects", function () {
mockLocationCapability.isLink.andReturn(true);
mockScope.$watch.mostRecentCall.args[1]();
expect(mockDomainObject.getModel).toHaveBeenCalled();
expect(mockObjectService.getObjects).toHaveBeenCalled();
mockPromise.then.mostRecentCall.args[0]({'somewhere': mockDomainObject});
});
it("gets metadata", function () {
mockScope.$watch.mostRecentCall.args[1]();
expect(mockDomainObject.useCapability).toHaveBeenCalledWith('metadata');
});
});
}
);

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

@ -6,6 +6,7 @@
"controllers/DateTimeFieldController",
"controllers/DateTimePickerController",
"controllers/GetterSetterController",
"controllers/ObjectInspectorController",
"controllers/SelectorController",
"controllers/SplitPaneController",
"controllers/TimeRangeController",

1938
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

File diff suppressed because it is too large Load Diff

29
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -37,12 +37,14 @@ $timeControllerToiLineColorHov: #fff;
// General Colors
$colorAlt1: #ffc700;
$colorAlert: #ff533a;
$colorAlert: #ff3c00;
$colorIconLink: #49dedb;
$colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
$colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
@ -55,10 +57,10 @@ $colorMenuIc: pullForward($colorKey, 17%);
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
$colorMenuHovFg: #fff;
$colorMenuHovIc: $colorMenuHovFg;
$colorCreateMenuLgIcon: $colorMenuFg;
$colorCreateMenuText: $colorMenuFg;
$shdwMenu: none;
$shdwMenuText: rgba(black, 0.1) 0 1px 2px;
$colorCreateMenuLgIcon: $colorMenuFg;
$colorCreateMenuText: $colorMenuFg;
// Form colors
$colorCheck: $colorKey;
@ -73,6 +75,14 @@ $colorInputFg: pullForward($colorBodyFg, 20%);
$colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%);
// Inspector
$colorInspectorBg: pullForward($colorBodyBg, 3%);
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 15%);
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusFg: #ccc;
$colorStatusDefault: #ccc;
@ -139,6 +149,8 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeFg: $colorBodyFg;
@ -157,12 +169,13 @@ $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
// Splitter
$splitterD: 25px; // splitterD and HandleD should both be odd, or even
$splitterHandleD: 1px;
$colorSplitterBg: pullForward($colorBodyBg, 5%);
$splitterShdw: rgba(black, 0.4) 0 0 3px;
$colorSplitterInterior: $colorBodyBg;
$colorSplitterHover: none;
$splitterW: 5px;
$splitterEndCr: 1px;
$colorGrippyInteriorHover: $colorKey;
$splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 15%);
$colorSplitterActive: $colorKey;
// Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%);

2
platform/commonUI/themes/espresso/res/sass/_mixins.scss
View File

@ -4,7 +4,7 @@
@include boxShdw($shdwBtns);
}
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg);
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
@include text-shadow($shdwItemText);

1884
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

File diff suppressed because it is too large Load Diff

21
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -89,6 +89,14 @@ $shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
$colorSelectBg: #ddd;
$colorSelectFg: $colorBodyFg;
// Inspector
$colorInspectorBg: pullForward($colorBodyBg, 5%);
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Limits and staleness colors//
$colorTelemFresh: pullForward($colorBodyFg, 20%);
$colorTelemStale: pushBack($colorBodyFg, 20%);
@ -124,6 +132,7 @@ $colorItemBgSelected: $colorKey;
// Tabular
$colorTabBorder: pullForward($colorBodyBg, 10%);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorTabBodyBg: $colorBodyBg;
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
@ -139,6 +148,7 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorKey;
@ -157,12 +167,13 @@ $scrollbarThumbColor: darken($colorBodyBg, 50%);//
$scrollbarThumbColorHov: $colorKey;
// Splitter
$splitterD: 24px;
$splitterHandleD: 2px;
$colorSplitterBg: pullForward($colorBodyBg, 10%);
$splitterShdw: none;
$colorSplitterInterior: $colorBodyBg;
$colorSplitterHover: $colorKey;
$splitterW: 5px;
$splitterEndCr: $splitterW;
$colorGrippyInteriorHover: $colorBodyBg;
$splitterEndCr: none;
$colorSplitterHover: none;
$colorSplitterActive: $colorKey;
// Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%);