ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-28 03:52:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Markup and CSS for link icon indicators

Browse Source 
WTD-1423
Added small icon to upper right;
IN PROGRESS;
This commit is contained in:
Charles Hacskaylo 2015-06-30 18:13:17 -07:00
parent d5d7ac90ac
commit e0727e8485
6 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,15 +29,15 @@
<div class='right abs'> <div class='right abs'>
<div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div> <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
<div class='ui-symbol icon profile' title="Shared">P</div> <div class='ui-symbol icon profile' title="Shared">P</div>
<!-- this will be toggled by a ng-show -->
<span class='ui-symbol icon l-link-icon' title="This object is a link">&#xf4;</span>
</div> </div>
</div> </div>
<div class='item-main abs'> <div class='item-main abs'>
<div class='ui-symbol icon lg item-type'> <div class='ui-symbol icon lg item-type'>
{{type.getGlyph()}} {{type.getGlyph()}}
<!-- this will be toggled by a ng-show --> <!-- this will be toggled by a ng-show -->
<span class='ui-symbol icon l-link-icon'> <span class='ui-symbol icon l-link-icon' title="This object is a link">&#xf4;</span>
&#xf4;
</span>
</div> </div>
<div class='ui-symbol icon abs item-open'>}</div> <div class='ui-symbol icon abs item-open'>}</div>
</div> </div>

35
platform/commonUI/general/res/css/items.css
View File

@ -156,7 +156,7 @@
color: #0099cc !important; } color: #0099cc !important; }
/* line 48, ../sass/items/_item.scss */ /* line 48, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type .l-link-icon { .items-holder .item.grid-item:hover .item-main .item-type .l-link-icon {
color: #5bf5ef; } color: #49dedb; }
/* line 52, ../sass/items/_item.scss */ /* line 52, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-open { .items-holder .item.grid-item:hover .item-main .item-open {
opacity: 1; } opacity: 1; }
@ -177,17 +177,20 @@
width: auto; } width: auto; }
/* line 68, ../sass/items/_item.scss */ /* line 68, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
margin-left: 5px; } margin-left: 3px; }
/* line 73, ../sass/items/_item.scss */ /* line 70, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-link-icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-link-icon {
color: #49dedb; }
/* line 76, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar.abs { .items-holder .item.grid-item .bar.bottom-bar.abs {
top: auto; top: auto;
height: 30px; height: 30px;
padding: 5px; } padding: 5px; }
/* line 79, ../sass/items/_item.scss */ /* line 82, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main { .items-holder .item.grid-item .item-main {
line-height: 160px; line-height: 160px;
z-index: 1; } z-index: 1; }
/* line 85, ../sass/items/_item.scss */ /* line 88, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
overflow: false; overflow: false;
position: absolute; position: absolute;
@ -204,17 +207,17 @@
bottom: auto; bottom: auto;
height: 102px; height: 102px;
top: 30px; } top: 30px; }
/* line 97, ../sass/items/_item.scss */ /* line 100, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-link-icon { .items-holder .item.grid-item .item-main .item-type .l-link-icon {
color: #09948f; color: #1a8e8b;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
position: absolute; position: absolute;
font-size: 32px; font-size: 32px;
right: -10px; right: -13px;
bottom: -10px; bottom: -10px;
z-index: 2; } z-index: 2; }
/* line 110, ../sass/items/_item.scss */ /* line 112, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity"; -moz-transition-property: "opacity";
-o-transition-property: "opacity"; -o-transition-property: "opacity";
@ -234,17 +237,17 @@
width: 50px; width: 50px;
pointer-events: none; pointer-events: none;
text-align: right; } text-align: right; }
/* line 122, ../sass/items/_item.scss */ /* line 124, ../sass/items/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
color: #cccccc; color: #cccccc;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; } text-overflow: ellipsis; }
/* line 130, ../sass/items/_item.scss */ /* line 132, ../sass/items/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
font-size: 0.8em; } font-size: 0.8em; }
/* line 133, ../sass/items/_item.scss */ /* line 135, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -281,15 +284,15 @@
/* line 160, ../sass/_mixins.scss */ /* line 160, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected.btn-menu .invoke-menu { .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
color: #52d4ff; } color: #52d4ff; }
/* line 138, ../sass/items/_item.scss */ /* line 140, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; } color: #80dfff; }
/* line 139, ../sass/items/_item.scss */ /* line 141, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-main .item-open { .items-holder .item.grid-item.selected .item-main .item-open {
color: #80dfff; } color: #80dfff; }
/* line 140, ../sass/items/_item.scss */ /* line 142, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 142, ../sass/items/_item.scss */ /* line 144, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected:hover .item-main .item-type { .items-holder .item.grid-item.selected:hover .item-main .item-type {
color: white !important; } color: white !important; }

2
platform/commonUI/general/res/css/tree.css
View File

@ -180,7 +180,7 @@ ul.tree {
/* line 75, ../sass/tree/_tree.scss */ /* line 75, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-link-icon { ul.tree li span.tree-item .label .type-icon .icon.l-link-icon {
text-shadow: black 0 1px 2px; text-shadow: black 0 1px 2px;
color: #5bf5ef; color: #49dedb;
position: absolute; position: absolute;
font-size: 0.5em; font-size: 0.5em;
right: -5px; right: -5px;

2
platform/commonUI/general/res/sass/_constants.scss
View File

@ -42,7 +42,7 @@ $colorKeySelectedBg: #005177;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorAlt1: #ffc700; $colorAlt1: #ffc700;
$colorAlert: #ff3c00; $colorAlert: #ff3c00;
$colorIconLink: #5bf5ef; $colorIconLink: #49dedb;
$colorPausedBg: #c56f01; $colorPausedBg: #c56f01;
$colorPausedFg: #fff; $colorPausedFg: #fff;
$colorCreateBtn: $colorKey; $colorCreateBtn: $colorKey;

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

@ -84,7 +84,3 @@
.super-menu.menu.dropdown .icon { .super-menu.menu.dropdown .icon {
//font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font //font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font
} }
.l-link-icon {
}

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

@ -66,7 +66,10 @@
.left, .right { .left, .right {
width: auto; width: auto;
.icon { .icon {
margin-left: $interiorMargin; margin-left: $interiorMarginSm;
&.l-link-icon {
color: $colorIconLink;
}
} }
} }
} }
@ -95,14 +98,13 @@
top: $iconMargin - 10; top: $iconMargin - 10;
//line-height: $lh; //line-height: $lh;
.l-link-icon { .l-link-icon {
//@include test(blue); // When the link icon is in the item-type icon holder
//@include trans-prop-nice("color", $transTime); color: darken($colorIconLink, 25%);
color: darken($colorIconLink, 35%);
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
position: absolute; position: absolute;
font-size: 32px; font-size: 32px;
right: -10px; right: -13px;
bottom: -10px; bottom: -10px;
z-index: 2; z-index: 2;
} }