alihan/openmct
1
0
Fork 0
Code Issues Pull Requests 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
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; $treeVCW: 10px;
$treeTypeIconH: 1.4em; // was 16px $treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px; $treeTypeIconHPx: 16px;
$treeTypeIconW: 20px; $treeTypeIconW: 18px;
$treeContextTriggerW: 20px; $treeContextTriggerW: 20px;
// Tabular // Tabular
$tabularHeaderH: 22px; //18px $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 line-height: normal; // This is Ok for the symbolsfont
position: relative; position: relative;
&.l-icon-link { &.l-icon-link {
&:before { .t-item-icon-glyph {
color: $colorIconLink; &:before {
content: "\f4"; color: $colorIconLink;
height: auto; width: auto; content: "\f4";
position: absolute; height: auto; width: auto;
left: 0; top: 0; right: 0; bottom: 10%; position: absolute;
@include transform-origin(bottom, left); left: 0; top: 0; right: 0; bottom: 10%;
@include transform(scale(0.3)); @include transform-origin(bottom, left);
z-index: 2; @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 { .t-object-label {
line-height: inherit; 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 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); @include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH; font-size: $treeTypeIconH;
color: $colorItemTreeIcon; color: $colorItemTreeIcon;
width: $treeTypeIconH; margin-right: $interiorMargin;
width: $treeTypeIconW;
} }
.title-label, .title-label,
.t-title-label { .t-title-label {
@@ -128,17 +129,24 @@ ul.tree {
.tree-item { .tree-item {
mct-representation { mct-representation {
//.t-object-label {
// left: $interiorMargin + $treeVCW;
//}
&.s-status-pending { &.s-status-pending {
.t-object-label { .t-object-label {
&:before { .t-item-icon {
@include spinner(0.25em, $colorItemTreeIcon); &:before {
content: ""; $spinBW: 4px;
} $spinD: $treeTypeIconW - ($spinBW * 2);
.t-item-icon .t-item-icon-glyph { @include spinner($spinBW, $colorItemTreeIcon);
display: none; 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; display: inline-block;
line-height: normal; line-height: normal;
position: relative; } position: relative; }
/* line 92, ../../../../general/res/sass/_icons.scss */ /* line 93, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link:before { .t-item-icon.l-icon-link .t-item-icon-glyph:before {
color: #49dedb; color: #49dedb;
content: "\f4"; content: "\f4";
height: auto; height: auto;
@@ -2849,7 +2849,7 @@ label.checkbox.custom {
border-top: 1px solid #878787; border-top: 1px solid #878787;
color: white; color: white;
line-height: 1.5rem; line-height: 1.5rem;
padding: 3px 10px 3px 30px; padding: 3px 10px 3px 28px;
position: relative; position: relative;
white-space: nowrap; } white-space: nowrap; }
/* line 97, ../../../../general/res/sass/controls/_menus.scss */ /* 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; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
font-size: 1.4em; font-size: 1.4em;
color: #0099cc; color: #0099cc;
width: 1.4em; } margin-right: 5px;
/* line 82, ../../../../general/res/sass/tree/_tree.scss */ width: 18px; }
/* line 83, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .t-object-label .title-label, .tree-item .t-object-label .title-label,
.tree-item .t-object-label .t-title-label, .tree-item .t-object-label .t-title-label,
.search-result-item .t-object-label .title-label, .search-result-item .t-object-label .title-label,
@@ -5714,48 +5715,48 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 88, ../../../../general/res/sass/tree/_tree.scss */ /* line 89, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected, .tree-item.selected,
.search-result-item.selected { .search-result-item.selected {
background: #006080; background: #006080;
color: #cccccc; } color: #cccccc; }
/* line 91, ../../../../general/res/sass/tree/_tree.scss */ /* line 92, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .view-control, .tree-item.selected .view-control,
.search-result-item.selected .view-control { .search-result-item.selected .view-control {
color: rgba(255, 255, 255, 0.3); } 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, .tree-item.selected .t-object-label .t-item-icon,
.search-result-item.selected .t-object-label .t-item-icon { .search-result-item.selected .t-object-label .t-item-icon {
color: #cccccc; } color: #cccccc; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { @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, .tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover { .search-result-item:not(.selected):hover {
background: rgba(153, 153, 153, 0.1); background: rgba(153, 153, 153, 0.1);
color: #cccccc; } 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, .tree-item:not(.selected):hover .t-item-icon,
.search-result-item:not(.selected):hover .t-item-icon { .search-result-item:not(.selected):hover .t-item-icon {
color: #33ccff; } } color: #33ccff; } }
/* line 112, ../../../../general/res/sass/tree/_tree.scss */ /* line 113, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.loading), .tree-item:not(.loading),
.search-result-item:not(.loading) { .search-result-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 116, ../../../../general/res/sass/tree/_tree.scss */ /* line 117, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger, .tree-item .context-trigger,
.search-result-item .context-trigger { .search-result-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 121, ../../../../general/res/sass/tree/_tree.scss */ /* line 122, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu, .tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu { .search-result-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 136, ../../../../general/res/sass/tree/_tree.scss */ /* line 135, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label:before { .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered; -moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered; -webkit-animation-name: rotateCentered;
animation-name: rotateCentered; animation-name: rotateCentered;
@@ -5771,11 +5772,17 @@ ul.tree {
border-color: rgba(0, 153, 204, 0.25); border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc; border-top-color: #0099cc;
border-style: solid; border-style: solid;
border-width: 0.25em; border-width: 4px;
-moz-border-radius: 100%; -moz-border-radius: 100%;
-webkit-border-radius: 100%; -webkit-border-radius: 100%;
border-radius: 100%; border-radius: 100%;
content: ""; } content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px; }
@-moz-keyframes rotateCentered { @-moz-keyframes rotateCentered {
0% { 0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
@@ -5801,7 +5808,7 @@ ul.tree {
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
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 { .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; } display: none; }
@@ -5865,8 +5872,8 @@ ul.tree {
.search-result-item .t-object-label { .search-result-item .t-object-label {
line-height: inherit; } line-height: inherit; }
/* line 54, ../../../../general/res/sass/mobile/_tree.scss */ /* line 54, ../../../../general/res/sass/mobile/_tree.scss */
.tree-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:before { .search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before {
bottom: 20%; } } bottom: 20%; } }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * 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; display: inline-block;
line-height: normal; line-height: normal;
position: relative; } position: relative; }
/* line 92, ../../../../general/res/sass/_icons.scss */ /* line 93, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link:before { .t-item-icon.l-icon-link .t-item-icon-glyph:before {
color: #49dedb; color: #49dedb;
content: "\f4"; content: "\f4";
height: auto; height: auto;
@@ -2788,7 +2788,7 @@ label.checkbox.custom {
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
color: #666666; color: #666666;
line-height: 1.5rem; line-height: 1.5rem;
padding: 3px 10px 3px 30px; padding: 3px 10px 3px 28px;
position: relative; position: relative;
white-space: nowrap; } white-space: nowrap; }
/* line 97, ../../../../general/res/sass/controls/_menus.scss */ /* line 97, ../../../../general/res/sass/controls/_menus.scss */
@@ -5608,8 +5608,9 @@ ul.tree {
.search-result-item .t-object-label .t-item-icon { .search-result-item .t-object-label .t-item-icon {
font-size: 1.4em; font-size: 1.4em;
color: #0099cc; color: #0099cc;
width: 1.4em; } margin-right: 5px;
/* line 82, ../../../../general/res/sass/tree/_tree.scss */ width: 18px; }
/* line 83, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .t-object-label .title-label, .tree-item .t-object-label .title-label,
.tree-item .t-object-label .t-title-label, .tree-item .t-object-label .t-title-label,
.search-result-item .t-object-label .title-label, .search-result-item .t-object-label .title-label,
@@ -5617,48 +5618,48 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 88, ../../../../general/res/sass/tree/_tree.scss */ /* line 89, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected, .tree-item.selected,
.search-result-item.selected { .search-result-item.selected {
background: #1ac6ff; background: #1ac6ff;
color: #fcfcfc; } color: #fcfcfc; }
/* line 91, ../../../../general/res/sass/tree/_tree.scss */ /* line 92, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .view-control, .tree-item.selected .view-control,
.search-result-item.selected .view-control { .search-result-item.selected .view-control {
color: #fcfcfc; } 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, .tree-item.selected .t-object-label .t-item-icon,
.search-result-item.selected .t-object-label .t-item-icon { .search-result-item.selected .t-object-label .t-item-icon {
color: #fcfcfc; } color: #fcfcfc; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { @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, .tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover { .search-result-item:not(.selected):hover {
background: rgba(102, 102, 102, 0.1); background: rgba(102, 102, 102, 0.1);
color: #333333; } 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, .tree-item:not(.selected):hover .t-item-icon,
.search-result-item:not(.selected):hover .t-item-icon { .search-result-item:not(.selected):hover .t-item-icon {
color: #0099cc; } } color: #0099cc; } }
/* line 112, ../../../../general/res/sass/tree/_tree.scss */ /* line 113, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.loading), .tree-item:not(.loading),
.search-result-item:not(.loading) { .search-result-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 116, ../../../../general/res/sass/tree/_tree.scss */ /* line 117, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger, .tree-item .context-trigger,
.search-result-item .context-trigger { .search-result-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 121, ../../../../general/res/sass/tree/_tree.scss */ /* line 122, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu, .tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu { .search-result-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 136, ../../../../general/res/sass/tree/_tree.scss */ /* line 135, ../../../../general/res/sass/tree/_tree.scss */
.tree-item mct-representation.s-status-pending .t-object-label:before { .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered; -moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered; -webkit-animation-name: rotateCentered;
animation-name: rotateCentered; animation-name: rotateCentered;
@@ -5674,11 +5675,17 @@ ul.tree {
border-color: rgba(0, 153, 204, 0.25); border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc; border-top-color: #0099cc;
border-style: solid; border-style: solid;
border-width: 0.25em; border-width: 4px;
-moz-border-radius: 100%; -moz-border-radius: 100%;
-webkit-border-radius: 100%; -webkit-border-radius: 100%;
border-radius: 100%; border-radius: 100%;
content: ""; } content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px; }
@-moz-keyframes rotateCentered { @-moz-keyframes rotateCentered {
0% { 0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
@@ -5704,7 +5711,7 @@ ul.tree {
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
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 { .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; } display: none; }
@@ -5768,8 +5775,8 @@ ul.tree {
.search-result-item .t-object-label { .search-result-item .t-object-label {
line-height: inherit; } line-height: inherit; }
/* line 54, ../../../../general/res/sass/mobile/_tree.scss */ /* line 54, ../../../../general/res/sass/mobile/_tree.scss */
.tree-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:before { .search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before {
bottom: 20%; } } bottom: 20%; } }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government