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

[Mobile] Grid List/Gestures

Browse Source 
Context menu only shown with contextmenu
click on desktops (non-mobile devices). Also
edited items list in a folder's representation
to show the icon on the left side, with text
centered horizontally (only mobile).
This commit is contained in:
Shivam Dave 2015-07-23 16:47:57 -07:00
parent 7993e4c03f
commit a89f9eed42
4 changed files with 86 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -355,18 +355,42 @@
/* line 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
width: 100%;
height: 50px; } }
height: 50px; }
/* line 38, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
font-size: 30px;
line-height: 40px;
text-align: left; }
/* line 46, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
display: none; }
/* line 53, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title {
text-align: center; }
/* line 57, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details {
text-align: center; } }
@media 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 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
width: 100%;
height: 100px; } }
height: 66.66667px; }
/* line 69, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type {
font-size: 30px;
line-height: 50px;
text-align: left; }
/* line 77, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open {
display: none; }
/* line 84, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title {
text-align: center; }
/* line 88, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details {
text-align: center; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
width: 200px;
height: 200px; } }
@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 52, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .icon {
display: none; } }

56
platform/commonUI/general/res/sass/mobile/_item.scss
View File

@ -33,13 +33,61 @@
$dHei: $ueBrowseGridItemLg/4;
width: $dWid;
height: $dHei;
.item-main {
.item-type {
// NOTE: [Mobile] Icon for the list/grid item inside folder
// display: none;
font-size: 30px;
line-height: $ueBrowseGridItemLg/5;
text-align: left;
}
.item-open {
// NOTE: [Mobile] Icon for the open item inside folder
display: none;
}
}
.title {
text-align: center;
}
.details {
text-align: center;
}
}
@include tablet {
$dWid: 100%;
$dHei: $ueBrowseGridItemLg/2;
$dHei: $ueBrowseGridItemLg/3;
width: $dWid;
height: $dHei;
.item-main {
.item-type {
// NOTE: [Mobile] Icon for the list/grid item inside folder
// display: none;
font-size: 30px;
line-height: $ueBrowseGridItemLg/4;
text-align: left;
}
.item-open {
// NOTE: [Mobile] Icon for the open item inside folder
display: none;
}
}
.title {
text-align: center;
}
.details {
text-align: center;
}
}
@include desktop {
@ -48,12 +96,6 @@
width: $dWid;
height: $dHei;
}
.icon {
@include phoneandtablet {
display: none;
}
}
}
}
}

2
platform/representation/bundle.json
View File

@ -26,7 +26,7 @@
{
"key": "menu",
"implementation": "gestures/ContextMenuGesture.js",
"depends": [ "$compile", "$document", "$window", "$rootScope" ]
"depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
}
],
"components": [

9
platform/representation/src/gestures/ContextMenuGesture.js
View File

@ -50,7 +50,7 @@ define(
* @param {DomainObject} domainObject the object on which actions
* in the context menu will be performed
*/
function ContextMenuGesture($compile, $document, $window, $rootScope, element, domainObject) {
function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) {
function showMenu(event) {
var winDim = [$window.innerWidth, $window.innerHeight],
eventCoors = [event.pageX, event.pageY],
@ -102,8 +102,11 @@ define(
event.preventDefault();
}
// When context menu event occurs, show object actions instead
element.on('contextmenu', showMenu);
// Iff the user is not on a mobile device, then when
// the context menu event occurs, show object actions instead
if (!queryService.isMobile(navigator.userAgent)) {
element.on('contextmenu', showMenu);
}
return {
/**