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

[Mobile] Merge

Browse Source 
Moved some of css 'sanding' over
to merged in slide menu. Also adjusted with
to be same as old show/hide tree dimensions.
This commit is contained in:
Shivam Dave 2015-08-28 12:48:41 -07:00
parent 43523046da
commit 2b7a4d40eb
4 changed files with 140 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -21,7 +21,7 @@
-->
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex">
<!--<div class="pane-tabs left mobile-hide"-->
<!--<div class="pane-tabs left"-->
<!--ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"-->
<!--ng-click="ngModel.leftPane = !ngModel.leftPane">-->
<!--</div>-->

4
platform/commonUI/browse/res/templates/browse.html
View File

@ -35,7 +35,7 @@
<!-- PANE TREE-->
<div class='split-pane-component treeview pane left'
ng-class='{inactive: !paneModel.leftPane}'>
ng-class='{inactive: !paneModel.leftPane, active: paneModel.leftPane}'>
<div class="holder abs l-mobile">
<mct-representation key="'create-button'"
@ -72,7 +72,7 @@
<!-- PANE RIGHT-->
<div class='split-pane-component items secondary-split pane right slide'
ng-class='{leftInactive: !paneModel.leftPane}'>
ng-class='{leftInactive: !paneModel.leftPane, leftActive: paneModel.leftPane}'>
<!--<mct-split-pane class='contents abs'-->
<!--anchor='right'>-->

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

@ -855,31 +855,21 @@ mct-container {
bottom: 10px !important;
left: 10px !important; }
/* line 61, ../sass/mobile/_layout.scss */
.browse-hidetree {
/* line 58, ../sass/mobile/_layout.scss */
.pane.left {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 65, ../sass/mobile/_layout.scss */
.browse-hidetree .pane.left.treeview {
/* line 60, ../sass/mobile/_layout.scss */
.pane.left.inactive {
opacity: 0;
right: 100% !important;
width: auto !important;
overflow-y: hidden;
overflow-x: hidden; }
/* line 74, ../sass/mobile/_layout.scss */
.browse-hidetree .pane.right-repr {
left: 0 !important; }
/* line 79, ../sass/mobile/_layout.scss */
.browse-showtree {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 88, ../sass/mobile/_layout.scss */
.browse-showtree .pane.left.treeview {
/* line 68, ../sass/mobile/_layout.scss */
.pane.left.active {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
@ -901,47 +891,51 @@ mct-container {
display: block !important;
right: auto !important;
width: 40% !important; }
/* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr {
left: 40% !important; }
/* line 80, ../sass/mobile/_layout.scss */
.pane.left .create-btn.major.inactivePane {
display: none; }
/* line 107, ../sass/mobile/_layout.scss */
/* line 89, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive {
left: 40% !important; }
/* line 147, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 110%;
position: absolute;
top: 12px;
left: 10px; }
/* line 114, ../sass/mobile/_layout.scss */
/* line 154, ../sass/mobile/_layout.scss */
.object-browse-bar {
left: 30px !important; }
/* line 117, ../sass/mobile/_layout.scss */
/* line 157, ../sass/mobile/_layout.scss */
.object-browse-bar .context-available {
opacity: 1 !important; }
/* line 120, ../sass/mobile/_layout.scss */
/* line 160, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher {
margin-right: 0 !important; }
/* line 122, ../sass/mobile/_layout.scss */
/* line 162, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher .name {
display: none; }
/* line 129, ../sass/mobile/_layout.scss */
/* line 169, ../sass/mobile/_layout.scss */
.tree-holder {
overflow-x: hidden !important; }
/* line 133, ../sass/mobile/_layout.scss */
/* line 173, ../sass/mobile/_layout.scss */
.mobile-disable-select {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 138, ../sass/mobile/_layout.scss */
/* line 178, ../sass/mobile/_layout.scss */
.mobile-hide,
.mobile-hide-important {
display: none !important; }
/* line 143, ../sass/mobile/_layout.scss */
/* line 183, ../sass/mobile/_layout.scss */
.mobile-back-hide {
pointer-events: none;
-moz-transition-property: opacity;
@ -958,7 +952,7 @@ mct-container {
transition-timing-function: ease-in-out;
opacity: 0; }
/* line 148, ../sass/mobile/_layout.scss */
/* line 188, ../sass/mobile/_layout.scss */
.mobile-back-unhide {
pointer-events: all;
-moz-transition-property: opacity;
@ -975,19 +969,20 @@ mct-container {
transition-timing-function: ease-in-out;
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) {
/* line 157, ../sass/mobile/_layout.scss */
.browse-showtree .pane.left.treeview {
/* line 197, ../sass/mobile/_layout.scss */
.pane.left.active {
width: 90% !important; }
/* line 160, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr {
/* line 204, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive {
left: 0 !important;
transform: translateX(90%);
-webkit-transform: translateX(90%); }
/* line 163, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr #content-area {
/* line 207, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive #content-area {
opacity: 0; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 171, ../sass/mobile/_layout.scss */
/* line 228, ../sass/mobile/_layout.scss */
.desktop-hide {
display: none; } }
/*****************************************************************************

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

@ -55,54 +55,94 @@
left: $bodyMargin !important;
}
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.browse-hidetree {
.pane.left {
@include user-select(none);
// Sets the left tree menu when the tree
// is hidden.
.pane.left.treeview {
&.inactive {
opacity: 0;
right: 100% !important;
width: auto !important;
overflow-y: hidden;
overflow-x: hidden;
}
// Sets the right represenation when
// the tree is hidden.
.pane.right-repr {
left: 0 !important;
&.active {
@include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1;
display: block !important;
//width: auto !important; // CH CO
right: auto !important;
width: $proporMenuWithView !important;
}
// When the pane is closed, hide the create button
.create-btn.major {
&.inactivePane {
display: none;
}
}
}
.browse-showtree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include user-select(none);
// Sets the left tree menu when the tree is shown.
.pane.left.treeview {
@include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1;
display: block !important;
//width: auto !important; // CH CO
right: auto !important;
width: $proporMenuWithView !important;
}
// Sets the right representation when the tree is shown.
.pane.right-repr {
left: $proporMenuWithView !important;
//width: auto !important;
.split-pane-component.secondary-split.pane.right {
//left: 0 !important;
//transform: translateX($proporMenuWithView);
}
}
// Sliding transition for open/close of left pane
&.leftActive {
left: $proporMenuWithView !important;
//width: auto !important;
//left: 0 !important;
//transform: translateX($proporMenuWithView);
}
}
//// When the tree is hidden, these are the
//// classes used for the left menu and the
//// right representation.
//.browse-hidetree {
// @include user-select(none);
// // Sets the left tree menu when the tree
// // is hidden.
// .pane.left.treeview {
// opacity: 0;
// right: 100% !important;
// width: auto !important;
// overflow-y: hidden;
// overflow-x: hidden;
// }
// // Sets the right represenation when
// // the tree is hidden.
// .pane.right-repr {
// left: 0 !important;
// }
//}
//.browse-showtree {
// // NOTE: DISABLED SELECTION
// // Selection disabled in both panes
// // causing cut/copy/paste menu to
// // not appear. Should me moved in
// // future to properly work
// @include user-select(none);
//
// // Sets the left tree menu when the tree is shown.
// .pane.left.treeview {
// @include trans-prop-nice(opacity, .4s);
// @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
// opacity: 1;
// display: block !important;
// //width: auto !important; // CH CO
// right: auto !important;
// width: $proporMenuWithView !important;
// }
// // Sets the right representation when the tree is shown.
// .pane.right-repr {
// left: $proporMenuWithView !important;
// //width: auto !important;
//
// //left: 0 !important;
// //transform: translateX($proporMenuWithView);
// }
//}
.mobile-menu-icon {
font-size: 110%;
@ -153,22 +193,39 @@
}
@include phonePortrait {
.browse-showtree {
.pane.left.treeview {
width: $proporMenuOnly !important;
}
.pane.right-repr {
left: 0 !important;
@include webkitProp(transform, translateX($proporMenuOnly));
#content-area {
opacity: 0;
}
}
.pane.left {
&.active {
width: $proporMenuOnly !important;
}
}
.split-pane-component.secondary-split.pane.right {
// Sliding transition for open/close of left pane
&.leftActive {
left: 0 !important;
@include webkitProp(transform, translateX($proporMenuOnly));
#content-area {
opacity: 0;
}
}
}
//.browse-showtree {
// .pane.left.treeview {
// width: $proporMenuOnly !important;
// }
// .pane.right-repr {
// left: 0 !important;
// @include webkitProp(transform, translateX($proporMenuOnly));
// #content-area {
// opacity: 0;
// }
// }
//}
}
@include desktop {
.desktop-hide {
display: none;
}
}
}