Fix the new userlist button and make the toolbar responsive

pull/1/head
yflory 8 years ago
parent 24fbe22c9d
commit 39bbf8a6c1

@ -8,14 +8,16 @@
<option value="fr">Français</option>
</select>
</span>
<p data-localization="header_france">
<p data-localization="header_france" class="big">
</p>
</div>
<div class="bottom-bar-center">
<p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
<p><a id="cryptpad-logo" class="big" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
<p><a id="cryptpad-logo" class="small" href="/" data-localization-title="header_logoTitle"><img src="/customize/cryptofist_mini.png" alt="Cryptpad" class="cryptofist" /></a></p>
</div>
<div class="bottom-bar-right">
<p data-localization="header_support">
<p data-localization="header_xwiki" class="small">
<p data-localization="header_support" class="big">
</p>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

@ -146,6 +146,7 @@ tr {
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
padding: 4px 12px 4px 12px;
@ -242,6 +243,34 @@ tbody td:last-child {
margin-right: 4px;
position: relative;
}
@media screen and (max-width: 800px) {
.top-bar .big,
.bottom-bar .big {
display: none;
}
}
@media screen and (min-width: 801px) {
.top-bar .big,
.bottom-bar .big {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.top-bar .small,
.bottom-bar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.top-bar .small,
.bottom-bar .small {
display: none;
}
}
.top-bar .small img,
.bottom-bar .small img {
height: 1.25em;
}
.bottom-bar {
bottom: 0px;
right: 0px;

@ -175,6 +175,7 @@ p, pre, td, a, table, tr {
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
@ -278,6 +279,27 @@ tbody {
margin-right: 4px;
position: relative;
}
.big {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
img {
height: 1.25em;
}
}
}
.bottom-bar {
bottom: 0px;

@ -25,16 +25,18 @@
}
div {
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
white-space: normal;
&.cryptpad-back {
padding: 0;
font-weight: bold;
cursor: pointer;
color: #000;
}
&.cryptpad-lag {
float: right;
line-height: 26px;
margin: 2px 0px 2px 4px;
}
}
button, .rightside-element {
@ -71,6 +73,10 @@
}
}
.cryptpad-state {
line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
}
.rightside-button {
float: right;
cursor: pointer;
@ -84,7 +90,9 @@
.rightside-element {
vertical-align: middle;
white-space: nowrap;
//float: right;
&.float {
float: right;
}
}
select {
@ -99,7 +107,7 @@
.cryptpad-toolbar-leftside {
float: left;
max-width: 35%;
margin-bottom: -1px;
.cryptpad-dropdown-container {
position: relative;
display: inline-block;
@ -113,28 +121,55 @@
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 {
font-style: italic;
}
.anonymous {
font-style: italic;
}
}
h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
}
}
button {
margin: 2px 0px;
}
}
}
button {
margin: 2px 4px 2px 0px;
}
.cryptpad-userbuttons-container {
display: none;
}
}
.cryptpad-toolbar-rightside {
text-align: right;
margin-right: 30px;
//float: right;
}
.cryptpad-lag {
float: right;
}
.cryptpad-spinner {
float: left;
display: inline-block;
height: 26px;
margin: 2px;
line-height: 26px;
font-size: 20px;
}
.cryptpad-readonly {
margin-right: 20px;

@ -24,10 +24,7 @@
float: right;
}
.cryptpad-toolbar div {
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
white-space: normal;
}
.cryptpad-toolbar div.cryptpad-back {
padding: 0;
@ -35,6 +32,11 @@
cursor: pointer;
color: #000;
}
.cryptpad-toolbar div.cryptpad-lag {
float: right;
line-height: 26px;
margin: 2px 0px 2px 4px;
}
.cryptpad-toolbar button,
.cryptpad-toolbar .rightside-element {
height: 26px;
@ -72,6 +74,10 @@
display: none;
}
}
.cryptpad-toolbar .cryptpad-state {
line-height: 30px;
/* equivalent to 26px + 2*2px margin used for buttons */
}
.cryptpad-toolbar .rightside-button {
float: right;
cursor: pointer;
@ -84,6 +90,9 @@
vertical-align: middle;
white-space: nowrap;
}
.cryptpad-toolbar .rightside-element.float {
float: right;
}
.cryptpad-toolbar select {
border: 0px;
margin-left: 5px;
@ -94,7 +103,7 @@
}
.cryptpad-toolbar-leftside {
float: left;
max-width: 35%;
margin-bottom: -1px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
position: relative;
@ -110,24 +119,52 @@
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 {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous {
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;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button {
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;
}
.cryptpad-lag {
float: right;
margin-right: 30px;
}
.cryptpad-spinner {
float: left;
display: inline-block;
height: 26px;
margin: 2px;
line-height: 26px;
font-size: 20px;
}
.cryptpad-readonly {
margin-right: 20px;

@ -22,12 +22,12 @@ define(function () {
out.reconnecting = 'Reconnexion...';
out.lag = 'Latence';
out.readonly = 'Lecture seule';
out.anonymous = "nonyme";
out.anonymous = "Anonyme";
out.yourself = "Vous-même";
out.anonymousUsers = "utilisateurs anonymes";
out.anonymousUser = "utilisateur anonyme";
out.viewUsersIcon = "UTILISATEURS EN LECTURE SEULE";
out.editUsersIcon = "UTILISATEURS ÉDITANT LE DOCUMENT";
out.share = "Partage";
out.users = "Utilisateurs";
out.greenLight = "Tout fonctionne bien";
out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
@ -202,6 +202,7 @@ define(function () {
// Header.html
out.header_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" title="France" alt="France" src="/customize/fr.png" /> par <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_xwiki = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer"><img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
out.header_logoTitle = "Aller vers la page d'accueil";

@ -26,8 +26,8 @@ define(function () {
out.yourself = "Yourself";
out.anonymousUsers = "anonymous users";
out.anonymousUser = "anonymous user";
out.viewUsersIcon = "PEOPLE VIEWING";
out.editUsersIcon = "PEOPLE EDITING";
out.share = "Share";
out.users = "Users";
out.greenLight = "Everything is working fine";
out.orangeLight = "Your slow connection may impact your experience";
@ -204,6 +204,7 @@ define(function () {
// Header.html
out.header_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">With <img class="bottom-bar-heart" src="/customize/heart.png" /> from <img class="bottom-bar-fr" src="/customize/fr.png" title="France" alt="France"/> by <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_xwiki = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer"><img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
out.header_logoTitle = 'Go to the main page';

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

@ -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 */

@ -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>', {

@ -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);
});

@ -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) {

@ -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>

@ -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}));
}
}

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

@ -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 */

@ -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'}));
}
}

Loading…
Cancel
Save