Fix the new userlist button and make the toolbar responsive

This commit is contained in:
yflory
2016-10-13 14:24:44 +02:00
parent 24fbe22c9d
commit 39bbf8a6c1
18 changed files with 221 additions and 105 deletions

View File

@@ -21,7 +21,7 @@
}
#iframe-container {
position: fixed;
top: 2.5em;
top: 2.6em;
bottom: 0px;
right: 0px;
left: 0px;

View File

@@ -47,6 +47,12 @@
.CodeMirror {
height: 100%;
}
.cryptpad-toolbar {
padding: 0px 6px;
}
#cme_toolbox div.cryptpad-lag {
line-height: 24px;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */

View File

@@ -303,7 +303,8 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
readOnly: readOnly
readOnly: readOnly,
ifrw: ifrw
};
if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
@@ -326,7 +327,7 @@ define([
setName (newName);
};
var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
$userBlock.append($username);
$userBlock.append($username).hide();
});
/* add an export button */
@@ -357,16 +358,13 @@ define([
$rightside.append($forgetPad);
if (!readOnly) {
var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
$editShare.append($links);
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
}
if (viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
$viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
if (!readOnly) {
var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
$viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
}
}
@@ -377,6 +375,7 @@ define([
var $language = module.$language = $('<select>', {
title: 'syntax highlighting',
id: 'language-mode',
'class': 'rightside-element'
}).on('change', function () {
setMode($language.val());
onLocal();
@@ -401,6 +400,7 @@ define([
var $themeDropdown = $('<select>', {
title: 'color theme',
id: 'display-theme',
'class': 'rightside-element'
});
Themes.forEach(function (o) {
$themeDropdown.append($('<option>', {

View File

@@ -727,45 +727,6 @@ define([
});
}
break;
/*case 'readonly':
button = $('<button>', {
title: Messages.getViewButton + '\n' + Messages.getViewButtonTitle,
'class': "fa fa-eye",
style: 'font:'+size+' FontAwesome'
});
if (data && data.viewHash) {
var viewHash = data.viewHash;
button.click(function() {
var baseUrl = window.location.origin + window.location.pathname + '#';
var url = baseUrl + viewHash;
var $content = $('<div>').text(Messages.readonlyUrl);
var $copy = $('<button>', {
id: "cryptpad-readonly-copy",
'class': "button action"
}).text(Messages.copyReadOnly);
var $open = $('<button>', {
id: "cryptpad-readonly-open",
'class': "button action"
}).text(Messages.openReadOnly);
$content.append('<br>').append($copy).append($open);
common.alert($content.html());
$("#cryptpad-readonly-copy").click(function() {
var success = Clipboard.copy(url);
if (success) {
common.log(Messages.shareSuccess);
common.findOKButton().click();
return;
}
});
$("#cryptpad-readonly-open").click(function() {
common.findOKButton().click();
window.open(url);
});
if (callback) { callback(); }
});
}
break;*/
case 'editshare':
button = $('<button>', {
title: Messages.editShareTitle,
@@ -791,10 +752,9 @@ define([
'class': "button action"
}).text(Messages.viewShare);
if (data && data.viewHash) {
var viewHash = data.viewHash;
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
var url = baseUrl + viewHash;
var url = baseUrl + data.viewHash;
var success = Clipboard.copy(url);
if (success) {
common.log(Messages.shareSuccess);
@@ -810,10 +770,9 @@ define([
'class': "button action"
}).text(Messages.viewOpen);
if (data && data.viewHash) {
var viewHash = data.viewHash;
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
var url = baseUrl + viewHash;
var url = baseUrl + data.viewHash;
common.findOKButton().click();
window.open(url);
});

View File

@@ -103,24 +103,26 @@ define([
var $editIcon = $('<button>', {
'class': 'userlist dropbtn edit',
title: Messages.editUsersIcon
});
var $editIconSmall = $editIcon.clone().addClass('small');
var $viewIcon = $('<button>', {
'class': 'userlist dropbtn view',
title: Messages.viewUsersIcon
});
var $viewIconSmall = $viewIcon.clone().addClass('small');
var $shareTitle = $('<h2>').text(Messages.share);
var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS});
if (readOnly !== 1) {
$dropdownEditShare.append($shareTitle);
}
var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownEdit = $('<div>', {
id: "cryptpad-dropdown-edit",
'class': DROPDOWN_CLS
}).append($dropdownEditUsers).append($dropdownEditShare);
var $dropdownViewShare = $('<p>', {'class': VIEWSHARE_CLS});
var $dropdownViewShare = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle.clone());
var $dropdownViewContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownView = $('<div>', {
id: "cryptpad-dropdown-view",
@@ -223,18 +225,20 @@ define([
// Update the userlist
var editUsersList = '';
if (readOnly === 0) {
editUsersNames.unshift(Messages.yourself);
if (readOnly !== 1) {
editUsersNames.unshift('<span class="yourself">' + Messages.yourself + '</span>');
anonymous--;
}
if (anonymous > 0) {
var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
editUsersNames.push(anonymous + " " + text);
editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
}
if (editUsersNames.length > 0) {
editUsersList += editUsersNames.join('<br>');
}
$userButtons.find('.' + USERLIST_CLS).html(editUsersList);
var $usersTitle = $('<h2>').text(Messages.users);
var $editUsers = $userButtons.find('.' + USERLIST_CLS);
$editUsers.html('').append($usersTitle).append(editUsersList);
// Update the buttons
var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
@@ -313,11 +317,18 @@ define([
var connected = false;
if (config.ifrw) {
$(config.ifrw).on('click', function (e) {
if (!e.target.matches('.dropbtn') && !e.target.parentElement.matches('.dropbtn')) {
$container.find('.cryptpad-dropdown').hide();
var removeDropdowns = function (e) {
if (e.target.matches('.dropbtn') || (e.target.parentElement && e.target.parentElement.matches('.dropbtn'))) {
return;
}
});
$container.find('.cryptpad-dropdown').hide();
};
$(config.ifrw).on('click',removeDropdowns);
if (config.ifrw.$('iframe').length) {
var innerIfrw = config.ifrw.$('iframe').each(function (i, el) {
$(el.contentWindow).on('click', removeDropdowns);
});
}
}
userList.onChange = function(newUserData) {

View File

@@ -5,6 +5,18 @@
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/ckeditor/ckeditor.js"></script>
<style>
#cke_1_top {
overflow: visible;
}
#cke_1_toolbox {
display: inline-block;
width: 100%;
}
#cke_1_top .cryptpad-toolbar {
margin-bottom: 1px;
}
</style>
</head>
<body>
<textarea style="display:none" id="editor1" name="editor1"></textarea>

View File

@@ -510,7 +510,8 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
readOnly: readOnly
readOnly: readOnly,
ifrw: ifrw
};
if (readOnly) {delete config.changeNameID; }
toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
@@ -532,8 +533,8 @@ define([
var usernameCb = function (newName) {
setName (newName);
};
var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
$userBlock.append($username);
var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
$userBlock.append($username).hide();
});
/* add an export button */
@@ -564,16 +565,13 @@ define([
$rightside.append($forgetPad);
if (!readOnly) {
var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
$editShare.append($links);
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
}
if (viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
$viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
if (!readOnly) {
var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
$viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
}
}

View File

@@ -21,7 +21,7 @@
}
#iframe-container {
position: fixed;
top: 2.5em;
top: 2.6em;
bottom: 0px;
right: 0px;
left: 0px;

View File

@@ -118,6 +118,12 @@
.CodeMirror {
height: 100%;
}
.cryptpad-toolbar {
padding: 0px 6px;
}
#cme_toolbox div.cryptpad-lag {
line-height: 24px;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */

View File

@@ -437,16 +437,13 @@ define([
$rightside.append($forgetPad);
if (!readOnly) {
var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
$editShare.append($links);
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
}
if (viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
$viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'}));
if (!readOnly) {
var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
$viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'}));
}
}