Use the new dropdown for userlist and share

pull/1/head
yflory 8 years ago
parent efffd4974f
commit 4adde0f0c0

@ -334,10 +334,12 @@
position: relative;
display: inline-block;
}
.dropdown-bar button .fa {
margin-left: 5px;
.dropdown-bar .fa {
font-family: FontAwesome;
}
.dropdown-bar button .fa-caret-down {
margin-left: 5px;
}
.dropdown-bar .dropdown-bar-content {
display: none;
position: absolute;
@ -373,6 +375,29 @@
height: 1px;
background: #bbb;
}
.dropdown-bar .dropdown-bar-content p {
width: 210px;
padding: 5px;
margin: 0;
white-space: normal;
}
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
text-align: baseline;
}
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .yourself,
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .anonymous,
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .viewer {
font-style: italic;
}
.dropdown-bar .dropdown-bar-content p h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
white-space: normal;
}
html.cp,
.cp body {
font-size: .875em;

@ -12,11 +12,14 @@
}
}
button {
.fa {
margin-left: 5px;
font-family: FontAwesome;
}
button {
.fa-caret-down{
margin-left: 5px;
}
}
.dropdown-bar-content {
@ -58,6 +61,28 @@
height: 1px;
background: #bbb;
}
p {
width: 210px;
padding: 5px;
margin: 0;
white-space: normal;
&.cryptpad-dropdown-users {
text-align:baseline;
.yourself, .anonymous, .viewer {
font-style: italic;
}
}
h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
white-space: normal;
}
}
}
}

@ -65,6 +65,11 @@
margin: 3px 2px;
}
.dropdown-bar-content {
margin-top: -3px;
margin-right: 2px;
}
button {
background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
@ -74,14 +79,17 @@
&:hover {
background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
}
&.userlist {
}
.large {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
&.small {
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@ -89,8 +97,6 @@
display: none;
}
}
}
}
.cryptpad-state {
line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
@ -262,54 +268,9 @@
.cryptpad-user-list {
float: right;
}
.cryptpad-dropdown-container {
position: relative;
display: inline-block;
padding: 0px;
.cryptpad-dropdown {
z-index:1000;
display:none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
height: auto;
padding: 5px;
white-space: normal;
p {
width: 210px;
padding: 0;
margin: 0;
white-space: normal;
&.cryptpad-dropdown-users {
text-align:baseline;
.yourself, .anonymous, .viewer {
font-style: italic;
}
}
h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
white-space: normal;
}
}
button {
white-space: normal;
margin: 2px 0px;
}
}
}
button {
margin: 2px 4px 2px 0px;
}
.cryptpad-userbuttons-container {
/*display: none;*/
}
}
.cryptpad-toolbar-rightside {
text-align: right;

@ -3,10 +3,12 @@
position: relative;
display: inline-block;
}
.dropdown-bar button .fa {
margin-left: 5px;
.dropdown-bar .fa {
font-family: FontAwesome;
}
.dropdown-bar button .fa-caret-down {
margin-left: 5px;
}
.dropdown-bar .dropdown-bar-content {
display: none;
position: absolute;
@ -42,6 +44,29 @@
height: 1px;
background: #bbb;
}
.dropdown-bar .dropdown-bar-content p {
width: 210px;
padding: 5px;
margin: 0;
white-space: normal;
}
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
text-align: baseline;
}
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .yourself,
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .anonymous,
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .viewer {
font-style: italic;
}
.dropdown-bar .dropdown-bar-content p h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
white-space: normal;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -109,6 +134,10 @@
padding-left: 5px;
margin: 3px 2px;
}
.cryptpad-toolbar .dropdown-bar-content {
margin-top: -3px;
margin-right: 2px;
}
.cryptpad-toolbar button {
background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
@ -120,22 +149,22 @@
background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist {
.cryptpad-toolbar .large {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist {
.cryptpad-toolbar .large {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist.small {
.cryptpad-toolbar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist.small {
.cryptpad-toolbar .small {
display: none;
}
}
@ -310,56 +339,9 @@
.cryptpad-toolbar-leftside .cryptpad-user-list {
float: right;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
position: relative;
display: inline-block;
padding: 0px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown {
z-index: 1000;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
height: auto;
padding: 5px;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p {
width: 210px;
padding: 0;
margin: 0;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users {
text-align: baseline;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself,
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous,
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .viewer {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button {
white-space: normal;
margin: 2px 0px;
}
.cryptpad-toolbar-leftside button {
margin: 2px 4px 2px 0px;
}
.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
/*display: none;*/
}
.cryptpad-toolbar-rightside {
text-align: right;
}

@ -850,9 +850,9 @@ define([
}
break;
case 'editshare':
button = $('<button>', {
button = $('<a>', {
title: Messages.editShareTitle,
}).text(Messages.editShare);
}).html('<span class="fa fa-users" style="font-family:FontAwesome;"></span>').append(' ' + Messages.editShare);
if (data && data.editHash) {
var editHash = data.editHash;
button.click(function () {
@ -868,9 +868,9 @@ define([
}
break;
case 'viewshare':
button = $('<button>', {
button = $('<a>', {
title: Messages.viewShareTitle,
}).text(Messages.viewShare);
}).html('<span class="fa fa-eye" style="font-family:FontAwesome;"></span>').append(' ' + Messages.viewShare);
if (data && data.viewHash) {
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
@ -885,9 +885,9 @@ define([
}
break;
case 'viewopen':
button = $('<button>', {
button = $('<a>', {
title: Messages.viewOpenTitle,
}).text(Messages.viewOpen);
}).html('<span class="fa fa-eye" style="font-family:FontAwesome;"></span>').append(' ' + Messages.viewOpen);
if (data && data.viewHash) {
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
@ -951,7 +951,7 @@ define([
// Button
var $button = $('<button>', {
'class': ''
}).append($('<span>', {'class': 'buttonTitle'}).text(config.text || ""));
}).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
$('<span>', {
'class': 'fa fa-caret-down',
}).appendTo($button);
@ -969,7 +969,16 @@ define([
$button.click(function (e) {
e.stopPropagation();
$innerblock.toggle();
var state = $innerblock.is(':visible');
$('.dropdown-bar-content').hide();
$('iframe').each(function (idx, ifrw) {
$(ifrw).contents().find('.dropdown-bar-content').hide();
});
if (state) {
$innerblock.hide();
return;
}
$innerblock.show();
});
return $container;

@ -33,6 +33,7 @@ define([
var USERLIST_CLS = Bar.constants.userlist = "cryptpad-dropdown-users";
var EDITSHARE_CLS = Bar.constants.editShare = "cryptpad-dropdown-editShare";
var VIEWSHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-viewShare";
var SHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-share";
var DROPDOWN_CONTAINER_CLS = Bar.constants.dropdownContainer = "cryptpad-dropdown-container";
var DROPDOWN_CLS = Bar.constants.dropdown = "cryptpad-dropdown";
var TITLE_CLS = Bar.constants.title = "cryptpad-title";
@ -95,75 +96,37 @@ define([
}, SPINNER_DISAPPEAR_TIME);
};
var createUserButtons = function ($userlistElement, readOnly) {
var $listElement = $('<span>', {
id: 'userButtons',
'class': USERBUTTONS_CONTAINER_CLS
}).appendTo($userlistElement);
var createHandler = function ($elmt) {
return function () {
if ($elmt.is(':visible')) {
$elmt.hide();
return;
}
$userlistElement.find('.' + DROPDOWN_CLS).hide();
$elmt.show();
};
};
var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
var createUserButtons = function ($userlistElement, readOnly, Cryptpad) {
// User list button
var $editIcon = $('<button>', {
'class': 'userlist dropbtn edit',
});
var $editIconSmall = $editIcon.clone().addClass('small');
var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownEdit = $('<div>', {
id: "cryptpad-dropdown-edit",
'class': DROPDOWN_CLS
}).append($dropdownEditUsers); //.append($dropdownEditShare);
$editIcon.click(createHandler($dropdownEdit));
$editIconSmall.click(createHandler($dropdownEdit));
$dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit);
$listElement.append($dropdownEditContainer);
var dropdownConfig = {
options: [{
tag: 'p',
attributes: {'class': USERLIST_CLS},
}] // Entries displayed in the menu
};
var $block = Cryptpad.createDropdown(dropdownConfig);
$block.attr('id', 'userButtons');
$userlistElement.append($block);
// Share button
var fa_share = '<span class="fa fa-share-alt" 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 $shareIcon = $('<button>', {
'class': 'userlist dropbtn share',
}).html(fa_share + ' ' + Messages.shareButton + ' ' + fa_caretdown);
var $shareIconSmall = $shareIcon.clone().addClass('small').html(fa_share + ' ' + fa_caretdown);
var $shareTitle = $('<h2>').html(fa_editusers + ' ' + Messages.shareEdit);
var $shareTitleView = $('<h2>').html(fa_viewusers + ' ' + Messages.shareView);
var $dropdownShareP = $('<p>', {'class': EDITSHARE_CLS}).append($shareTitle);
var $dropdownSharePView = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitleView);
var $dropdownShareContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownShare = $('<div>', {
id: "cryptpad-dropdown-share",
'class': DROPDOWN_CLS
});
if (readOnly !== 1) {
// Hide the "Share edit URL" section when in read-only mode
$dropdownShare.append($dropdownShareP);
}
$dropdownShare.append($dropdownSharePView);
$shareIcon.click(createHandler($dropdownShare));
$shareIconSmall.click(createHandler($dropdownShare));
$dropdownShareContainer.append($shareIcon).append($shareIconSmall).append($dropdownShare);
$listElement.append($dropdownShareContainer);
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton);
var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
var dropdownConfigShare = {
text: $('<div>').append($span).append($spanSmall).html(),
options: []
};
var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
$shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
$userlistElement.append($shareBlock);
};
var createUserList = function ($container, readOnly) {
var createUserList = function ($container, readOnly, Cryptpad) {
var $userlist = $('<div>', {
'class': USER_LIST_CLS,
id: uid(),
});
createUserButtons($userlist, readOnly);
createUserButtons($userlist, readOnly, Cryptpad);
$container.append($userlist);
return $userlist[0];
};
@ -260,8 +223,11 @@ define([
var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor;
$userButtons.find('.userlist.edit').html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText + ' ' + fa_caretdown);
$userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
// $userButtons.find('.userlist.edit').html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText + ' ' + fa_caretdown);
var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
// $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
var $spansmall = $('<span>', {'class': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
// Change username button
var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
@ -368,11 +334,6 @@ define([
// Dropdown language selector
Cryptpad.createLanguageSelector($userContainer);
/*$select.on('mousedown', function (e) {
e.stopPropagation();
return true;
});*/
var $usernameElement = $('<span>', {'class': USERNAME_CLS}).appendTo($userContainer);
return $userContainer;
@ -462,7 +423,7 @@ define([
var Cryptpad = config.common;
var toolbar = createRealtimeToolbar($container);
var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly) : undefined;
var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly, Cryptpad) : undefined;
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
var lagElement = createLagElement();
@ -478,9 +439,6 @@ define([
if (config.ifrw) {
var removeDropdowns = function (e) {
if ($(e.target).parents('.cryptpad-dropdown-container').length) {
return;
}
$container.find('.cryptpad-dropdown').hide();
};
var cancelEditTitle = function (e) {

@ -618,6 +618,9 @@ define([
if (!readOnly) {
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
if (viewHash) {
$editShare.append($('<hr>'));
}
}
if (viewHash) {
/* add a 'links' button */

Loading…
Cancel
Save