ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-18 20:57:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Fixed HTML and CSS for grid-item

Browse Source 
open #486
Normalized grid-item to use similar HTML structure
as label template;
Fixed CSS accordingly.
This commit is contained in:
Charles Hacskaylo 2016-01-15 15:33:10 -08:00
parent 193c7e3db2
commit 2d44cf78f9
5 changed files with 67 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/browse/res/templates/items/grid-item.html
View File

@ -27,7 +27,9 @@
<mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
</div>
<div class='item-main abs lg'>
<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">
<span class="t-item-icon-glyph ng-binding">{{type.getGlyph()}}</span>
</span>
<div class='ui-symbol abs item-open'>}</div>
</div>
<div class='bottom-bar bar abs'>

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

@ -35,7 +35,6 @@
}
&.icon {
color: $colorKey;
//position: relative;
font-size: inherit;
&.alert {
color: $colorAlert;
@ -81,14 +80,11 @@
}
.t-item-icon {
// Used in grid-item.html, tree-item, inspector location, more?
// Used in grid-item.html, tree-item, inspector location
@extend .ui-symbol;
@extend .icon;
line-height: normal; // This is Ok for the symbolsfont
position: relative;
.t-item-icon-glyph {
position: absolute;
}
&.l-icon-link {
.t-item-icon-glyph {
&:before {
@ -103,4 +99,4 @@
}
}
}
}
}

16
platform/commonUI/general/res/sass/items/_item.scss
View File

@ -27,7 +27,6 @@
}
.item {
&.grid-item {
//div { @include test() }
$d: $ueBrowseGridItemLg;
$iconMargin: 40px;
$iconD: ($d - ($iconMargin * 2)) * 0.85;
@ -53,7 +52,6 @@
}
}
.contents {
//@include test(red);
$m: $interiorMarginLg;
top: $m; right: $m; bottom: $m; left: $m;
}
@ -83,19 +81,21 @@
.item-main {
$h: $ueBrowseGridItemLg;
$lh: $h * 0.8;
//top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
line-height: $lh;
z-index: 1;
.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: normal;
//text-align: center;
font-size: $iconD * 0.95;
&.l-icon-link {
.t-item-icon-glyph {
&:before {
@include transform(scale(0.25));
}
}
}
}
.item-open {
@include trans-prop-nice("opacity", $transTime);

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

@ -20,7 +20,7 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@ -41,38 +41,38 @@ time, mark, audio, video {
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
@ -880,9 +880,6 @@ mct-container {
.t-item-icon {
line-height: normal;
position: relative; }
/* line 89, ../../../../general/res/sass/_icons.scss */
.t-item-icon .t-item-icon-glyph {
position: absolute; }
/* line 94, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
color: #49dedb;
@ -7591,22 +7588,22 @@ table {
/* line 310, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover > .icon, .items-holder .item.grid-item:not(.disabled):hover > .t-item-icon {
color: #33ccff; } }
/* line 45, ../../../../general/res/sass/items/_item.scss */
/* line 44, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type {
color: deepskyblue; }
/* line 47, ../../../../general/res/sass/items/_item.scss */
/* line 46, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
color: #49dedb; }
/* line 51, ../../../../general/res/sass/items/_item.scss */
/* line 50, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-open {
opacity: 1; }
/* line 55, ../../../../general/res/sass/items/_item.scss */
/* line 54, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .contents {
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; }
/* line 61, ../../../../general/res/sass/items/_item.scss */
/* line 59, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar {
bottom: auto;
color: #8c8c8c;
@ -7614,24 +7611,24 @@ table {
line-height: 20px;
text-align: right;
z-index: 5; }
/* line 68, ../../../../general/res/sass/items/_item.scss */
/* line 66, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
width: auto; }
/* line 70, ../../../../general/res/sass/items/_item.scss */
/* line 68, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .left .t-item-icon, .items-holder .item.grid-item .bar.top-bar .right .icon, .items-holder .item.grid-item .bar.top-bar .right .t-item-icon {
margin-left: 3px; }
/* line 72, ../../../../general/res/sass/items/_item.scss */
/* line 70, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .left .l-icon-link.t-item-icon, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .l-icon-link.t-item-icon {
color: #49dedb; }
/* line 78, ../../../../general/res/sass/items/_item.scss */
/* line 76, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar {
top: auto;
line-height: 110%; }
/* line 83, ../../../../general/res/sass/items/_item.scss */
/* line 81, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main {
line-height: 160px;
z-index: 1; }
/* line 89, ../../../../general/res/sass/items/_item.scss */
/* line 86, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type,
.items-holder .item.grid-item .item-main .t-item-icon {
-moz-transform: translateX(-50%) translateY(-55%);
@ -7642,6 +7639,13 @@ table {
top: 50%;
left: 50%;
font-size: 96.9px; }
/* line 94, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type.l-icon-link .t-item-icon-glyph:before,
.items-holder .item.grid-item .item-main .t-item-icon.l-icon-link .t-item-icon-glyph:before {
-moz-transform: scale(0.25);
-ms-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25); }
/* line 100, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity";

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

@ -20,7 +20,7 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@ -41,38 +41,38 @@ time, mark, audio, video {
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
@ -880,9 +880,6 @@ mct-container {
.t-item-icon {
line-height: normal;
position: relative; }
/* line 89, ../../../../general/res/sass/_icons.scss */
.t-item-icon .t-item-icon-glyph {
position: absolute; }
/* line 94, ../../../../general/res/sass/_icons.scss */
.t-item-icon.l-icon-link .t-item-icon-glyph:before {
color: #49dedb;
@ -7450,22 +7447,22 @@ table {
/* line 310, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover > .icon, .items-holder .item.grid-item:not(.disabled):hover > .t-item-icon {
color: #33ccff; } }
/* line 45, ../../../../general/res/sass/items/_item.scss */
/* line 44, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type {
color: deepskyblue; }
/* line 47, ../../../../general/res/sass/items/_item.scss */
/* line 46, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
color: #49dedb; }
/* line 51, ../../../../general/res/sass/items/_item.scss */
/* line 50, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-open {
opacity: 1; }
/* line 55, ../../../../general/res/sass/items/_item.scss */
/* line 54, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .contents {
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; }
/* line 61, ../../../../general/res/sass/items/_item.scss */
/* line 59, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar {
bottom: auto;
color: #8c8c8c;
@ -7473,24 +7470,24 @@ table {
line-height: 20px;
text-align: right;
z-index: 5; }
/* line 68, ../../../../general/res/sass/items/_item.scss */
/* line 66, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
width: auto; }
/* line 70, ../../../../general/res/sass/items/_item.scss */
/* line 68, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .left .t-item-icon, .items-holder .item.grid-item .bar.top-bar .right .icon, .items-holder .item.grid-item .bar.top-bar .right .t-item-icon {
margin-left: 3px; }
/* line 72, ../../../../general/res/sass/items/_item.scss */
/* line 70, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .left .l-icon-link.t-item-icon, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .l-icon-link.t-item-icon {
color: #49dedb; }
/* line 78, ../../../../general/res/sass/items/_item.scss */
/* line 76, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar {
top: auto;
line-height: 110%; }
/* line 83, ../../../../general/res/sass/items/_item.scss */
/* line 81, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main {
line-height: 160px;
z-index: 1; }
/* line 89, ../../../../general/res/sass/items/_item.scss */
/* line 86, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type,
.items-holder .item.grid-item .item-main .t-item-icon {
-moz-transform: translateX(-50%) translateY(-55%);
@ -7501,6 +7498,13 @@ table {
top: 50%;
left: 50%;
font-size: 96.9px; }
/* line 94, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type.l-icon-link .t-item-icon-glyph:before,
.items-holder .item.grid-item .item-main .t-item-icon.l-icon-link .t-item-icon-glyph:before {
-moz-transform: scale(0.25);
-ms-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25); }
/* line 100, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity";