ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-30 01:48:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Added s-status-pending spinner to tree-item

Browse Source 
open #431
Refinements of tree item sizes and spacing;
Polished spinner-related classes;
Moved l-icon-link icon into -glyph element;
This commit is contained in:
Charles Hacskaylo 2015-12-16 16:06:31 -08:00
parent b59fc43038
commit 930b13f9a0
6 changed files with 85 additions and 61 deletions
Show Stats 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

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

@ -89,15 +89,17 @@
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;
.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;
}
}
}
}

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

@ -51,7 +51,7 @@
}
.t-object-label {
line-height: inherit;
.t-item-icon.l-icon-link:before {
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
bottom: 20%; // Shift up due to height of mobile menu items
}
}

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

@ -77,7 +77,8 @@ ul.tree {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
width: $treeTypeIconH;
margin-right: $interiorMargin;
width: $treeTypeIconW;
}
.title-label,
.t-title-label {
@ -128,17 +129,24 @@ ul.tree {
.tree-item {
mct-representation {
//.t-object-label {
// left: $interiorMargin + $treeVCW;
//}
&.s-status-pending {
.t-object-label {
&:before {
@include spinner(0.25em, $colorItemTreeIcon);
content: "";
}
.t-item-icon .t-item-icon-glyph {
display: none;
.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;
}
}
}
}

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

@ -833,8 +833,8 @@ mct-container {
display: inline-block;
line-height: normal;
position: relative; }
/* line 92, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link:before {
/* line 93, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
color: #49dedb;
content: "\f4";
height: auto;
@ -2849,7 +2849,7 @@ label.checkbox.custom {
border-top: 1px solid #878787;
color: white;
line-height: 1.5rem;
padding: 3px 10px 3px 30px;
padding: 3px 10px 3px 28px;
position: relative;
white-space: nowrap; }
/* line 97, ../../../../general/res/sass/controls/_menus.scss */
@ -5705,8 +5705,9 @@ ul.tree {
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
font-size: 1.4em;
color: #0099cc;
width: 1.4em; }
/* line 82, ../../../../general/res/sass/tree/_tree.scss */
margin-right: 5px;
width: 18px; }
/* line 83, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .t-object-label .title-label,
.tree-item .t-object-label .t-title-label,
.search-result-item .t-object-label .title-label,
@ -5714,48 +5715,48 @@ ul.tree {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 88, ../../../../general/res/sass/tree/_tree.scss */
/* line 89, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected,
.search-result-item.selected {
background: #006080;
color: #cccccc; }
/* line 91, ../../../../general/res/sass/tree/_tree.scss */
/* line 92, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .view-control,
.search-result-item.selected .view-control {
color: rgba(255, 255, 255, 0.3); }
/* line 94, ../../../../general/res/sass/tree/_tree.scss */
/* line 95, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .t-object-label .t-item-icon,
.search-result-item.selected .t-object-label .t-item-icon {
color: #cccccc; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
/* line 102, ../../../../general/res/sass/tree/_tree.scss */
/* line 103, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover {
background: rgba(153, 153, 153, 0.1);
color: #cccccc; }
/* line 105, ../../../../general/res/sass/tree/_tree.scss */
/* line 106, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover .t-item-icon,
.search-result-item:not(.selected):hover .t-item-icon {
color: #33ccff; } }
/* line 112, ../../../../general/res/sass/tree/_tree.scss */
/* line 113, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.loading),
.search-result-item:not(.loading) {
cursor: pointer; }
/* line 116, ../../../../general/res/sass/tree/_tree.scss */
/* line 117, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger,
.search-result-item .context-trigger {
top: -1px;
position: absolute;
right: 3px; }
/* line 121, ../../../../general/res/sass/tree/_tree.scss */
/* line 122, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu {
font-size: 0.75em;
height: 0.9rem;
line-height: 0.9rem; }
/* line 136, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label:before {
/* line 135, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
@ -5771,11 +5772,17 @@ ul.tree {
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.25em;
border-width: 4px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
content: ""; }
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
@ -5801,7 +5808,7 @@ ul.tree {
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 140, ../../../../general/res/sass/tree/_tree.scss */
/* line 147, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; }
@ -5865,8 +5872,8 @@ ul.tree {
.search-result-item .t-object-label {
line-height: inherit; }
/* line 54, ../../../../general/res/sass/mobile/_tree.scss */
.tree-item .t-object-label .t-item-icon.l-icon-link:before,
.search-result-item .t-object-label .t-item-icon.l-icon-link:before {
.tree-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before,
.search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before {
bottom: 20%; } }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government

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

@ -833,8 +833,8 @@ mct-container {
display: inline-block;
line-height: normal;
position: relative; }
/* line 92, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link:before {
/* line 93, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
color: #49dedb;
content: "\f4";
height: auto;
@ -2788,7 +2788,7 @@ label.checkbox.custom {
border-top: 1px solid #e6e6e6;
color: #666666;
line-height: 1.5rem;
padding: 3px 10px 3px 30px;
padding: 3px 10px 3px 28px;
position: relative;
white-space: nowrap; }
/* line 97, ../../../../general/res/sass/controls/_menus.scss */
@ -5608,8 +5608,9 @@ ul.tree {
.search-result-item .t-object-label .t-item-icon {
font-size: 1.4em;
color: #0099cc;
width: 1.4em; }
/* line 82, ../../../../general/res/sass/tree/_tree.scss */
margin-right: 5px;
width: 18px; }
/* line 83, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .t-object-label .title-label,
.tree-item .t-object-label .t-title-label,
.search-result-item .t-object-label .title-label,
@ -5617,48 +5618,48 @@ ul.tree {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 88, ../../../../general/res/sass/tree/_tree.scss */
/* line 89, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected,
.search-result-item.selected {
background: #1ac6ff;
color: #fcfcfc; }
/* line 91, ../../../../general/res/sass/tree/_tree.scss */
/* line 92, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .view-control,
.search-result-item.selected .view-control {
color: #fcfcfc; }
/* line 94, ../../../../general/res/sass/tree/_tree.scss */
/* line 95, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .t-object-label .t-item-icon,
.search-result-item.selected .t-object-label .t-item-icon {
color: #fcfcfc; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
/* line 102, ../../../../general/res/sass/tree/_tree.scss */
/* line 103, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover {
background: rgba(102, 102, 102, 0.1);
color: #333333; }
/* line 105, ../../../../general/res/sass/tree/_tree.scss */
/* line 106, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover .t-item-icon,
.search-result-item:not(.selected):hover .t-item-icon {
color: #0099cc; } }
/* line 112, ../../../../general/res/sass/tree/_tree.scss */
/* line 113, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.loading),
.search-result-item:not(.loading) {
cursor: pointer; }
/* line 116, ../../../../general/res/sass/tree/_tree.scss */
/* line 117, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger,
.search-result-item .context-trigger {
top: -1px;
position: absolute;
right: 3px; }
/* line 121, ../../../../general/res/sass/tree/_tree.scss */
/* line 122, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu {
font-size: 0.75em;
height: 0.9rem;
line-height: 0.9rem; }
/* line 136, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label:before {
/* line 135, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
@ -5674,11 +5675,17 @@ ul.tree {
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.25em;
border-width: 4px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
content: ""; }
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
@ -5704,7 +5711,7 @@ ul.tree {
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 140, ../../../../general/res/sass/tree/_tree.scss */
/* line 147, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; }
@ -5768,8 +5775,8 @@ ul.tree {
.search-result-item .t-object-label {
line-height: inherit; }
/* line 54, ../../../../general/res/sass/mobile/_tree.scss */
.tree-item .t-object-label .t-item-icon.l-icon-link:before,
.search-result-item .t-object-label .t-item-icon.l-icon-link:before {
.tree-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before,
.search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before {
bottom: 20%; } }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government