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

[Frontend] More sanding on label flex-box conversion

Browse Source 
open #431
Moved object-label classes into their own include;
Fixing object-label in edit Elements pool and
Inspector; mixin refactoring;
This commit is contained in:
Charles Hacskaylo
2015-12-16 17:32:43 -08:00
parent 9dc958b952
commit ed7e16d341
9 changed files with 415 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

@@ -0,0 +1,72 @@
/*****************************************************************************
* 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;
}
.t-title-label {
@include ellipsize();
}
}
mct-representation {
&.s-status-pending {
.t-object-label {
.t-item-icon {
&:before {
$spinBW: 4px;
$spinD: 0; // $treeTypeIconW - ($spinBW * 2);
@include spinner($spinBW);
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
padding: 35%;
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);
}

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

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

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

@@ -35,6 +35,7 @@ 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);
@@ -76,12 +77,8 @@ ul.tree {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
margin-right: $interiorMargin;
width: $treeTypeIconW;
}
.t-title-label {
@include ellipsize();
}
}
&.selected {
@@ -124,36 +121,36 @@ ul.tree {
}
}
.tree-item {
mct-representation {
&.s-status-pending {
.t-object-label {
.t-item-icon {
&:before {
$spinBW: 4px;
$spinD: $treeTypeIconW - ($spinBW * 2);
@include spinner($spinBW, $colorItemTreeIcon);
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: $spinD;
height: $spinD;
}
.t-item-icon-glyph {
display: none;
}
mct-representation {
&.s-status-pending {
.t-object-label {
.t-item-icon {
&:before {
$spinBW: 4px;
$spinD: $treeTypeIconW - ($spinBW * 2);
@include spinner($spinBW);
border-color: rgba($colorItemTreeIcon, 0.25);
border-top-color: rgba($colorItemTreeIcon, 1.0);
//content: "";
//display: block;
//position: absolute;
//left: 50%;
//top: 50%;
width: $spinD;
height: $spinD;
}
.t-title-label {
font-style: italic;
opacity: 0.6;
.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);
}
}
}
.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);
}

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>

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

@@ -22,7 +22,7 @@
<span ng-controller="ToggleController as toggle">
<span ng-controller="TreeNodeController as treeNode">
<span
class="tree-item l-flex-row menus-to-left"
class="tree-item menus-to-left"
ng-class="{selected: treeNode.isSelected()}"
>
<span
@@ -32,7 +32,7 @@
>
</span>
<mct-representation
class="l-flex-row flex-elem grows"
class="rep-object-label"
key="'label'"
mct-object="domainObject"
ng-click="treeNode.select()"