ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-13 22:13:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] IN PROGRESS:

Browse Source 
open #74
Added name for "base" (unknown) type in core/bundle.json;
Fixes to grid-item .details element:
- ellipsize,
- type now displayed properly;
- number of items with correct plural syntax;
This commit is contained in:
Charles Hacskaylo 2015-08-25 14:17:34 -07:00
parent fd5a911d50
commit 07d0706cd1
5 changed files with 34 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

@ -39,11 +39,9 @@
<div class='bottom-bar bar abs'> <div class='bottom-bar bar abs'>
<div class='title'>{{model.name}}</div> <div class='title'>{{model.name}}</div>
<div class='details'> <div class='details'>
<span>{{type.getName()}}</span>
<span ng-show="model.composition !== undefined"> <span ng-show="model.composition !== undefined">
{{model.composition.length}} Items - {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
</span>
<span ng-show="model.composition == undefined">
{{model.name}}
</span> </span>
</div> </div>
</div> </div>

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

@ -294,8 +294,11 @@
color: #cccccc; } color: #cccccc; }
/* line 133, ../sass/items/_item.scss */ /* line 133, ../sass/items/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8em; } font-size: 0.8em; }
/* line 136, ../sass/items/_item.scss */ /* line 137, ../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%;
@ -332,16 +335,16 @@
/* line 175, ../sass/_mixins.scss */ /* line 175, ../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 141, ../sass/items/_item.scss */ /* line 142, ../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 142, ../sass/items/_item.scss */ /* line 143, ../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 143, ../sass/items/_item.scss */ /* line 144, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 145, ../sass/items/_item.scss */ /* line 146, ../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; }

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

@ -775,7 +775,7 @@ mct-container {
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 26, ../sass/mobile/_layout.scss */ /* line 30, ../sass/mobile/_layout.scss */
.browse-wrapper, .browse-wrapper,
.mobile-pane { .mobile-pane {
position: absolute; position: absolute;
@ -784,7 +784,7 @@ mct-container {
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 32, ../sass/mobile/_layout.scss */ /* line 36, ../sass/mobile/_layout.scss */
.mobile-pane.right-repr { .mobile-pane.right-repr {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
@ -794,7 +794,7 @@ mct-container {
backface-visibility: hidden; backface-visibility: hidden;
margin-left: 0 !important; } margin-left: 0 !important; }
/* line 38, ../sass/mobile/_layout.scss */ /* line 42, ../sass/mobile/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
.user-environ .editor { .user-environ .editor {
@ -803,37 +803,37 @@ mct-container {
right: 0; right: 0;
bottom: 25px; } bottom: 25px; }
/* line 44, ../sass/mobile/_layout.scss */ /* line 48, ../sass/mobile/_layout.scss */
.holder.l-mobile { .holder.l-mobile {
top: 10px !important; top: 10px !important;
right: 10px !important; right: 10px !important;
bottom: 10px !important; bottom: 10px !important;
left: 10px !important; } left: 10px !important; }
/* line 54, ../sass/mobile/_layout.scss */ /* line 58, ../sass/mobile/_layout.scss */
.browse-hidetree { .browse-hidetree {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 58, ../sass/mobile/_layout.scss */ /* line 62, ../sass/mobile/_layout.scss */
.browse-hidetree .mobile-pane.left { .browse-hidetree .mobile-pane.left {
opacity: 0; opacity: 0;
right: 100% !important; right: 100% !important;
width: auto !important; width: auto !important;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; } overflow-x: hidden; }
/* line 67, ../sass/mobile/_layout.scss */ /* line 71, ../sass/mobile/_layout.scss */
.browse-hidetree .mobile-pane.right-repr { .browse-hidetree .mobile-pane.right-repr {
left: 0 !important; } left: 0 !important; }
/* line 74, ../sass/mobile/_layout.scss */ /* line 78, ../sass/mobile/_layout.scss */
.browse-showtree { .browse-showtree {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 83, ../sass/mobile/_layout.scss */ /* line 87, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left { .browse-showtree .mobile-pane.left {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -856,44 +856,44 @@ mct-container {
display: block !important; display: block !important;
right: auto !important; right: auto !important;
width: 40% !important; } width: 40% !important; }
/* line 93, ../sass/mobile/_layout.scss */ /* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
left: 40% !important; } left: 40% !important; }
/* line 103, ../sass/mobile/_layout.scss */ /* line 107, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 110%; font-size: 110%;
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 10px; } left: 10px; }
/* line 110, ../sass/mobile/_layout.scss */ /* line 114, ../sass/mobile/_layout.scss */
.object-browse-bar { .object-browse-bar {
left: 30px !important; } left: 30px !important; }
/* line 113, ../sass/mobile/_layout.scss */ /* line 117, ../sass/mobile/_layout.scss */
.object-browse-bar .context-available { .object-browse-bar .context-available {
opacity: 1 !important; } opacity: 1 !important; }
/* line 116, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher { .object-browse-bar .view-switcher {
margin-right: 0 !important; } margin-right: 0 !important; }
/* line 121, ../sass/mobile/_layout.scss */ /* line 125, ../sass/mobile/_layout.scss */
.tree-holder { .tree-holder {
overflow-x: hidden !important; } overflow-x: hidden !important; }
/* line 125, ../sass/mobile/_layout.scss */ /* line 129, ../sass/mobile/_layout.scss */
.mobile-disable-select { .mobile-disable-select {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 130, ../sass/mobile/_layout.scss */ /* line 134, ../sass/mobile/_layout.scss */
.mobile-hide, .mobile-hide,
.mobile-hide-important { .mobile-hide-important {
display: none !important; } display: none !important; }
/* line 135, ../sass/mobile/_layout.scss */ /* line 139, ../sass/mobile/_layout.scss */
.mobile-back-hide { .mobile-back-hide {
pointer-events: none; pointer-events: none;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -910,7 +910,7 @@ mct-container {
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 0; } opacity: 0; }
/* line 140, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.mobile-back-unhide { .mobile-back-unhide {
pointer-events: all; pointer-events: all;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -927,15 +927,15 @@ mct-container {
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 1; } } opacity: 1; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 149, ../sass/mobile/_layout.scss */ /* line 153, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left { .browse-showtree .mobile-pane.left {
width: 90% !important; } width: 90% !important; }
/* line 152, ../sass/mobile/_layout.scss */ /* line 156, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
left: 0 !important; left: 0 !important;
transform: translateX(90%); } } transform: translateX(90%); } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 160, ../sass/mobile/_layout.scss */ /* line 164, ../sass/mobile/_layout.scss */
.desktop-hide { .desktop-hide {
display: none; } } display: none; } }
/***************************************************************************** /*****************************************************************************

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

@ -131,6 +131,7 @@
color: lighten($colorBodyFg, 20%); color: lighten($colorBodyFg, 20%);
} }
.details { .details {
@include ellipsize();
font-size: 0.8em; font-size: 0.8em;
} }
&.selected { &.selected {

1
platform/core/bundle.json
View File

@ -145,6 +145,7 @@
"glyph": "\u003f" "glyph": "\u003f"
}, },
{ {
"name": "Unknown Type",
"glyph": "\u003f" "glyph": "\u003f"
} }
], ],