Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

bower.json

@@ -42,7 +42,8 @@
     "diff-dom": "2.1.1",
     "nthen": "^0.1.5",
     "open-sans-fontface": "^1.4.2",
-    "bootstrap-tokenfield": "^0.12.1"
+    "bootstrap-tokenfield": "^0.12.1",
+    "localforage": "^1.5.2"
   },
   "resolutions": {
     "bootstrap": "v4.0.0-alpha.6"

www/code/app-code.less

@@ -44,6 +44,10 @@
         flex-flow: row;
         height: 100%;
         overflow: hidden;
+        &.cp-app-code-present {
+            .CodeMirror { display: none; }
+            #cp-app-code-preview { border: 0; }
+        }
     }
     #cp-app-code-preview {
         flex: 1;

www/code/inner.js

@@ -62,10 +62,14 @@ define([
         'xml',
     ]);
 
-    var mkPreviewPane = function (editor, CodeMirror, framework) {
+    var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {
         var $previewContainer = $('#cp-app-code-preview');
         var $preview = $('#cp-app-code-preview-content');
+        var $editorContainer = $('#cp-app-code-editor');
         var $codeMirror = $('.CodeMirror');
+
+        var $previewButton = framework._.sfCommon.createButton(null, true);
+
         var forceDrawPreview = function () {
             try {
                 DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
@@ -73,11 +77,10 @@ define([
         };
         var drawPreview = Util.throttle(function () {
             if (CodeMirror.highlightMode !== 'markdown') { return; }
-            if (!$previewContainer.is(':visible')) { return; }
+            if (!$previewButton.is('.cp-toolbar-button-active')) { return; }
             forceDrawPreview();
         }, 150);
 
-        var $previewButton = framework._.sfCommon.createButton(null, true);
         $previewButton.removeClass('fa-question').addClass('fa-eye');
         $previewButton.attr('title', Messages.previewButtonTitle);
         var previewTo;
@@ -126,12 +129,16 @@ define([
                     if (e) { return void console.error(e); }
                     if (data !== false) {
                         $previewContainer.show();
-                        $previewButton.addClass('active');
+                        $previewButton.addClass('cp-toolbar-button-active');
                         $codeMirror.removeClass('cp-app-code-fullpage');
+                        if (isPresentMode) {
+                            $editorContainer.addClass('cp-app-code-present');
+                        }
                     }
                 });
                 return;
             }
+            $editorContainer.removeClass('cp-app-code-present');
             $previewButton.hide();
             $previewContainer.hide();
             $previewButton.removeClass('active');
@@ -224,11 +231,11 @@ define([
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    var andThen2 = function (editor, CodeMirror, framework) {
+    var andThen2 = function (editor, CodeMirror, framework, isPresentMode) {
 
         var common = framework._.sfCommon;
 
-        var previewPane = mkPreviewPane(editor, CodeMirror, framework);
+        var previewPane = mkPreviewPane(editor, CodeMirror, framework, isPresentMode);
         var evModeChange = Util.mkEvent();
         evModeChange.reg(previewPane.modeChange);
 
@@ -335,8 +342,12 @@ define([
                 editor = CodeMirror.editor;
             }).nThen(waitFor());
 
+        }).nThen(function (waitFor) {
+            common.getSframeChannel().onReady(waitFor());
         }).nThen(function (/*waitFor*/) {
-            andThen2(editor, CodeMirror, framework);
+            common.isPresentUrl(function (err, val) {
+                andThen2(editor, CodeMirror, framework, val);
+            });
         });
     };
     main();

www/common/sframe-common-interface.js

@@ -3,14 +3,19 @@ define([
     '/api/config',
     '/common/cryptpad-common.js',
     '/common/common-util.js',
+    '/common/common-hash.js',
     '/common/media-tag.js',
     '/common/tippy.min.js',
     '/customize/application_config.js',
+    '/file/file-crypto.js',
+    '/bower_components/localforage/dist/localforage.min.js',
 
+    '/bower_components/tweetnacl/nacl-fast.min.js',
     'css!/common/tippy.css',
-], function ($, Config, Cryptpad, Util, MediaTag, Tippy, AppConfig) {
+], function ($, Config, Cryptpad, Util, Hash, MediaTag, Tippy, AppConfig, FileCrypto, localForage) {
     var UI = {};
     var Messages = Cryptpad.Messages;
+    var Nacl = window.nacl;
 
     /**
      * Requirements from cryptpad-common.js
@@ -28,6 +33,40 @@ define([
      *  - createDropdown
     */
 
+    var addThumbnail = function (err, thumb, $span, cb) {
+        var img = new Image();
+        img.src = 'data:;base64,'+thumb;
+        $span.find('.cp-icon').hide();
+        $span.prepend(img);
+        cb($(img));
+    };
+    UI.displayThumbnail = function (href, $container, cb) {
+        cb = cb || $.noop;
+        var parsed = Hash.parsePadUrl(href);
+        if (parsed.type !== 'file') { return; }
+        var k  ='thumbnail-' + href;
+        var whenNewThumb = function () {
+            var secret = Hash.getSecrets('file', parsed.hash);
+            var hexFileName = Util.base64ToHex(secret.channel);
+            var src = Hash.getBlobPathFromHex(hexFileName);
+            var cryptKey = secret.keys && secret.keys.fileKeyStr;
+            var key = Nacl.util.decodeBase64(cryptKey);
+            FileCrypto.fetchDecryptedMetadata(src, key, function (e, metadata) {
+                if (!metadata.thumbnail) {
+                    return void localForage.setItem(k, 'EMPTY');
+                }
+                localForage.setItem(k, metadata.thumbnail, function (err) {
+                    addThumbnail(err, metadata.thumbnail, $container, cb);
+                });
+            });
+        };
+        localForage.getItem(k, function (err, v) {
+            if (!v) { return void whenNewThumb(); }
+            if (v === 'EMPTY') { return; }
+            addThumbnail(err, v, $container, cb);
+        });
+    };
+
     UI.updateTags = function (common, href) {
         var sframeChan = common.getSframeChannel();
         sframeChan.query('Q_TAGS_GET', href || null, function (err, res) {
@@ -92,7 +131,7 @@ define([
                         target: data.target
                     };
                     if (data.filter && !data.filter(file)) {
-                        Cryptpad.log('TODO: invalid avatar (type or size)');
+                        Cryptpad.log('Invalid avatar (type or size)');
                         return;
                     }
                     data.FM.handleFile(file, ev);
@@ -398,9 +437,6 @@ define([
         }, LIMIT_REFRESH_RATE * 3);
 
         updateUsage();
-        /*getProxy().on('change', ['drive'], function () {
-            updateUsage();
-        }); TODO*/
         cb(null, $container);
     };
 

www/common/sframe-common.js

@@ -80,6 +80,7 @@ define([
     funcs.createButton = callWithCommon(UI.createButton);
     funcs.createUsageBar = callWithCommon(UI.createUsageBar);
     funcs.updateTags = callWithCommon(UI.updateTags);
+    funcs.displayThumbnail = UI.displayThumbnail;
 
     // History
     funcs.getHistory = callWithCommon(History.create);

www/common/toolbar3.js

@@ -443,7 +443,7 @@ define([
             $shareBlock.find('a.cp-toolbar-share-view-embed').click(function () {
                 var url = origin + pathname + '#' + hashes.viewHash;
                 var parsed = Cryptpad.parsePadUrl(url);
-                url = origin + parsed.getUrl({embed: true});
+                url = origin + parsed.getUrl({embed: true, present: true});
                 // Alertify content
                 var $content = $('<div>');
                 $('<input>', {'style':'display:none;'}).appendTo($content);

www/contacts/app-contacts.less

@@ -34,7 +34,8 @@
     @button-border: 2px;
     @bg-color: @colortheme_friends-bg;
     @color: @colortheme_friends-color;
-    #app {
+
+    #cp-app-contacts-container {
         flex: 1;
         display: flex;
         justify-content: center;
@@ -46,26 +47,22 @@
         }
     }
 
-    #toolbar {
+    #cp-toolbar {
         display: flex; // We need this to remove a 3px border at the bottom of the toolbar
     }
 
-    .cryptpad-toolbar {
-        padding: 0px;
-        display: inline-block;
-    }
-
-    #friendList {
+    #cp-app-contacts-friendlist {
         width: 350px;
         height: 100%;
         background-color: lighten(@bg-color, 10%);
         overflow-y: auto;
-        .friend {
+        .cp-app-contacts-friend {
             background: rgba(0,0,0,0.1);
             padding: 5px;
             margin: 10px;
             cursor: pointer;
-            .right-col {
+            position: relative;
+            .cp-app-contacts-right-col {
                 margin-left: 5px;
                 display: flex;
                 flex-flow: column;
@@ -73,13 +70,20 @@
             &:hover {
                 background-color: rgba(0,0,0,0.3);
             }
-            &.notify {
+            &.cp-app-contacts-notify {
                 animation: example 2s ease-in-out infinite;
             }
         }
+        .cp-app-contacts-remove {
+            cursor: pointer;
+            width: 20px;
+            &:hover {
+                color: darken(@color, 20%);
+            }
+        }
     }
 
-    #friendList .friend, #messaging .cp-avatar {
+    #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
         .avatar_main(30px);
         &.cp-avatar {
             display: flex;
@@ -91,10 +95,10 @@
                 color: #000;
             }
         }
-        media-tag, .default {
+        media-tag, .cp-avatar-default {
             margin-right: 5px;
         }
-        .status {
+        .cp-app-contacts-status {
             width: 5px;
             display: inline-block;
             position: absolute;
@@ -103,28 +107,15 @@
             bottom: 0;
             opacity: 0.7;
             background-color: #777;
-            &.online {
+            &.cp-app-contacts-online {
                 background-color: green;
             }
-            &.offline {
+            &.cp-app-contacts-offline {
                 background-color: red;
             }
         }
     }
 
-    #friendList {
-        .friend {
-            position: relative;
-        }
-        .remove {
-            cursor: pointer;
-            width: 20px;
-            &:hover {
-                color: darken(@color, 20%);
-            }
-        }
-    }
-
     .placeholder (@color: #bbb) {
         &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
             color: @color;
@@ -145,16 +136,16 @@
         }
     }
 
-    #messaging {
+    #cp-app-contacts-messaging {
         flex: 1;
         height: 100%;
         background-color: lighten(@bg-color, 20%);
         min-width: 0;
 
-        .info {
+        .cp-app-contacts-info {
             padding: 20px;
         }
-        .header {
+        .cp-app-contacts-header {
             background-color: lighten(@bg-color, 15%);
             padding: 0;
             display: flex;
@@ -171,49 +162,49 @@
                 }
             }
 
-            .avatar,
-            .right-col {
+            .cp-avatar,
+            .cp-app-contacts-right-col {
                  flex:1 1 auto;
             }
-            .remove-history {
+            .cp-app-contacts-remove-history {
                 .hover;
             }
             .cp-avatar {
                 margin: 10px;
             }
-            .more-history {
+            .cp-app-contacts-more-history {
                 //display: none;
                 .hover;
-                &.faded {
+                &.cp-app-contacts-faded {
                     color: darken(@bg-color, 5%);
                 }
             }
         }
-        .chat {
+        .cp-app-contacts-chat {
             height: 100%;
             display: flex;
             flex-flow: column;
-            .messages {
+            .cp-app-contacts-messages {
                 padding: 0 20px;
                 margin: 10px 0;
                 flex: 1;
                 overflow-x: auto;
-                .message {
+                .cp-app-contacts-message {
                     & > div {
                         padding: 0 10px;
                     }
-                    .content {
+                    .cp-app-contacts-content {
                         overflow: hidden;
                         word-wrap: break-word;
                         &> * {
                             margin: 0;
                         }
                     }
-                    .date {
+                    .cp-app-contacts-date {
                         display: none;
                         font-style: italic;
                     }
-                    .sender {
+                    .cp-app-contacts-sender {
                         margin-top: 10px;
                         font-weight: bold;
                         background-color: rgba(0,0,0,0.1);
@@ -221,7 +212,7 @@
                 }
             }
         }
-        .input {
+        .cp-app-contacts-input {
             background-color: lighten(@bg-color, 15%);
             height: auto;
             min-height: 50px;

www/contacts/inner.js

@@ -47,12 +47,12 @@ define([
             }
         });
 
-        var toolbarElement = h('div#toolbar.cp-toolbar-container');
+        var toolbarElement = h('div#cp-toolbar.cp-toolbar-container');
 
         document.body.appendChild(toolbarElement);
 
-        var messaging = h('div#messaging', [
-            h('div.info', [
+        var messaging = h('div#cp-app-contacts-messaging', [
+            h('div.cp-app-contacts-info', [
                 h('h2', Messages.contacts_info1),
                 h('ul', [
                     h('li', Messages.contacts_info2),
@@ -61,9 +61,9 @@ define([
             ])
         ]);
 
-        var friendList = h('div#friendList');
+        var friendList = h('div#cp-app-contacts-friendlist');
 
-        var appElement = h('div#app', [
+        var appElement = h('div#cp-app-contacts-container', [
             friendList,
             messaging,
         ]);

www/contacts/messenger-ui.js

@@ -12,7 +12,7 @@ define([
     var Messages = Cryptpad.Messages;
 
     var m = function (md) {
-        var d = h('div.content');
+        var d = h('div.cp-app-contacts-content');
         try {
             d.innerHTML = Marked(md || '');
         } catch (e) {
@@ -36,6 +36,8 @@ define([
     };
 
     UI.create = function (messenger, $userlist, $messages, common) {
+        var origin = common.getMetadataMgr().getPrivateData().origin;
+
         var state = window.state = {
             active: '',
         };
@@ -57,21 +59,21 @@ define([
         };
 
         var notify = function (curvePublic) {
-            find.inList(curvePublic).addClass('notify');
+            find.inList(curvePublic).addClass('cp-app-contacts-notify');
         };
         var unnotify = function (curvePublic) {
-            find.inList(curvePublic).removeClass('notify');
+            find.inList(curvePublic).removeClass('cp-app-contacts-notify');
         };
 
         var markup = {};
         markup.message = function (msg) {
             var curvePublic = msg.author;
             var name = displayNames[msg.author];
-            return h('div.message', {
+            return h('div.cp-app-contacts-message', {
                 title: msg.time? new Date(msg.time).toLocaleString(): '?',
                 'data-key': curvePublic,
             }, [
-                name? h('div.sender', name): undefined,
+                name? h('div.cp-app-contacts-sender', name): undefined,
                 m(msg.text),
             ]);
         };
@@ -81,10 +83,10 @@ define([
         };
 
         var normalizeLabels = function ($messagebox) {
-            $messagebox.find('div.message').toArray().reduce(function (a, b) {
+            $messagebox.find('div.cp-app-contacts-message').toArray().reduce(function (a, b) {
                 var $b = $(b);
                 if ($(a).data('key') === $b.data('key')) {
-                    $b.find('.sender').hide();
+                    $b.find('.cp-app-contacts-sender').hide();
                     return a;
                 }
                 return b;
@@ -92,7 +94,7 @@ define([
         };
 
         markup.chatbox = function (curvePublic, data) {
-            var moreHistory = h('span.more-history.fa.fa-history', {
+            var moreHistory = h('span.cp-app-contacts-more-history.fa.fa-history', {
                 title: Messages.contacts_fetchHistory,
             });
             var displayName = data.displayName;
@@ -105,14 +107,14 @@ define([
                 var channel = state.channels[curvePublic];
 
                 if (channel.exhausted) {
-                    return void $moreHistory.addClass('faded');
+                    return void $moreHistory.addClass('cp-app-contacts-faded');
                 }
 
                 console.log('getting history');
                 var sig = channel.TAIL || channel.HEAD;
 
                 fetching = true;
-                var $messagebox = $(getChat(curvePublic)).find('.messages');
+                var $messagebox = $(getChat(curvePublic)).find('.cp-app-contacts-messages');
                 messenger.getMoreHistory(curvePublic, sig, 10, function (e, history) {
                     fetching = false;
                     if (e) { return void console.error(e); }
@@ -129,7 +131,7 @@ define([
                                 console.error('No more messages to fetch');
                                 channel.exhausted = true;
                                 console.log(channel);
-                                return void $moreHistory.addClass('faded');
+                                return void $moreHistory.addClass('cp-app-contacts-faded');
                             } else {
                                 channel.TAIL = msg.sig;
                             }
@@ -151,7 +153,7 @@ define([
                 });
             });
 
-            var removeHistory = h('span.remove-history.fa.fa-eraser', {
+            var removeHistory = h('span.cp-app-contacts-remove-history.fa.fa-eraser', {
                 title: Messages.contacts_removeHistoryTitle
             });
 
@@ -169,12 +171,12 @@ define([
             });
 
             var avatar = h('div.cp-avatar');
-            var header = h('div.header', [
+            var header = h('div.cp-app-contacts-header', [
                 avatar,
                 moreHistory,
                 removeHistory,
             ]);
-            var messages = h('div.messages');
+            var messages = h('div.cp-app-contacts-messages');
             var input = h('textarea', {
                 placeholder: Messages.contacts_typeHere
             });
@@ -182,8 +184,8 @@ define([
                 title: Messages.contacts_send,
             });
 
-            var rightCol = h('span.right-col', [
-                h('span.name', displayName),
+            var rightCol = h('span.cp-app-contacts-right-col', [
+                h('span.cp-app-contacts-name', displayName),
             ]);
 
             var $avatar = $(avatar);
@@ -249,12 +251,12 @@ define([
             $(input).on('keydown', onKeyDown);
             $(sendButton).click(function () { send(input.value); });
 
-            return h('div.chat', {
+            return h('div.cp-app-contacts-chat', {
                 'data-key': curvePublic,
             }, [
                 header,
                 messages,
-                h('div.input', [
+                h('div.cp-app-contacts-input', [
                     input,
                     sendButton,
                 ]),
@@ -262,11 +264,11 @@ define([
         };
 
         var hideInfo = function () {
-            $messages.find('.info').hide();
+            $messages.find('.cp-app-contacts-info').hide();
         };
 
         var updateStatus = function (curvePublic) {
-            var $status = find.inList(curvePublic).find('.status');
+            var $status = find.inList(curvePublic).find('.cp-app-contacts-status');
             // FIXME this stopped working :(
             messenger.getStatus(curvePublic, function (e, online) {
                 // if error maybe you shouldn't display this friend...
@@ -278,9 +280,9 @@ define([
                 }
                 if (online) {
                     return void $status
-                        .removeClass('offline').addClass('online');
+                        .removeClass('cp-app-contacts-offline').addClass('cp-app-contacts-online');
                 }
-                $status.removeClass('online').addClass('offline');
+                $status.removeClass('cp-app-contacts-online').addClass('cp-app-contacts-offline');
             });
         };
 
@@ -299,11 +301,11 @@ define([
             unnotify(curvePublic);
             var $chat = getChat(curvePublic);
             hideInfo();
-            $messages.find('div.chat[data-key]').hide();
+            $messages.find('div.cp-app-contacts-chat[data-key]').hide();
             if ($chat.length) {
-                var $chat_messages = $chat.find('div.message');
+                var $chat_messages = $chat.find('div.cp-app-contacts-message');
                 if (!$chat_messages.length) {
-                    var $more = $chat.find('.more-history');
+                    var $more = $chat.find('.cp-app-contacts-more-history');
                     $more.click();
                 }
                 return void $chat.show();
@@ -325,16 +327,16 @@ define([
 
         markup.friend = function (data) {
             var curvePublic = data.curvePublic;
-            var friend = h('div.friend.cp-avatar', {
+            var friend = h('div.cp-app-contacts-friend.cp-avatar', {
                 'data-key': curvePublic,
             });
 
-            var remove = h('span.remove.fa.fa-user-times', {
+            var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', {
                 title: Messages.contacts_remove
             });
-            var status = h('span.status');
-            var rightCol = h('span.right-col', [
-                h('span.name', [data.displayName]),
+            var status = h('span.cp-app-contacts-status');
+            var rightCol = h('span.cp-app-contacts-right-col', [
+                h('span.cp-app-contacts-name', [data.displayName]),
                 remove,
             ]);
 
@@ -343,7 +345,7 @@ define([
                 display(curvePublic);
             })
             .dblclick(function () {
-                if (data.profile) { window.open('/profile/#' + data.profile); }
+                if (data.profile) { window.open(origin + '/profile/#' + data.profile); }
             });
 
             $(remove).click(function (e) {
@@ -400,7 +402,7 @@ define([
                 console.error("Got a message but the chat isn't open");
             }
 
-            var $messagebox = $chat.find('.messages');
+            var $messagebox = $chat.find('.cp-app-contacts-messages');
             var shouldScroll = isBottomedOut($messagebox);
 
             $messagebox.append(el_message);
@@ -444,11 +446,12 @@ define([
             var name = displayNames[curvePublic] = info.displayName;
 
             // update label in friend list
-            find.inList(curvePublic).find('.name').text(name);
+            find.inList(curvePublic).find('.cp-app-contacts-name').text(name);
 
             // update title bar and messages
-            $messages.find(dataQuery(curvePublic) + ' .header .name, div.message'+
-                dataQuery(curvePublic) + ' div.sender').text(name).text(name);
+            $messages.find(dataQuery(curvePublic) + ' .cp-app-contacts-header ' +
+                '.cp-app-contacts-name, div.cp-app-contacts-message'+
+                dataQuery(curvePublic) + ' div.cp-app-contacts-sender').text(name).text(name);
         });
 
         var connectToFriend = function (curvePublic, cb) {

www/drive/app-drive.less

@@ -51,6 +51,7 @@ min-height: auto;
         text-overflow: ellipsis;
         padding-top: 5px;
         padding-bottom: 5px;
+        border: 1px solid transparent;
 
         &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
             border: 1px solid #CCC;
@@ -516,6 +517,13 @@ span {
                     font-size: 18px;
                 }
             }
+            .cp-app-drive-element-thumbnail {
+                max-width: 64px;
+                max-height: 64px;
+                & ~ .fa {
+                    display: none;
+                }
+            }
         }
         .cp-app-drive-element-list {
             display: none;

www/drive/inner.js

@@ -546,7 +546,7 @@ define([
         };
 
         var getFileNameExtension = function (name) {
-            var matched = /\.\S+$/.exec(name);
+            var matched = /\.[^\. ]+$/.exec(name);
             if (matched && matched.length) { return matched[matched.length -1]; }
             return '';
         };
@@ -1159,11 +1159,18 @@ define([
 
             // The element with the class '.name' is underlined when the 'li' is hovered
             var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name);
-            $span.html('');
             $span.append($name);
             $span.append($state);
 
             var type = Messages.type[hrefData.type] || hrefData.type;
+            common.displayThumbnail(data.href, $span, function ($thumb) {
+                // Called only if the thumbnail exists
+                // Remove the .hide() added by displayThumnail() because it hides the icon in
+                // list mode too
+                $span.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list');
+                $thumb.addClass('cp-app-drive-element-grid')
+                    .addClass('cp-app-drive-element-thumbnail');
+            });
             var $type = $('<span>', {
                 'class': 'cp-app-drive-element-type cp-app-drive-element-list'
             }).text(type);
@@ -1181,7 +1188,6 @@ define([
 
         var addFolderData = function (element, key, $span) {
             if (!element || !filesOp.isFolder(element)) { return; }
-            $span.html('');
             // The element with the class '.name' is underlined when the 'li' is hovered
             var sf = filesOp.hasSubfolder(element);
             var files = filesOp.hasFile(element);
@@ -1239,11 +1245,6 @@ define([
                     APP.selectedFiles.splice(idx, 1);
                 }
             }
-            if (isFolder) {
-                addFolderData(element, key, $element);
-            } else {
-                addFileData(element, $element);
-            }
             $element.prepend($icon).dblclick(function () {
                 if (isFolder) {
                     APP.displayDirectory(newPath);
@@ -1252,6 +1253,11 @@ define([
                 if (isTrash) { return; }
                 openFile(root[key]);
             });
+            if (isFolder) {
+                addFolderData(element, key, $element);
+            } else {
+                addFileData(element, $element);
+            }
             $element.addClass(liClass);
             $element.data('path', newPath);
             addDragAndDropHandlers($element, newPath, isFolder, !isTrash);
@@ -1586,10 +1592,11 @@ define([
                 ['cp-app-drive-element-title', 'cp-app-drive-element-type',
                  'cp-app-drive-element-atime', 'cp-app-drive-element-ctime'].some(function (c) {
                     if ($span.hasClass(c)) {
-                        if (value === c) { descValue = descValue ? false : true; }
+                        var nValue = c.replace(/cp-app-drive-element-/, '');
+                        if (value === nValue) { descValue = descValue ? false : true; }
                         else {
                             // atime and ctime should be ordered in a desc order at the first click
-                            value = c.replace(/cp-app-drive-element-/, '');
+                            value = nValue;
                             descValue = value !== 'title';
                         }
                         return true;
@@ -1641,7 +1648,7 @@ define([
             }
             var classSorted;
             if (APP.store[SORT_FILE_BY] === '') { classSorted = 'cp-app-drive-sort-filename'; }
-            else if (APP.store[SORT_FILE_BY]) { classSorted = APP.store[SORT_FILE_BY]; }
+            else if (APP.store[SORT_FILE_BY]) { classSorted = 'cp-app-drive-element-' + APP.store[SORT_FILE_BY]; }
             if (classSorted) {
                 $list.find('.' + classSorted).addClass('cp-app-drive-sort-active').prepend($icon);
             }
@@ -1850,10 +1857,10 @@ define([
                         APP.selectedFiles.splice(sidx, 1);
                     }
                 }
-                addFileData(id, $element);
                 $element.prepend($icon).dblclick(function () {
                     openFile(id);
                 });
+                addFileData(id, $element);
                 var path = [rootName, idx];
                 $element.data('path', path);
                 $element.click(function(e) {
@@ -1886,12 +1893,12 @@ define([
                 var $element = $('<li>', {
                     'class': 'cp-app-drive-element cp-app-drive-element-row' + roClass 
                 });
-                addFileData(id, $element);
-                $element.data('path', [FILES_DATA, id]);
-                $element.data('element', id);
                 $element.prepend($icon).dblclick(function () {
                     openFile(id);
                 });
+                addFileData(id, $element);
+                $element.data('path', [FILES_DATA, id]);
+                $element.data('element', id);
                 $element.click(function(e) {
                     e.stopPropagation();
                     onElementClick(e, $element);
@@ -2018,10 +2025,10 @@ define([
                 var $element = $('<li>', {
                     'class': 'cp-app-drive-element cp-app-drive-element-file cp-app-drive-element-row' + roClass,
                 });
-                addFileData(id, $element);
                 $element.prepend($icon).dblclick(function () {
                     openFile(id);
                 });
+                addFileData(id, $element);
                 $element.data('path', path);
                 $element.click(function(e) {
                     e.stopPropagation();
@@ -2487,6 +2494,18 @@ define([
                 }));
             }
 
+            $('<label>', {'for': 'cp-app-drive-prop-ctime'}).text(Messages.fm_creation)
+                .appendTo($d);
+            $d.append(Cryptpad.dialog.selectable(new Date(data.ctime).toLocaleString(), {
+                id: 'cp-app-drive-prop-ctime',
+            }));
+
+            $('<label>', {'for': 'cp-app-drive-prop-atime'}).text(Messages.fm_lastAccess)
+                .appendTo($d);
+            $d.append(Cryptpad.dialog.selectable(new Date(data.atime).toLocaleString(), {
+                id: 'cp-app-drive-prop-atime',
+            }));
+
             if (APP.loggedIn && AppConfig.enablePinning) {
                 // check the size of this file...
                 common.getFileSize(data.href, function (e, bytes) {

www/filepicker/app-filepicker.less

@@ -21,11 +21,15 @@
         .cp-filepicker-content-element {
             @darker: darken(@colortheme_modal-fg, 30%);
 
-            width: 200px;
-            min-width: 200px;
-            height: 1em;
-            padding: 0.5em;
+            width: 125px;
+            //min-width: 200px;
+            //height: 1em;
+            padding: 10px;
             margin: 5px;
+
+            display: inline-flex;
+            flex-flow: column;
+
             box-sizing: content-box;
 
             text-align: left;
@@ -41,15 +45,24 @@
                 color: @colortheme_modal-fg;
             }
 
+            align-items: center;
+
+            .cp-filepicker-content-element-name {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
-
-            align-items: center;
-
+                height: 20px;
+                line-height: 20px;
+                margin-top: 5px;
+                max-width: 100%;
+            }
             .fa {
                 cursor: pointer;
-                margin-right: 0.5em;
+                width: 100px;
+                height: 100px;
+                font-size: 70px;
+                text-align: center;
+                line-height: 100px;
             }
         }
     }

www/filepicker/inner.js

@@ -114,6 +114,7 @@ define([
             }
 
             var $container = $('<span>', {'class': 'cp-filepicker-content'}).appendTo($block);
+
             // Update the files list when needed
             updateContainer = function () {
                 $container.html('');
@@ -132,10 +133,14 @@ define([
                             'title': name,
                         }).appendTo($container);
                         $span.append(Cryptpad.getFileIcon(data));
-                        $span.append(name);
+                        $('<span>', {'class': 'cp-filepicker-content-element-name'}).text(name)
+                            .appendTo($span);
                         $span.click(function () {
                             if (typeof onSelect === "function") { onSelect(data.href); }
                         });
+
+                        // Add thumbnail if it exists
+                        common.displayThumbnail(data.href, $span);
                     });
                     $input.focus();
                 };

www/poll/app-poll.less

@@ -567,7 +567,7 @@ div.cp-app-poll-realtime {
                 padding: 5px 10px;
                 .cp-app-poll-comments-list-msg-text {
                     flex: 1;
-                    white-space: pre;
+                    white-space: pre-wrap;
                 }
                 .cp-app-poll-comments-list-msg-actions {
                     button {

www/poll/inner.js

@@ -838,12 +838,9 @@ define([
         prepareProxy(uncommitted, copyObject(Render.Example));
         if (!APP.readOnly) {
             var coluid = Render.coluid();
-            if (proxy.content.colsOrder.indexOf(userid) === -1 &&
-                uncommitted.content.colsOrder.indexOf(userid) === -1) {
-                // The user doesn't have his own column: the new one should be his
-                coluid = userid;
-            } else {
-                // The user already has his own column: unlock it
+            if (userid) {
+                // If userid exists, it means the user already has a pinned column
+                // and we should unlock it
                 unlockColumn(userid);
             }
             uncommitted.content.colsOrder.push(coluid);
@@ -968,10 +965,10 @@ define([
             });
 
         // If the user's column is not committed, add his username
-        var $userInput = $('.cp-app-poll-table-uncommitted > input[data-rt-id^='+ APP.userid +']');
-        if ($userInput.val() === '') {
+        var $userInput = $('.cp-app-poll-table-uncommitted > input');
+        if (!APP.userid) {
             var uname = metadataMgr.getUserData().name;
-            APP.uncommitted.content.cols[APP.userid] = uname;
+            APP.uncommitted.content.cols[APP.uncommitted.content.colsOrder[0]] = uname;
             $userInput.val(uname);
         }
 
@@ -1164,7 +1161,6 @@ define([
                  .on('ready', function (info) {
                     common.getPadAttribute('userid', function (e, userid) {
                         if (e) { console.error(e); }
-                        if (!userid) { userid = Render.coluid(); }
                         APP.userid = userid;
                         onReady(info, userid);
                     });

www/profile/main.js

@@ -401,7 +401,7 @@ define([
             ifrw: window,
             common: Cryptpad,
             $container: APP.$toolbar,
-            pageTitle: Messages.settings_title
+            pageTitle: Messages.profileButton
         };
         var toolbar = APP.toolbar = Toolbar.create(configTb);
         toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar