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", "diff-dom": "#gh-pages",
"alertifyjs": "^1.0.11", "alertifyjs": "^1.0.11",
"spin.js": "^2.3.2", "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>
<div class="bottom-bar"> <div class="bottom-bar">
<div class="bottom-bar-left"> <div class="bottom-bar-left">
<p data-localization="bottom_love">
</p>
<span class="bottom-bar-language"> <span class="bottom-bar-language">
<select id="language-selector"> <select id="language-selector">
<option value="en">English</option> <option value="en">English</option>
<option value="fr">Français</option> <option value="fr">Français</option>
</select> </select>
</span> </span>
</div> <p data-localization="bottom_france">
</p>
</div>
<!-- <!--
<div class="bottom-bar-center"> <div class="bottom-bar-center">
<p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p> <p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>

@ -8,11 +8,18 @@ define([
], function (LS, Messages) { ], function (LS, Messages) {
var $ = window.jQuery; var $ = window.jQuery;
var main = function () { var main = function () {
var url = window.location.pathname;
var isHtml = /\.html/.test(url) || url === '/';
$.ajax({ $.ajax({
url: '/customize/BottomBar.html', url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
success: function (ret) { success: function (ret) {
$('iframe').height('96%'); $('iframe').height('96%');
$('body').append(ret); if (isHtml) {
$('body').append(ret);
}
else {
$('body').prepend(ret);
}
$('head').append($('<link>', { $('head').append($('<link>', {
rel: 'stylesheet', rel: 'stylesheet',
href: '/customize/main.css' 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; border-right: none;
} }
/* Bottom Bar */ /* Bottom Bar */
.top-bar,
.bottom-bar { .bottom-bar {
position: fixed; position: fixed;
bottom: 0px;
right: 0px;
height: 4%; height: 4%;
height: 2.5em; height: 2.5em;
display: inline-block; display: inline-block;
@ -220,23 +219,35 @@ tbody td:last-child {
background: #302B28; background: #302B28;
border-top: 1px solid #444; border-top: 1px solid #444;
} }
.top-bar a,
.bottom-bar a { .bottom-bar a {
color: #46E981; color: #46E981;
text-decoration: none; text-decoration: none;
} }
.top-bar p,
.bottom-bar p { .bottom-bar p {
margin: -1px; margin: -1px;
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 20px; font-size: 20px;
display: block; display: block;
float: left; float: right;
margin-left: 10px;
padding-top: 3px; padding-top: 3px;
color: #fafafa; color: #fafafa;
} }
.top-bar img,
.bottom-bar img { .bottom-bar img {
margin-right: 4px; margin-right: 4px;
position: relative; position: relative;
} }
.bottom-bar {
bottom: 0px;
right: 0px;
}
.top-bar {
top: 0px;
right: 0px;
}
.bottom-bar-left { .bottom-bar-left {
display: block; display: block;
float: left; float: left;

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

@ -30,7 +30,7 @@
padding: 0 10px; padding: 0 10px;
height: 1.5em; height: 1.5em;
line-height: 25px; line-height: 25px;
height: 22px; height: 100%;
&.cryptpad-back { &.cryptpad-back {
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
@ -42,11 +42,16 @@
button { button {
height: 100%; height: 100%;
background-color: inherit; background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
border: 1px solid #A6A6A6; border: 1px solid #A6A6A6;
border-radius: 5px; border-bottom-color: #979797;
border-radius: 3px;
margin-right: 5px; margin-right: 5px;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
&:hover {
background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
}
} }
.rightside-button { .rightside-button {
float: right; float: right;
@ -91,4 +96,23 @@
.cryptpad-toolbar-username { .cryptpad-toolbar-username {
font-style: italic; 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-red: #FF0073; // remove red
@cp-outline: #444; @cp-outline: #444;
@cp-orange: #FE9A2E;
// alertify things // alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); @box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);

@ -29,7 +29,7 @@
padding: 0 10px; padding: 0 10px;
height: 1.5em; height: 1.5em;
line-height: 25px; line-height: 25px;
height: 22px; height: 100%;
} }
.cryptpad-toolbar div.cryptpad-back { .cryptpad-toolbar div.cryptpad-back {
padding: 0; padding: 0;
@ -40,12 +40,17 @@
.cryptpad-toolbar button { .cryptpad-toolbar button {
height: 100%; height: 100%;
background-color: inherit; background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
border: 1px solid #A6A6A6; border: 1px solid #A6A6A6;
border-radius: 5px; border-bottom-color: #979797;
border-radius: 3px;
margin-right: 5px; margin-right: 5px;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
} }
.cryptpad-toolbar button:hover {
background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
}
.cryptpad-toolbar .rightside-button { .cryptpad-toolbar .rightside-button {
float: right; float: right;
cursor: pointer; cursor: pointer;
@ -83,3 +88,22 @@
.cryptpad-toolbar-username { .cryptpad-toolbar-username {
font-style: italic; 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.peopleAreEditing = '{0} personnes éditent le document';
out.oneViewer = '1 lecteur'; out.oneViewer = '1 lecteur';
out.viewers = '{0} lecteurs'; out.viewers = '{0} lecteurs';
out.anonymous = "Vous êtes actuellement anonyme";
out.importButton = 'IMPORTER'; out.importButton = 'IMPORTER';
out.importButtonTitle = 'Importer un document depuis un fichier local'; out.importButtonTitle = 'Importer un document depuis un fichier local';
@ -179,7 +180,7 @@ define(function () {
// BottomBar.html // 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>'; 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; return out;

@ -31,6 +31,7 @@ define(function () {
out.peopleAreEditing = '{0} people are editing'; out.peopleAreEditing = '{0} people are editing';
out.oneViewer = '1 viewer'; out.oneViewer = '1 viewer';
out.viewers = '{0} viewers'; out.viewers = '{0} viewers';
out.anonymous = "You are currently anonymous";
out.importButton = 'IMPORT'; out.importButton = 'IMPORT';
out.importButtonTitle = 'Import a document from a local file'; out.importButtonTitle = 'Import a document from a local file';
@ -179,7 +180,7 @@ define(function () {
// BottomBar.html // 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>'; 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; 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 * Alertifyjs
*/ */

@ -43,6 +43,8 @@ define([
var $style; var $style;
var firstConnection = true;
var styleToolbar = function ($container, href) { var styleToolbar = function ($container, href) {
href = href || '/customize/toolbar.css'; href = href || '/customize/toolbar.css';
@ -181,8 +183,12 @@ define([
} }
} }
innerHTML += getViewers(numberOfViewUsers); innerHTML += getViewers(numberOfViewUsers);
if (userData[myUserName] && userData[myUserName].name) { if (userData[myUserName]) {
innerHTML = '<span class="' + USERNAME_CLS + '">' + userData[myUserName].name + '</span> | ' + innerHTML; 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; listElement.innerHTML = innerHTML;
}; };
@ -197,21 +203,31 @@ define([
}; };
var checkLag = function (getLag, lagElement) { var checkLag = function (getLag, lagElement) {
if(typeof getLag !== "function") { return; } var lag;
var lag = getLag(); if(typeof getLag === "function") {
var lagMsg = Messages.lag + ' '; lag = getLag();
}
var lagLight = $('<div>', {
'class': 'lag'
});
if(lag) { if(lag) {
var lagSec = lag/1000; firstConnection = false;
if (lag.waiting && lagSec > 1) { var title = Messages.lag + ' : ' + lag + ' ms\n';
lagMsg += "?? " + Math.floor(lagSec); 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 { } else {
lagMsg += lagSec; lagLight.addClass('lag-green');
title += "Everything is working fine";
} }
} }
else { else if (!firstConnection){
lagMsg += "??"; 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) { 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 // 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(); } }); realtime.onMessage(function (msg) { if (msg.indexOf(':[2,') > -1) { ks(); } });
checkLag(getLag, lagElement);
setInterval(function () { setInterval(function () {
if (!connected) { return; } if (!connected) { return; }
checkLag(getLag, lagElement); checkLag(getLag, lagElement);
@ -265,13 +282,13 @@ define([
failed: function () { failed: function () {
connected = false; connected = false;
userListElement.textContent = Messages.disconnected; userListElement.textContent = Messages.disconnected;
lagElement.textContent = ''; checkLag(undefined, lagElement);
}, },
reconnecting: function (userId) { reconnecting: function (userId) {
myUserName = userId; myUserName = userId;
connected = false; connected = false;
userListElement.textContent = Messages.reconnecting; userListElement.textContent = Messages.reconnecting;
lagElement.textContent = ''; checkLag(getLag, lagElement);
}, },
connected: function () { connected: function () {
connected = true; connected = true;

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

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <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/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/ckeditor/ckeditor.js"></script> <script src="/bower_components/ckeditor/ckeditor.js"></script>
</head> </head>

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

Loading…
Cancel
Save