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

Improve the toolbar style and the way the userlist is displayed

Browse Source
This commit is contained in:
yflory
2016-10-12 18:40:26 +02:00
parent d2389a5729
commit 24fbe22c9d
15 changed files with 618 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/DecorateToolbar.js
View File

@@ -13,7 +13,7 @@ define([
$.ajax({
url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
success: function (ret) {
$('iframe').height('96%');
//:$('iframe').height('96%');
$('body').append(ret);
LS.main();
Messages._applyTranslation();

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

@@ -16,8 +16,6 @@
color: #666;
font-weight: bold;
height: 30px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
z-index: 9001;
@@ -39,20 +37,40 @@
}
}
button {
button, .rightside-element {
height: 26px;
padding-right: 5px;
padding-left: 5px;
margin: 2px;
}
button {
background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
border: 1px solid #A6A6A6;
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);
}
&.userlist {
@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;
}
}
}
}
.rightside-button {
float: right;
cursor: pointer;
@@ -63,18 +81,47 @@
float: left;
}
.rightside-element {
vertical-align: middle;
white-space: nowrap;
//float: right;
}
select {
border: 0px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
}
}
.cryptpad-toolbar-leftside {
float: left;
div {
float: left;
max-width: 35%;
.cryptpad-dropdown-container {
position: relative;
display: inline-block;
padding: 0px;
.cryptpad-dropdown {
z-index:1000;
display:none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
height: auto;
p {
width: 210px;
padding: 0;
margin: 0;
}
}
}
.cryptpad-userbuttons-container {
display: none;
}
}
@@ -87,6 +134,7 @@
}
.cryptpad-spinner {
float: left;
display: inline-block;
}
.cryptpad-readonly {
margin-right: 20px;
@@ -94,13 +142,12 @@
text-transform: uppercase;
}
.cryptpad-toolbar-username {
font-style: italic;
}
.lag {
display: inline-block;
vertical-align: middle;
padding: 0 !important;
margin: 0 !important;
margin: 0 5px !important;
height: 15px !important;
width: 15px !important;
border-radius: 50%;

70
customize.dist/toolbar.css
View File

@@ -16,8 +16,6 @@
user-select: none;
color: #666;
font-weight: bold;
height: 30px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
z-index: 9001;
@@ -37,20 +35,43 @@
cursor: pointer;
color: #000;
}
.cryptpad-toolbar button {
.cryptpad-toolbar button,
.cryptpad-toolbar .rightside-element {
height: 26px;
padding-right: 5px;
padding-left: 5px;
margin: 2px;
}
.cryptpad-toolbar button {
background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
border: 1px solid #A6A6A6;
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);
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist.small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist.small {
display: none;
}
}
.cryptpad-toolbar .rightside-button {
float: right;
cursor: pointer;
@@ -59,17 +80,44 @@
cursor: pointer;
float: left;
}
.cryptpad-toolbar .rightside-element {
vertical-align: middle;
white-space: nowrap;
}
.cryptpad-toolbar select {
border: 0px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
}
.cryptpad-toolbar-leftside {
float: left;
max-width: 35%;
}
.cryptpad-toolbar-leftside div {
float: left;
.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
position: relative;
display: inline-block;
padding: 0px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown {
z-index: 1000;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
height: auto;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p {
width: 210px;
padding: 0;
margin: 0;
}
.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
display: none;
}
.cryptpad-toolbar-rightside {
text-align: right;
@@ -79,20 +127,18 @@
}
.cryptpad-spinner {
float: left;
display: inline-block;
}
.cryptpad-readonly {
margin-right: 20px;
font-weight: bold;
text-transform: uppercase;
}
.cryptpad-toolbar-username {
font-style: italic;
}
.lag {
display: inline-block;
vertical-align: middle;
padding: 0 !important;
margin: 0 !important;
margin: 0 5px !important;
height: 15px !important;
width: 15px !important;
border-radius: 50%;

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

@@ -22,7 +22,7 @@ define(function () {
out.reconnecting = 'Reconnexion...';
out.lag = 'Latence';
out.readonly = 'Lecture seule';
out.anonymous = "Vous êtes actuellement anonyme";
out.anonymous = "nonyme";
out.yourself = "Vous-même";
out.anonymousUsers = "utilisateurs anonymes";
out.anonymousUser = "utilisateur anonyme";
@@ -78,7 +78,14 @@ define(function () {
out.readonlyUrl = 'Document en lecture seule';
out.copyReadOnly = "Copier l'URL dans le presse-papiers";
out.openReadOnly = "Ouvrir dans un nouvel onglet";
out.editing = "en édition";
out.viewing = "en lecture";
out.editShare = "Partager l'URL";
out.editShareTitle = "Copier l'URL d'édition dans le presse-papiers";
out.viewShare = "Partager l'URL de lecture";
out.viewShareTitle = "Copier l'URL d'accès en lecture seule dans le presse-papiers";
out.viewOpen = "Voir dans un nouvel onglet";
out.viewOpenTitle = "Ouvrir le document en lecture seule dans un nouvel onglet";
out.disconnectAlert = 'Perte de la connexion au réseau !';

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

@@ -22,7 +22,7 @@ define(function () {
out.reconnecting = 'Reconnecting...';
out.lag = 'Lag';
out.readonly = 'Read only';
out.anonymous = "You are currently anonymous";
out.anonymous = "Anonymous";
out.yourself = "Yourself";
out.anonymousUsers = "anonymous users";
out.anonymousUser = "anonymous user";
@@ -79,6 +79,14 @@ define(function () {
out.readonlyUrl = 'Read only document';
out.copyReadOnly = "Copy URL to clipboard";
out.openReadOnly = "Open in a new tab";
out.editing = "editing";
out.viewing = "viewing";
out.editShare = "Share";
out.editShareTitle = "Copy the edit URL to clipboard";
out.viewShare = "Share view URL";
out.viewShareTitle = "Copy the read-only URL to clipboard";
out.viewOpen = "View in new tab";
out.viewOpenTitle = "Open the document in read-only mode in a new tab";
out.disconnectAlert = 'Network connection lost!';