[Mobile] Create Menu

Create menu text has ellipsis
attribute now, so if text is cut off
it will have a '...' appended to it.
Also added comments to mixins.

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

@@ -37,10 +37,8 @@
                                             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/browse/res/templates/create/create-button.html

@@ -23,7 +23,7 @@
     <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
 	    Create
     </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>

platform/commonUI/browse/res/templates/create/create-menu.html

@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items pane-special left">
+    <div class="pane left menu-items mobile-super-menu">
         <ul>
 
             <li ng-repeat="createAction in createActions">
-                <a
+                <a class="mobile-super-menu-text"
                    ng-click="createAction.perform()"
                    ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                    ng-mouseleave="representation.activeMetadata = undefined">
@@ -37,7 +37,7 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description">
+    <div class="pane right menu-item-description mobile-right-create">
         <div class="desc-area ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>

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

@@ -762,13 +762,11 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     width: 0px !important;
-    right: auto !important; }
+    right: auto !important;
-    /* line 54, ../sass/mobile/_layout.scss */
+    overflow-y: hidden;
-    .browse-hidetree .pane-special.left .createBtnPos {
+    overflow-x: hidden; } }
-      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 61, ../sass/mobile/_layout.scss */
+  /* line 58, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -779,7 +777,7 @@ mct-container {
     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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -787,30 +785,27 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
-    right: auto !important; }
+    right: auto !important;
-    /* line 77, ../sass/mobile/_layout.scss */
+    overflow-y: hidden;
-    .browse-showtree .pane-special.left .createBtnPos {
+    overflow-x: hidden; } }
-      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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -819,29 +814,29 @@ mct-container {
     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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../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 116, ../sass/mobile/_layout.scss */
+  /* line 109, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     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 124, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -851,40 +846,50 @@ mct-container {
     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 131, ../sass/mobile/_layout.scss */
+  /* line 124, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 138, ../sass/mobile/_layout.scss */
+/* line 131, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   display: inline-block; }
   @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 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../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 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../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 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../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 152, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
+  .mobile-super-menu {
+    width: 100% !important; } }
+
+/* line 150, ../sass/mobile/_layout.scss */
+.mobile-super-menu-text {
+  overflow-x: hidden !important;
+  text-overflow: ellipsis !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 155, ../sass/mobile/_layout.scss */
+  .mobile-right-create {
+    width: 0px !important;
+    padding: 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 162, ../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), 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 158, ../sass/mobile/_layout.scss */
-  .mobile-text-hide {
-    width: 0px;
-    overflow: 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) {
-  /* line 165, ../sass/mobile/_layout.scss */
+  /* line 168, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 

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

@@ -50,11 +50,8 @@
             @include slMenuTransitions;
             width: 0px !important;
             right: auto !important;
-            
+            overflow-y: hidden;
-            .createBtnPos {
+            overflow-x: hidden;       
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }            
         }
     }
 
@@ -73,12 +70,8 @@
             @include slMenuTransitions;
             display: block !important;
             right: auto !important;
-            
+            overflow-y: hidden;
-            .createBtnPos {
+            overflow-x: hidden;
-                height: inherit;
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -148,6 +141,23 @@
     }       
 }
 
+.mobile-super-menu {
+    @include phoneandtablet {
+        width: 100% !important;
+    }
+}
+
+.mobile-super-menu-text {
+    overflow-x: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.mobile-right-create {
+    @include phoneandtablet {
+        width: 0px !important;
+        padding: 0px !important;
+    }
+}
 
 .mobile-hide {
     @include phoneandtablet {
@@ -155,13 +165,6 @@
     }
 }
 
-.mobile-text-hide {
-    @include phoneandtablet {
-        width: 0px;
-        overflow:hidden;
-    }
-}
-
 .phone-hide {
     @include phone {
         display: none;