Improve the top bar and use the font awesome icons in /code

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

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

@ -8,15 +8,14 @@
<option value="fr">Français</option>
</select>
</span>
<p data-localization="bottom_france">
<p data-localization="header_france">
</p>
</div>
<!--
<div class="bottom-bar-center">
<p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>
</div> -->
<p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
</div>
<div class="bottom-bar-right">
<p data-localization="bottom_support">
<p data-localization="header_support">
</p>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 780 B

@ -230,7 +230,6 @@ tbody td:last-child {
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 20px;
display: block;
float: right;
margin-left: 10px;
padding-top: 3px;
color: #fafafa;
@ -253,15 +252,19 @@ tbody td:last-child {
float: left;
padding-left: 10px;
}
.bottom-bar-left p {
float: right;
}
.bottom-bar-right {
display: block;
float: right;
padding-right: 20px;
}
.bottom-bar-center {
margin-left: auto;
margin-right: auto;
width: 20%;
position: absolute;
left: 40%;
text-align: center;
}
.bottom-bar-heart {
top: 2px;

@ -267,7 +267,6 @@ tbody {
font-size: 20px;
display:block;
float:right;
margin-left: 10px;
padding-top:3px;
color: @fore;
@ -291,15 +290,19 @@ tbody {
float:left;
padding-left:10px;
}
.bottom-bar-left p {
float: right;
}
.bottom-bar-right {
display:block;
float:right;
padding-right:20px
}
.bottom-bar-center {
margin-left: auto;
margin-right: auto;
width: 20%
width: 20%;
position: absolute;
left: 40%;
text-align: center;
}
.bottom-bar-heart {
top: 2px;

@ -16,7 +16,7 @@
color: #666;
font-weight: bold;
height: 26px;
height: 30px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
@ -27,7 +27,7 @@
}
div {
padding: 0 10px;
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
@ -40,7 +40,7 @@
}
button {
height: 100%;
height: 26px;
background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
border: 1px solid #A6A6A6;

@ -16,7 +16,7 @@
user-select: none;
color: #666;
font-weight: bold;
height: 26px;
height: 30px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
@ -26,7 +26,7 @@
float: right;
}
.cryptpad-toolbar div {
padding: 0 10px;
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
@ -38,7 +38,7 @@
color: #000;
}
.cryptpad-toolbar button {
height: 100%;
height: 26px;
background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
border: 1px solid #A6A6A6;

@ -33,6 +33,10 @@ define(function () {
out.viewers = '{0} lecteurs';
out.anonymous = "Vous êtes actuellement anonyme";
out.greenLight = "Tout fonctionne bien";
out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur"
out.redLight = "Vous êtes déconnectés de la session";
out.importButton = 'IMPORTER';
out.importButtonTitle = 'Importer un document depuis un fichier local';
@ -183,5 +187,11 @@ define(function () {
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>';
// 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_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";
return out;
});

@ -33,6 +33,10 @@ define(function () {
out.viewers = '{0} viewers';
out.anonymous = "You are currently anonymous";
out.greenLight = "Everything is working fine";
out.orangeLight = "Your slow connection may impact your experience";
out.redLight = "You are disconnected from the session";
out.importButton = 'IMPORT';
out.importButtonTitle = 'Import a document from a local file';
@ -183,5 +187,11 @@ define(function () {
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>';
// 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_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';
return out;
});

@ -14,13 +14,14 @@
data-main-favicon="/customize/main-favicon.png"
data-alt-favicon="/customize/alt-favicon.png"
id="favicon" />
<link rel="stylesheet" href="/customize/main.css" />
<style>
html, body {
overflow-y: hidden;
}
#pad-iframe {
position:fixed;
top:0px;
top:2.5em;
left:0px;
bottom:0px;
right:0px;

@ -2,6 +2,7 @@
<html style="height: 100%;">
<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="codemirror-5.16.0/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror-5.16.0/lib/codemirror.css">

@ -176,7 +176,7 @@ define([
};
var setName = module.setName = function (newName) {
if (!(typeof(newName) === 'string' && newName.trim())) { return; }
if (typeof(newName) !== 'string') { return; }
var myUserNameTemp = newName.trim();
if(newName.trim().length > 32) {
myUserNameTemp = myUserNameTemp.substr(0, 32);
@ -202,18 +202,6 @@ define([
});
};
var createChangeName = function(id, $container) {
var buttonElmt = $container.find('#'+id)[0];
getLastName(function (err, lastName) {
buttonElmt.addEventListener("click", function() {
Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
setName(newName);
});
});
});
};
var getHeadingText = function () {
var lines = editor.getValue().split(/\n/);
@ -283,12 +271,10 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
changeNameID: Toolbar.constants.changeName,
readOnly: readOnly
};
if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
@ -299,22 +285,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(exportText);
var $export = Cryptpad.createButton('export', true).click(exportText);
$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, file) {
var mode;
var mime = CodeMirror.findModeByMIME(file.type);
@ -344,12 +331,7 @@ define([
}
/* add a rename button */
var $setTitle = $('<button>', {
id: 'name-pad',
title: Messages.renameButtonTitle,
})
.addClass('rightside-button')
.text(Messages.renameButton)
var $setTitle = Cryptpad.createButton('rename', true)
.click(function () {
var suggestion = suggestName();
@ -384,12 +366,7 @@ define([
$rightside.append($setTitle);
/* 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) {
@ -409,11 +386,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>';

@ -11,9 +11,6 @@ define([
/** Id of the div containing the user list. */
var USER_LIST_CLS = Bar.constants.userlist = 'cryptpad-user-list';
/** Id of the button to change my username. */
var USERNAME_BUTTON_GROUP = Bar.constants.changeName = 'cryptpad-changeName';
/** Id of the div containing the lag info. */
var LAG_ELEM_CLS = Bar.constants.lag = 'cryptpad-lag';
@ -23,8 +20,6 @@ define([
var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
var BACK_CLS = Bar.constants.back = 'cryptpad-back';
var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
var USERNAME_CLS = Bar.constants.username = 'cryptpad-toolbar-username';
@ -70,17 +65,6 @@ define([
return $toolbar;
};
var createEscape = function ($container) {
var $back = $('<div>', {
'class': BACK_CLS,
id: uid(),
}).html(Messages.back).click(function () {
window.location.href = '/';
});
$container.append($back);
return $back[0];
};
var createSpinner = function ($container) {
var $spinner = $('<div>', {
id: uid(),
@ -126,20 +110,6 @@ define([
return (i > 0) ? list.slice(0, -2) : list;
};
var createChangeName = function($container, buttonID) {
var $span = $('<span>', {
id: uid(),
});
var $button = $('<button>', {
id: buttonID,
'class': 'rightside-button',
}).text(Messages.changeNameButton);
$container.append($button);
$button.after($span);
return $span[0];
};
var arrayIntersect = function(a, b) {
return $.grep(a, function(i) {
return $.inArray(i, b) > -1;
@ -215,15 +185,15 @@ define([
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.';
title += Messages.orangeLight;
} else {
lagLight.addClass('lag-green');
title += "Everything is working fine";
title += Messages.greenLight;
}
}
else if (!firstConnection){
lagLight.addClass('lag-red');
title = "You are disconnected from the server!";
title = Messages.redLight;
}
lagLight.attr('title', title);
$(lagElement).html('');
@ -232,26 +202,15 @@ define([
var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
var toolbar = createRealtimeToolbar($container);
createEscape(toolbar.find('.' + LEFTSIDE_CLS));
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS));
var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
var userData = config.userData;
var changeNameID = config.changeNameID;
var saveContentID = config.saveContentID || config.exportContentID;
var loadContentID = config.loadContentID || config.importContentID;
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
var saveElement;
var loadElement;
// Check if the user is allowed to change his name
if(changeNameID) {
// Create the button and update the element containing the user list
//userListElement = createChangeName($container, userListElement, changeNameID);
createChangeName(toolbar.find('.' + RIGHTSIDE_CLS), changeNameID);
}
var connected = false;
userList.onChange = function(newUserData) {

@ -7,6 +7,7 @@
data-main-favicon="/customize/main-favicon.png"
data-alt-favicon="/customize/alt-favicon.png"
id="favicon" />
<link rel="stylesheet" href="/customize/main.css" />
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
<script>
require.config({

@ -82,10 +82,10 @@ define([
removePlugins: 'resize',
extraPlugins: 'autolink,colorbutton,colordialog,font',
//skin: 'moono',
toolbarGroups: [{"name":"clipboard","groups":["clipboard","undo"]},{"name":"editing","groups":["find","selection"]},{"name":"links"},{"name":"insert"},{"name":"forms"},{"name":"tools"},{"name":"document","groups":["mode","document","doctools"]},{"name":"others"},{"name":"basicstyles","groups":["basicstyles","cleanup"]},{"name":"paragraph","groups":["list","indent","blocks","align","bidi"]},{"name":"styles"},{"name":"colors"},{"name":"about"}]
});
editor.on('instanceReady', function (Ckeditor) {
if (readOnly) {
$('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox > .cke_toolbar').hide();
}
@ -294,11 +294,6 @@ define([
});
};
var createChangeName = function(id, $container) {
var buttonElmt = $container.find('#'+id)[0];
//var lastName = getLastName();
};
var DD = new DiffDom(diffOptions);
// apply patches, and try not to lose the cursor in the process!
@ -504,12 +499,10 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
//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); }
var $rightside = $bar.find('.' + Toolbar.constants.rightside);

@ -19,9 +19,10 @@
<style>
html, body {
width: 100;
margin-top: 1.25em;
height: auto;
}
#main {
width: 90%;
margin: auto;
}
.clickable {
@ -38,7 +39,6 @@
<div id="main">
<div id="toolbar" class="buttons">
<sub><a href="/"></a></sub>
</div>
<h1 id="mainTitle">CryptPoll</h1>
<h2 data-localization="poll_subtitle"></h2>

@ -689,8 +689,6 @@ define([
var $toolbar = $('#toolbar');
$toolbar.find('sub a').text(Messages.backToCryptpad);
var Button = function (opt) {
return $('<button>', opt);
};

@ -16,6 +16,7 @@
width: 100%;
padding: 0px;
margin: 0px;
margin-top: 1.25em;
overflow: hidden;
box-sizing: border-box;
position: relative;

Loading…
Cancel
Save