Update the userlist in code, slide and pad
parent
dcfc59c2e2
commit
13288ee18b
|
@ -467,14 +467,6 @@
|
|||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
.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;
|
||||
|
|
|
@ -77,12 +77,6 @@
|
|||
margin: 0;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
&.cryptpad-dropdown-users {
|
||||
text-align:baseline;
|
||||
.yourself, .anonymous, .viewer {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
|
@ -24,6 +24,175 @@
|
|||
.cke_reset_all * {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#cke_1_contents {
|
||||
margin-top: -1px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.userlist-drawer {
|
||||
font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
|
||||
width: 175px;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 5px 0px;
|
||||
margin: 5px 0px;
|
||||
font-size: 16px;
|
||||
white-space: normal;
|
||||
}
|
||||
text-align:baseline;
|
||||
.viewer {
|
||||
font-style: italic;
|
||||
padding: 5px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.userlist-others {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 10px 0;
|
||||
margin-bottom: 20px;
|
||||
&>span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 5px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
.addToolbarColors (@color, @bg-color) {
|
||||
.userlist-drawer {
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
h2 {
|
||||
background-color: darken(@bgcolor, 10%);
|
||||
}
|
||||
}
|
||||
.cryptpad-toolbar {
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
.userlist-drawer {
|
||||
background-color: @bgcolor;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 96px;
|
||||
bottom: 0;
|
||||
}
|
||||
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
|
||||
background-color: lighten(@bgcolor, 8%);
|
||||
button:hover {
|
||||
background-color: @bgcolor;
|
||||
}
|
||||
}
|
||||
.hoverable:hover {
|
||||
.editable {
|
||||
cursor: text;
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
}
|
||||
.pencilIcon {
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
&:hover {
|
||||
background: darken(@bgcolor, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.saveIcon {
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
&:hover {
|
||||
background: darken(@bgcolor, 5%);
|
||||
}
|
||||
}
|
||||
input {
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
}
|
||||
.dropdown-bar-content {
|
||||
background: darken(@bgcolor, 5%);
|
||||
border: 1px solid @color;
|
||||
color: @color;
|
||||
a {
|
||||
color: @color;
|
||||
&.active {
|
||||
background-color: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
background-color: darken(@bgcolor, 15%);
|
||||
}
|
||||
p {
|
||||
h2 {
|
||||
background-color: darken(@bgcolor, 10%);
|
||||
}
|
||||
.accountData {
|
||||
background-color: @bgcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.app-pad {
|
||||
@bgcolor: @toolbar-pad-bg;
|
||||
@color: @toolbar-pad-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-code {
|
||||
@bgcolor: @toolbar-code-bg;
|
||||
@color: @toolbar-code-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-slide {
|
||||
@bgcolor: @toolbar-slide-bg;
|
||||
@color: @toolbar-slide-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-poll {
|
||||
@bgcolor: @toolbar-poll-bg;
|
||||
@color: @toolbar-poll-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-whiteboard {
|
||||
@bgcolor: @toolbar-whiteboard-bg;
|
||||
@color: @toolbar-whiteboard-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-drive {
|
||||
@bgcolor: @toolbar-drive-bg;
|
||||
@color: @toolbar-drive-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-file {
|
||||
@bgcolor: @toolbar-file-bg;
|
||||
@color: @toolbar-file-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cryptpad-toolbar {
|
||||
@toolbar-green: #5cb85c;
|
||||
|
||||
|
@ -34,108 +203,7 @@
|
|||
background-color: @toolbar-default-bg;
|
||||
color: @toolbar-default-color;
|
||||
|
||||
.addToolbarColors (@color, @bg-color) {
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
|
||||
background-color: lighten(@bgcolor, 8%);
|
||||
button:hover {
|
||||
background-color: @bgcolor;
|
||||
}
|
||||
}
|
||||
.hoverable:hover {
|
||||
.editable {
|
||||
cursor: text;
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
}
|
||||
.pencilIcon {
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
&:hover {
|
||||
background: darken(@bgcolor, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.saveIcon {
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
&:hover {
|
||||
background: darken(@bgcolor, 5%);
|
||||
}
|
||||
}
|
||||
input {
|
||||
border: 1px solid lighten(@bgcolor, 15%);
|
||||
background: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
}
|
||||
.dropdown-bar-content {
|
||||
background: darken(@bgcolor, 5%);
|
||||
border: 1px solid @color;
|
||||
color: @color;
|
||||
a {
|
||||
color: @color;
|
||||
&.active {
|
||||
background-color: darken(@bgcolor, 10%);
|
||||
color: @color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
background-color: darken(@bgcolor, 15%);
|
||||
}
|
||||
p {
|
||||
h2 {
|
||||
background-color: darken(@bgcolor, 10%);
|
||||
}
|
||||
.accountData {
|
||||
background-color: @bgcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pad {
|
||||
@bgcolor: @toolbar-pad-bg;
|
||||
@color: @toolbar-pad-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.code {
|
||||
@bgcolor: @toolbar-code-bg;
|
||||
@color: @toolbar-code-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.slide {
|
||||
@bgcolor: @toolbar-slide-bg;
|
||||
@color: @toolbar-slide-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.poll {
|
||||
@bgcolor: @toolbar-poll-bg;
|
||||
@color: @toolbar-poll-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.whiteboard {
|
||||
@bgcolor: @toolbar-whiteboard-bg;
|
||||
@color: @toolbar-whiteboard-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.drive {
|
||||
@bgcolor: @toolbar-drive-bg;
|
||||
@color: @toolbar-drive-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.file {
|
||||
@bgcolor: @toolbar-file-bg;
|
||||
@color: @toolbar-file-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
|
||||
.fa {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
|
@ -664,7 +732,9 @@
|
|||
}
|
||||
}
|
||||
button {
|
||||
margin: 2px 4px 2px 0px;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.dropdown-bar-content {
|
||||
margin-top: -1px;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -26,9 +26,9 @@ body {
|
|||
transition: width 500ms, min-width 500ms, max-width 500ms;
|
||||
}
|
||||
.CodeMirror.fullPage {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
resize: none;
|
||||
flex: 1;
|
||||
}
|
||||
.CodeMirror-focused .cm-matchhighlight {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
|
|
|
@ -30,9 +30,10 @@ body {
|
|||
resize: horizontal;
|
||||
}
|
||||
.CodeMirror.fullPage {
|
||||
min-width: 100%;
|
||||
//min-width: 100%;
|
||||
max-width: 100%;
|
||||
resize: none;
|
||||
flex: 1;
|
||||
}
|
||||
.CodeMirror-focused .cm-matchhighlight {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
|
|
|
@ -41,6 +41,7 @@ define([
|
|||
|
||||
var andThen = function (CMeditor) {
|
||||
var $iframe = $('#pad-iframe').contents();
|
||||
var $contentContainer = $iframe.find('#editorContainer');
|
||||
var $previewContainer = $iframe.find('#previewContainer');
|
||||
var $preview = $iframe.find('#preview');
|
||||
$preview.click(function (e) {
|
||||
|
@ -188,7 +189,8 @@ define([
|
|||
ifrw: ifrw,
|
||||
realtime: info.realtime,
|
||||
network: info.network,
|
||||
$container: $bar
|
||||
$container: $bar,
|
||||
$contentContainer: $contentContainer
|
||||
};
|
||||
toolbar = APP.toolbar = Toolbar.create(configTb);
|
||||
|
||||
|
|
|
@ -924,7 +924,6 @@ define([
|
|||
common.createButton = function (type, rightside, data, callback) {
|
||||
var button;
|
||||
var size = "17px";
|
||||
console.log(type);
|
||||
switch (type) {
|
||||
case 'export':
|
||||
button = $('<button>', {
|
||||
|
|
|
@ -70,7 +70,8 @@ define([
|
|||
|
||||
var parsed = Cryptpad.parsePadUrl(window.location.href);
|
||||
if (typeof parsed.type === "string") {
|
||||
$toolbar.addClass(parsed.type);
|
||||
var b = config.$container.parents('body')[0];
|
||||
config.$container.parents('body').addClass('app-' + parsed.type);
|
||||
}
|
||||
|
||||
var $topContainer = $('<div>', {'class': TOP_CLS});
|
||||
|
@ -144,15 +145,16 @@ define([
|
|||
var myUid = userData[userNetfluxId] ? userData[userNetfluxId].uid : undefined;
|
||||
var uids = [];
|
||||
userList.forEach(function(user) {
|
||||
if (user !== userNetfluxId) {
|
||||
//if (user !== userNetfluxId) {
|
||||
var data = userData[user] || {};
|
||||
var userName = data.name;
|
||||
var userId = data.uid;
|
||||
if (userName && uids.indexOf(userId) === -1 && (!myUid || userId !== myUid)) {
|
||||
if (!data.uid) { return; }
|
||||
if (uids.indexOf(userId) === -1) {// && (!myUid || userId !== myUid)) {
|
||||
uids.push(userId);
|
||||
list.push(userName);
|
||||
} else if (userName) { i++; }
|
||||
}
|
||||
list.push(data);
|
||||
} else { i++; }
|
||||
//}
|
||||
});
|
||||
return {
|
||||
list: list,
|
||||
|
@ -167,6 +169,7 @@ define([
|
|||
var updateUserList = function (toolbar, config) {
|
||||
// Make sure the elements are displayed
|
||||
var $userButtons = toolbar.userlist;
|
||||
var $userlistContent = toolbar.userlistContent;
|
||||
|
||||
var userList = config.userList.list.users;
|
||||
var userData = config.userList.data;
|
||||
|
@ -185,38 +188,34 @@ define([
|
|||
var editUsersNames = others.list;
|
||||
var duplicates = others.duplicates; // Number of duplicates
|
||||
|
||||
editUsersNames.sort(function (a, b) {
|
||||
var na = a.name || Messages.anonymous;
|
||||
var nb = b.name || Messages.anonymous;
|
||||
return na.toLowerCase() > nb.toLowerCase();
|
||||
});
|
||||
|
||||
var numberOfEditUsers = userList.length - duplicates;
|
||||
var numberOfViewUsers = numberOfUsers - userList.length;
|
||||
|
||||
// Number of anonymous editing users
|
||||
var anonymous = numberOfEditUsers - editUsersNames.length;
|
||||
|
||||
// Update the userlist
|
||||
var $usersTitle = $('<h2>').text(Messages.users);
|
||||
var $editUsers = $userButtons.find('.' + USERLIST_CLS);
|
||||
var $editUsers = $userlistContent;
|
||||
$editUsers.html('').append($usersTitle);
|
||||
|
||||
var $editUsersList = $('<pre>');
|
||||
// Yourself (edit only)
|
||||
if (config.readOnly !== 1) {
|
||||
$editUsers.append('<span class="yourself">' + Messages.yourself + '</span>');
|
||||
anonymous--;
|
||||
}
|
||||
var $editUsersList = $('<div>', {'class': 'userlist-others'});
|
||||
|
||||
// Editors
|
||||
$editUsersList.text(editUsersNames.join('\n')); // .text() to avoid XSS
|
||||
editUsersNames.forEach(function (data) {
|
||||
var name = data.name || Messages.anonymous;
|
||||
var $span = $('<span>', {'title': name}).text(name);
|
||||
$span.data('uid', data.uid);
|
||||
$editUsersList.append($span);
|
||||
});
|
||||
$editUsers.append($editUsersList);
|
||||
// Anonymous editors
|
||||
if (anonymous > 0) {
|
||||
var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
|
||||
$editUsers.append('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
|
||||
}
|
||||
|
||||
// Viewers
|
||||
if (numberOfViewUsers > 0) {
|
||||
var viewText = '<span class="viewer">';
|
||||
if (numberOfEditUsers > 0) {
|
||||
$editUsers.append('<br>');
|
||||
viewText += Messages.and + ' ';
|
||||
}
|
||||
var viewerText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
|
||||
viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
|
||||
$editUsers.append(viewText);
|
||||
|
@ -275,12 +274,33 @@ define([
|
|||
attributes: {'class': USERLIST_CLS},
|
||||
}]
|
||||
};
|
||||
var $block = Cryptpad.createDropdown(dropdownConfig);
|
||||
$block.attr('id', 'userButtons');
|
||||
toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
|
||||
toolbar.$leftside.prepend($block);
|
||||
|
||||
return $block;
|
||||
var $content = $('<div>', {'class': 'userlist-drawer'});
|
||||
$('<p>', {'class': USERLIST_CLS}).appendTo($content);
|
||||
toolbar.userlistContent = $content;
|
||||
|
||||
var $container = $('<span>', {id: 'userButtons'});
|
||||
|
||||
var $button = $('<button>').appendTo($container);
|
||||
$('<span>',{'class': 'buttonTitle'}).appendTo($button);
|
||||
|
||||
toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
|
||||
toolbar.$leftside.prepend($container);
|
||||
|
||||
if (config.$contentContainer) {
|
||||
config.$contentContainer.prepend($content);
|
||||
}
|
||||
|
||||
$button.click(function (e) {
|
||||
$content.toggle();
|
||||
Cryptpad.setAttribute('userlist-drawer', $content.is(':visible'));
|
||||
});
|
||||
|
||||
Cryptpad.getAttribute('userlist-drawer', function (err, val) {
|
||||
if (val === false) { $content.hide(); }
|
||||
});
|
||||
|
||||
return $container;
|
||||
};
|
||||
|
||||
var createShare = function (toolbar, config) {
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="app-pad">
|
||||
<textarea style="display:none" id="editor1" name="editor1"></textarea>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -89,6 +89,7 @@ define([
|
|||
};
|
||||
|
||||
var andThen = function (Ckeditor) {
|
||||
var $iframe = $('#pad-iframe').contents();
|
||||
var secret = Cryptpad.getSecrets();
|
||||
var readOnly = secret.keys && !secret.keys.editKeyStr;
|
||||
if (!secret.keys) {
|
||||
|
@ -465,7 +466,8 @@ define([
|
|||
ifrw: ifrw,
|
||||
realtime: info.realtime,
|
||||
network: info.network,
|
||||
$container: $bar
|
||||
$container: $bar,
|
||||
$contentContainer: $iframe.find('#cke_1_contents')
|
||||
};
|
||||
toolbar = info.realtime.toolbar = Toolbar.create(configTb);
|
||||
|
||||
|
@ -561,6 +563,8 @@ define([
|
|||
editor.execCommand('maximize');
|
||||
}
|
||||
}
|
||||
// editor.execCommand('maximize') removes all the classes from the body tag
|
||||
$iframe.find('body').addClass('app-pad');
|
||||
|
||||
if (module.realtime !== info.realtime) {
|
||||
module.patchText = TextPatcher.create({
|
||||
|
|
|
@ -49,6 +49,7 @@ define([
|
|||
|
||||
var andThen = function (CMeditor) {
|
||||
var $iframe = $('#pad-iframe').contents();
|
||||
var $contentContainer = $iframe.find('#editorContainer');
|
||||
var CodeMirror = Cryptpad.createCodemirror(CMeditor, ifrw, Cryptpad);
|
||||
editor = CodeMirror.editor;
|
||||
|
||||
|
@ -358,7 +359,8 @@ define([
|
|||
ifrw: ifrw,
|
||||
realtime: info.realtime,
|
||||
network: info.network,
|
||||
$container: $bar
|
||||
$container: $bar,
|
||||
$contentContainer: $contentContainer
|
||||
};
|
||||
toolbar = module.toolbar = Toolbar.create(configTb);
|
||||
|
||||
|
|
Loading…
Reference in New Issue