diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6979a0df40..4ea71cfdf8 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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; } } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 2dd23415b9..9d2ee8c87d 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -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; } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 667e2949c4..e2699b62c6 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -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; } diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index c50d9f71d1..c0806a806c 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -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; } diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 03b6808dca..6f791cfa75 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -22,7 +22,7 @@ $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 }; } diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js index c40a2baac2..67ff6cd4a5 100644 --- a/platform/commonUI/inspect/src/gestures/InfoGesture.js +++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js @@ -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.)