ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-31 06:31:04 +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"> <span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex"> <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-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"-->
<!--ng-click="ngModel.leftPane = !ngModel.leftPane">--> <!--ng-click="ngModel.leftPane = !ngModel.leftPane">-->
<!--</div>--> <!--</div>-->

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

@ -35,7 +35,7 @@
<!-- PANE TREE--> <!-- PANE TREE-->
<div class='split-pane-component treeview pane left' <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"> <div class="holder abs l-mobile">
<mct-representation key="'create-button'" <mct-representation key="'create-button'"
@ -72,7 +72,7 @@
<!-- PANE RIGHT--> <!-- PANE RIGHT-->
<div class='split-pane-component items secondary-split pane right slide' <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'--> <!--<mct-split-pane class='contents abs'-->
<!--anchor='right'>--> <!--anchor='right'>-->

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

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

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

@ -55,54 +55,94 @@
left: $bodyMargin !important; left: $bodyMargin !important;
} }
// When the tree is hidden, these are the .pane.left {
// classes used for the left menu and the
// right representation.
.browse-hidetree {
@include user-select(none); @include user-select(none);
// Sets the left tree menu when the tree &.inactive {
// is hidden.
.pane.left.treeview {
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;
} }
// Sets the right represenation when
// the tree is hidden. &.active {
.pane.right-repr { @include trans-prop-nice(opacity, .4s);
left: 0 !important; @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. .split-pane-component.secondary-split.pane.right {
.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; // Sliding transition for open/close of left pane
//transform: translateX($proporMenuWithView); &.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 { .mobile-menu-icon {
font-size: 110%; font-size: 110%;
@ -153,22 +193,39 @@
} }
@include phonePortrait { @include phonePortrait {
.browse-showtree { .pane.left {
.pane.left.treeview { &.active {
width: $proporMenuOnly !important; width: $proporMenuOnly !important;
}
.pane.right-repr {
left: 0 !important;
@include webkitProp(transform, translateX($proporMenuOnly));
#content-area {
opacity: 0;
}
}
} }
}
.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 { @include desktop {
.desktop-hide { .desktop-hide {
display: none; display: none;
} }
} }