From e0f7df80b3ede7ddf520de9b4ba50a21ad95d790 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 31 Oct 2017 11:11:29 +0100
Subject: [PATCH] Fix avatar upload and use less2 everywhere in profile

---
 customize.dist/src/less/variables.less        |  6 +--
 .../src/less2/include/colortheme.less         |  6 ++-
 .../src/less2/include/sidebar-layout.less     | 16 ++++---
 www/profile/app-profile.less                  | 32 ++++++-------
 www/profile/inner.html                        |  2 +-
 www/profile/inner.js                          | 47 ++++++++++---------
 www/profile/main.js                           |  2 +-
 7 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index 4d804abea..1d3415d89 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -102,9 +102,9 @@
 
 @category-bg: #f4f4f4;
 
-@button-bg: #3066e5;
-@button-alt-bg: #fff;
-@button-red-bg: #e54e4e;
+@button-bg: @colortheme_sidebar-button-bg;
+@button-alt-bg: @colortheme_sidebar-button-alt-bg;
+@button-red-bg: @colortheme_sidebar-button-red-bg;
 
 .unselectable () {
     -webkit-touch-callout: none;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index d3db9e7cd..4893f5fa2 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -79,7 +79,7 @@
 @colortheme_todo-bg: #7bccd1;
 @colortheme_todo-color: #000;
 
-// Sidebar layout
+// Sidebar layout (profile / settings)
 @colortheme_sidebar-active: #fff;
 @colortheme_sidebar-left-bg: #eee;
 @colortheme_sidebar-left-fg: #000;
@@ -87,7 +87,9 @@
 @colortheme_sidebar-right-bg: #fff;
 @colortheme_sidebar-right-fg: #000;
 @colortheme_sidebar-description: #777;
-
+@colortheme_sidebar-button-bg: #3066e5;
+@colortheme_sidebar-button-red-bg: #e54e4e;
+@colortheme_sidebar-button-alt-bg: #fff;
 
 @cryptpad_color_blue: #4591C4; 
 @cryptpad_color_grey: #999999;
diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index 86f0b3a75..e0bec9dcf 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/customize.dist/src/less2/include/sidebar-layout.less
@@ -13,29 +13,31 @@
     input[type="text"] {
         padding-left: 10px;
     }
-    #container {
+    #cp-sidebarlayout-container {
         font-size: 16px;
         display: flex;
         flex: 1;
         min-height: 0;
-        #leftSide {
+        #cp-sidebarlayout-leftside {
             color: @leftside-color;
             width: 250px;
             background: @leftside-bg;
             display: flex;
             flex-flow: column;
-            .categories {
+            .cp-sidebarlayout-categories {
                 flex: 1;
-                .category {
+                .cp-sidebarlayout-category {
                     .leftside-menu-category_main();
                 }
             }
         }
-        #rightSide {
+        #cp-sidebarlayout-rightside {
             flex: 1;
             padding: 5px 20px;
             color: @rightside-color;
             overflow: auto;
+
+            // Following rules are only in settings
             .element {
                 label:not(.noTitle), .label {
                     display: block;
@@ -73,8 +75,8 @@
                 margin: 10px 0;
             }
             button.btn {
-                @button-bg: #3066e5;
-                @button-red-bg: #e54e4e;
+                @button-bg: @colortheme_sidebar-button-bg;
+                @button-red-bg: @colortheme_sidebar-button-red-bg;
                 background-color: @button-bg;
                 border-color: darken(@button-bg, 10%);
                 color: white;
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index d776f52fc..99ea178aa 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -19,15 +19,15 @@
 &.cp-app-profile {
     display: flex;
     flex-flow: column;
-    #header {
+    #cp-app-profile-header {
         display: flex;
-        #rightside {
+        #cp-app-profile-rightside {
             flex: 1;
             display: flex;
             flex-flow: column;
         }
     }
-    #avatar {
+    #cp-app-profile-avatar {
         width: 300px;
         //height: 350px;
         margin: 10px;
@@ -42,7 +42,7 @@
             border-radius: 4px;
             overflow: hidden;
             position: relative;
-            .delete {
+            .cp-app-profile-avatar-delete {
                 right: 0;
                 position: absolute;
                 opacity: 0.7;
@@ -75,7 +75,7 @@
             margin: 5px;
         }
     }
-    #displayName, #link {
+    #cp-app-profile-displayname, #cp-app-profile-link {
         width: 100%;
         height: 40px;
         margin: 10px 0;
@@ -88,44 +88,44 @@
         input:focus ~ .edit {
             display: none;
         }
-        .edit {
+        .cp-app-profile-input-edit {
             position: absolute;
             margin-left: -25px;
             margin-top: 8px;
         }
-        .temp {
+        .cp-app-profile-input-temp {
             font-weight: 400;
             font-family: sans-serif;
         }
-        .displayName {
+        .cp-app-profile-input-displayname {
             font-weight: bold;
             font-size: 30px;
         }
-        .link {
+        .cp-app-profile-input-link {
             font-size: 25px;
         }
-        .displayName, .link {
+        .cp-app-profile-input-displayname, .cp-app-profile-input-link {
             line-height: 40px;
         }
     }
 
     // I tried using flexbox but messed with how the pencil icon was displayed
-    #inviteButton {
+    #cp-app-profile-invite-button {
         float: right;
     }
-    #viewProfileButton {
+    #cp-app-profile-viewprofile-button {
         margin-bottom: 20px;
         float: right;
     }
-    #description {
+    #cp-app-profile-description {
         position: relative;
         font-size: 16px;
         border: 1px solid #DDD;
         margin-bottom: 20px;
-        .rendered {
+        .cp-app-profile-description-rendered {
             padding: 0 15px;
         }
-        .ok, .spin {
+        .cp-app-profile-description-ok, .cp-app-profile-description-spin {
             position: absolute;
             top: 2px;
             right: 2px;
@@ -149,7 +149,7 @@
             }
         }
     }
-    #createProfile {
+    #cp-app-profile-create {
         height: 100%;
         display: flex;
         flex-flow: column;
diff --git a/www/profile/inner.html b/www/profile/inner.html
index b3ee6ea04..48f0531f9 100644
--- a/www/profile/inner.html
+++ b/www/profile/inner.html
@@ -9,7 +9,7 @@
 </head>
 <body class="cp-app-profile">
     <div id="cp-toolbar" class="cp-toolbar-container"></div>
-    <div id="container"></div>
+    <div id="cp-sidebarlayout-container"></div>
     <noscript>
         <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
         <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
diff --git a/www/profile/inner.js b/www/profile/inner.js
index a09fa921c..83df20935 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -75,16 +75,16 @@ define([
         return '<li'+ cls + '>' + text + '</li>\n';
     };
 
-    var DISPLAYNAME_ID = "displayName";
-    var LINK_ID = "link";
-    var AVATAR_ID = "avatar";
-    var DESCRIPTION_ID = "description";
-    var PUBKEY_ID = "pubKey";
-    var CREATE_ID = "createProfile";
-    var HEADER_ID = "header";
-    var HEADER_RIGHT_ID = "rightside";
-    var CREATE_INVITE_BUTTON = 'inviteButton'; /* jshint ignore: line */
-    var VIEW_PROFILE_BUTTON = 'viewProfileButton';
+    var DISPLAYNAME_ID = "cp-app-profile-displayname";
+    var LINK_ID = "cp-app-profile-link";
+    var AVATAR_ID = "cp-app-profile-avatar";
+    var DESCRIPTION_ID = "cp-app-profile-description";
+    var PUBKEY_ID = "cp-app-profile-pubkey";
+    var CREATE_ID = "cp-app-profile-create";
+    var HEADER_ID = "cp-app-profile-header";
+    var HEADER_RIGHT_ID = "cp-app-profile-rightside";
+    var CREATE_INVITE_BUTTON = 'cp-app-profile-invite-button'; /* jshint ignore: line */
+    var VIEW_PROFILE_BUTTON = 'cp-app-profile-viewprofile-button';
 
     var common;
     var sFrameChan;
@@ -98,7 +98,7 @@ define([
                 'id': name+'Input',
                 placeholder: ph
             }).val(value);
-            var $icon = $('<span>', {'class': 'fa fa-pencil edit'});
+            var $icon = $('<span>', {'class': 'fa fa-pencil cp-app-profile-input-edit'});
             var editing = false;
             var todo = function () {
                 if (editing) { return; }
@@ -273,7 +273,7 @@ define([
             if (APP.readOnly) { return; }
 
             var $delButton = $('<button>', {
-                'class': 'delete btn btn-danger fa fa-times',
+                'class': 'cp-app-profile-avatar-delete btn btn-danger fa fa-times',
                 title: Messages.fc_delete
             });
             $span.append($delButton);
@@ -333,15 +333,20 @@ define([
 
         if (APP.readOnly) {
             if (!(APP.lm.proxy.description || "").trim()) { return void $block.hide(); }
-            var $div = $('<div>', {'class': 'rendered'}).appendTo($block);
+            var $div = $('<div>', {'class': 'cp-app-profile-description-rendered'}).appendTo($block);
             var val = Marked(APP.lm.proxy.description);
             $div.html(val);
             return;
         }
         $('<h3>').text(Messages.profile_description).insertBefore($block);
 
-        var $ok = $('<span>', {'class': 'ok fa fa-check', title: Messages.saved}).appendTo($block);
-        var $spinner = $('<span>', {'class': 'spin fa fa-spinner fa-pulse'}).appendTo($block);
+        var $ok = $('<span>', {
+            'class': 'cp-app-profile-description-ok fa fa-check',
+            title: Messages.saved
+        }).appendTo($block);
+        var $spinner = $('<span>', {
+            'class': 'cp-app-profile-description-spin fa fa-spinner fa-pulse'
+        }).appendTo($block);
         var $textarea = $('<textarea>').val(APP.lm.proxy.description || '');
         $block.append($textarea);
         var editor = APP.editor = CodeMirror.fromTextArea($textarea[0], {
@@ -371,10 +376,8 @@ define([
     };
 
     var createLeftside = function () {
-        var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
-        APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
-
-        var $category = $('<div>', {'class': 'category'}).appendTo($categories);
+        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'}).appendTo(APP.$leftside);
+        var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
         $category.append($('<span>', {'class': 'fa fa-user'}));
         $category.addClass('cp-leftside-active');
         $category.append(Messages.profileButton);
@@ -426,10 +429,10 @@ define([
         $(waitFor(Cryptpad.addLoadingScreen));
         SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
     }).nThen(function (waitFor) {
-        APP.$container = $('#container');
+        APP.$container = $('#cp-sidebarlayout-container');
         APP.$toolbar = $('#cp-toolbar');
-        APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
-        APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
+        APP.$leftside = $('<div>', {id: 'cp-sidebarlayout-leftside'}).appendTo(APP.$container);
+        APP.$rightside = $('<div>', {id: 'cp-sidebarlayout-rightside'}).appendTo(APP.$container);
         sFrameChan = common.getSframeChannel();
         sFrameChan.onReady(waitFor());
     }).nThen(function (/*waitFor*/) {
diff --git a/www/profile/main.js b/www/profile/main.js
index d25f04606..8cafaade7 100644
--- a/www/profile/main.js
+++ b/www/profile/main.js
@@ -70,7 +70,7 @@ define([
                 var chanId = Cryptpad.hrefToHexChannelId(data);
                 Cryptpad.pinPads([chanId], function (e) {
                     if (e) { return void cb(e); }
-                    Cryptpad.getProxy().profile.avatar = data.url;
+                    Cryptpad.getProxy().profile.avatar = data;
                     Cryptpad.whenRealtimeSyncs(Cryptpad.getRealtime(), function () {
                         cb();
                     });