From 2afdc113270381206425815de86448a577c56638 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 13 Jan 2017 16:42:30 +0100 Subject: [PATCH] Replace the username button by a dropdown menu --- customize.dist/main.css | 2 +- customize.dist/src/less/dropdown.less | 2 +- customize.dist/src/less/toolbar.less | 17 +++++-- customize.dist/toolbar.css | 16 ++++-- www/code/main.js | 21 ++++---- www/common/cryptpad-common.js | 6 ++- www/common/toolbar.js | 72 +++++++++++++++++++++++---- www/drive/main.js | 55 ++++++++++---------- www/pad/main.js | 21 +++++--- www/poll/main.js | 21 ++++---- www/slide/main.js | 21 ++++---- 11 files changed, 167 insertions(+), 87 deletions(-) diff --git a/customize.dist/main.css b/customize.dist/main.css index c79ae08f9..7a638b7d5 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -376,7 +376,7 @@ background: #bbb; } .dropdown-bar .dropdown-bar-content p { - width: 210px; + min-width: 160px; padding: 5px; margin: 0; white-space: normal; diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less index f3c10eb66..43bdab128 100644 --- a/customize.dist/src/less/dropdown.less +++ b/customize.dist/src/less/dropdown.less @@ -63,7 +63,7 @@ } p { - width: 210px; + min-width: 160px; padding: 5px; margin: 0; white-space: normal; diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index f9d4757b6..7e78bfe8d 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -26,6 +26,8 @@ box-sizing: border-box; padding: 0px 6px; + .fa {font-family: FontAwesome;} + .unselectable; font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; @@ -287,10 +289,17 @@ font-weight: bold; text-transform: uppercase; } -.cryptpad-toolbar-username { - line-height: 32px; - button { - line-height: initial; + .fa-user { + margin-right: 5px; + } +.cryptpad-user { + .buttonTitle { + .fa-user { + margin-right: 5px; + } + .cryptpad-toolbar-username { + margin-right: 5px; + } } } .lag { diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index c8a34ab11..5fb4f90b6 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -45,7 +45,7 @@ background: #bbb; } .dropdown-bar .dropdown-bar-content p { - width: 210px; + min-width: 160px; padding: 5px; margin: 0; white-space: normal; @@ -103,6 +103,9 @@ width: 100%; z-index: 9001; } +.cryptpad-toolbar .fa { + font-family: FontAwesome; +} .cryptpad-toolbar a { float: right; } @@ -357,11 +360,14 @@ font-weight: bold; text-transform: uppercase; } -.cryptpad-toolbar-username { - line-height: 32px; +.fa-user { + margin-right: 5px; } -.cryptpad-toolbar-username button { - line-height: initial; +.cryptpad-user .buttonTitle .fa-user { + margin-right: 5px; +} +.cryptpad-user .buttonTitle .cryptpad-toolbar-username { + margin-right: 5px; } .lag { height: 15px !important; diff --git a/www/code/main.js b/www/code/main.js index ebdb90167..d0e7cb8f2 100644 --- a/www/code/main.js +++ b/www/code/main.js @@ -366,6 +366,14 @@ define([ var onInit = config.onInit = function (info) { userList = info.userList; + + module.userName = {}; + // The lastName is stored in an object passed to the toolbar so that when the user clicks on + // the "change display name" button, the prompt already knows his current name + getLastName(function (err, lastName) { + module.userName.lastName = lastName; + }); + var config = { userData: userData, readOnly: readOnly, @@ -375,6 +383,10 @@ define([ defaultName: defaultName, suggestName: suggestName }, + userName: { + setName: setName, + lastName: module.userName + }, common: Cryptpad }; if (readOnly) {delete config.changeNameID; } @@ -392,15 +404,6 @@ define([ editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); } - // Store the object sent for the "change username" button so that we can update the field value correctly - var userNameButtonObject = module.userName = {}; - /* add a "change username" button */ - getLastName(function (err, lastName) { - userNameButtonObject.lastName = lastName; - var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide(); - $userBlock.append($username); - }); - /* add an export button */ var $export = Cryptpad.createButton('export', true, {}, exportText); $rightside.append($export); diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index abe919fc2..9ae31a238 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -984,7 +984,9 @@ define([ return $container; }; - var createLanguageSelector = common.createLanguageSelector = function ($container, $block) { + // Provide $container if you want to put the generated block in another element + // Provide $initBlock if you already have the menu block and you want the content inserted in it + var createLanguageSelector = common.createLanguageSelector = function ($container, $initBlock) { var options = []; var languages = Messages._languages; for (var l in languages) { @@ -1002,7 +1004,7 @@ define([ text: Messages.language, // Button initial text options: options, // Entries displayed in the menu left: true, // Open to the left of the button - container: $block // optional + container: $initBlock // optional }; var $block = createDropdown(dropdownConfig); $block.attr('id', 'language-selector'); diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 6a76867db..c92840610 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -233,16 +233,18 @@ define([ var $userElement = $userAdminElement.find('.' + USERNAME_CLS); $userElement.show(); if (readOnly === 1) { - $userElement.html('' + Messages.readonly + ''); + //$userElement.html('' + Messages.readonly + ''); + $userElement.addClass('ro').text(Messages.readonly); } else { var name = userData[myUserName] && userData[myUserName].name; - var icon = ''; + //var icon = ''; if (!name) { name = Messages.anonymous; } - $userElement.find("button").show(); - $userElement.find("button").html(icon + ' ' + name); + // $userElement.find("button").show(); + // $userElement.find("button").html(icon + ' ' + name); + $userElement.removeClass('ro').text(name); } }; @@ -318,8 +320,9 @@ define([ $linkContainer.append($aTagSmall).append($aTagBig); }; - var createUserAdmin = function ($topContainer, lagElement, Cryptpad) { + var createUserAdmin = function ($topContainer, config, lagElement, Cryptpad) { var $lag = $(lagElement); + //TODO check if we should displayed that button and if we can (userName.setName, userName.lastName and userdata required) var $userContainer = $('', { 'class': USER_CLS @@ -334,7 +337,57 @@ define([ // Dropdown language selector Cryptpad.createLanguageSelector($userContainer); - var $usernameElement = $('', {'class': USERNAME_CLS}).appendTo($userContainer); + // User dropdown + var $displayedName = $('', {'class': USERNAME_CLS}); + var accountName = null; //TODO Cryptpad.getStore().getAccountName() + var account = typeof accountName === "string"; + var $userAdminContent = $('

'); + if (account) { + var $userAccount = $('', {'class': 'userAccount'}).append('Account: ' + accountName); + $userAdminContent.append($userAccount); + $userAdminContent.append($('
')); + } + var $userName = $('', {'class': 'userDisplayName'}).append('Display name: ').append($displayedName.clone()); + $userAdminContent.append($userName); + var options = [{ + tag: 'p', + content: $userAdminContent.html() + }, { + tag: 'a', + attributes: {'class': 'changeUserName'}, + content: 'Change username' + }, { + tag: 'a', + attributes: {'class': 'login'}, //TODO + content: 'Login' + }, { + tag: 'a', + attributes: {'class': 'logout'}, //TODO + content: 'Logout' + }]; + var $icon = $('', {'class': 'fa fa-user'}); + var $button = $('

').append($icon).append($displayedName.clone()); + if (account) { + $button.append('(' + accountName + ')'); + } + var dropdownConfig = { + text: $button.html(), // Button initial text + options: options, // Entries displayed in the menu + left: true, // Open to the left of the button + }; + var $userAdmin = Cryptpad.createDropdown(dropdownConfig); + $userContainer.append($userAdmin); + + $userAdmin.find('a.logout').click(function (e) { + Cryptpad.logout(); + }); + if (config.userName && config.userName.setName && config.userName.lastName) { + $userAdmin.find('a.changeUserName').click(function (e) { + Cryptpad.prompt(Messages.changeNamePrompt, config.userName.lastName.lastName || '', function (newName) { + config.userName.setName(newName); + }); + }); + } return $userContainer; }; @@ -427,7 +480,7 @@ define([ var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad); var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS)); var lagElement = createLagElement(); - var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), lagElement, Cryptpad); + var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), config, lagElement, Cryptpad); var spinner = createSpinner($userAdminElement); var userData = config.userData; // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode) @@ -465,14 +518,11 @@ define([ } // Update user list - if (config.userData) { + if (userData) { userList.change.push(function (newUserData) { var users = userList.users; if (users.indexOf(myUserName) !== -1) { connected = true; } if (!connected) { return; } - /*if (newUserData) { // Someone has changed his name/color - userData = newUserData; - }*/ checkSynchronizing(users, myUserName, $stateElement); updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement); }); diff --git a/www/drive/main.js b/www/drive/main.js index e75a87082..17810848f 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -152,40 +152,16 @@ define([ }); }; - var setName = APP.setName = function (newName) { - if (typeof(newName) !== 'string') { return; } - var myUserNameTemp = Cryptpad.fixHTML(newName.trim()); - if(myUserNameTemp.length > 32) { - myUserNameTemp = myUserNameTemp.substr(0, 32); - } - var myUserName = myUserNameTemp; - Cryptpad.setAttribute('username', myUserName, function (err, data) { - if (err) { - logError("Couldn't set username", err); - return; - } - APP.userName.lastName = myUserName; - var $button = APP.$userNameButton; - var $span = $('
').append($button.find('span').clone()).html(); - $button.html($span + myUserName); - }); - }; - - var $userBlock = APP.$bar.find('.' + Toolbar.constants.username); - // Store the object sent for the "change username" button so that we can update the field value correctly var userNameButtonObject = APP.userName = {}; /* add a "change username" button */ if (!APP.readOnly) { getLastName(function (err, lastName) { - userNameButtonObject.lastName = lastName; - var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide(); - $userBlock.append($username); - $username.append(lastName); - $username.show(); + APP.userName.lastName = lastName; + APP.$displayName.text(lastName); }); } else { - $userBlock.html('' + Messages.readonly + ''); + APP.$displayName.html('' + Messages.readonly + ''); } // FILE MANAGER @@ -1703,6 +1679,23 @@ define([ refresh(); }; + var setName = APP.setName = function (newName) { + if (typeof(newName) !== 'string') { return; } + var myUserNameTemp = Cryptpad.fixHTML(newName.trim()); + if(myUserNameTemp.length > 32) { + myUserNameTemp = myUserNameTemp.substr(0, 32); + } + var myUserName = myUserNameTemp; + Cryptpad.setAttribute('username', myUserName, function (err, data) { + if (err) { + logError("Couldn't set username", err); + return; + } + APP.userName.lastName = myUserName; + APP.$displayName.text(myUserName); + }); + }; + // don't initialize until the store is ready. Cryptpad.ready(function () { var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy ? Cryptpad.getStore().getProxy() : undefined; @@ -1752,17 +1745,23 @@ define([ }); var userList = APP.userList = info.userList; + APP.userName = {}; var config = { readOnly: readOnly, ifrw: window, common: Cryptpad, + userName: { + setName: setName, + lastName: APP.userName + }, hideShare: true }; var toolbar = APP.toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config); var $bar = APP.$bar; var $rightside = $bar.find('.' + Toolbar.constants.rightside); - var $userBlock = $bar.find('.' + Toolbar.constants.username); + var $userBlock = $bar.find('.' + Toolbar.constants.userAdmin); + APP.$displayName = $bar.find('.' + Toolbar.constants.username); if (APP.homePageIframe) { var $linkToMain = $bar.find('.cryptpad-link a'); diff --git a/www/pad/main.js b/www/pad/main.js index e4ef057cd..77bce183f 100644 --- a/www/pad/main.js +++ b/www/pad/main.js @@ -559,6 +559,14 @@ define([ var onInit = realtimeOptions.onInit = function (info) { userList = info.userList; + + module.userName = {}; + // The lastName is stored in an object passed to the toolbar so that when the user clicks on + // the "change display name" button, the prompt already knows his current name + getLastName(function (err, lastName) { + module.userName.lastName = lastName; + }); + var config = { userData: userData, readOnly: readOnly, @@ -568,6 +576,10 @@ define([ defaultName: defaultName, suggestName: suggestName }, + userName: { + setName: setName, + lastName: module.userName + }, common: Cryptpad }; if (readOnly) {delete config.changeNameID; } @@ -585,14 +597,7 @@ define([ editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); } - // Store the object sent for the "change username" button so that we can update the field value correctly - var userNameButtonObject = module.userName = {}; - /* add a "change username" button */ - getLastName(function (err, lastName) { - userNameButtonObject.lastName = lastName; - var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide(); - $userBlock.append($username); - }); + /* add an export button */ var $export = Cryptpad.createButton('export', true, {}, exportFile); diff --git a/www/poll/main.js b/www/poll/main.js index 5f76a60b7..0cd55c8ef 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -643,6 +643,14 @@ define([ }); userList = APP.userList = info.userList; + + APP.userName = {}; + // The lastName is stored in an object passed to the toolbar so that when the user clicks on + // the "change display name" button, the prompt already knows his current name + getLastName(function (err, lastName) { + APP.userName.lastName = lastName; + }); + var config = { userData: userData, readOnly: readOnly, @@ -651,6 +659,10 @@ define([ defaultName: defaultName, suggestName: suggestName }, + userName: { + setName: setName, + lastName: APP.userName + }, ifrw: window, common: Cryptpad, }; @@ -662,15 +674,6 @@ define([ var $editShare = $bar.find('.' + Toolbar.constants.editShare); var $viewShare = $bar.find('.' + Toolbar.constants.viewShare); - // Store the object sent for the "change username" button so that we can update the field value correctly - var userNameButtonObject = APP.userName = {}; - /* add a "change username" button */ - getLastName(function (err, lastName) { - userNameButtonObject.lastName = lastName; - var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide(); - $userBlock.append($username); - }); - /* add a forget button */ var forgetCb = function (err, title) { if (err) { return; } diff --git a/www/slide/main.js b/www/slide/main.js index cd8180b0f..54e0e7a5f 100644 --- a/www/slide/main.js +++ b/www/slide/main.js @@ -409,6 +409,14 @@ define([ var onInit = config.onInit = function (info) { userList = info.userList; + + module.userName = {}; + // The lastName is stored in an object passed to the toolbar so that when the user clicks on + // the "change display name" button, the prompt already knows his current name + getLastName(function (err, lastName) { + module.userName.lastName = lastName; + }); + var config = { userData: userData, readOnly: readOnly, @@ -418,6 +426,10 @@ define([ defaultName: defaultName, suggestName: suggestName }, + userName: { + setName: setName, + lastName: module.userName + }, common: Cryptpad }; if (readOnly) {delete config.changeNameID; } @@ -435,15 +447,6 @@ define([ editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); } - // Store the object sent for the "change username" button so that we can update the field value correctly - var userNameButtonObject = module.userName = {}; - /* add a "change username" button */ - getLastName(function (err, lastName) { - userNameButtonObject.lastName = lastName; - var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide(); - $userBlock.append($username); - }); - /* add an export button */ var $export = Cryptpad.createButton('export', true, {}, exportText); $rightside.append($export);