Merge branch 'ghost' into staging

customize.dist/src/less2/include/drive.less

@@ -553,6 +553,21 @@
         .cp-app-drive-element {
             .cp-app-drive-element-truncated { display: none; }
         }
+
+        .cp-app-drive-new-ghost {
+            cursor: pointer;
+            opacity: 0.5;
+            padding: 0;
+            align-items: center;
+            justify-content: center;
+            display: inline-flex;
+            &:hover {
+                opacity: 0.7;
+            }
+            .fa, .cptools {
+                cursor: pointer;
+            }
+        }
         div.cp-app-drive-content-grid {
             padding: 1em;
             ul {
@@ -600,27 +615,17 @@
                     }
                 }
             }
-            .cp-app-drive-element-list {
-                display: none;
-            }
             .cp-app-drive-new-ghost {
-                cursor: pointer;
-                opacity: 0.5;
-                padding: 0;
                 flex-flow: column;
-                align-items: center;
-                justify-content: center;
-                display: inline-flex;
-                &:hover {
-                    opacity: 0.7;
-                }
                 .fa, .cptools {
-                    cursor: pointer;
                     font-size: 90px;
                     margin-top: 5px;
                     margin-bottom: 0;
                 }
             }
+            .cp-app-drive-element-list {
+                display: none;
+            }
         }
 
         .cp-app-drive-content-list {
@@ -628,6 +633,10 @@
                 display: none;
             }
             // Make it act as a table!
+            .cp-app-drive-new-ghost {
+                padding: 0 5px;
+                margin-top: 20px;
+            }
             padding-left: 10px;
             ul {
                 width: 100%;

www/common/drive-ui.js

@@ -3034,7 +3034,7 @@ define([
             if (APP.$content.data('readOnlyFolder') || !APP.editable) { return; }
             var isInRoot = currentPath[0] === ROOT;
             var $element = $('<li>', {
-                'class': 'cp-app-drive-element-row cp-app-drive-element-grid cp-app-drive-new-ghost'
+                'class': 'cp-app-drive-element-row cp-app-drive-new-ghost'
             }).prepend($addIcon.clone()).appendTo($list);
             $element.append($('<span>', {'class': 'cp-app-drive-element-name'})
                 .text(Messages.fm_newFile));
@@ -3151,7 +3151,10 @@ define([
                 return;
             }
             var allfiles = files[FILES_DATA];
-            if (allfiles.length === 0) { return; }
+            if (Object.keys(allfiles || {}).length === 0) {
+                createGhostIcon($container);
+                return;
+            }
             var $fileHeader = getFileListHeader(true);
             $container.append($fileHeader);
             var keys = manager.getFiles([FILES_DATA]);