[Mobile] Slide menu

Rouch menu using important to
overwrite splitter setting of
amounts. Also has default values
for now for all devices.

platform/commonUI/browse/res/templates/browse.html

@@ -19,12 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
 <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>
-        <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>
                     <div class='holder tree-holder abs'>
@@ -34,17 +40,20 @@
                         </mct-representation>
                     </div>
                 </div>
+                
                 <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>
                     </div>
-                </div>
-            </mct-split-pane>
                     <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>                        
                 </div>                     
+            </mct-split-pane>
+        </div>
         <mct-include key="'bottombar'"></mct-include>
     </div>
 </div>

platform/commonUI/general/res/css/theme-espresso.css

@@ -698,18 +698,18 @@ mct-container {
 /* line 251, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 253, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 257, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 259, ../sass/user-environ/_layout.scss */
+    /* line 260, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 268, ../sass/user-environ/_layout.scss */
+/* line 269, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -734,110 +734,76 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * 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 {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -webkit-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 {
   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 {
   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) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 81, ../sass/mobile/_layout.scss */
-  .mobile-hide {
-    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) {
-  /* line 81, ../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 90, ../sass/mobile/_layout.scss */
-  .phone-hide {
+  .mobile-hide {
+    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) {
+  /* line 90, ../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 96, ../sass/mobile/_layout.scss */
+  /* line 99, ../sass/mobile/_layout.scss */
-  .browse-manage {
+  .phone-hide {
-    width: 257px; } }
+    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) {
-  /* 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

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -20,49 +20,58 @@
  * 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;
+    white-space: nowrap;
+    height: 100%;
+//    overflow: hidden;
 }
-    @include tablet {
+
-        @include transition-duration(.2s);
+.browse-hidetree {
-        left: (-1) * $tabletSlideMenuWidth;
+    .pane-special.left {
+//        background-color: #FFF;
+//        right: auto;
+//        width: 50px;
+        display: none !important;
+    }
+
+    .pane-special.right {
+//        background-color: #325DE6;
+        width: auto !important;
+        left: 0px !important;
     }    
 }
 
-.holder-show {
+.browse-showtree {
-    @include transition-duration(.2s);
+    .pane-special.left {
-    @include phone {
+        display: block !important;
-        left: 0px;
+//        background-color: #FFF;
+        width: 300px !important;
+        right: auto !important;
     }
-    @include tablet {
+    
-        left: 0px;
+    .pane-special.right {
+//        background-color: #325DE6;
+        left: 300px !important;
+        width: auto !important;
     }
 }
 
+
+
+
 .button-pos {
     position: absolute;
     @include transition-duration(.2s);   
-    @include phone {        
-        left: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth;
-    }      
 }
 
 .object-header-mobile {
     position: relative;
-    @include phone {
-        left: $phoneSlideMenuWidth/10;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth/10;
-    }
 }
 
 .mobile-menu-icon {
@@ -92,17 +101,3 @@
         display: none;
     }
 }
-
-.browse-manage {
-    @include phone {
-        width: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        width: $tabletSlideMenuWidth;
-    }    
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: 25%;   
-    }   
-}

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

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