infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Use the new dropdown for userlist and share

Browse Source
pull/1/head
yflory 8 years ago
parent efffd4974f
commit 4adde0f0c0
7 changed files with 159 additions and 196 deletions
Show Stats Download Patch File Download Diff File

29
customize.dist/main.css
Unescape Escape View File

@ -334,10 +334,12 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.dropdown-bar button .fa { .dropdown-bar .fa {
margin-left: 5px;
font-family: FontAwesome; font-family: FontAwesome;
} }
.dropdown-bar button .fa-caret-down {
margin-left: 5px;
}
.dropdown-bar .dropdown-bar-content { .dropdown-bar .dropdown-bar-content {
display: none; display: none;
position: absolute; position: absolute;
@ -373,6 +375,29 @@
height: 1px; height: 1px;
background: #bbb; 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, html.cp,
.cp body { .cp body {
font-size: .875em; font-size: .875em;

29
customize.dist/src/less/dropdown.less
Unescape Escape View File

@ -12,11 +12,14 @@
} }
} }
button {
.fa { .fa {
margin-left: 5px;
font-family: FontAwesome; font-family: FontAwesome;
} }
button {
.fa-caret-down{
margin-left: 5px;
}
} }
.dropdown-bar-content { .dropdown-bar-content {
@ -58,6 +61,28 @@
height: 1px; height: 1px;
background: #bbb; 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;
}
}
} }
} }

59
customize.dist/src/less/toolbar.less
Unescape Escape View File

@ -65,6 +65,11 @@
margin: 3px 2px; margin: 3px 2px;
} }
.dropdown-bar-content {
margin-top: -3px;
margin-right: 2px;
}
button { button {
background-color: inherit; background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4); background-image: linear-gradient(to bottom,#fff,#e4e4e4);
@ -74,14 +79,17 @@
&:hover { &:hover {
background-image:linear-gradient(to bottom,#f2f2f2,#ccc); background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
} }
&.userlist { }
.large {
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
display: none; display: none;
} }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
display: inline-block; display: inline-block;
} }
&.small { }
.small {
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
display: inline-block; display: inline-block;
} }
@ -89,8 +97,6 @@
display: none; display: none;
} }
} }
}
}
.cryptpad-state { .cryptpad-state {
line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */ line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
@ -262,54 +268,9 @@
.cryptpad-user-list { .cryptpad-user-list {
float: right; 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 { button {
margin: 2px 4px 2px 0px; margin: 2px 4px 2px 0px;
} }
.cryptpad-userbuttons-container {
/*display: none;*/
}
} }
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
text-align: right; text-align: right;

88
customize.dist/toolbar.css
Unescape Escape View File

@ -3,10 +3,12 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.dropdown-bar button .fa { .dropdown-bar .fa {
margin-left: 5px;
font-family: FontAwesome; font-family: FontAwesome;
} }
.dropdown-bar button .fa-caret-down {
margin-left: 5px;
}
.dropdown-bar .dropdown-bar-content { .dropdown-bar .dropdown-bar-content {
display: none; display: none;
position: absolute; position: absolute;
@ -42,6 +44,29 @@
height: 1px; height: 1px;
background: #bbb; 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 { .unselectable {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -109,6 +134,10 @@
padding-left: 5px; padding-left: 5px;
margin: 3px 2px; margin: 3px 2px;
} }
.cryptpad-toolbar .dropdown-bar-content {
margin-top: -3px;
margin-right: 2px;
}
.cryptpad-toolbar button { .cryptpad-toolbar button {
background-color: inherit; background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4); background-image: linear-gradient(to bottom, #fff, #e4e4e4);
@ -120,22 +149,22 @@
background-image: linear-gradient(to bottom, #f2f2f2, #ccc); background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist { .cryptpad-toolbar .large {
display: none; display: none;
} }
} }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist { .cryptpad-toolbar .large {
display: inline-block; display: inline-block;
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist.small { .cryptpad-toolbar .small {
display: inline-block; display: inline-block;
} }
} }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist.small { .cryptpad-toolbar .small {
display: none; display: none;
} }
} }
@ -310,56 +339,9 @@
.cryptpad-toolbar-leftside .cryptpad-user-list { .cryptpad-toolbar-leftside .cryptpad-user-list {
float: right; 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 { .cryptpad-toolbar-leftside button {
margin: 2px 4px 2px 0px; margin: 2px 4px 2px 0px;
} }
.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
/*display: none;*/
}
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
text-align: right; text-align: right;
} }

25
www/common/cryptpad-common.js
Unescape Escape View File

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

100
www/common/toolbar.js
Unescape Escape View File

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

3
www/pad/main.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save