CSS for the removeHistory button in contacts

customize.dist/translations/messages.fr.js

@@ -278,6 +278,10 @@ define(function () {
     out.contacts_info3 = "Double-cliquer sur son nom pour voir son profil";
     out.contacts_info4 = "Chaque participant peut nettoyer définitivement l'historique d'une discussion";
 
+    out.contacts_removeHistoryTitle = "Supprimer l'historique du chat";
+    out.contacts_confirmRemoveHistory = 'Êtes-vous sûr de vouloir supprimer définitivement l\'historique de votre chat ? Les messages ne pourront pas être restaurés.';
+    out.contacts_removeHistoryServerError = 'Une erreur est survenue lors de la supprimer de l\'historique du chat. Veuillez réessayer plus tard.';
+
     // File manager
 
     out.fm_rootName = "Documents";

customize.dist/translations/messages.js

@@ -282,6 +282,7 @@ define(function () {
     out.contacts_info3 = "Double-click their icon to view their profile";
     out.contacts_info4 = "Either participant can clear permanently a chat history";
 
+    out.contacts_removeHistoryTitle = 'Clean the chat history';
     out.contacts_confirmRemoveHistory = 'Are you sure you want to permanently remove your chat history? Data cannot be restored';
     out.contacts_removeHistoryServerError = 'There was an error while removing your chat history. Try again later';
 

www/common/common-messaging.js

@@ -284,15 +284,15 @@ define([
         var proxy = common.getProxy();
 
         var $header = $('<div>', {
-            'class': 'cp-contact-top-bar header',
+            'class': 'header',
         }).appendTo($container);
 
         var $avatar = $('<div>', {'class': 'avatar'}).appendTo($header);
 
         var $removeHistory = $('<span>', {
-            'class': 'remove-history fa fa-eraser'
+            'class': 'remove-history fa fa-eraser',
+            title: common.Messages.contacts_removeHistoryTitle
         })
-        // TODO set title
         .click(function () {
             Cryptpad.confirm(common.Messages.contacts_confirmRemoveHistory, function (yes) {
                 if (!yes) { return; }

www/contacts/main.less

@@ -112,24 +112,6 @@ body {
     }
 }
 
-.cp-contact-top-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .avatar,
-    .right-col {
-         flex:1 1 auto;
-    }
-    .remove-history {
-        height: 100%;
-
-        &:hover {
-            background-color: lighten(@bg-color, 20%);
-        }
-    }
-}
-
 #messaging {
     flex: 1;
     height: 100%;
@@ -140,7 +122,27 @@ body {
     }
     .header {
         background-color: lighten(@bg-color, 15%);
-        padding: 10px;
+        padding: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 50px;
+
+        .avatar,
+        .right-col {
+             flex:1 1 auto;
+        }
+        .remove-history {
+            height: 100%;
+            line-height: 30px;
+            padding: 10px;
+            &:hover {
+                background-color: rgba(50,50,50,0.3);
+            }
+        }
+        .avatar {
+            margin: 10px;
+        }
     }
     .chat {
         height: 100%;