alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Markup and CSS for link icon indicators

Browse Source 
WTD-1423
Grid item version with link at bottom right of main icon;
This commit is contained in:
Charles Hacskaylo
2015-06-30 17:58:56 -07:00
parent 3e5fa30d9d
commit d5d7ac90ac
9 changed files with 163 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,13 @@
</div> </div>
</div> </div>
<div class='item-main abs'> <div class='item-main abs'>
<div class='ui-symbol icon lg abs item-type'>{{type.getGlyph()}}</div> <div class='ui-symbol icon lg item-type'>
{{type.getGlyph()}}
<!-- this will be toggled by a ng-show -->
<span class='ui-symbol icon l-link-icon'>
&#xf4;
</span>
</div>
<div class='ui-symbol icon abs item-open'>}</div> <div class='ui-symbol icon abs item-open'>}</div>
</div> </div>
<div class='bottom-bar bar abs'> <div class='bottom-bar bar abs'>

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

@@ -151,59 +151,70 @@
/* line 160, ../sass/_mixins.scss */ /* line 160, ../sass/_mixins.scss */
.items-holder .item.grid-item.btn-menu .invoke-menu { .items-holder .item.grid-item.btn-menu .invoke-menu {
color: #828282; } color: #828282; }
/* line 42, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
-moz-transition-property: "color";
-o-transition-property: "color";
-webkit-transition-property: "color";
transition-property: "color";
-moz-transition-duration: 200ms;
-o-transition-duration: 200ms;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
/* line 46, ../sass/items/_item.scss */ /* line 46, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type { .items-holder .item.grid-item:hover .item-main .item-type {
color: #0099cc !important; } color: #0099cc !important; }
/* line 49, ../sass/items/_item.scss */ /* line 48, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type .l-link-icon {
color: #5bf5ef; }
/* 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; }
/* line 54, ../sass/items/_item.scss */ /* line 57, ../sass/items/_item.scss */
.items-holder .item.grid-item .contents { .items-holder .item.grid-item .contents {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 58, ../sass/items/_item.scss */ /* line 61, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs { .items-holder .item.grid-item .bar.top-bar.abs {
bottom: auto; bottom: auto;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
z-index: 5; } z-index: 5; }
/* line 63, ../sass/items/_item.scss */ /* line 66, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
width: auto; } width: auto; }
/* line 65, ../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: 5px; }
/* line 70, ../sass/items/_item.scss */ /* line 73, ../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 76, ../sass/items/_item.scss */ /* line 79, ../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 82, ../sass/items/_item.scss */ /* line 85, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
overflow: false;
position: absolute;
top: 40px;
right: 40px;
bottom: 40px;
left: 40px;
width: auto;
height: auto;
color: #737373; color: #737373;
text-align: center; text-align: center;
font-size: 6em; } font-size: 96.9px;
/* line 88, ../sass/items/_item.scss */ line-height: 102px;
bottom: auto;
height: 102px;
top: 30px; }
/* line 97, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-link-icon {
color: #09948f;
height: 36px;
line-height: 36px;
position: absolute;
font-size: 32px;
right: -10px;
bottom: -10px;
z-index: 2; }
/* line 110, ../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";
@@ -223,17 +234,17 @@
width: 50px; width: 50px;
pointer-events: none; pointer-events: none;
text-align: right; } text-align: right; }
/* line 100, ../sass/items/_item.scss */ /* line 122, ../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 108, ../sass/items/_item.scss */ /* line 130, ../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 111, ../sass/items/_item.scss */ /* line 133, ../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%;
@@ -270,15 +281,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 116, ../sass/items/_item.scss */ /* line 138, ../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 117, ../sass/items/_item.scss */ /* line 139, ../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 118, ../sass/items/_item.scss */ /* line 140, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 120, ../sass/items/_item.scss */ /* line 142, ../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; }

43
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -92,7 +92,7 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@@ -113,38 +113,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } 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 { html {
line-height: 1; } 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 { ol, ul {
list-style: none; } 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 { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } 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 { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } 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 { q, blockquote {
quotes: none; } 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 { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } 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 { a img {
border: none; } 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 { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; } display: block; }
@@ -1256,26 +1256,37 @@ mct-container {
.tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td { .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td {
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
min-width: 110px; min-width: 110px;
color: #fff;
padding: 2px 5px; padding: 2px 5px;
vertical-align: top; } vertical-align: top; }
/* line 107, ../sass/lists/_tabular.scss */ /* line 108, ../sass/lists/_tabular.scss */
.tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric { .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric {
text-align: right; } text-align: right; }
/* line 111, ../sass/lists/_tabular.scss */
.tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value {
text-align: right; }
/* line 113, ../sass/lists/_tabular.scss */ /* line 113, ../sass/lists/_tabular.scss */
.tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding-left: 5px;
padding-right: 5px; }
/* line 122, ../sass/lists/_tabular.scss */
.tabular.filterable tbody, .tabular.filterable .tbody { .tabular.filterable tbody, .tabular.filterable .tbody {
top: 36px; } top: 36px; }
/* line 118, ../sass/lists/_tabular.scss */ /* line 127, ../sass/lists/_tabular.scss */
.tabular.fixed-header { .tabular.fixed-header {
height: 100%; } height: 100%; }
/* line 120, ../sass/lists/_tabular.scss */ /* line 129, ../sass/lists/_tabular.scss */
.tabular.fixed-header thead, .tabular.fixed-header .thead, .tabular.fixed-header thead, .tabular.fixed-header .thead,
.tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr { .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr {
display: table; display: table;
table-layout: fixed; } table-layout: fixed; }
/* line 125, ../sass/lists/_tabular.scss */ /* line 134, ../sass/lists/_tabular.scss */
.tabular.fixed-header thead, .tabular.fixed-header .thead { .tabular.fixed-header thead, .tabular.fixed-header .thead {
width: calc(100% - 10px); } width: calc(100% - 10px); }
/* line 128, ../sass/lists/_tabular.scss */ /* line 137, ../sass/lists/_tabular.scss */
.tabular.fixed-header tbody, .tabular.fixed-header .tbody { .tabular.fixed-header tbody, .tabular.fixed-header .tbody {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@@ -1288,7 +1299,7 @@ mct-container {
top: 18px; top: 18px;
display: block; display: block;
overflow-y: scroll; } overflow-y: scroll; }
/* line 136, ../sass/lists/_tabular.scss */ /* line 145, ../sass/lists/_tabular.scss */
.tabular.t-event-messages td, .tabular.t-event-messages .td { .tabular.t-event-messages td, .tabular.t-event-messages .td {
min-width: 150px; } min-width: 150px; }
@@ -2495,7 +2506,7 @@ label.checkbox.custom {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #737373; border-top: 1px solid #737373;
line-height: 1.4rem; line-height: 1.5rem;
padding: 3px 10px 3px 30px; padding: 3px 10px 3px 30px;
white-space: nowrap; } white-space: nowrap; }
/* line 45, ../sass/controls/_menus.scss */ /* line 45, ../sass/controls/_menus.scss */

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

@@ -122,9 +122,9 @@ ul.tree {
-webkit-transition: background-color 0.25s; -webkit-transition: background-color 0.25s;
transition: background-color 0.25s; transition: background-color 0.25s;
display: block; display: block;
font-size: 0.80em; font-size: 0.8em;
height: 1.4rem; height: 1.5rem;
line-height: 1.4rem; line-height: 1.5rem;
margin-bottom: 3px; margin-bottom: 3px;
position: relative; } position: relative; }
/* line 38, ../sass/tree/_tree.scss */ /* line 38, ../sass/tree/_tree.scss */
@@ -150,17 +150,19 @@ ul.tree {
left: 20px; } left: 20px; }
/* line 55, ../sass/tree/_tree.scss */ /* line 55, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon { ul.tree li span.tree-item .label .type-icon {
overflow: hidden; overflow: false;
position: absolute; position: absolute;
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
left: 0px; left: 0;
width: auto; width: auto;
height: auto; height: auto;
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
color: #0099cc; } color: #0099cc;
/* line 59, ../sass/tree/_tree.scss */ right: auto;
width: 1em; }
/* line 60, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .alert { ul.tree li span.tree-item .label .type-icon .alert {
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
background: #333; background: #333;
@@ -176,6 +178,15 @@ ul.tree {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
/* 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 {
text-shadow: black 0 1px 2px;
color: #5bf5ef;
position: absolute;
font-size: 0.5em;
right: -5px;
bottom: -8px;
z-index: 2; }
/* line 86, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .title-label { ul.tree li span.tree-item .label .title-label {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@@ -186,55 +197,55 @@ ul.tree {
width: auto; width: auto;
height: auto; height: auto;
display: block; display: block;
left: 20px; left: 25px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 87, ../sass/tree/_tree.scss */ /* line 98, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading { ul.tree li span.tree-item.loading {
pointer-events: none; } pointer-events: none; }
/* line 89, ../sass/tree/_tree.scss */ /* line 100, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label { ul.tree li span.tree-item.loading .label {
opacity: 0.5; } opacity: 0.5; }
/* line 91, ../sass/tree/_tree.scss */ /* line 102, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label .title-label { ul.tree li span.tree-item.loading .label .title-label {
font-style: italic; } font-style: italic; }
/* line 95, ../sass/tree/_tree.scss */ /* line 106, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .wait-spinner { ul.tree li span.tree-item.loading .wait-spinner {
margin-left: 14px; } margin-left: 14px; }
/* line 100, ../sass/tree/_tree.scss */ /* line 111, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected { ul.tree li span.tree-item.selected {
background: #005177; background: #005177;
color: #fff; } color: #fff; }
/* line 104, ../sass/tree/_tree.scss */ /* line 115, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .view-control { ul.tree li span.tree-item.selected .view-control {
color: #0099cc; } color: #0099cc; }
/* line 107, ../sass/tree/_tree.scss */ /* line 118, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .label .type-icon { ul.tree li span.tree-item.selected .label .type-icon {
color: #fff; } color: #fff; }
/* line 113, ../sass/tree/_tree.scss */ /* line 124, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover { ul.tree li span.tree-item:not(.selected):hover {
background: #404040; background: #404040;
color: #cccccc; } color: #cccccc; }
/* line 116, ../sass/tree/_tree.scss */ /* line 127, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .context-trigger { ul.tree li span.tree-item:not(.selected):hover .context-trigger {
display: block; } display: block; }
/* line 119, ../sass/tree/_tree.scss */ /* line 130, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .icon { ul.tree li span.tree-item:not(.selected):hover .icon {
color: #33ccff; } color: #33ccff; }
/* line 125, ../sass/tree/_tree.scss */ /* line 136, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.loading) { ul.tree li span.tree-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 129, ../sass/tree/_tree.scss */ /* line 140, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger { ul.tree li span.tree-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 135, ../sass/tree/_tree.scss */ /* line 146, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger .invoke-menu { ul.tree li span.tree-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 144, ../sass/tree/_tree.scss */ /* line 155, ../sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }

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

@@ -42,6 +42,7 @@ $colorKeySelectedBg: #005177;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorAlt1: #ffc700; $colorAlt1: #ffc700;
$colorAlert: #ff3c00; $colorAlert: #ff3c00;
$colorIconLink: #5bf5ef;
$colorPausedBg: #c56f01; $colorPausedBg: #c56f01;
$colorPausedFg: #fff; $colorPausedFg: #fff;
$colorCreateBtn: $colorKey; $colorCreateBtn: $colorKey;
@@ -145,7 +146,7 @@ $controlDisabledOpacity: 0.3;
$formLabelW: 20%; $formLabelW: 20%;
$formInputH: 22px; $formInputH: 22px;
$formRowCtrlsH: 14px; $formRowCtrlsH: 14px;
$menuLineH: 1.4rem; $menuLineH: 1.5rem;
$scrollbarTrackSize: 10px; $scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px; $btnStdH: 25px;

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

@@ -85,3 +85,6 @@
//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 {
}

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

@@ -29,6 +29,9 @@
&.grid-item { &.grid-item {
//div { @include test() } //div { @include test() }
$d: $ueBrowseGridItemLg; $d: $ueBrowseGridItemLg;
//$iconD: 100px;
$iconMargin: 40px;
$iconD: ($d - ($iconMargin * 2)) * 0.85;
$transTime: 200ms; $transTime: 200ms;
@include btnSubtle($colorItemBase); @include btnSubtle($colorItemBase);
box-sizing: border-box; box-sizing: border-box;
@@ -39,12 +42,12 @@
margin-bottom: $interiorMarginSm; margin-bottom: $interiorMarginSm;
margin-right: $interiorMarginSm; margin-right: $interiorMarginSm;
position: relative; position: relative;
.item-main .item-type {
@include trans-prop-nice("color", $transTime);
}
&:hover .item-main { &:hover .item-main {
.item-type { .item-type {
color: $colorKey !important; color: $colorKey !important;
.l-link-icon {
color: $colorIconLink;
}
} }
.item-open { .item-open {
//display: block; //display: block;
@@ -80,10 +83,29 @@
line-height: $lh; line-height: $lh;
z-index: 1; z-index: 1;
.item-type { .item-type {
//@include trans-prop-nice("color", $transTime);
@include absPosDefault($iconMargin, false);
//@include test(red);
color: $colorItemFg; color: $colorItemFg;
text-align: center; text-align: center;
font-size: 6em; font-size: $iconD * 0.95; //6em;
line-height: $iconD;
bottom: auto;
height: $iconD;
top: $iconMargin - 10;
//line-height: $lh; //line-height: $lh;
.l-link-icon {
//@include test(blue);
//@include trans-prop-nice("color", $transTime);
color: darken($colorIconLink, 35%);
height: 36px;
line-height: 36px;
position: absolute;
font-size: 32px;
right: -10px;
bottom: -10px;
z-index: 2;
}
} }
.item-open { .item-open {
//@include test(); //@include test();

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

@@ -29,7 +29,7 @@ ul.tree {
@include border-radius($basicCr); @include border-radius($basicCr);
@include single-transition(background-color, 0.25s); @include single-transition(background-color, 0.25s);
display: block; display: block;
font-size: 0.80em; font-size: 0.8em;
height: $menuLineH; height: $menuLineH;
line-height: $menuLineH; line-height: $menuLineH;
margin-bottom: $interiorMarginSm; margin-bottom: $interiorMarginSm;
@@ -53,9 +53,10 @@ ul.tree {
left: $runningItemW + $interiorMargin; left: $runningItemW + $interiorMargin;
.type-icon { .type-icon {
@include absPosDefault(); @include absPosDefault(0, false);
@include txtShdwSubtle(0.6); @include txtShdwSubtle(0.6);
color: $colorItemTreeIcon; color: $colorItemTreeIcon;
right: auto; width: 1em;
.alert { .alert {
@include txtShdwSubtle(0.3); @include txtShdwSubtle(0.3);
background: $colorBodyBg; background: $colorBodyBg;
@@ -71,11 +72,21 @@ ul.tree {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.icon.l-link-icon {
@include txtShdwSubtle(1);
$d: 20px;
color: $colorIconLink;
position: absolute;
font-size: 0.5em;
right: -5px;
bottom: -8px;
z-index: 2;
}
} }
.title-label { .title-label {
@include absPosDefault(); @include absPosDefault();
display: block; display: block;
left: $runningItemW + ($interiorMargin); left: $runningItemW + ($interiorMargin * 2);
//right: $treeContextTriggerW + $interiorMargin; //right: $treeContextTriggerW + $interiorMargin;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

9
platform/commonUI/general/res/templates/label.html
View File

@@ -22,12 +22,11 @@
<span class="label s-label"> <span class="label s-label">
<span class='ui-symbol icon type-icon'> <span class='ui-symbol icon type-icon'>
{{type.getGlyph()}} {{type.getGlyph()}}
<span class='ui-symbol icon alert hidden'>!</span>
</span>
<!-- this will be toggled by a ng-show --> <!-- this will be toggled by a ng-show -->
<span class='ui-symbol icon indicator-icon'> <span class='ui-symbol icon l-link-icon'>
è &#xf4;
</span>
<span class='ui-symbol icon alert hidden'>!</span>
</span> </span>
<span class='title-label'> <span class='title-label'>
{{model.name}} {{model.name}}