From f612f3ad68bb393dde02680ba3fb6e2f4e5c38db Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 6 Jul 2020 11:38:02 +0200
Subject: [PATCH] Add a '+ new' ghost icon in list mode and in anon drive

---
 customize.dist/src/less2/include/drive.less | 35 +++++++++++++--------
 www/common/drive-ui.js                      |  7 +++--
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index e1790787f..1266f3c61 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -552,6 +552,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 {
@@ -598,27 +613,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 {
@@ -626,6 +631,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%;
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index 0d3e49169..de4568179 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -3031,7 +3031,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));
@@ -3148,7 +3148,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]);