From 747c7ffdc3ca2b75c1175ee55aa0db70a4b970f8 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 14 Sep 2018 17:30:12 +0200 Subject: [PATCH] Improve UI for contextual chat and add warning message --- .../src/less2/include/messenger.less | 18 +++++++ customize.dist/src/less2/include/toolbar.less | 4 +- customize.dist/translations/messages.fr.js | 4 ++ customize.dist/translations/messages.js | 9 ++-- www/contacts/messenger-ui.js | 50 +++++++++++-------- 5 files changed, 58 insertions(+), 27 deletions(-) diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index dfcafb4f8..7a56af1d5 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/customize.dist/src/less2/include/messenger.less @@ -266,6 +266,24 @@ color: darken(@bg-color, 5%); } } + + .cp-app-contacts-header-title { + padding: 10px; + flex: 1; + } + } + .cp-app-contacts-tips { + margin: 1em; + background-color: lighten(@bg-color, 15%); + font-size: 14px; + padding: 10px; + position: relative; + .cp-app-contacts-tips-close { + cursor: pointer; + position: absolute; + top: 2px; + right: 2px; + } } .cp-app-contacts-chat { height: 100%; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 559addc42..cdd1f0cb6 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -150,8 +150,8 @@ background-color: @toolbar-bg-color; background-color: var(--toolbar-bg-color); font: @colortheme_app-font-size @colortheme_font; - width: 30%; - min-width: 400px; + width: 20%; + min-width: 200px; display: block; overflow-y: auto; overflow-x: hidden; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 382774d32..9e8215e3b 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -365,6 +365,8 @@ define(function () { out.contacts_remove = 'Supprimer ce contact'; out.contacts_confirmRemove = 'Êtes-vous sûr de vouloir supprimer {0} de vos contacts ?'; out.contacts_typeHere = "Entrez un message ici..."; + out.contacts_warning = "Tout ce que vous tapez ici est permanent et visible par tous les utilisateurs actuels et futurs de ce pad. Soyez prudent avec vos données confidentielles !"; + out.contacts_padTitle = "Chat"; out.contacts_info1 = "Voici vos contacts. Ici, vous pouvez :"; out.contacts_info2 = "Cliquer sur le nom d'un contact pour discuter avec lui"; @@ -380,6 +382,8 @@ define(function () { out.contacts_rooms = "Salons"; out.contacts_leaveRoom = "Quitter ce salon"; + out.contacts_online = "Un autre utilisateur est en ligne dans ce salon"; + // File manager out.fm_rootName = "Documents"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index eaebca6f7..6c678da44 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -367,12 +367,11 @@ define(function () { out.contacts_remove = 'Remove this contact'; out.contacts_confirmRemove = 'Are you sure you want to remove {0} from your contacts?'; out.contacts_typeHere = "Type a message here..."; + out.contacts_warning = "Everything you type here is persistent and available to all the existing and future users of this pad. Be careful with sensitive information!"; + out.contacts_padTitle = "Chat"; - out.contacts_info1_new = "Here is CryptPad messaging. From here, you can:"; - out.contacts_info2_new = "Click the top icon to chat with members of this pad"; - out.contacts_info2a_new = "Editors and viewers can use the chat"; - out.contacts_info3_new = "Click on your friend's icon to chat with them"; - out.contacts_info3a_new = "You can add a friend by joining the same pad and using the userlist"; + out.contacts_info1 = "These are your contacts. From here, you can:"; + out.contacts_info2 = "Click your contact's icon to chat with them"; out.contacts_info3 = "Double-click their icon to view their profile"; out.contacts_info4 = "Either participant can clear permanently a chat history"; diff --git a/www/contacts/messenger-ui.js b/www/contacts/messenger-ui.js index da54ae063..23c4f7a71 100644 --- a/www/contacts/messenger-ui.js +++ b/www/contacts/messenger-ui.js @@ -52,22 +52,11 @@ define([ var messaging = h('div#cp-app-contacts-messaging', [ h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw.cp-app-contacts-spinner'), h('div.cp-app-contacts-info', [ - h('h2', Messages.contacts_info1_new), + h('h2', Messages.contacts_info1), h('ul', [ - isApp ? h('li', [ - Messages.contacts_info2_new, - h('ul', [ - h('li', Messages.contacts_info2a_new) - ]) - ]) : undefined, // Display the pad chat info only if we're in a pad - h('li', [ - Messages.contacts_info3_new, - h('ul', [ - h('li', Messages.contacts_info3a_new), - h('li', Messages.contacts_info3), - h('li', Messages.contacts_info4), - ]) - ]), + h('li', Messages.contacts_info2), + h('li', Messages.contacts_info3), + h('li', Messages.contacts_info4), ]) ]) ]); @@ -300,11 +289,31 @@ define([ }); var avatar = h('div.cp-avatar'); - var header = h('div.cp-app-contacts-header', [ - avatar, - moreHistory, - data.isFriendChat ? removeHistory: undefined, - ]); + + var headerContent = [avatar, moreHistory, data.isFriendCHat ? removeHistory : undefined]; + if (isApp) { + headerContent = [ + h('div.cp-app-contacts-header-title', Messages.contacts_padTitle), + moreHistory + ]; + } + var header = h('div.cp-app-contacts-header', headerContent); + + var priv = metadataMgr.getPrivateData(); + + var closeTips = h('span.fa.fa-window-close.cp-app-contacts-tips-close'); + var tips; + if (isApp && Util.find(priv.settings, ['general', 'hidetips', 'chat']) !== true) { + tips = h('div.cp-app-contacts-tips', [ + closeTips, + Messages.contacts_warning + ]); + } + $(closeTips).click(function () { + $(tips).hide(); + common.setAttribute(['general', 'hidetips', 'chat'], true); + }); + var messages = h('div.cp-app-contacts-messages'); var input = h('textarea', { placeholder: Messages.contacts_typeHere @@ -386,6 +395,7 @@ define([ 'data-user': data.isFriendChat && curvePublic }, [ header, + tips, messages, h('div.cp-app-contacts-input', [ input,