mirror of
https://github.com/nasa/openmct.git
synced 2025-06-23 17:53:28 +00:00
[Frontend] type-icon evolving to universal t-item-icon
open #90 Major work in-progress on switching to .t-item-icon from .type-icon to get item icons working better, especially in .inspector-location in Inspector; Significant mods to label.html;
This commit is contained in:
Charles Hacskaylo
@ -50,19 +50,6 @@
|
||||
&.icon-calendar:after {
|
||||
content: "\e605";
|
||||
}
|
||||
&.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
position: absolute;
|
||||
font-size: 0.4em !important;
|
||||
left: 0px;
|
||||
bottom: 5%;
|
||||
z-index: 2;
|
||||
&:before {
|
||||
content: "\f4";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar .ui-symbol {
|
||||
@ -91,4 +78,26 @@
|
||||
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;
|
||||
position: relative;
|
||||
&.l-icon-link {
|
||||
&:before {
|
||||
color: $colorIconLink;
|
||||
height: 30%; width: auto;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
font-size: 0.35em;
|
||||
left: 0px;
|
||||
bottom: 10%;
|
||||
z-index: 2;
|
||||
content: "\f4";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,17 +86,16 @@
|
||||
//top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
|
||||
line-height: $lh;
|
||||
z-index: 1;
|
||||
.item-type {
|
||||
//@include trans-prop-nice("color", $transTime);
|
||||
@include absPosDefault($iconMargin, hidden);
|
||||
//@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;
|
||||
//line-height: normal;
|
||||
//text-align: center;
|
||||
}
|
||||
.item-open {
|
||||
@include trans-prop-nice("opacity", $transTime);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,13 +59,20 @@ 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 {
|
||||
$d: $treeTypeIconH; // 16px is crisp size
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $d;
|
||||
color: $colorItemTreeIcon;
|
||||
position: absolute;
|
||||
left: $interiorMargin; right: auto; width: $d;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
//@include absPosDefault(0, false);
|
||||
@ -100,7 +106,8 @@ ul.tree {
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
.title-label,
|
||||
.t-title-label {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
left: $runningItemW + ($interiorMargin * 3);
|
||||
@ -152,7 +159,7 @@ ul.tree {
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
.label {
|
||||
.t-object-label {
|
||||
left: $interiorMargin + $treeVCW;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user