CryptDrive usability improvements (new file in drive + context menu)

customize.dist/translations/messages.fr.js

@@ -142,12 +142,14 @@ define(function () {
     out.fm_templateName = "Modèles";
     out.fm_newButton = "Nouveau";
     out.fm_newFolder = "Nouveau dossier";
+    out.fm_newFile = "Nouveau document";
     out.fm_folder = "Dossier";
     out.fm_folderName = "Nom du dossier";
     out.fm_numberOfFolders = "# de dossiers";
     out.fm_numberOfFiles = "# de fichiers";
     out.fm_fileName = "Nom du fichier";
     out.fm_title = "Titre";
+    out.fm_type = "Type";
     out.fm_lastAccess = "Dernier accès";
     out.fm_creation = "Création";
     out.fm_forbidden = "Action interdite";

customize.dist/translations/messages.js

@@ -145,12 +145,14 @@ define(function () {
     out.fm_templateName = "Templates";
     out.fm_newButton = "New";
     out.fm_newFolder = "New folder";
+    out.fm_newFile = "New document";
     out.fm_folder = "Folder";
     out.fm_folderName = "Folder name";
     out.fm_numberOfFolders = "# of folders";
     out.fm_numberOfFiles = "# of files";
     out.fm_fileName = "File name";
     out.fm_title = "Title";
+    out.fm_type = "Type";
     out.fm_lastAccess = "Last access";
     out.fm_creation = "Creation";
     out.fm_forbidden = "Forbidden action";

www/common/cryptpad-common.js

@@ -706,6 +706,7 @@ define([
             common.initialName = sessionStorage[newPadNameKey];
             delete sessionStorage[newPadNameKey];
         }
+        // Deprecated
         if (sessionStorage[newPadPathKey]) {
             common.initialPath = sessionStorage[newPadPathKey];
             delete sessionStorage[newPadPathKey];

www/common/fileObject.js

@@ -17,6 +17,7 @@ define([
 
         var FILES_DATA = Cryptpad.storageKey;
         var NEW_FOLDER_NAME = Messages.fm_newFolder;
+        var NEW_FILE_NAME = Messages.fm_newFile;
 
         var DEBUG = config.DEBUG || false;
         var logging = function () {
@@ -579,6 +580,28 @@ define([
             });
         };
 
+        var pushNewFileData = function (href, title) {
+            files[FILES_DATA].push({
+                href: href,
+                title: title,
+                atime: new Date().toISOString(),
+                ctime: new Date().toISOString()
+            });
+        };
+        var createNewFile = exp.createNewFile = function (filePath, name, type, cb) {
+            var parentEl = findElement(files, filePath);
+            var fileName = getAvailableName(parentEl, name || NEW_FILE_NAME);
+            var href = '/' + type + '/#' + Cryptpad.createRandomHash();
+            parentEl[fileName] = href;
+
+            pushNewFileData(href, fileName);
+
+            var newPath = filePath.slice();
+            newPath.push(fileName);
+            cb({
+                newPath: newPath
+            });
+        };
 
         // Remove an element from the trash root
         var removeFromTrashArray = function (element, name) {

www/drive/file.css

@@ -229,6 +229,7 @@ span.fa-folder-open {
   width: 140px;
   text-align: center;
   vertical-align: top;
+  overflow: hidden;
 }
 #content div.grid li .name {
   width: 100%;

www/drive/file.less

@@ -274,6 +274,7 @@ span {
             width: 140px;
             text-align: center;
             vertical-align: top;
+            overflow: hidden;
 
             .name {
                 width: 100%;

www/drive/inner.html

@@ -39,6 +39,7 @@
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
                 <li><a tabindex="-1" href="#" class="open dropdown-item" data-localization="fc_open">Open</a></li>
                 <li><a tabindex="-1" href="#" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" href="#" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li>
             </ul>
         </div>
         <div id="trashTreeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">

www/drive/main.js

@@ -268,7 +268,10 @@ define([
             return ret;
         };
 
-        var openFile = function (fileEl) {
+        var openFile = function (fileEl, name) {
+            if (name) {
+                sessionStorage[Cryptpad.newPadNameKey] = name;
+            }
             window.open(fileEl);
         };
 
@@ -738,7 +741,7 @@ define([
                     return;
                 }
                 if (isTrash) { return; }
-                openFile(root[key]);
+                openFile(root[key], key);
             });
             $element.addClass(liClass);
             $element.data('path', newPath);
@@ -896,25 +899,9 @@ define([
             return $block;
         };
 
-        var createPadFromRootHandler = function (e) {
-            var type = $(this).data('type');
-            if (!type) {
-                throw new Error("Unable to get the pad type...");
-            }
-            var onNamed = function (name) {
-                if (!name) { return; }
-                // TODO
-                var path = '/#?name=' + encodeURIComponent(name) + '&path=' + encodeURIComponent(currentPath);
-                sessionStorage[Cryptpad.newPadNameKey] = name;
-                sessionStorage[Cryptpad.newPadPathKey] = currentPath;
-                window.open('/' + type + '/');
-            };
-            Cryptpad.prompt(Messages.fm_nameFile, Cryptpad.getDefaultName({type: type}), onNamed);
-        };
         var createNewButton = function (isInRoot) {
             if (!APP.editable) { return; }
 
-
             // Create dropdown
             var options = [];
             if (isInRoot) {
@@ -954,14 +941,18 @@ define([
 
             // Handlers
             if (isInRoot) {
-                $block.find('a.newFolder').click(function () {
                 var onCreated = function (info) {
                     module.newFolder = info.newPath;
                     refresh();
                 };
+                $block.find('a.newFolder').click(function () {
                     filesOp.createNewFolder(currentPath, null, onCreated);
                 });
-                $block.find('a.newdoc').click(createPadFromRootHandler);
+                $block.find('a.newdoc').click(function (e) {
+                    var type = $(this).attr('data-type') || 'pad';
+                    var name = Cryptpad.getDefaultName({type: type});
+                    filesOp.createNewFile(currentPath, name, type, onCreated);
+                });
             }
 
             return $block;
@@ -1058,7 +1049,7 @@ define([
             var $fhIcon = $('<span>', {'class': 'icon'});
             var $fhName = $('<span>', {'class': 'name filename clickable'}).text(Messages.fm_fileName).click(onSortByClick);
             var $fhTitle = $('<span>', {'class': 'title clickable'}).text(Messages.fm_title).click(onSortByClick);
-            var $fhType = $('<span>', {'class': 'type clickable'}).text(Messages.table_type).click(onSortByClick);
+            var $fhType = $('<span>', {'class': 'type clickable'}).text(Messages.fm_type).click(onSortByClick);
             var $fhAdate = $('<span>', {'class': 'atime clickable'}).text(Messages.fm_lastAccess).click(onSortByClick);
             var $fhCdate = $('<span>', {'class': 'ctime clickable'}).text(Messages.fm_creation).click(onSortByClick);
             // If displayTitle is false, it means the "name" is the title, so do not display the "name" header
@@ -1410,6 +1401,7 @@ define([
                     var element = filesOp.findElement(files, path);
                     if (!filesOp.isFile(element)) { return; }
                     var data = filesOp.getFileData(element);
+                    if (!data) { return; }
                     $el.find('.title').attr('title', data.title).text(data.title);
                     $el.find('.atime').attr('title', getDate(data.atime)).text(getDate(data.atime));
                     $el.find('.ctime').attr('title', getDate(data.ctime)).text(getDate(data.ctime));
@@ -1652,23 +1644,26 @@ define([
                 var roUrl = getReadOnlyUrl(el);
                 openFile(roUrl);
             }
+            else if ($(this).hasClass('delete')) {
+                moveElements([path], [TRASH], false, refresh);
+            }
             module.hideMenu();
         });
 
         $contentContextMenu.on('click', 'a', function (e) {
             e.stopPropagation();
             var path = $(this).data('path');
-            if ($(this).hasClass("newfolder")) {
             var onCreated = function (info) {
                 module.newFolder = info.newPath;
                 refresh();
             };
+            if ($(this).hasClass("newfolder")) {
                 filesOp.createNewFolder(path, null, onCreated);
             }
             else if ($(this).hasClass("newdoc")) {
                 var type = $(this).data('type') || 'pad';
-                createPadFromRootHandler.apply(this);
+                var name = Cryptpad.getDefaultName({type: type});
-                e.preventDefault();
+                filesOp.createNewFile(path, name, type, onCreated);
             }
             module.hideMenu();
         });

www/pad/main.js

@@ -357,7 +357,7 @@ define([
                 };
                 if (!initializing) {
                     hjson[3].metadata.title = document.title;
-                } else if (Cryptpad.initialName) {
+                } else if (Cryptpad.initialName && !hjson[3].metadata.title) {
                     hjson[3].metadata.title = Cryptpad.initialName;
                 }
                 return stringify(hjson);

www/poll/main.js

@@ -568,6 +568,7 @@ define([
             APP.proxy.info.defaultTitle = defaultName;
         }
         if (Cryptpad.initialName && !APP.proxy.info.title) {
+            APP.proxy.info.title = Cryptpad.initialName;
             updateTitle(Cryptpad.initialName);
         } else {
             updateTitle(APP.proxy.info.title || defaultName);