web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a share button and merge the viewers and editors buttons

Browse Source
This commit is contained in:
yflory 2016-10-25 18:34:23 +02:00
parent 87d86384ac
commit 54a63267cd
6 changed files with 73 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/src/toolbar.less
View File

@ -33,9 +33,9 @@
color: #000; color: #000;
} }
&.cryptpad-lag { &.cryptpad-lag {
float: right; float: left;
line-height: 26px; line-height: 26px;
margin: 2px 0px 2px 4px; margin: 2px 0px;
} }
} }
@ -203,6 +203,9 @@
.cryptpad-toolbar-leftside { .cryptpad-toolbar-leftside {
float: left; float: left;
margin-bottom: -1px; margin-bottom: -1px;
.cryptpad-user-list {
float: right;
}
.cryptpad-dropdown-container { .cryptpad-dropdown-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -255,7 +258,6 @@
} }
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
text-align: right; text-align: right;
margin-right: 30px;
//float: right; //float: right;
} }
.cryptpad-spinner { .cryptpad-spinner {
@ -267,7 +269,7 @@
font-size: 20px; font-size: 20px;
} }
.cryptpad-readonly { .cryptpad-readonly {
margin-right: 20px; margin-right: 5px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }

10
customize.dist/toolbar.css
View File

@ -33,9 +33,9 @@
color: #000; color: #000;
} }
.cryptpad-toolbar div.cryptpad-lag { .cryptpad-toolbar div.cryptpad-lag {
float: right; float: left;
line-height: 26px; line-height: 26px;
margin: 2px 0px 2px 4px; margin: 2px 0px;
} }
.cryptpad-toolbar button, .cryptpad-toolbar button,
.cryptpad-toolbar select, .cryptpad-toolbar select,
@ -210,6 +210,9 @@
float: left; float: left;
margin-bottom: -1px; margin-bottom: -1px;
} }
.cryptpad-toolbar-leftside .cryptpad-user-list {
float: right;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container { .cryptpad-toolbar-leftside .cryptpad-dropdown-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -261,7 +264,6 @@
} }
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
text-align: right; text-align: right;
margin-right: 30px;
} }
.cryptpad-spinner { .cryptpad-spinner {
float: left; float: left;
@ -272,7 +274,7 @@
font-size: 20px; font-size: 20px;
} }
.cryptpad-readonly { .cryptpad-readonly {
margin-right: 20px; margin-right: 5px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }

4
www/code/main.js
View File

@ -405,8 +405,8 @@ define([
$rightside.append($import); $rightside.append($import);
/* add a rename button */ /* add a rename button */
var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb); //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
$rightside.append($setTitle); //$rightside.append($setTitle);
} }
/* add a forget button */ /* add a forget button */

72
www/common/toolbar.js
View File

@ -52,6 +52,7 @@ define([
var $style; var $style;
var firstConnection = true; var firstConnection = true;
var lagErrors = 0;
var styleToolbar = function ($container, href) { var styleToolbar = function ($container, href) {
href = href || '/customize/toolbar.css'; href = href || '/customize/toolbar.css';
@ -108,29 +109,31 @@ define([
'class': 'userlist dropbtn edit', 'class': 'userlist dropbtn edit',
}); });
var $editIconSmall = $editIcon.clone().addClass('small'); var $editIconSmall = $editIcon.clone().addClass('small');
var $viewIcon = $('<button>', { var $shareIcon = $('<button>', {
'class': 'userlist dropbtn view', 'class': 'userlist dropbtn share',
}); });
var $viewIconSmall = $viewIcon.clone().addClass('small'); var $shareIconSmall = $shareIcon.clone().addClass('small');
var $shareTitle = $('<h2>').text(Messages.share);
var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS}); var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS}); /* var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS});
if (readOnly !== 1) { if (readOnly !== 1) {
$dropdownEditShare.append($shareTitle); $dropdownEditShare.append($shareTitle);
} }
var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS}); */ var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownEdit = $('<div>', { var $dropdownEdit = $('<div>', {
id: "cryptpad-dropdown-edit", id: "cryptpad-dropdown-edit",
'class': DROPDOWN_CLS 'class': DROPDOWN_CLS
}).append($dropdownEditUsers).append($dropdownEditShare); }).append($dropdownEditUsers); //.append($dropdownEditShare);
var $dropdownViewShare = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle.clone()); var $shareTitle = $('<h2>').text(Messages.share);
var $dropdownViewContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS}); var $shareTitle2 = $('<h2>').text(Messages.share + 'VIEW');
var $dropdownView = $('<div>', { var $dropdownShareP = $('<p>', {'class': EDITSHARE_CLS}).append($shareTitle);
id: "cryptpad-dropdown-view", var $dropdownShareP2 = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle2);
var $dropdownShareContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownShare = $('<div>', {
id: "cryptpad-dropdown-share",
'class': DROPDOWN_CLS 'class': DROPDOWN_CLS
}).append($dropdownViewShare); }).append($dropdownShareP).append($dropdownShareP2);
var createHandler = function ($elmt) { var createHandler = function ($elmt) {
return function () { return function () {
@ -144,27 +147,26 @@ define([
}; };
$editIcon.click(createHandler($dropdownEdit)); $editIcon.click(createHandler($dropdownEdit));
$editIconSmall.click(createHandler($dropdownEdit)); $editIconSmall.click(createHandler($dropdownEdit));
$viewIcon.click(createHandler($dropdownView)); $shareIcon.click(createHandler($dropdownShare));
$viewIconSmall.click(createHandler($dropdownView)); $shareIconSmall.click(createHandler($dropdownShare));
$dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit); $dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit);
$dropdownViewContainer.append($viewIcon).append($viewIconSmall).append($dropdownView); $dropdownShareContainer.append($shareIcon).append($shareIconSmall).append($dropdownShare);
$listElement.append($dropdownEditContainer); $listElement.append($dropdownEditContainer);
if (readOnly !== -1) { /* if (readOnly !== -1) {*/
$listElement.append($dropdownViewContainer); $listElement.append($dropdownShareContainer);
} /* }
*/
}; };
var createUserList = function ($container, readOnly) { var createUserList = function ($container, readOnly) {
var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing); var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing);
var $usernameElement = $('<span>', {'class': USERNAME_CLS});
var $userlist = $('<div>', { var $userlist = $('<div>', {
'class': USER_LIST_CLS, 'class': USER_LIST_CLS,
id: uid(), id: uid(),
}).append($state).append($usernameElement); }).append($state);
createUserButtons($userlist, readOnly); createUserButtons($userlist, readOnly);
$container.append($userlist); $container.append($userlist);
return $userlist[0]; return $userlist[0];
@ -247,13 +249,12 @@ define([
var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>'; var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>'; var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>';
var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>'; var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
$userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + ' ' + fa_caretdown); $userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + ', ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown);
$userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + ' ' + fa_caretdown); $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + ', ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
$userButtons.find('.userlist.view').html(fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown); $userButtons.find('.userlist.share').html('SHARE ' + fa_caretdown);
$userButtons.find('.userlist.view.small').html(fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown); $userButtons.find('.userlist.share.small').html('SHARE SMALL ' + fa_caretdown);
if (readOnly === 1) { if (readOnly === 1) {
// TODO
$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>'); $userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
} }
else { else {
@ -262,7 +263,9 @@ define([
if (!name) { if (!name) {
name = Messages.anonymous; name = Messages.anonymous;
} }
$userElement.find("button").html(icon + ' ' + name).show(); console.log($userElement);
$userElement.find("button").show();
$userElement.find("button").html(icon + ' ' + name);
} }
}; };
@ -284,7 +287,8 @@ define([
'class': 'lag' 'class': 'lag'
}); });
var title; var title;
if(lag) { if (typeof lag !== "undefined") {
lagErrors = 0;
firstConnection = false; firstConnection = false;
title = Messages.lag + ' : ' + lag + ' ms\n'; title = Messages.lag + ' : ' + lag + ' ms\n';
if (lag.waiting || lag > 1000) { if (lag.waiting || lag > 1000) {
@ -295,13 +299,19 @@ define([
title += Messages.greenLight; title += Messages.greenLight;
} }
} }
else if (!firstConnection){ else if (!firstConnection) {
lagErrors++;
// Display the red light at the 2nd failed attemp to get the lag
if (lagErrors > 1) {
lagLight.addClass('lag-red'); lagLight.addClass('lag-red');
title = Messages.redLight; title = Messages.redLight;
} }
}
if (title) {
lagLight.attr('title', title); lagLight.attr('title', title);
$(lagElement).html(''); $(lagElement).html('');
$(lagElement).append(lagLight); $(lagElement).append(lagLight);
}
}; };
var createLinkToMain = function ($topContainer) { var createLinkToMain = function ($topContainer) {
@ -378,7 +388,7 @@ define([
var $text = $('<span>', { var $text = $('<span>', {
title: Messages.clickToEdit title: Messages.clickToEdit
}).appendTo($titleContainer); }).appendTo($titleContainer);
if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return; } if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
var $input = $('<input>', { var $input = $('<input>', {
type: 'text', type: 'text',
placeholder: placeholder placeholder: placeholder
@ -427,7 +437,7 @@ define([
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container);
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly); var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly);
var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS)); var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS)); var lagElement = createLagElement($(userListElement));
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad); var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS)); var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS)); var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS));

4
www/pad/main.js
View File

@ -576,8 +576,8 @@ define([
$rightside.append($import); $rightside.append($import);
/* add a rename button */ /* add a rename button */
var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb); //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
$rightside.append($setTitle); //$rightside.append($setTitle);
} }
/* add a forget button */ /* add a forget button */

4
www/slide/main.js
View File

@ -450,8 +450,8 @@ define([
$rightside.append($import); $rightside.append($import);
/* add a rename button */ /* add a rename button */
var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb); //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
$rightside.append($setTitle); //$rightside.append($setTitle);
} }
/* add a forget button */ /* add a forget button */