alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] Slide menu

Browse Source 
Rouch menu using important to
overwrite splitter setting of
amounts. Also has default values
for now for all devices.
This commit is contained in:
Shivam Dave
2015-07-15 16:49:16 -07:00
parent ee35976c92
commit 4b5540830b
4 changed files with 99 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,12 +19,18 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div ng-controller="BrowseController"> <div ng-controller="BrowseController">
<div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeClass ? 'holder-show' : 'holder-hide'"> <div content="jquery-wrapper" class="abs holder-all browse-mode">
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs">
<mct-split-pane class='contents abs' anchor='left'> <!-- WRAPPER CLASS IS HERE-->
<div class='split-pane-component treeview pane browse-manage createtreebtns'> <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'" anchor='left'>
<mct-split-pane class='contents abs'>
<!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
<div class='split-pane-component treeview pane pane-special left'>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
@@ -34,16 +40,19 @@
</mct-representation> </mct-representation>
</div> </div>
</div> </div>
<mct-splitter class="mobile-hide"></mct-splitter> <mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane'>
<div class='holder abs hider-check' id='content-area'> <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
<div class='split-pane-component items pane pane-special right'>
<div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>
</div> <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos"
ng-click="treeSlide()">m</div>
</div>
</mct-split-pane> </mct-split-pane>
<div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos"
ng-click="treeSlide()">m</div>
</div> </div>
<mct-include key="'bottombar'"></mct-include> <mct-include key="'bottombar'"></mct-include>
</div> </div>

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

@@ -698,18 +698,18 @@ mct-container {
/* line 251, ../sass/user-environ/_layout.scss */ /* line 251, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 253, ../sass/user-environ/_layout.scss */ /* line 254, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 257, ../sass/user-environ/_layout.scss */ /* line 258, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 259, ../sass/user-environ/_layout.scss */ /* line 260, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 5px; } right: 5px; }
/* line 268, ../sass/user-environ/_layout.scss */ /* line 269, ../sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }
@@ -734,111 +734,77 @@ mct-container {
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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) { /* line 25, ../sass/mobile/_layout.scss */
/* line 26, ../sass/mobile/_layout.scss */ .browse-wrapper,
.holder-hide { .pane-special {
-moz-transition-duration: 0.2s; position: absolute;
-o-transition-duration: 0.2s; left: 0;
-webkit-transition-duration: 0.2s; top: 0;
transition-duration: 0.2s; right: 0;
left: -257px; } } left: 0;
@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) { white-space: nowrap;
/* line 26, ../sass/mobile/_layout.scss */ height: 100%; }
.holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -399.5px; } }
/* line 37, ../sass/mobile/_layout.scss */ /* line 36, ../sass/mobile/_layout.scss */
.holder-show { .browse-hidetree .pane-special.left {
-moz-transition-duration: 0.2s; display: none !important; }
-o-transition-duration: 0.2s; /* line 43, ../sass/mobile/_layout.scss */
-webkit-transition-duration: 0.2s; .browse-hidetree .pane-special.right {
transition-duration: 0.2s; } 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), 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) { left: 0px !important; }
/* line 37, ../sass/mobile/_layout.scss */
.holder-show {
left: 0px; } }
@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 37, ../sass/mobile/_layout.scss */
.holder-show {
left: 0px; } }
/* line 47, ../sass/mobile/_layout.scss */ /* line 51, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
display: block !important;
width: 300px !important;
right: auto !important; }
/* line 58, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 300px !important;
width: auto !important; }
/* line 68, ../sass/mobile/_layout.scss */
.button-pos { .button-pos {
position: absolute; position: absolute;
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; } transition-duration: 0.2s; }
@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 47, ../sass/mobile/_layout.scss */
.button-pos {
left: 257px; } }
@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 47, ../sass/mobile/_layout.scss */
.button-pos {
left: 399.5px; } }
/* line 58, ../sass/mobile/_layout.scss */ /* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; } position: relative; }
@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 58, ../sass/mobile/_layout.scss */
.object-header-mobile {
left: 25.7px; } }
@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 58, ../sass/mobile/_layout.scss */
.object-header-mobile {
left: 39.95px; } }
/* line 68, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
top: 5px; } top: 5px; }
@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) { @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 68, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 125%; } } font-size: 125%; } }
@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) { @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 68, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 175%; } } font-size: 175%; } }
@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 68, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
display: none; } } 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) { @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 81, ../sass/mobile/_layout.scss */ /* line 90, ../sass/mobile/_layout.scss */
.mobile-hide { .mobile-hide {
display: none; } } display: none; } }
@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) { @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 81, ../sass/mobile/_layout.scss */ /* line 90, ../sass/mobile/_layout.scss */
.mobile-hide { .mobile-hide {
display: none; } } 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) { @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 90, ../sass/mobile/_layout.scss */ /* line 99, ../sass/mobile/_layout.scss */
.phone-hide { .phone-hide {
display: none; } } 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 96, ../sass/mobile/_layout.scss */
.browse-manage {
width: 257px; } }
@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 96, ../sass/mobile/_layout.scss */
.browse-manage {
width: 399.5px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 96, ../sass/mobile/_layout.scss */
.browse-manage {
min-width: 150px;
max-width: 800px;
width: 25%; } }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@@ -20,49 +20,58 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
// style="min-width: 150px; max-width: 800px; width: 25%;" // NOTE: Added to adjust the browse folder left list view
// NOTE: Added to adjust the browse folder tree list view
.holder-hide { .browse-wrapper,
@include phone { .pane-special {
@include transition-duration(.2s); position: absolute;
left: (-1) * $phoneSlideMenuWidth; left: 0; top: 0;
} right: 0; left: 0;
@include tablet { white-space: nowrap;
@include transition-duration(.2s); height: 100%;
left: (-1) * $tabletSlideMenuWidth; // overflow: hidden;
}
} }
.holder-show { .browse-hidetree {
@include transition-duration(.2s); .pane-special.left {
@include phone { // background-color: #FFF;
left: 0px; // right: auto;
// width: 50px;
display: none !important;
} }
@include tablet {
left: 0px; .pane-special.right {
} // background-color: #325DE6;
width: auto !important;
left: 0px !important;
}
} }
.browse-showtree {
.pane-special.left {
display: block !important;
// background-color: #FFF;
width: 300px !important;
right: auto !important;
}
.pane-special.right {
// background-color: #325DE6;
left: 300px !important;
width: auto !important;
}
}
.button-pos { .button-pos {
position: absolute; position: absolute;
@include transition-duration(.2s); @include transition-duration(.2s);
@include phone {
left: $phoneSlideMenuWidth;
}
@include tablet {
left: $tabletSlideMenuWidth;
}
} }
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
@include phone {
left: $phoneSlideMenuWidth/10;
}
@include tablet {
left: $tabletSlideMenuWidth/10;
}
} }
.mobile-menu-icon { .mobile-menu-icon {
@@ -92,17 +101,3 @@
display: none; display: none;
} }
} }
.browse-manage {
@include phone {
width: $phoneSlideMenuWidth;
}
@include tablet {
width: $tabletSlideMenuWidth;
}
@include desktop {
min-width: 150px;
max-width: 800px;
width: 25%;
}
}

1
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -249,6 +249,7 @@
&.vertical { &.vertical {
// Slides left and right // Slides left and right
>.pane { >.pane {
// @include test();
margin-left: $interiorMargin; margin-left: $interiorMargin;
>.holder { >.holder {
left: 0; left: 0;