alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Merge in latest from master into topic branch for
https://github.com/nasa/openmctweb/issues/116

Conflicts:
	platform/features/layout/test/FixedControllerSpec.js
	platform/features/plot/test/PlotControllerSpec.js
This commit is contained in:
Victor Woeltjen
2015-12-30 10:15:05 -08:00
parent 2358541d91 9b63a63efc
commit a49deb5ab1
41 changed files with 1779 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,7 +71,7 @@ $itemPadLR: 5px;
$treeVCW: 10px;
$treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px;
$treeTypeIconW: 20px;
$treeTypeIconW: 18px;
$treeContextTriggerW: 20px;
// Tabular
$tabularHeaderH: 22px; //18px

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

@@ -73,31 +73,34 @@
}
.l-icon-alert {
display: none !important; // Remove this when alerts are enabled
display: none !important;
&: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;
.t-item-icon-glyph {
position: absolute;
}
&.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;
.t-item-icon-glyph {
&: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;
}
}
}
}

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

@@ -84,12 +84,20 @@
}
.inspector-location {
//line-height: 180%;
.location-item {
$h: 1.2em;
@include box-sizing(border-box);
cursor: pointer;
display: inline-block;
line-height: $h;
position: relative;
padding: 2px 4px;
.t-object-label {
.t-item-icon {
height: $h;
width: 0.7rem;
}
}
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
@@ -104,6 +112,7 @@
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
font-style: normal !important;
line-height: inherit;
margin-left: $interiorMarginSm;
width: 4px;

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

@@ -60,6 +60,7 @@
@import "overlay/overlay";
@import "mobile/overlay/overlay";
@import "tree/tree";
@import "object-label";
@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";

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

@@ -300,7 +300,7 @@
@include desktop {
@if $bgHov != none {
&:not(.disabled):hover {
background: $bgHov;
@include background-image($bgHov);
>.icon {
color: lighten($ic, $ltGamma);
}

69
platform/commonUI/general/res/sass/_object-label.scss Normal file
View File

@@ -0,0 +1,69 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
// mct-representation surrounding an object-label key="'label'"
.rep-object-label {
@include flex-direction(row);
@include flex(1 1 auto);
height: inherit;
line-height: inherit;
min-width: 0;
}
.t-object-label {
.t-item-icon {
margin-right: $interiorMargin;
}
}
mct-representation {
&.s-status-pending {
.t-object-label {
.t-item-icon {
&:before {
$spinBW: 4px;
$spinD: 0;
@include spinner($spinBW);
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
padding: 30%;
width: $spinD;
height: $spinD;
}
.t-item-icon-glyph {
display: none;
}
}
.t-title-label {
font-style: italic;
opacity: 0.6;
}
}
}
}
.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
border-color: rgba($colorItemTreeSelectedFg, 0.25);
border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
}

55
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@@ -37,6 +37,8 @@
}
.status.block {
$transDelay: 1.5s;
$transSpeed: .25s;
color: $colorStatusDefault;
cursor: default;
display: inline-block;
@@ -44,13 +46,47 @@
.status-indicator,
.label,
.count {
//@include test(#00ff00);
display: inline-block;
vertical-align: top;
}
&.no-icon {
.status-indicator {
display: none;
}
}
&.float-right {
float: right;
}
&.subtle {
opacity: 0.5;
}
.status-indicator {
margin-right: $interiorMarginSm;
}
&:not(.no-collapse) {
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, $transSpeed, $transDelay);
overflow: hidden;
max-width: 0px;
}
&:hover {
.label {
@include trans-prop-nice(max-width, $transSpeed, 0s);
max-width: 450px;
width: auto;
}
.count {
@include trans-prop-nice(max-width, $transSpeed, 0s);
opacity: 0;
}
}
}
&.ok .status-indicator,
&.info .status-indicator {
color: $colorStatusInfo;
@@ -63,26 +99,11 @@
&.error .status-indicator {
color: $colorStatusError;
}
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, .25s);
overflow: hidden;
max-width: 0px;
}
.count {
@include trans-prop-nice(opacity, .25s);
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
font-weight: bold;
opacity: 1;
}
&:hover {
.label {
max-width: 450px;
width: auto;
}
.count {
opacity: 0;
}
}
}
/* Styles for messages and message banners */

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

@@ -24,21 +24,27 @@
100% { transform: rotate(359deg); }
}
@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
@mixin spinner($b: 5px) {
@include keyframes(rotateCentered) {
0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
}
0% { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); }
100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); }
}
@include animation-name(rotateCentered);
@include animation-duration(0.5s);
@include animation-iteration-count(infinite);
@include animation-timing-function(linear);
@include transform-origin(center);
border-style: solid;
border-width: $b;
@include border-radius(100%);
}
@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
@include spinner($b);
@include box-sizing(border-box);
border-color: rgba($c, 0.25);
border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: 5px;
@include border-radius(100%);
@include box-sizing(border-box);
display: block;
position: absolute;
height: 0; width: 0;

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

@@ -31,7 +31,7 @@ $tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */
$mobileTreeItemH: 35px;
$mobileTreeItemIndent: 20px;
$mobileTreeItemIndent: 15px;
$mobileTreeRightArrowW: 30px;
/************************** DEVICE WIDTHS */

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

@@ -30,25 +30,30 @@
}
.tree-item,
.search-result-item {
height: $mobileTreeItemH;
line-height: $mobileTreeItemH;
margin-bottom: 0px;
height: $mobileTreeItemH !important;
line-height: $mobileTreeItemH !important;
margin-bottom: 0px !important;
.view-control {
//@include test(red);
position: absolute;
font-size: 1.1em;
height: $mobileTreeItemH;
line-height: inherit;
right: 0px;
width: $mobileTreeRightArrowW;
text-align: center;
font-size: 1.2em;
margin-right: 0;
order: 2;
width: $mobileTreeItemH;
&.has-children {
&:before {
content: "\7d";
left: 50%;
@include transform(translateX(-50%) rotate(90deg));
}
&.expanded:before {
@include transform(translateX(-50%) rotate(270deg));
}
}
}
.label,
.t-object-label {
left: 0;
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
line-height: inherit;
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
bottom: 20%; // Shift up due to height of mobile menu items
}
}
}
}

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

@@ -1,5 +1,5 @@
@include phone {
.search {
.search-holder {
.search-bar {
// Hide menu-icon and adjust spacing when in phone mode
.menu-icon {

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

@@ -82,6 +82,7 @@
left: $interiorMarginSm;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
z-index: 1;
}
// Make icon lighten when hovering over search bar
@@ -127,7 +128,7 @@
}
.active-filter-display {
$s: 0.65em;
$s: 0.7em;
$p: $interiorMargin;
@include box-sizing(border-box);
line-height: 130%;
@@ -146,7 +147,6 @@
.search-results {
@include trans-prop-nice((opacity, visibility), 250ms);
margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
padding-right: $interiorMargin;
.hint {
margin-bottom: $interiorMarginLg;

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

@@ -35,23 +35,35 @@ ul.tree {
.tree-item,
.search-result-item {
$runningItemW: 0;
@extend .l-flex-row;
@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;
padding: 0 $interiorMarginSm;
position: relative;
.view-control {
color: $colorItemTreeVC;
display: inline-block;
margin-left: $interiorMargin;
font-size: 0.75em;
font-size: 0.75em;
margin-right: $interiorMargin;
height: 100%;
line-height: inherit;
width: $treeVCW;
$runningItemW: $interiorMargin + $treeVCW;
&.has-children {
&:before {
position: absolute;
@include trans-prop-nice(transform, 100ms);
content: "\3e";
@include transform-origin(center);
}
&.expanded:before {
@include transform(rotate(90deg));
}
}
@include desktop {
&:hover {
color: $colorItemTreeVCHover !important;
@@ -59,64 +71,17 @@ ul.tree {
}
}
.label,
.t-object-label {
display: block;
@include absPosDefault();
line-height: $menuLineH;
.t-item-icon {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
position: absolute;
left: $interiorMargin;
top: 50%;
width: $treeTypeIconH;
@include transform(translateY(-50%));
width: $treeTypeIconW;
}
.type-icon {
//@include absPosDefault(0, false);
$d: $treeTypeIconH;
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
left: $interiorMargin;
position: absolute;
@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
line-height: 100%;
right: auto; width: $treeTypeIconH;
.icon {
&.l-icon-link,
&.l-icon-alert {
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,
.t-title-label {
@include absPosDefault();
display: block;
left: $runningItemW + ($interiorMargin * 3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@include ellipsize();
}
}
&.selected {
@@ -126,12 +91,11 @@ ul.tree {
color: $colorItemTreeSelectedVC;
}
.t-object-label .t-item-icon {
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
color: $colorItemTreeSelectedFg;
}
}
&:not(.selected) {
// NOTE: [Mobile] Removed Hover on Mobile
@include desktop {
&:hover {
background: $colorItemTreeHoverBg;
@@ -160,8 +124,28 @@ ul.tree {
}
}
.tree-item {
.t-object-label {
left: $interiorMargin + $treeVCW;
}
}
mct-representation {
&.s-status-pending {
.t-object-label {
.t-item-icon {
&:before {
$spinBW: 4px;
@include spinner($spinBW);
border-color: rgba($colorItemTreeIcon, 0.25);
border-top-color: rgba($colorItemTreeIcon, 1.0);
}
.t-item-icon-glyph {
display: none;
}
}
.t-title-label {
font-style: italic;
opacity: 0.6;
}
}
}
}
.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
border-color: rgba($colorItemTreeSelectedFg, 0.25);
border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
}

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

@@ -20,7 +20,6 @@
at runtime from the About dialog for additional information.
-->
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
<!--<div ng-init="reps = [1,2,3]"></div>-->
<div class='status block'
title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()'

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

@@ -19,7 +19,9 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<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>
<div class="t-object-label l-flex-row flex-elem grows">
<div class="t-item-icon flex-elem" ng-class="{ 'l-icon-link':location.isLink() }">
<div class="t-item-icon-glyph">{{type.getGlyph()}}</div>
</div>
<div class='t-title-label flex-elem grows'>{{model.name}}</div>
</div>

4
platform/commonUI/general/res/templates/object-inspector.html
View File

@@ -41,7 +41,7 @@
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
class="location-item rep-object-label">
</mct-representation>
</span>
</li>
@@ -54,7 +54,7 @@
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
class="location-item rep-object-label">
</mct-representation>
</span>
</li>

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

@@ -26,41 +26,18 @@
ng-class="{selected: treeNode.isSelected()}"
>
<span
mct-device="desktop"
class='ui-symbol view-control'
class='ui-symbol view-control flex-elem'
ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
ng-click="toggle.toggle(); treeNode.trackExpansion()"
ng-if="model.composition !== undefined"
>
{{toggle.isActive() ? "v" : ">"}}
</span>
<mct-representation
mct-device="desktop"
class="mobile-hide"
class="rep-object-label"
key="'label'"
mct-object="domainObject"
ng-click="treeNode.select()"
>
</mct-representation>
<mct-representation
mct-device="mobile"
class="desktop-hide"
key="'label'"
mct-object="domainObject"
ng-click="(model.composition === undefined) && treeNode.select();
toggle.toggle();
treeNode.trackExpansion();"
>
</mct-representation>
<span
mct-device="mobile"
class='ui-symbol view-control'
ng-model="ngModel"
ng-click="treeNode.select()"
>
}
</span>
</span>
<span
class="tree-item-subtree"