Improve the UI with FontAwesome icons

pull/1/head
yflory 8 years ago
parent 07434eb4c4
commit 3d54413343

@ -39,6 +39,7 @@
"diff-dom": "#gh-pages",
"alertifyjs": "^1.0.11",
"spin.js": "^2.3.2",
"scrypt-async": "^1.2.0"
"scrypt-async": "^1.2.0",
"components-font-awesome": "^4.6.3"
}
}

@ -2,15 +2,15 @@
<div>
<div class="bottom-bar">
<div class="bottom-bar-left">
<p data-localization="bottom_love">
</p>
<span class="bottom-bar-language">
<select id="language-selector">
<option value="en">English</option>
<option value="fr">Français</option>
</select>
</span>
</div>
<p data-localization="bottom_france">
</p>
</div>
<!--
<div class="bottom-bar-center">
<p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>

@ -8,11 +8,18 @@ define([
], function (LS, Messages) {
var $ = window.jQuery;
var main = function () {
var url = window.location.pathname;
var isHtml = /\.html/.test(url) || url === '/';
$.ajax({
url: '/customize/BottomBar.html',
url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
success: function (ret) {
$('iframe').height('96%');
$('body').append(ret);
if (isHtml) {
$('body').append(ret);
}
else {
$('body').prepend(ret);
}
$('head').append($('<link>', {
rel: 'stylesheet',
href: '/customize/main.css'

@ -0,0 +1,23 @@
<!-- This is an HTML fragment which is included into the bottom toolbar -->
<div>
<div class="top-bar">
<div class="bottom-bar-left">
<span class="bottom-bar-language">
<select id="language-selector">
<option value="en">English</option>
<option value="fr">Français</option>
</select>
</span>
<p data-localization="bottom_france">
</p>
</div>
<!--
<div class="bottom-bar-center">
<p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>
</div> -->
<div class="bottom-bar-right">
<p data-localization="bottom_support">
</p>
</div>
</div>
</div>

@ -209,10 +209,9 @@ tbody td:last-child {
border-right: none;
}
/* Bottom Bar */
.top-bar,
.bottom-bar {
position: fixed;
bottom: 0px;
right: 0px;
height: 4%;
height: 2.5em;
display: inline-block;
@ -220,23 +219,35 @@ tbody td:last-child {
background: #302B28;
border-top: 1px solid #444;
}
.top-bar a,
.bottom-bar a {
color: #46E981;
text-decoration: none;
}
.top-bar p,
.bottom-bar p {
margin: -1px;
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 20px;
display: block;
float: left;
float: right;
margin-left: 10px;
padding-top: 3px;
color: #fafafa;
}
.top-bar img,
.bottom-bar img {
margin-right: 4px;
position: relative;
}
.bottom-bar {
bottom: 0px;
right: 0px;
}
.top-bar {
top: 0px;
right: 0px;
}
.bottom-bar-left {
display: block;
float: left;

@ -187,7 +187,6 @@ p, pre, td, a, table, tr {
margin-bottom: 2 * 6px;
white-space: nowrap;
}
/* Tables */
table {
@ -248,10 +247,8 @@ tbody {
/* Bottom Bar */
.bottom-bar {
.top-bar, .bottom-bar {
position:fixed;
bottom:0px;
right:0px;
height:4%;
height: 2.5em;
@ -270,7 +267,8 @@ tbody {
font-size: 20px;
display:block;
float:left;
float:right;
margin-left: 10px;
padding-top:3px;
color: @fore;
}
@ -279,6 +277,14 @@ tbody {
position: relative;
}
}
.bottom-bar {
bottom: 0px;
right: 0px;
}
.top-bar {
top: 0px;
right: 0px;
}
.bottom-bar-left {
display:block;

@ -30,7 +30,7 @@
padding: 0 10px;
height: 1.5em;
line-height: 25px;
height: 22px;
height: 100%;
&.cryptpad-back {
padding: 0;
font-weight: bold;
@ -42,11 +42,16 @@
button {
height: 100%;
background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
border: 1px solid #A6A6A6;
border-radius: 5px;
border-bottom-color: #979797;
border-radius: 3px;
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
&:hover {
background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
}
}
.rightside-button {
float: right;
@ -91,4 +96,23 @@
.cryptpad-toolbar-username {
font-style: italic;
}
.lag {
display: inline-block;
vertical-align: middle;
padding: 0 !important;
margin: 0 !important;
height: 15px !important;
width: 15px !important;
border-radius: 50%;
border: 1px solid @cp-outline;
}
.lag-green {
background-color: @cp-green;
}
.lag-red {
background-color: @cp-red;
}
.lag-orange {
background-color: @cp-orange;
}

@ -8,6 +8,7 @@
@cp-red: #FF0073; // remove red
@cp-outline: #444;
@cp-orange: #FE9A2E;
// alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);

@ -29,7 +29,7 @@
padding: 0 10px;
height: 1.5em;
line-height: 25px;
height: 22px;
height: 100%;
}
.cryptpad-toolbar div.cryptpad-back {
padding: 0;
@ -40,12 +40,17 @@
.cryptpad-toolbar button {
height: 100%;
background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
border: 1px solid #A6A6A6;
border-radius: 5px;
border-bottom-color: #979797;
border-radius: 3px;
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
}
.cryptpad-toolbar button:hover {
background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
}
.cryptpad-toolbar .rightside-button {
float: right;
cursor: pointer;
@ -83,3 +88,22 @@
.cryptpad-toolbar-username {
font-style: italic;
}
.lag {
display: inline-block;
vertical-align: middle;
padding: 0 !important;
margin: 0 !important;
height: 15px !important;
width: 15px !important;
border-radius: 50%;
border: 1px solid #444;
}
.lag-green {
background-color: #46E981;
}
.lag-red {
background-color: #FF0073;
}
.lag-orange {
background-color: #FE9A2E;
}

@ -31,6 +31,7 @@ define(function () {
out.peopleAreEditing = '{0} personnes éditent le document';
out.oneViewer = '1 lecteur';
out.viewers = '{0} lecteurs';
out.anonymous = "Vous êtes actuellement anonyme";
out.importButton = 'IMPORTER';
out.importButtonTitle = 'Importer un document depuis un fichier local';
@ -179,7 +180,7 @@ define(function () {
// BottomBar.html
out.bottom_love = '<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" src="/customize/fr.png" /></a>';
out.bottom_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" src="/customize/fr.png" /></a>';
out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">Un projet <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs</a> avec le soutien de <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>';
return out;

@ -31,6 +31,7 @@ define(function () {
out.peopleAreEditing = '{0} people are editing';
out.oneViewer = '1 viewer';
out.viewers = '{0} viewers';
out.anonymous = "You are currently anonymous";
out.importButton = 'IMPORT';
out.importButtonTitle = 'Import a document from a local file';
@ -179,7 +180,7 @@ define(function () {
// BottomBar.html
out.bottom_love = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" /> in <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
out.bottom_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" /> in <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">An <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs Project </a> with the support of <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>';
return out;

@ -607,6 +607,69 @@ define([
};
};
/*
* Buttons
*/
var createButton = common.createButton = function (type, rightside) {
var button;
var size = "17px";
switch (type) {
case 'export':
button = $('<button>', {
title: Messages.exportButtonTitle,
'class': "fa fa-download",
style: 'font:'+size+' FontAwesome'
});
break;
case 'import':
button = $('<button>', {
title: Messages.importButtonTitle,
'class': "fa fa-upload",
style: 'font:'+size+' FontAwesome'
});
break;
case 'rename':
button = $('<button>', {
id: 'name-pad',
title: Messages.renameButtonTitle,
'class': "fa fa-bookmark cryptpad-rename",
style: 'font:'+size+' FontAwesome'
});
break;
case 'forget':
button = $('<button>', {
id: 'cryptpad-forget',
title: Messages.forgetButtonTitle,
'class': "fa fa-trash cryptpad-forget",
style: 'font:'+size+' FontAwesome'
});
break;
case 'username':
button = $('<button>', {
title: Messages.changeNameButton,
'class': "fa fa-user",
style: 'font:'+size+' FontAwesome'
});
break;
case 'readonly':
button = $('<button>', {
title: Messages.getViewButtonTitle,
'class': "fa fa-eye",
style: 'font:'+size+' FontAwesome'
});
break;
default:
button = $('<button>', {
'class': "fa fa-question",
style: 'font:'+size+' FontAwesome'
});
}
if (rightside) {
button.addClass('rightside-button')
}
return button;
};
/*
* Alertifyjs
*/

@ -43,6 +43,8 @@ define([
var $style;
var firstConnection = true;
var styleToolbar = function ($container, href) {
href = href || '/customize/toolbar.css';
@ -181,8 +183,12 @@ define([
}
}
innerHTML += getViewers(numberOfViewUsers);
if (userData[myUserName] && userData[myUserName].name) {
innerHTML = '<span class="' + USERNAME_CLS + '">' + userData[myUserName].name + '</span> | ' + innerHTML;
if (userData[myUserName]) {
var name = userData[myUserName].name;
if (!name) {
name = '<span title="' + Messages.anonymous + '" class="fa fa-user-secret" style="font-family:FontAwesome"></span>';
}
innerHTML = '<span class="' + USERNAME_CLS + '">' + name + '</span> | ' + innerHTML;
}
listElement.innerHTML = innerHTML;
};
@ -197,21 +203,31 @@ define([
};
var checkLag = function (getLag, lagElement) {
if(typeof getLag !== "function") { return; }
var lag = getLag();
var lagMsg = Messages.lag + ' ';
var lag;
if(typeof getLag === "function") {
lag = getLag();
}
var lagLight = $('<div>', {
'class': 'lag'
});
if(lag) {
var lagSec = lag/1000;
if (lag.waiting && lagSec > 1) {
lagMsg += "?? " + Math.floor(lagSec);
firstConnection = false;
var title = Messages.lag + ' : ' + lag + ' ms\n';
if (lag.waiting || lag > 1000) {
lagLight.addClass('lag-orange');
title += 'Your connection to the server is slow, it may impact the performance of the collaborative editor.';
} else {
lagMsg += lagSec;
lagLight.addClass('lag-green');
title += "Everything is working fine";
}
}
else {
lagMsg += "??";
else if (!firstConnection){
lagLight.addClass('lag-red');
title = "You are disconnected from the server!";
}
lagElement.textContent = lagMsg;
lagLight.attr('title', title);
$(lagElement).html('');
$(lagElement).append(lagLight);
};
var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
@ -256,6 +272,7 @@ define([
// Try to filter out non-patch messages, doesn't have to be perfect this is just the spinner
realtime.onMessage(function (msg) { if (msg.indexOf(':[2,') > -1) { ks(); } });
checkLag(getLag, lagElement);
setInterval(function () {
if (!connected) { return; }
checkLag(getLag, lagElement);
@ -265,13 +282,13 @@ define([
failed: function () {
connected = false;
userListElement.textContent = Messages.disconnected;
lagElement.textContent = '';
checkLag(undefined, lagElement);
},
reconnecting: function (userId) {
myUserName = userId;
connected = false;
userListElement.textContent = Messages.reconnecting;
lagElement.textContent = '';
checkLag(getLag, lagElement);
},
connected: function () {
connected = true;

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

@ -2,6 +2,7 @@
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<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>
</head>

@ -297,13 +297,6 @@ define([
var createChangeName = function(id, $container) {
var buttonElmt = $container.find('#'+id)[0];
//var lastName = getLastName();
getLastName(function (err, lastName) {
buttonElmt.addEventListener("click", function() {
Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
setName(newName);
});
});
});
};
var DD = new DiffDom(diffOptions);
@ -511,12 +504,12 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
changeNameID: Toolbar.constants.changeName,
//changeNameID: Toolbar.constantdds.changeName,
readOnly: readOnly
};
if (readOnly) {delete config.changeNameID; }
toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
//if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
@ -527,22 +520,23 @@ define([
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
}
getLastName(function (err, lastName) {
var $username = Cryptpad.createButton('username', true)
.click(function() {
Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
setName(newName);
});
});
$rightside.append($username);
});
/* add an export button */
var $export = $('<button>', {
title: Messages.exportButtonTitle,
})
.text(Messages.exportButton)
.addClass('rightside-button')
.click(exportFile);
var $export = Cryptpad.createButton('export', true).click(exportFile);
$rightside.append($export);
if (!readOnly) {
/* add an import button */
var $import = $('<button>', {
title: Messages.importButtonTitle
})
.text(Messages.importButton)
.addClass('rightside-button')
var $import = Cryptpad.createButton('import', true)
.click(Cryptpad.importContent('text/plain', function (content) {
var shjson = stringify(Hyperjson.fromDOM(domFromHTML(content).body));
applyHjson(shjson);
@ -552,12 +546,7 @@ define([
}
/* add a rename button */
var $rename = $('<button>', {
id: 'name-pad',
title: Messages.renameButtonTitle,
})
.addClass('cryptpad-rename rightside-button')
.text(Messages.renameButton)
var $rename = Cryptpad.createButton('rename', true)
.click(function () {
var suggestion = suggestName();
@ -584,12 +573,7 @@ define([
$rightside.append($rename);
/* add a forget button */
var $forgetPad = $('<button>', {
id: 'cryptpad-forget',
title: Messages.forgetButtonTitle,
})
.text(Messages.forgetButton)
.addClass('cryptpad-forget rightside-button')
var $forgetPad = Cryptpad.createButton('forget', true)
.click(function () {
var href = window.location.href;
Cryptpad.confirm(Messages.forgetPrompt, function (yes) {
@ -604,11 +588,7 @@ define([
if (!readOnly && viewHash) {
/* add a 'links' button */
var $links = $('<button>', {
title: Messages.getViewButtonTitle
})
.text(Messages.getViewButton)
.addClass('rightside-button')
var $links = Cryptpad.createButton('readonly', true)
.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
var content = '<b>' + Messages.readonlyUrl + '</b><br><a>' + baseUrl + viewHash + '</a><br>';

Loading…
Cancel
Save