Add a share button and merge the viewers and editors buttons

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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