[Mobile] Grid List/Gestures

Context menu only shown with contextmenu
click on desktops (non-mobile devices). Also
edited items list in a folder's representation
to show the icon on the left side, with text
centered horizontally (only mobile).

platform/commonUI/general/res/css/items.css

@@ -355,18 +355,42 @@
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
-    height: 50px; } }
+    height: 50px; }
+    /* line 38, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      line-height: 40px;
+      text-align: left; }
+    /* line 46, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: none; }
+    /* line 53, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-align: center; }
+    /* line 57, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .details {
+      text-align: center; } }
 @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 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
-    height: 100px; } }
+    height: 66.66667px; }
+    /* line 69, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      line-height: 50px;
+      text-align: left; }
+    /* line 77, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: none; }
+    /* line 84, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-align: center; }
+    /* line 88, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .details {
+      text-align: center; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@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 52, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .icon {
-    display: none; } }

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

@@ -33,13 +33,61 @@
                 $dHei: $ueBrowseGridItemLg/4;
                 width: $dWid;
                 height: $dHei;
+                
+                .item-main {
+                    .item-type {
+    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+    //                    display: none;
+                        font-size: 30px;
+                        line-height: $ueBrowseGridItemLg/5;
+                        text-align: left;
+
+                    }
+                    .item-open {
+    //                     NOTE: [Mobile] Icon for the open item inside folder
+                       display: none;
+
+                    }
+                }
+
+                .title {
+                    text-align: center;
+                }
+
+                .details {
+                    text-align: center;
+                }                
             }
             
             @include tablet {
                 $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/2;
+                $dHei: $ueBrowseGridItemLg/3;
                 width: $dWid;
                 height: $dHei;
+                
+                .item-main {
+                    .item-type {
+    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+    //                    display: none;
+                        font-size: 30px;
+                        line-height: $ueBrowseGridItemLg/4;
+                        text-align: left;
+
+                    }
+                    .item-open {
+    //                     NOTE: [Mobile] Icon for the open item inside folder
+                        display: none;
+
+                    }
+                }
+
+                .title {
+                    text-align: center;
+                }
+
+                .details {
+                    text-align: center;
+                }
             }
             
             @include desktop {
@@ -48,12 +96,6 @@
                 width: $dWid;
                 height: $dHei; 
             }
-            
-            .icon {
-                @include phoneandtablet {
-                    display: none;
-                }
-            }
         }
     }
 }

platform/representation/bundle.json

@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ],
         "components": [

platform/representation/src/gestures/ContextMenuGesture.js

@@ -50,7 +50,7 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($compile, $document, $window, $rootScope, element, domainObject) {
+        function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) {
             function showMenu(event) {
                 var winDim = [$window.innerWidth, $window.innerHeight],
                     eventCoors = [event.pageX, event.pageY],
@@ -102,8 +102,11 @@ define(
                 event.preventDefault();
             }
 
-            // When context menu event occurs, show object actions instead
+            // Iff the user is not on a mobile device, then when 
-            element.on('contextmenu', showMenu);
+            // the context menu event occurs, show object actions instead
+            if (!queryService.isMobile(navigator.userAgent)) {
+                element.on('contextmenu', showMenu);
+            }
 
             return {
                 /**