web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve the UI with FontAwesome icons

Browse Source
This commit is contained in:
yflory
2016-09-27 18:33:03 +02:00
parent 07434eb4c4
commit 3d54413343
16 changed files with 232 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
customize.dist/BottomBar.html
View File

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

11
customize.dist/DecorateToolbar.js
View File

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

23
customize.dist/Header.html Normal file
View File

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

17
customize.dist/main.css
View File

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

16
customize.dist/src/cryptpad.less
View File

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

28
customize.dist/src/toolbar.less
View File

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

1
customize.dist/src/variables.less
View File

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

28
customize.dist/toolbar.css
View File

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

3
customize.dist/translations/messages.fr.js
View File

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

3
customize.dist/translations/messages.js
View File

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