[Mobile] Transition/Create Fix

Fix the create button to work and
also transition well. Added transition mixin
to stay DRY.

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

@@ -31,16 +31,16 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                     <div class='createBtnPos'>
-                        <mct-representation key="'create-button'" mct-object="navigatedObject">
-                        </mct-representation>
-                    </div>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
+                     <div class='createBtnPos'>
+                        <mct-representation key="'create-button'" mct-object="navigatedObject">
+                        </mct-representation>
+                    </div>                    
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>

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

@@ -754,124 +754,130 @@ 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 46, ../sass/mobile/_layout.scss */
+  /* line 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.2s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: 0px !important;
     right: auto !important; }
-    /* line 52, ../sass/mobile/_layout.scss */
+    /* line 54, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
       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 59, ../sass/mobile/_layout.scss */
+  /* line 61, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.2s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: auto !important;
     left: 0px !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.2s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     display: block !important;
     right: auto !important; }
-    /* line 75, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .browse-showtree .pane-special.left .createBtnPos {
+      height: inherit;
       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) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    width: 40% !important; } }
+    width: 35% !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.2s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    left: 40% !important; } }
+    left: 35% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !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 114, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 122, ../sass/mobile/_layout.scss */
+/* line 125, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
-  -moz-transition-duration: 0.2s;
+  -moz-transition-duration: 0.5s;
-  -o-transition-duration: 0.2s;
+  -o-transition-duration: 0.5s;
-  -webkit-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.2s; }
+  transition-duration: 0.5s;
+  transition-timing-function: ease; }
 
 @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 127, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 134, ../sass/mobile/_layout.scss */
+/* line 137, ../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 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../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 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../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 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../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), 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 148, ../sass/mobile/_layout.scss */
+  /* line 151, ../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 154, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 

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

@@ -69,6 +69,6 @@ $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 /************************** DEVICE PARAMETERS FOR MENUS */
 $phoneMenuSizePortrait: 80%;
 $phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
+$tabletMenuSizePortrait: 35%;
 $tabletMenuSizeLandscape: 25%;
 $desktopMenuSize: 25%;

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

@@ -42,10 +42,12 @@
     }   
 }
 
+
+
 .browse-hidetree {
     .pane-special.left {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             width: 0px !important;
             right: auto !important;
             
@@ -58,7 +60,7 @@
 
     .pane-special.right {       
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             width: auto !important;
             left: 0px !important;
         }
@@ -68,14 +70,15 @@
 .browse-showtree {
     .pane-special.left {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             display: block !important;
             right: auto !important;
             
             .createBtnPos {
+                height: inherit;
                 overflow-y: hidden;
                 overflow-x: hidden;
-            }                
+            }         
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -93,8 +96,8 @@
     
     .pane-special.right {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
-            width: auto !important;   
+            width: auto !important;
         }
         @include phonePortrait {
             left: $phoneMenuSizePortrait !important;
@@ -121,7 +124,7 @@
 
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);
+    @include slMenuTransitions;
 }
 
 .object-header-mobile {

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

@@ -80,3 +80,8 @@
         @content
     }
 }
+
+@mixin slMenuTransitions {
+    @include transition-duration(.5s);
+    transition-timing-function: ease;
+}