From 4116d08dd119769ce8525677c38dd60ce59b87f6 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 17 Oct 2017 17:17:31 +0200 Subject: [PATCH 01/11] Display thumbnails in the drive and then file picker --- bower.json | 3 +- www/common/sframe-common-interface.js | 46 ++++++++++++++++++++++++--- www/common/sframe-common.js | 1 + www/drive/app-drive.less | 8 +++++ www/drive/inner.js | 28 +++++++++------- www/filepicker/app-filepicker.less | 31 ++++++++++++------ www/filepicker/inner.js | 7 +++- 7 files changed, 96 insertions(+), 28 deletions(-) diff --git a/bower.json b/bower.json index af5560bf6..0cabd2b5f 100644 --- a/bower.json +++ b/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" diff --git a/www/common/sframe-common-interface.js b/www/common/sframe-common-interface.js index 4393fd7c7..8d817995c 100644 --- a/www/common/sframe-common-interface.js +++ b/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); }; diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 305ec8db0..3dc0fd838 100644 --- a/www/common/sframe-common.js +++ b/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); diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index 7b3adf77e..8def8763a 100644 --- a/www/drive/app-drive.less +++ b/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; diff --git a/www/drive/inner.js b/www/drive/inner.js index 3f5320377..fbfcf4870 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1159,11 +1159,16 @@ define([ // The element with the class '.name' is underlined when the 'li' is hovered var $name = $('', {'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 + $span.find('.cp-icon').addClass('cp-app-drive-element-list'); + $thumb.addClass('cp-app-drive-element-grid') + .addClass('cp-app-drive-element-thumbnail'); + }); var $type = $('', { 'class': 'cp-app-drive-element-type cp-app-drive-element-list' }).text(type); @@ -1181,7 +1186,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 +1243,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 +1251,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); @@ -1850,10 +1854,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 +1890,12 @@ define([ var $element = $('
  • ', { '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 +2022,10 @@ define([ var $element = $('
  • ', { '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(); diff --git a/www/filepicker/app-filepicker.less b/www/filepicker/app-filepicker.less index 2aca46cb5..69e92d69d 100644 --- a/www/filepicker/app-filepicker.less +++ b/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; } - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - align-items: center; + .cp-filepicker-content-element-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + 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; } } } diff --git a/www/filepicker/inner.js b/www/filepicker/inner.js index 29b6e4f3f..292ba32dc 100644 --- a/www/filepicker/inner.js +++ b/www/filepicker/inner.js @@ -114,6 +114,7 @@ define([ } var $container = $('', {'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); + $('', {'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(); }; From 4197b7b968429766a98ce4f849e4b97a9c0c4e34 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 17 Oct 2017 17:23:31 +0200 Subject: [PATCH 02/11] Fix missing icon in list mode for files with thumbnail --- www/drive/inner.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/www/drive/inner.js b/www/drive/inner.js index fbfcf4870..2c180edc9 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1165,7 +1165,9 @@ define([ var type = Messages.type[hrefData.type] || hrefData.type; common.displayThumbnail(data.href, $span, function ($thumb) { // Called only if the thumbnail exists - $span.find('.cp-icon').addClass('cp-app-drive-element-list'); + // 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'); }); From dd63cd13d7b103de1716666c616c5b7bf099bc2b Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 18 Oct 2017 16:59:20 +0200 Subject: [PATCH 03/11] Fix profile page title --- www/profile/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/profile/main.js b/www/profile/main.js index bd604dce6..ef2ac9a81 100644 --- a/www/profile/main.js +++ b/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 From 7b8490ad20a89f9b9a00bb2beb1dc614ba0b4347 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Oct 2017 09:58:28 +0200 Subject: [PATCH 04/11] Use less2 in contacts --- www/contacts/app-contacts.less | 79 +++++++++++++++------------------- www/contacts/inner.js | 10 ++--- www/contacts/messenger-ui.js | 73 ++++++++++++++++--------------- 3 files changed, 78 insertions(+), 84 deletions(-) diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 3c40bc59e..6ae7a62da 100644 --- a/www/contacts/app-contacts.less +++ b/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; diff --git a/www/contacts/inner.js b/www/contacts/inner.js index 15146a565..5bd342a48 100644 --- a/www/contacts/inner.js +++ b/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, ]); diff --git a/www/contacts/messenger-ui.js b/www/contacts/messenger-ui.js index 4862e623b..93de3a21f 100644 --- a/www/contacts/messenger-ui.js +++ b/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) { From 515214aed1682846369bd2f999ddc6ba87ce47b5 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Oct 2017 11:59:01 +0200 Subject: [PATCH 05/11] Use present mode in embed code --- www/common/toolbar3.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index 69429f760..3115f10ab 100644 --- a/www/common/toolbar3.js +++ b/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 = $('
    '); $('', {'style':'display:none;'}).appendTo($content); From f43606f71d35bc6366bf811ec6fea82cac785262 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Oct 2017 14:39:38 +0200 Subject: [PATCH 06/11] Present mode to display only the parsed markdown in code --- www/code/app-code.less | 4 ++++ www/code/inner.js | 25 ++++++++++++++++++------- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/www/code/app-code.less b/www/code/app-code.less index d625da0da..d2303d0b2 100644 --- a/www/code/app-code.less +++ b/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; diff --git a/www/code/inner.js b/www/code/inner.js index 02ed48e4b..d5d7edfdd 100644 --- a/www/code/inner.js +++ b/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(); From 22e3baed4bbb83cf94bc849ee2f55b439b67856f Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Oct 2017 15:00:29 +0200 Subject: [PATCH 07/11] Fix sort issues in drive --- www/drive/inner.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/www/drive/inner.js b/www/drive/inner.js index 2c180edc9..2e163d45b 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1592,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; @@ -1647,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); } From 88e7f9a218e2d69934b641d597e835437fae07e0 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Oct 2017 15:05:55 +0200 Subject: [PATCH 08/11] Add last access and creation times in the properties window in drive --- www/drive/inner.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/www/drive/inner.js b/www/drive/inner.js index 2e163d45b..193c4afd7 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -2494,6 +2494,18 @@ define([ })); } + $('