Ability to add files from the drive toolbar

Fix CSS issues with the different toolbars
Translate the backup URL button alert

customize.dist/fsStore.js

@@ -155,11 +155,11 @@ define([
         exp.proxy = rt.proxy;
         rt.proxy.on('create', function (info) {
             exp.info = info;
-            var realtime = info.realtime;
             if (!Cryptpad.getUserHash()) {
                 localStorage.FS_hash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
             }
         }).on('ready', function () {
+        if (ready) { return; }
             if (!rt.proxy[Cryptpad.storageKey] || !Cryptpad.isArray(rt.proxy[Cryptpad.storageKey])) {
                 var oldStore = Cryptpad.getStore(true);
                 oldStore.get(Cryptpad.storageKey, function (err, s) {

customize.dist/src/less/toolbar.less

@@ -28,7 +28,6 @@
 
     font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
     color: #000;
-    display: inline-block;
     width: 100%;
     z-index: 9001;
 
@@ -38,11 +37,9 @@
 
     .cryptpad-lag {
         box-sizing: content-box;
-        vertical-align: top;
         height: 16px;
         width: 16px;
         display: inline-block;
-        margin: 2px 0px;
         padding: 5px;
         div {
             margin: auto;
@@ -62,7 +59,7 @@
         height: 26px;
         padding-right: 5px;
         padding-left: 5px;
-        margin: 2px;
+        margin: 3px 2px;
     }
 
     button {

customize.dist/toolbar.css

@@ -31,7 +31,6 @@
   user-select: none;
   font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
   color: #000;
-  display: inline-block;
   width: 100%;
   z-index: 9001;
 }
@@ -40,11 +39,9 @@
 }
 .cryptpad-toolbar .cryptpad-lag {
   box-sizing: content-box;
-  vertical-align: top;
   height: 16px;
   width: 16px;
   display: inline-block;
-  margin: 2px 0px;
   padding: 5px;
 }
 .cryptpad-toolbar .cryptpad-lag div {
@@ -65,7 +62,7 @@
   height: 26px;
   padding-right: 5px;
   padding-left: 5px;
-  margin: 2px;
+  margin: 3px 2px;
 }
 .cryptpad-toolbar button {
   background-color: inherit;

customize.dist/translations/messages.fr.js

@@ -174,8 +174,9 @@ define(function () {
     out.fm_trashName = "Corbeille";
     out.fm_unsortedName = "Fichiers non triés";
     out.fm_filesDataName = "Tous les fichiers";
+    out.fm_newButton = "Nouveau";
     out.fm_newFolder = "Nouveau dossier";
-    out.fm_newFolderButton = "NOUVEAU DOSSIER";
+    out.fm_folder = "Dossier";
     out.fm_folderName = "Nom du dossier";
     out.fm_numberOfFolders = "# de dossiers";
     out.fm_numberOfFiles = "# de fichiers";
@@ -199,6 +200,11 @@ define(function () {
     out.fm_info_unsorted = 'Contient tous les documents que vous avez ouvert et qui ne sont pas triés dans "Documents" ou déplacés vers la "Corbeille".'; // "My Documents" should match with the "out.fm_rootName" key, and "Trash" with "out.fm_trashName"
     out.fm_info_trash = 'Les fichiers supprimés dans la corbeille sont également enlevés de "Tous les fichiers" et il est impossible de les récupérer depuis l\'explorateur de fichiers.'; // Same here for "All files" and "out.fm_filesDataName"
     out.fm_info_allFiles = 'Contient tous les fichiers de "Documents", "Fichiers non triés" et "Corbeille". Vous ne pouvez pas supprimer ou déplacer des fichiers d\'ici.'; // Same here
+    out.fm_alert_backupUrl = "URL de secours pour ce contenu.<br>" +
+                             "Il est <strong>fortement recommandé</strong> de garder cette URL pour vous-même.<br>" +
+                             "Elle vous servira en cas de perte des données de votre navigateur afin de retrouver vos fichiers.<br>" +
+                             "Quiconque se trouve en possession de celle-ci peut modifier ou supprimer tous les fichiers de ce gestionnaire.<br>" +
+                             '<input type="text" id="fm_backupUrl" value="{0}"/>';
      // File - Context menu
     out.fc_newfolder = "Nouveau dossier";
     out.fc_rename = "Renommer";

customize.dist/translations/messages.js

@@ -176,8 +176,9 @@ define(function () {
     out.fm_unsortedName = "Unsorted files";
     out.fm_filesDataName = "All files";
     out.fm_templateName = "Templates";
+    out.fm_newButton = "New";
     out.fm_newFolder = "New folder";
-    out.fm_newFolderButton = "NEW FOLDER";
+    out.fm_folder = "Folder";
     out.fm_folderName = "Folder name";
     out.fm_numberOfFolders = "# of folders";
     out.fm_numberOfFiles = "# of files";
@@ -201,6 +202,11 @@ define(function () {
     out.fm_info_unsorted = 'Contains all the files you\'ve visited that are not yet sorted in "Documents" or moved to the "Trash".'; // "My Documents" should match with the "out.fm_rootName" key, and "Trash" with "out.fm_trashName"
     out.fm_info_trash = 'Files deleted from the trash are also removed from "All files" and it is impossible to recover them from the file manager.'; // Same here for "All files" and "out.fm_filesDataName"
     out.fm_info_allFiles = 'Contains all the files from "Documents", "Unsorted" and "Trash". You can\'t move or remove files from here.'; // Same here
+    out.fm_alert_backupUrl = "Backup URL for this drive.<br>" +
+                             "It is <strong>highly recommended</strong> that you keep ip for yourself only.<br>" +
+                             "You can use it to retrieve all your files in case your browser memory got erased.<br>" +
+                             "Anybody with that URL can edit or remove all the files in your file manager.<br>" +
+                             '<input type="text" id="fm_backupUrl" value="{0}"/>';
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";

www/common/fileObject.js

@@ -627,14 +627,15 @@ define([
             var trashFiles = getTrashFiles();
             var templateFiles = getTemplateFiles();
             var newPath, parentEl;
-            if (path && isPathInHrefArray(path)) {
+            if (path) {
                 newPath = decodeURIComponent(path).split(',');
+            }
+            if (path && isPathInHrefArray(newPath)) {
                 parentEl = findElement(files, newPath);
                 parentEl.push(href);
                 return;
             }
-            if (path && name) {
+            if (path && isPathInRoot(newPath) && name) {
-                newPath = decodeURIComponent(path).split(',');
                 parentEl = findElement(files, newPath);
                 if (parentEl) {
                     var newName = getAvailableName(parentEl, name);
@@ -642,7 +643,7 @@ define([
                     return;
                 }
             }
-            if (unsortedFiles.indexOf(href) === -1 && rootFiles.indexOf(href) === -1&& templateFiles.indexOf(href) === -1 && trashFiles.indexOf(href) === -1) {
+            if (unsortedFiles.indexOf(href) === -1 && rootFiles.indexOf(href) === -1 && templateFiles.indexOf(href) === -1 && trashFiles.indexOf(href) === -1) {
                 files[UNSORTED].push(href);
             }
         };

www/drive/file.css

@@ -342,7 +342,6 @@ li {
 button.newElement {
     border-radius: 0px;
     height: 30px;
-    margin: 5px 5px;
     background: #888;
     color: #eee;
     font-size: 15px;
@@ -354,3 +353,58 @@ button.newElement:hover {
     box-shadow: 0px 0px 2px #000;
 }
 
+
+/* Style The Dropdown Button */
+.dropbtn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown-bar {
+    margin: 5px 5px;
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-bar-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
+/* Links inside the dropdown */
+.dropdown-bar-content a {
+    color: black;
+    padding: 5px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.dropdown-bar-content hr {
+    margin: 5px 0px;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-bar-content a:hover {background-color: #f1f1f1}
+
+/* Show the dropdown menu on hover */
+..dropdown-bar-content:hover {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown-bar:hover .dropbtn {
+    background-color: #3e8e41;
+}

www/drive/main.js

@@ -567,7 +567,6 @@ define([
             });
 
             var newPath = $(ev.target).data('path') || $(ev.target).parent('li').data('path');
-            console.log(newPath);
             if (!newPath) { return; }
             if (movedPaths && movedPaths.length) {
                 moveElements(movedPaths, newPath, null, refresh);
@@ -839,9 +838,9 @@ define([
         };
 
         var createNewFolderButton = function () {
-            var $listButton = $('<button>', {
+            var $listButton = $('<a>', {
                 'class': 'newElement'
-            }).text(Messages.fm_newFolderButton);
+            }).text(Messages.fm_folder);
 
             $listButton.click(function () {
                 var onCreated = function (info) {
@@ -855,22 +854,45 @@ define([
             return $listButton;
         };
 
-        var createNewPadButtons = function () {
+        var createNewButton = function (isInRoot) {
-            var $block = $('<div>', { 'class': 'newPadContainer'});
+            var $block = $('<div>', {'class': 'dropdown-bar'});
-            AppConfig.availablePadTypes.forEach(function (type) {
+
             var $button = $('<button>', {
                 'class': 'newElement'
-                }).text(Messages['button_new' + type]);
+            }).text(Messages.fm_newButton);
 
-                $button.click(function () {
+            var $innerblock = $('<div>', {'class': 'dropdown-bar-content'});
-                    //TODO
+
+            AppConfig.availablePadTypes.forEach(function (type) {
+                var $button = $('<a>', {
+                    'class': 'newElement newdoc',
+                    'data-type': type,
+                    'href': '/' + type + '/#?path=' + encodeURIComponent(currentPath),
+                    'target': '_blank'
+                }).text(Messages.type[type]);
+
+                $innerblock.append($button);
             });
 
-                $block.append($button);
+            if (isInRoot) {
+                $innerblock.append('<hr>');
+                $innerblock.append(createNewFolderButton());
+            }
+
+            $block.append($button).append($innerblock);
+
+            $button.click(function (e) {
+                e.stopPropagation();
+                $innerblock.toggle();
             });
+
             return $block;
         };
 
+        var hideNewButton = function () {
+            $iframe.find('.dropdown-bar-content').hide();
+        };
+
         var SORT_FOLDER_DESC = 'sortFoldersDesc';
         var SORT_FILE_BY = 'sortFilesBy';
         var SORT_FILE_DESC = 'sortFilesDesc';
@@ -1166,6 +1188,7 @@ define([
             if (!path || path.length === 0) {
                 path = [ROOT];
             }
+            var isInRoot = filesOp.isPathInRoot(path);
             var isTrashRoot = filesOp.comparePath(path, [TRASH]);
             var isUnsorted = filesOp.comparePath(path, [UNSORTED]);
             var isTemplate = filesOp.comparePath(path, [TEMPLATE]);
@@ -1197,14 +1220,10 @@ define([
             }
             var $list = $('<ul>').appendTo($dirContent);
 
-            /*if (isUnsorted) {
-                displayUnsorted($list);
-                $content.append($title).append($dirContent);
-                return;
-            }*/
-
             var $modeButton = createViewModeButton().appendTo($toolbar);
-//            createNewPadButtons().appendTo($toolbar);
+            if (!filesOp.isPathInTrash(path)) {
+                createNewButton(isInRoot).appendTo($toolbar);
+            }
 
             var $folderHeader = getFolderListHeader();
             var $fileHeader = getFileListHeader(true);
@@ -1217,7 +1236,6 @@ define([
                 displayTrashRoot($list, $folderHeader, $fileHeader);
             } else {
                 $dirContent.contextmenu(openContentContextMenu);
-                var $newFolderButton = createNewFolderButton().appendTo($toolbar);
                 if (filesOp.hasSubfolder(root)) { $list.append($folderHeader); }
                 // display sub directories
                 var keys = Object.keys(root);
@@ -1537,6 +1555,7 @@ define([
             removeSelected(e);
             removeInput(e);
             module.hideMenu(e);
+            hideNewButton();
         });
         $(ifrw).on('drag drop', function (e) {
             removeInput(e);
@@ -1564,10 +1583,10 @@ define([
                 // If we are in the trash or if we are holding the "shift" key, delete permanently,
                 // else move to trash
                 if (filesOp.isPathInTrash(currentPath) || e.shiftKey) {
-                    var todo = filesOp.removeFromTrash;
+                    var cb = filesOp.removeFromTrash;
                     if (!filesOp.isPathInTrash(currentPath)) {
                         // If we are not in the trash, we just have to remove the key from root/unsorted
-                        todo = filesOp.deletePathPermanently;
+                        cb = filesOp.deletePathPermanently;
                     }
                     // If we are already in the trash, delete the elements permanently
                     var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
@@ -1580,7 +1599,7 @@ define([
                     Cryptpad.confirm(msg, function(res) {
                         if (!res) { return; }
                         paths.forEach(function(p) {
-                            todo(p);
+                            cb(p);
                         });
                         refresh();
                     });
@@ -1686,7 +1705,7 @@ define([
                 common: Cryptpad,
                 hideShare: true
             };
-            var toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
+            var toolbar = APP.toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
 
             var $bar = APP.$bar;
             var $rightside = $bar.find('.' + Toolbar.constants.rightside);
@@ -1705,7 +1724,11 @@ define([
                 $backupButton.on('click', function() {
                     var url = window.location.origin + window.location.pathname + '#' + editHash;
                     //TODO change text & transalte
-                    Cryptpad.alert("Backup URL for this pad. It is highly recommended that you do not share it with other people.<br>Anybody with that URL can remove all the files in your file manager.<br>" + url);
+                    Cryptpad.alert(Messages._getKey('fm_alert_backupUrl', [url]));
+                    $('#fm_backupUrl').val(url);
+                    $('#fm_backupUrl').click(function () {
+                        $(this).select();
+                    });
                 });
                 $userBlock.append($backupButton);
             }
@@ -1731,11 +1754,11 @@ define([
         };
         var onDisconnect = function (info) {
             setEditable(false);
-            console.error('err');
             Cryptpad.alert(Messages.common_connectionLost);
         };
         var onReconnect = function (info) {
             setEditable(true);
+            APP.toolbar.reconnecting(info.myId);
             Cryptpad.findOKButton().click();
         };
 
@@ -1752,8 +1775,8 @@ define([
         proxy.on('disconnect', function () {
             onDisconnect();
         });
-        proxy.on('reconnect', function () {
+        proxy.on('reconnect', function (info) {
-            onReconnect();
+            onReconnect(info);
         });
     });
     Cryptpad.onError(function (info) {

www/pad/inner.html

@@ -16,6 +16,7 @@
     #cke_1_top .cryptpad-toolbar {
         margin-bottom: 1px;
         padding: 0px;
+        display: inline-block;
     }
     </style>
 </head>

www/poll/index.html

@@ -22,6 +22,9 @@
             color: #000;
             line-height: auto;
         }
+        .cryptpad-toolbar {
+            display: inline-block;
+        }
         .realtime {
             display: block;
             overflow: auto;