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

[Mobile] Clean Up

Browse Source 
Cleaned up scss files. Removed
repeated statements and added
comments. Also commented js files
like QueryService and InfoGesture.
This commit is contained in:
Shivam Dave 2015-07-22 10:25:21 -07:00
parent 827cb27f28
commit 926b3d075c
7 changed files with 79 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -754,7 +754,7 @@ mct-container {
width: 25%; } }
@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 50, ../sass/mobile/_layout.scss */
/* line 52, ../sass/mobile/_layout.scss */
.browse-hidetree .mobile-pane.left-menu {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
@ -780,7 +780,7 @@ mct-container {
overflow-y: hidden;
overflow-x: hidden; } }
@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 62, ../sass/mobile/_layout.scss */
/* line 66, ../sass/mobile/_layout.scss */
.browse-hidetree .mobile-pane.right-repr {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
@ -792,7 +792,7 @@ mct-container {
width: 100% !important; } }
@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 77, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
@ -816,23 +816,23 @@ mct-container {
display: block !important;
width: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 77, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
right: 19px !important; } }
@media 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) {
/* line 77, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
right: 66% !important; } }
@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) {
/* line 77, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
right: 500px !important; } }
@media 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 77, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
right: 78% !important; } }
@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 98, ../sass/mobile/_layout.scss */
/* line 108, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
@ -842,24 +842,24 @@ mct-container {
backface-visibility: hidden;
left: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 98, ../sass/mobile/_layout.scss */
/* line 108, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
width: 19px !important; } }
@media 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) {
/* line 98, ../sass/mobile/_layout.scss */
/* line 108, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
width: 66% !important; } }
@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) {
/* line 98, ../sass/mobile/_layout.scss */
/* line 108, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
width: 500px !important; } }
@media 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 98, ../sass/mobile/_layout.scss */
/* line 108, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
width: 78% !important; } }
@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 119, ../sass/mobile/_layout.scss */
/* line 131, ../sass/mobile/_layout.scss */
.button-pos {
position: absolute;
-moz-transition-duration: 0.35s;
@ -870,23 +870,23 @@ mct-container {
backface-visibility: hidden; } }
@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) {
/* line 129, ../sass/mobile/_layout.scss */
/* line 141, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 30px; } }
@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 129, ../sass/mobile/_layout.scss */
/* line 141, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 35px; } }
@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 141, ../sass/mobile/_layout.scss */
/* line 153, ../sass/mobile/_layout.scss */
.mobile-hide {
display: none; } }
@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) {
/* line 148, ../sass/mobile/_layout.scss */
/* line 160, ../sass/mobile/_layout.scss */
.phone-hide {
display: none; } }

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

@ -307,13 +307,7 @@ ul.tree {
* 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) {
/* line 22, ../sass/mobile/_tree.scss */
.test-tree-words {
width: 100%;
text-overflow: ellipsis; } }
@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 29, ../sass/mobile/_tree.scss */
/* line 24, ../sass/mobile/_tree.scss */
ul.tree {
margin: 0;
padding: 0; }
@ -322,27 +316,20 @@ ul.tree {
list-style-type: none;
margin: 0;
padding: 0; }
/* line 33, ../sass/mobile/_tree.scss */
/* line 29, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item {
margin-top: 3px; }
/* line 39, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label {
left: 3px; }
/* line 43, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .type-icon .alert {
right: auto;
left: 9px; }
/* line 48, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .title-label {
left: 20px; }
/* line 53, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .context-trigger {
right: 3px; }
/* line 57, ../sass/mobile/_tree.scss */
/* line 32, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .view-control {
position: absolute;
right: 5px;
font-size: 1.5em; }
/* line 66, ../sass/mobile/_tree.scss */
/* line 38, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label {
left: 3px; }
/* line 44, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .title-label {
right: 5px; }
/* line 53, ../sass/mobile/_tree.scss */
ul.tree ul.tree {
margin-left: 3px; } }

12
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -47,6 +47,8 @@
// classes used for the left menu and the
// right representation.
.browse-hidetree {
// Sets the left tree menu when the tree
// is hidden.
.mobile-pane.left-menu {
@include phoneandtablet {
@include slMenuTransitions;
@ -59,6 +61,8 @@
}
}
// Sets the right represenation when
// the tree is hidden.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
@ -74,6 +78,8 @@
// orientation combination, separate
// parameters are used)
.browse-showtree {
// Sets the left tree menu when the tree
// is shown.
.mobile-pane.left-menu {
@include phoneandtablet {
@include slMenuTransitions;
@ -82,6 +88,8 @@
display: block !important;
width: auto !important;
}
// On both phones and tablets, the amount of
// space allowed for the right pane is specified
@include phonePortrait {
right: $phoneRepSizePortrait !important;
}
@ -95,11 +103,15 @@
right: $tabletRepSizeLandscape !important;
}
}
// Sets the right represenation when
// the tree is shown.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
left: auto !important;
}
// On both phones and tablets, the width of
// the right pane is specified
@include phonePortrait {
width: $phoneRepSizePortrait !important;
}

47
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -19,50 +19,37 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.test-tree-words {
@include phoneandtablet {
width: 100%;
text-overflow: ellipsis;
}
}
ul.tree {
// Only applies to phones and tablets
@include phoneandtablet {
@include menuUlReset();
li {
span.tree-item {
$runningItemW: 0;
$customMargin: auto;
$runningItemW: $interiorMargin + $treeVCW;
// Adds some space to the top of each tree item
margin-top: $interiorMarginSm;
.label {
left: 3px;
.type-icon {
.alert {
right: auto;
left: 9px;
}
}
.title-label {
left: $runningItemW + ($interiorMargin);
}
}
.context-trigger {
right: $interiorMarginSm;
}
.view-control {
position: absolute;
right: 5px;
font-size: 1.5em;
$runningItemW: $interiorMargin + $treeVCW;
}
}
.label {
// Designates the starting left margin
// (indentation) of 'My Items'
left: 3px;
// Allows tree item name to stop prior
// to the arrow
.title-label {
right: 5px;
}
}
}
}
// Sets the margin on the left, which causes the
// running indentation after each folder is made
ul.tree {
margin-left: 3px;
}

2
platform/commonUI/general/res/templates/tree-node.html
View File

@ -22,7 +22,7 @@
<span ng-controller="ToggleController as toggle">
<span ng-controller="TreeNodeController as treeNode">
<span
class="tree-item menus-to-left test-tree-words"
class="tree-item menus-to-left"
ng-class="{selected: treeNode.isSelected()}"
>
<mct-representation

39
platform/commonUI/general/src/services/QueryService.js
View File

@ -25,37 +25,29 @@
* Module defining QueryService.
*/
var phoMaxWidth = 514,
phoMaxHeight = 740,
tabMinWidth = 515,
tabMaxWidth = 799,
tabMinHeight = 741,
tabMaxHeight = 1024,
compMinWidth = 800,
compMinHeight = 1025;
define(
[],
function () {
"use strict";
/**
* The url service handles calls for url paths
* using domain objects.
* The query service handles calls for browser and userAgent
* info using a comparison between the userAgent and key
* device names
*/
function QueryService($window) {
// Gets the UA name if it is one of the following.
// If it is not (a desktop for example) nothing is
// returned instead
function getDeviceUA() {
var ua = navigator.userAgent;
return ua.match(/iPad|iPhone|Android/i) ?
ua.match(/iPad|iPhone|Android/i) : "";
}
// Checks if gotten device is mobile,
// Mobile is defined as a phone or tablet
function isMobile() {
if (getDeviceUA()) {
return true;
@ -64,18 +56,27 @@ define(
}
}
// Returns the orientation of the device based on the
// device's window dimensions
function getOrientation(screenWidth, screenHeight) {
if ($window.screen.width > $window.screen.height) {
if ($window.outerWidth > $window.outerHeight) {
return "landscape";
} else if ($window.screen.width < $window.screen.height) {
} else if ($window.outerWidth < $window.outerHeight) {
return "portrait";
}
}
return {
/**
* Returns the orientation for the user's device
*/
getOrientation: getOrientation,
/**
* Returns the a boolean checking if the user is
* on a mobile or non-mobile device. (mobile: true,
* non-mobile: false)
*/
isMobile: isMobile
};
}

3
platform/commonUI/inspect/src/gestures/InfoGesture.js
View File

@ -76,7 +76,8 @@ define(
element.on('mousemove', trackPosition);
// Checks if you are on a mobile device, if the device is
// mobile, then hovering is not done.
// not mobile (queryService.isMobile() = false), then
// the pendingBubble and therefore hovering is allowed
if (!queryService.isMobile()) {
// Show the bubble, after a suitable delay (if mouse has
// left before this time is up, this will be canceled.)