infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

New toolbar

Browse Source
pull/1/head
yflory 8 years ago
parent 503e9de07c
commit 8d956c3de6
11 changed files with 1178 additions and 385 deletions
Show Stats Download Patch File Download Diff File

3
customize.dist/ckeditor-config.js
Unescape Escape View File

@ -8,7 +8,8 @@ CKEDITOR.editorConfig = function( config ) {
config.removeButtons= 'Source,Maximize'; config.removeButtons= 'Source,Maximize';
// magicline plugin inserts html crap into the document which is not part of the // magicline plugin inserts html crap into the document which is not part of the
// document itself and causes problems when it's sent across the wire and reflected back // document itself and causes problems when it's sent across the wire and reflected back
config.removePlugins= 'resize'; config.removePlugins= 'resize,elementspath';
config.resize_enabled= false; //bottom-bar
config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify'; config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify';
config.toolbarGroups= [ config.toolbarGroups= [
// {"name":"clipboard","groups":["clipboard","undo"]}, // {"name":"clipboard","groups":["clipboard","undo"]},

6
customize.dist/main.css
Unescape Escape View File

@ -435,7 +435,7 @@
display: block; display: block;
} }
.dropdown-bar .dropdown-bar-content a { .dropdown-bar .dropdown-bar-content a {
color: black !important; color: black;
padding: 5px 16px; padding: 5px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
@ -449,11 +449,11 @@
} }
.dropdown-bar .dropdown-bar-content a:hover { .dropdown-bar .dropdown-bar-content a:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
color: black !important; color: black;
} }
.dropdown-bar .dropdown-bar-content a.active { .dropdown-bar .dropdown-bar-content a.active {
background-color: #e8e8e8; background-color: #e8e8e8;
color: black !important; color: black;
} }
.dropdown-bar .dropdown-bar-content hr { .dropdown-bar .dropdown-bar-content hr {
margin: 5px 0px; margin: 5px 0px;

6
customize.dist/src/less/dropdown.less
Unescape Escape View File

@ -42,7 +42,7 @@
} }
a { a {
color: black !important; color: black;
padding: 5px 16px; padding: 5px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
@ -56,12 +56,12 @@
&:hover { &:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
color: black !important; color: black;
} }
&.active { &.active {
background-color: #e8e8e8; background-color: #e8e8e8;
color: black !important; color: black;
} }
} }

477
customize.dist/src/less/toolbar.less
Unescape Escape View File

@ -32,72 +32,157 @@
//background-color: #BBBBFF; //background-color: #BBBBFF;
background-color: @toolbar-default-bg; background-color: @toolbar-default-bg;
color: @toolbar-default-color; color: @toolbar-default-color;/*
&.pad { &.pad {
@color: @toolbar-pad-bg; @bgcolor: @toolbar-pad-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); @color: @toolbar-pad-color;
border-bottom: 2px solid @color; background-color: @bgcolor;
color: @color;
} }
&.code { &.code {
@color: @toolbar-code-bg; @bgcolor: @toolbar-code-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); @color: @toolbar-code-color;
border-bottom: 2px solid @color; background-color: @bgcolor;
color: @color;
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
lighten($bgcolor, 15%);
}
} }
&.slide { &.slide {
@color: @toolbar-slide-bg; @bgcolor: @toolbar-slide-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); @color: @toolbar-slide-color;
background-color: @toolbar-default-bg 150px);
border-bottom: 2px solid @color; border-bottom: 2px solid @color;
} }
&.poll { &.poll {
@color: @toolbar-poll-bg; @bgcolor: @toolbar-poll-bg;
@color: @toolbar-poll-color;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color; border-bottom: 2px solid @color;
} }
&.whiteboard { &.whiteboard {
@color: @toolbar-whiteboard-bg; @bgcolor: @toolbar-whiteboard-bg;
@color: @toolbar-whiteboard-color;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color; border-bottom: 2px solid @color;
} }
&.drive { &.drive {
@color: @toolbar-drive-bg; @bgcolor: @toolbar-drive-bg;
@color: @toolbar-drive-color;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color; border-bottom: 2px solid @color;
} }
&.file { &.file {
@color: @toolbar-file-bg; @bgcolor: @toolbar-file-bg;
@color: @toolbar-file-color;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color; border-bottom: 2px solid @color;
}*/
.addToolbarColors (@color, @bg-color) {
background-color: @bgcolor;
color: @color;
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
background-color: lighten(@bgcolor, 8%);
button:hover {
background-color: @bgcolor;
}
}
.hoverable:hover {
.editable {
cursor: text;
border: 1px solid lighten(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
}
.pencilIcon {
border: 1px solid lighten(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
}
}
.saveIcon {
border: 1px solid lighten(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
}
input {
border: 1px solid lighten(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
}
.dropdown-bar-content {
line-height: 14px;
background: darken(@bgcolor, 5%);
border: 1px solid @color;
color: @color;
a {
color: @color;
&.active {
background-color: darken(@bgcolor, 10%);
color: @color;
}
&:hover {
background-color: @bgcolor;
color: @color;
}
}
hr {
background-color: darken(@bgcolor, 15%);
}
p {
h2 {
background-color: darken(@bgcolor, 10%);
}
.accountData {
background-color: @bgcolor;
}
}
} }
/* }
&.pad { &.pad {
background-color: @toolbar-pad-bg; @bgcolor: @toolbar-pad-bg;
color: @toolbar-pad-color; @color: @toolbar-pad-color;
.addToolbarColors(@color, @bgcolor);
} }
&.code { &.code {
background-color: @toolbar-code-bg; @bgcolor: @toolbar-code-bg;
color: @toolbar-code-color; @color: @toolbar-code-color;
.addToolbarColors(@color, @bgcolor);
} }
&.slide { &.slide {
background-color: @toolbar-slide-bg; @bgcolor: @toolbar-slide-bg;
color: @toolbar-slide-color; @color: @toolbar-slide-color;
.addToolbarColors(@color, @bgcolor);
} }
&.poll { &.poll {
background-color: @toolbar-poll-bg; @bgcolor: @toolbar-poll-bg;
color: @toolbar-poll-color; @color: @toolbar-poll-color;
.addToolbarColors(@color, @bgcolor);
} }
&.whiteboard { &.whiteboard {
background-color: @toolbar-whiteboard-bg; @bgcolor: @toolbar-whiteboard-bg;
color: @toolbar-whiteboard-color; @color: @toolbar-whiteboard-color;
.addToolbarColors(@color, @bgcolor);
} }
&.drive { &.drive {
background-color: @toolbar-drive-bg; @bgcolor: @toolbar-drive-bg;
color: @toolbar-drive-color; @color: @toolbar-drive-color;
.addToolbarColors(@color, @bgcolor);
} }
&.file { &.file {
background-color: @toolbar-file-bg; @bgcolor: @toolbar-file-bg;
color: @toolbar-file-color; @color: @toolbar-file-color;
.addToolbarColors(@color, @bgcolor);
} }
*/
.fa { .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-family: FontAwesome; font-family: FontAwesome;
@ -121,10 +206,25 @@
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
background: transparent;
} }
} }
.separator {
content: '';
display: inline-block;
background: #888;
margin: 7px 4px;
height: 18px;
width: 1px;
vertical-align: top;
}
.separator:last-child {
display: none;
}
button { button {
.unselectable();
&#shareButton, &.buttonSuccess { &#shareButton, &.buttonSuccess {
// Bootstrap 4 colors // Bootstrap 4 colors
color: #fff; color: #fff;
@ -162,21 +262,24 @@
&.hidden { &.hidden {
display: none; display: none;
} }
// Bootstrap 4 colors (btn-secondary) // Bootstrap 4 colors (btn-secondary)
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem; border-radius: .25rem;
color: #000; color: inherit;
background-color: #fff;
border-color: #ccc;
font: @toolbar-button-font; font: @toolbar-button-font;
* { * {
color: #000; color: inherit;
font: @toolbar-button-font; font: @toolbar-button-font;
} }
}
.cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
//background-color: #fff;
//border-color: #ccc;
background: transparent;
&:hover { &:hover {
color: #292b2c; //color: #292b2c;
background-color: #e6e6e6; background-color: rgba(50,50,50,0.3);
//background-color: #e6e6e6;
border-color: #adadad; border-color: #adadad;
} }
} }
@ -204,68 +307,95 @@
} }
.clag () { .clag () {
background: transparent; background: transparent
} }
.cryptpad-state {
line-height: @toolbar-top-height;
}
.cryptpad-lag { .cryptpad-lag {
height: 20px;
width: 23px;
background: transparent;
display: inline-block; display: inline-block;
padding: 3px;
margin: 3px;
vertical-align: top; vertical-align: top;
box-sizing: content-box; box-sizing: content-box;
text-align: center; text-align: center;
line-height: @toolbar-top-height;
.disconnected {
display: none;
color: inherit;
width: 28px;
margin: 8px;
font-size: 28px;
text-align: center;
vertical-align: middle;
}
.bars {
margin: 8px;
height: 26px;
line-height: 26px;
display: inline-block;
span { span {
display: inline-block; display: inline-block;
width: 4px; width: 6px;
margin: 0; margin: 0;
margin-right: 1px; margin-right: 1px;
background: black; background: white;
vertical-align: bottom; vertical-align: bottom;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid black; border: 1px solid black;
visibility: hidden;
transition: background 1s, border 1s; transition: background 1s, border 1s;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
&.bar1 { height: 5px; } &.bar1 { height: 6px; }
&.bar2 { height: 10px; } &.bar2 { height: 12px; }
&.bar3 { height: 15px; } &.bar3 { height: 18px; }
&.bar4 { height: 20px; } &.bar4 { height: 24px; }
}
}
&.dc {
.disconnected {
display: inline;
}
.bars {
display: none
}
} }
&.lag0 { &.lag0 {
span { span span {
.clag(); .clag();
border-color: red; //border-color: red;
} }
} }
&.lag1 { &.lag1 {
.bar2, .bar3, .bar4 { .clag(); } .bar2, .bar3, .bar4 { .clag(); }
span { span span {
background-color: orange; visibility: visible;
border-color: orange; //background-color: orange;
//border-color: orange;
} }
} }
&.lag2 { &.lag2 {
.bar3, .bar4 { .clag(); } .bar3, .bar4 { .clag(); }
span { span span {
background-color: orange; visibility: visible;
border-color: orange; //background-color: orange;
//border-color: orange;
} }
} }
&.lag3 { &.lag3 {
.bar4 { .clag(); } .bar4 { .clag(); }
span { span span {
background-color: @toolbar-green; visibility: visible;
border-color: @toolbar-green; //background-color: @toolbar-green;
//border-color: @toolbar-green;
} }
} }
&.lag4 { &.lag4 {
span { span span {
background-color: @toolbar-green; visibility: visible;
border-color: @toolbar-green; //background-color: @toolbar-green;
//border-color: @toolbar-green;
} }
} }
} }
@ -287,15 +417,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.dropdown-bar-content {
margin-top: -3px;
margin-right: 2px;
}
.cryptpad-state {
line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
}
.rightside-button { .rightside-button {
float: right; float: right;
cursor: pointer; cursor: pointer;
@ -381,7 +502,8 @@
} }
.cryptpad-toolbar:not(.notitle) { .cryptpad-toolbar:not(.notitle) {
.cryptpad-toolbar-top { // TODO
/*.cryptpad-toolbar-top {
@media screen and (max-width: @media-medium-screen) { @media screen and (max-width: @media-medium-screen) {
height: 67px; height: 67px;
} }
@ -393,116 +515,174 @@
top: 0px; top: 0px;
} }
} }
} }*/
} }
.cryptpad-toolbar-top { .cryptpad-toolbar-top {
display: block; display: flex;
text-align: center; flex-flow: row;
height: 32px; height: @toolbar-top-height;
position: relative; position: relative;
.cryptpad-title { .cryptpad-title {
order: 3;
height: 100%;
display: inline-block;
line-height: @toolbar-top-height;
flex: 1;
margin-left: 20px;
.title, .pencilIcon, .saveIcon { .title, .pencilIcon, .saveIcon {
font-size: 1.5em; font-size: 25px;
vertical-align: middle; vertical-align: middle;
line-height: 32px; line-height: 25px;
} }
.pencilIcon { .pencilIcon {
margin-left: 11px; cursor: pointer;
&:hover { border: 1px solid transparent;
color: #999; border-radius: 0px 2px 2px 0px;
margin-left: 0px; padding: 5px;
} border-collapse: collapse;
span { span {
font-size: 25px;
cursor: pointer; cursor: pointer;
} }
} }
.saveIcon { .saveIcon {
cursor: pointer; cursor: pointer;
border: 1px solid black;
border-radius: 0px 2px 2px 0px; border-radius: 0px 2px 2px 0px;
background: white;
padding: 5px; padding: 5px;
display: inline;
margin-left: -1px;
border-collapse: collapse; border-collapse: collapse;
&:hover {
color: #999;
}
span { span {
font-size: 25px;
cursor: pointer; cursor: pointer;
} }
} }
&:not(input):hover {
.editable { .editable {
border: 1px solid #888; border: 1px solid transparent;
border-radius: 2px 0px 0px 2px; border-radius: 2px 0px 0px 2px;
background: white;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
} }
.pencilIcon {
cursor: pointer;
border: 1px solid #888;
border-radius: 0px 2px 2px 0px;
background: white;
padding: 5px;
display: inline;
margin-left: -1px;
border-collapse: collapse;
}
}
input { input {
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid black;
background: #fff;
cursor: auto; cursor: auto;
width: 300px; width: 300px;
font-size: 25px;
padding: 5px 5px; padding: 5px 5px;
height: 40px;
} }
} }
.cryptpad-link { .cryptpad-link, .cryptpad-new {
position: absolute; font-size: 48px;
left: 0px; line-height: 64px;
height: 32px; width: @toolbar-top-height;
background: @toolbar-drive-bg; height: @toolbar-top-height;
padding: 0;
box-sizing: border-box;
display: inline-block;
a.cryptpad-logo { color: white;
cursor: pointer; transition: all 0.15s;
height: 32px; }
padding: 0px 5px; .cryptpad-new {
text-decoration: none; background-color: rgba(0,0,0,0.2);
&:hover {
background-color: rgba(0,0,0,0.3);
}
order: 2;
text-align: center;
&> button {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px !important; // Allows us to have a nice square outline when focused
font-size: 1em;
color: inherit; color: inherit;
height: auto;
padding: 0px;
margin: 0;
&::before {
padding-top: 4px;
}
&:hover { &:hover {
background-color: initial;
border-color: transparent;
}
span { span {
text-decoration: underline; vertical-align: top;
font-size: 1em;
text-decoration: none;
color: inherit;
} }
} }
img { .dropdown-bar-content {
vertical-align: middle; font-size: 12px;
height: 32px; line-height: 14px;
cursor: pointer;
} }
span { }
font-size: 1.5em; .cryptpad-link {
margin-left: 5px; display: inline-flex;
vertical-align: middle; align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
background-color: rgba(0,0,0,0.4);
&:hover {
background-color: rgba(0,0,0,0.5);
} }
order: 1;
a.cryptpad-logo {
cursor: pointer;
font-size: 1em;
height: auto;
padding: 0px 5px;
text-decoration: none;
color: inherit;
} }
} }
.cryptpad-user { .cryptpad-user {
height: 100%; height: 100%;
position: absolute; display: inline-block;
right: 0; order: 4;
:not(.cryptpad-lag) span { line-height: @toolbar-top-height;
&> * {
display: inline-block;
height: 100%;
vertical-align: top; vertical-align: top;
} }
.cryptpad-upgrade {
height: 32px;
vertical-align: middle;
cursor: pointer;
}
.cryptpad-user-dropdown {
margin-left: 20px;
height: 64px;
width: 64px;
padding: 0px;
box-sizing: border-box;
text-align: center;
background-color: rgba(0,0,0,0.3);
&:hover {
background-color: rgba(0,0,0,0.4);
}
.dropdown-bar-content {
margin: 0;
}
button { button {
span.fa { display: flex;
vertical-align: baseline; justify-content: center;
align-items: center;
height: 64px;
width: 64px;
padding: 0;
span {
font-size: 32px;
.fa {
margin-left: 3px;
}
}
} }
} }
} }
@ -533,7 +713,28 @@
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
padding: 0 10px; padding: 0 10px;
}
.drawer-content {
position: absolute;
right:0px;
top:96px;
width: 50px;
background: white;
border: 1px solid black;
display: none;
button {
text-align: center;
width: 100%;
margin: 0;
border-radius: 0;
border: 1px solid transparent;
&:hover {
border: 1px solid transparent;
}
&:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.2);
}
}
} }
} }
.cryptpad-toolbar-history { .cryptpad-toolbar-history {
@ -567,7 +768,9 @@
border-radius: 5px; border-radius: 5px;
} }
} }
.cryptpad-spinner > span { .cryptpad-spinner {
line-height: @toolbar-top-height;
&> span {
height: 16px; height: 16px;
width: 16px; width: 16px;
margin: 8px; margin: 8px;
@ -575,6 +778,7 @@
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
} }
}
.cryptpad-readonly { .cryptpad-readonly {
margin-right: 5px; margin-right: 5px;
font-weight: bold; font-weight: bold;
@ -582,7 +786,6 @@
} }
.cryptpad-user { .cryptpad-user {
p.accountData { p.accountData {
background: #f0f0f0;
&> span { &> span {
font-weight: bold; font-weight: bold;
span { span {
@ -590,14 +793,6 @@
} }
} }
} }
.buttonTitle {
.fa:not(.fa-caret-down) {
margin-right: 5px;
}
.account-name {
margin-left: 5px;
}
}
} }
.cryptpad-dropdown-share { .cryptpad-dropdown-share {
a { a {

11
customize.dist/src/less/variables.less
Unescape Escape View File

@ -99,6 +99,8 @@
@topbar-button-color: #fff; @topbar-button-color: #fff;
@topbar-height: 50px; @topbar-height: 50px;
@toolbar-top-height: 64px;
@main-border-width: 15vw; @main-border-width: 15vw;
@cp-darkblue: #3333ff; @cp-darkblue: #3333ff;
@cp-accent2: darken(@cp-darkblue, 20%); @cp-accent2: darken(@cp-darkblue, 20%);
@ -108,3 +110,12 @@
@main-bg: url('/customize/bg3.jpg') no-repeat center center; @main-bg: url('/customize/bg3.jpg') no-repeat center center;
@category-bg: #f4f4f4; @category-bg: #f4f4f4;
.unselectable () {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

871
customize.dist/toolbar.css
View File

File diff suppressed because it is too large Load Diff

2
customize.dist/translations/messages.fr.js
Unescape Escape View File

@ -74,7 +74,7 @@ define(function () {
out.greenLight = "Tout fonctionne bien"; out.greenLight = "Tout fonctionne bien";
out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur"; 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.redLight = "Vous êtes déconnecté de la session";
out.pinLimitReached = "Vous avez atteint votre limite de stockage"; out.pinLimitReached = "Vous avez atteint votre limite de stockage";
out.updated_0_pinLimitReachedAlert = "Vous avez atteint votre limite de stockage. Les nouveaux pads ne seront pas enregistrés dans votre CryptDrive.<br>" + out.updated_0_pinLimitReachedAlert = "Vous avez atteint votre limite de stockage. Les nouveaux pads ne seront pas enregistrés dans votre CryptDrive.<br>" +

2
www/common/common-hash.js
Unescape Escape View File

@ -100,6 +100,8 @@ Version 1
var ret = {}; var ret = {};
if (typeof href !== "string") { console.error(href); }
if (!href) { return ret; } if (!href) { return ret; }
if (href.slice(-1) !== '/') { href += '/'; } if (href.slice(-1) !== '/') { href += '/'; }

30
www/common/cryptpad-common.js
Unescape Escape View File

@ -530,7 +530,7 @@ define([
}; };
common.setPadTitle = function (name, padHref, cb) { common.setPadTitle = function (name, padHref, cb) {
var href = padHref || window.location.href; var href = typeof padHref === "string" ? padHref : window.location.href;
var parsed = parsePadUrl(href); var parsed = parsePadUrl(href);
if (!parsed.hash) { return; } if (!parsed.hash) { return; }
href = getRelativeHref(href); href = getRelativeHref(href);
@ -924,6 +924,7 @@ define([
common.createButton = function (type, rightside, data, callback) { common.createButton = function (type, rightside, data, callback) {
var button; var button;
var size = "17px"; var size = "17px";
console.log(type);
switch (type) { switch (type) {
case 'export': case 'export':
button = $('<button>', { button = $('<button>', {
@ -1096,6 +1097,13 @@ define([
}); });
} }
break; break;
case 'more':
button = $('<button>', {
title: Messages.moreActions || 'TODO',
'class': "fa fa-ellipsis-h",
style: 'font:'+size+' FontAwesome'
});
break;
default: default:
button = $('<button>', { button = $('<button>', {
'class': "fa fa-question", 'class': "fa fa-question",
@ -1143,9 +1151,9 @@ define([
var $button = $('<button>', { var $button = $('<button>', {
'class': '' 'class': ''
}).append($('<span>', {'class': 'buttonTitle'}).html(config.text || "")); }).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
$('<span>', { /*$('<span>', {
'class': 'fa fa-caret-down', 'class': 'fa fa-caret-down',
}).appendTo($button); }).appendTo($button);*/
// Menu // Menu
var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'}); var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'});
@ -1186,7 +1194,7 @@ define([
} }
}; };
$button.click(function (e) { $container.click(function (e) {
e.stopPropagation(); e.stopPropagation();
var state = $innerblock.is(':visible'); var state = $innerblock.is(':visible');
$('.dropdown-bar-content').hide(); $('.dropdown-bar-content').hide();
@ -1365,15 +1373,19 @@ define([
content: Messages.login_register content: Messages.login_register
}); });
} }
var $icon = $('<span>', {'class': 'fa fa-user'}); var $icon = $('<span>', {'class': 'fa fa-user-secret'});
var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone()); //var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
var $userButton = $('<div>').append($icon).append($userbig); var $userButton = $('<div>').append($icon);//.append($userbig);
if (account && config.displayNameCls) { if (account) {
$userButton = $('<div>').append(accountName.slice(0,1).toUpperCase());
}
/*if (account && config.displayNameCls) {
$userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')')); $userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
} else if (account) { } else if (account) {
// If no display name, do not display the parentheses // If no display name, do not display the parentheses
$userbig.append($('<span>', {'class': 'account-name'}).text(accountName)); $userbig.append($('<span>', {'class': 'account-name'}).text(accountName));
} }*/
var dropdownConfigUser = { var dropdownConfigUser = {
text: $userButton.html(), // Button initial text text: $userButton.html(), // Button initial text
options: options, // Entries displayed in the menu options: options, // Entries displayed in the menu

90
www/common/toolbar2.js
Unescape Escape View File

@ -17,6 +17,7 @@ define([
var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top'; var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top';
var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside'; var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside'; var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
var DRAWER_CLS = Bar.constants.drawer = 'drawer-content';
var HISTORY_CLS = Bar.constants.history = 'cryptpad-toolbar-history'; var HISTORY_CLS = Bar.constants.history = 'cryptpad-toolbar-history';
// Userlist // Userlist
@ -81,7 +82,7 @@ define([
$('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer); $('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); //$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$toolbar.append($topContainer) $toolbar.append($topContainer)
@ -89,6 +90,15 @@ define([
.append($('<div>', {'class': RIGHTSIDE_CLS})) .append($('<div>', {'class': RIGHTSIDE_CLS}))
.append($('<div>', {'class': HISTORY_CLS})); .append($('<div>', {'class': HISTORY_CLS}));
var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
if (!config.hideDrawer) {
var $drawerContent = $('<div>', {'class': 'drawer-content'}).appendTo($rightside);
var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
$drawer.click(function (e) {
$drawerContent.toggle();
});
}
// The 'notitle' class removes the line added for the title with a small screen // The 'notitle' class removes the line added for the title with a small screen
if (!config.title || typeof config.title !== "object") { if (!config.title || typeof config.title !== "object") {
$toolbar.addClass('notitle'); $toolbar.addClass('notitle');
@ -216,9 +226,11 @@ define([
var fa_viewusers = '<span class="fa fa-eye"></span>'; var fa_viewusers = '<span class="fa fa-eye"></span>';
var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer; var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor; var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor;
var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText); //var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers); //var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($span).append($spansmall); //$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($spansmall);
// Change username in useradmin dropdown // Change username in useradmin dropdown
if (config.displayed.indexOf('useradmin') !== -1) { if (config.displayed.indexOf('useradmin') !== -1) {
@ -269,6 +281,7 @@ define([
}; };
var $block = Cryptpad.createDropdown(dropdownConfig); var $block = Cryptpad.createDropdown(dropdownConfig);
$block.attr('id', 'userButtons'); $block.attr('id', 'userButtons');
toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
toolbar.$leftside.prepend($block); toolbar.$leftside.prepend($block);
return $block; return $block;
@ -282,7 +295,6 @@ define([
} }
Cryptpad.getRecentPads(function (err, recent) { Cryptpad.getRecentPads(function (err, recent) {
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'}); var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
var hashes = Cryptpad.getHashes(channel, secret); var hashes = Cryptpad.getHashes(channel, secret);
var options = []; var options = [];
@ -342,11 +354,11 @@ define([
}); });
} }
var dropdownConfigShare = { var dropdownConfigShare = {
text: $('<div>').append($shareIcon).append($span).html(), text: $('<div>').append($shareIcon).html(),
options: options options: options
}; };
var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare); var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
$shareBlock.find('button').attr('id', 'shareButton'); //$shareBlock.find('button').attr('id', 'shareButton');
$shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS); $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
if (hashes.editHash) { if (hashes.editHash) {
@ -401,6 +413,8 @@ define([
'class': TITLE_CLS 'class': TITLE_CLS
}).appendTo(toolbar.$top); }).appendTo(toolbar.$top);
var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
if (typeof config.title !== "object") { if (typeof config.title !== "object") {
console.error("config.title", config); console.error("config.title", config);
throw new Error("config.title is not an object"); throw new Error("config.title is not an object");
@ -412,7 +426,7 @@ define([
// Buttons // Buttons
var $text = $('<span>', { var $text = $('<span>', {
'class': 'title' 'class': 'title'
}).appendTo($titleContainer); }).appendTo($hoverable);
var $pencilIcon = $('<span>', { var $pencilIcon = $('<span>', {
'class': 'pencilIcon', 'class': 'pencilIcon',
'title': Messages.clickToEdit 'title': Messages.clickToEdit
@ -425,7 +439,7 @@ define([
var $input = $('<input>', { var $input = $('<input>', {
type: 'text', type: 'text',
placeholder: placeholder placeholder: placeholder
}).appendTo($titleContainer).hide(); }).appendTo($hoverable).hide();
if (config.readOnly !== 1) { if (config.readOnly !== 1) {
$text.attr("title", Messages.clickToEdit); $text.attr("title", Messages.clickToEdit);
$text.addClass("editable"); $text.addClass("editable");
@ -433,12 +447,12 @@ define([
'class': 'fa fa-pencil readonly', 'class': 'fa fa-pencil readonly',
style: 'font-family: FontAwesome;' style: 'font-family: FontAwesome;'
}); });
$pencilIcon.append($icon).appendTo($titleContainer); $pencilIcon.append($icon).appendTo($hoverable);
var $icon2 = $('<span>', { var $icon2 = $('<span>', {
'class': 'fa fa-check readonly', 'class': 'fa fa-check readonly',
style: 'font-family: FontAwesome;' style: 'font-family: FontAwesome;'
}); });
$saveIcon.append($icon2).appendTo($titleContainer); $saveIcon.append($icon2).appendTo($hoverable);
} }
// Events // Events
@ -454,15 +468,14 @@ define([
if (name === "") { if (name === "") {
name = $input.attr('placeholder'); name = $input.attr('placeholder');
} }
Cryptpad.renamePad(name, function (err, newtitle) { Cryptpad.renamePad(name, null, function (err, newtitle) {
if (err) { return; } if (err) { return console.error(err); }
$text.text(newtitle); $text.text(newtitle);
callback(null, newtitle); callback(null, newtitle);
$input.hide(); $input.hide();
$text.show(); $text.show();
$pencilIcon.show(); $pencilIcon.show();
$saveIcon.hide(); $saveIcon.hide();
//$pencilIcon.css('display', '');
}); });
}; };
$input.on('keyup', function (e) { $input.on('keyup', function (e) {
@ -498,20 +511,13 @@ define([
var $linkContainer = $('<span>', { var $linkContainer = $('<span>', {
'class': "cryptpad-link" 'class': "cryptpad-link"
}).appendTo(toolbar.$top); }).appendTo(toolbar.$top);
var $imgTag = $('<img>', {
src: "/customize/cryptofist_mini.png",
alt: "Cryptpad"
});
// We need to override the "a" tag action here because it is inside the iframe! // We need to override the "a" tag action here because it is inside the iframe!
var $aTagSmall = $('<a>', { var $aTag = $('<a>', {
href: "/", href: "/",
title: Messages.header_logoTitle, title: Messages.header_logoTitle,
'class': "cryptpad-logo" 'class': "cryptpad-logo fa fa-hdd-o"
}).append($imgTag); });
//var $span = $('<span>').text('CryptDrive');
var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
$aTagSmall.addClass('narrow');
var onClick = function (e) { var onClick = function (e) {
e.preventDefault(); e.preventDefault();
if (e.ctrlKey) { if (e.ctrlKey) {
@ -523,10 +529,9 @@ define([
var onContext = function (e) { e.stopPropagation(); }; var onContext = function (e) { e.stopPropagation(); };
$aTagBig.click(onClick).contextmenu(onContext); $aTag.click(onClick).contextmenu(onContext);
$aTagSmall.click(onClick).contextmenu(onContext);
$linkContainer.append($aTagSmall).append($aTagBig); $linkContainer.append($aTag);
return $linkContainer; return $linkContainer;
}; };
@ -539,9 +544,6 @@ define([
if(typeof getLag === "function") { if(typeof getLag === "function") {
lag = getLag(); lag = getLag();
} }
var lagLight = $('<div>', {
'class': 'lag'
});
var title; var title;
if (lag && toolbar.connected) { if (lag && toolbar.connected) {
$lag.attr('class', LAG_CLS); $lag.attr('class', LAG_CLS);
@ -566,9 +568,10 @@ define([
} }
else if (!toolbar.firstConnection) { else if (!toolbar.firstConnection) {
$lag.attr('class', LAG_CLS); $lag.attr('class', LAG_CLS);
// Display the red light at the 2nd failed attemp to get the lag $lag.addClass('dc');
lagLight.addClass('lag-red');
title = Messages.redLight; title = Messages.redLight;
} else {
$lag.addClass('lag4');
} }
if (title) { if (title) {
$lag.attr('title', title); $lag.attr('title', title);
@ -576,10 +579,12 @@ define([
}; };
var createLag = function (toolbar, config) { var createLag = function (toolbar, config) {
var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show(); var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show();
$('<span>', {'class': 'bar1'}).appendTo($a); var $container = $('<span>', {'class': 'bars'}).appendTo($a);
$('<span>', {'class': 'bar2'}).appendTo($a); $('<span>', {'class': 'bar1'}).appendTo($container);
$('<span>', {'class': 'bar3'}).appendTo($a); $('<span>', {'class': 'bar2'}).appendTo($container);
$('<span>', {'class': 'bar4'}).appendTo($a); $('<span>', {'class': 'bar3'}).appendTo($container);
$('<span>', {'class': 'bar4'}).appendTo($container);
$('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
if (config.realtime) { if (config.realtime) {
checkLag(toolbar, config, $a); checkLag(toolbar, config, $a);
setInterval(function () { setInterval(function () {
@ -664,7 +669,9 @@ define([
}; };
var createNewPad = function (toolbar) { var createNewPad = function (toolbar) {
var $newPad = toolbar.$userAdmin.find('.'+NEWPAD_CLS).show(); var $newPad = $('<span>', {
'class': "cryptpad-new dropdown-bar"
}).appendTo(toolbar.$top);
var pads_options = []; var pads_options = [];
Config.availablePadTypes.forEach(function (p) { Config.availablePadTypes.forEach(function (p) {
@ -680,18 +687,14 @@ define([
content: Messages.type[p] content: Messages.type[p]
}); });
}); });
var $plusIcon = $('<span>', {'class': 'fa fa-plus'});
var $newbig = $('<span>', {'class': 'big'}).append(' ' +Messages.newButton);
var $newButton = $('<div>').append($plusIcon).append($newbig);
var dropdownConfig = { var dropdownConfig = {
text: $newButton.html(), // Button initial text text: '', // Button initial text
options: pads_options, // Entries displayed in the menu options: pads_options, // Entries displayed in the menu
left: true, // Open to the left of the button,
container: $newPad container: $newPad
}; };
var $newPadBlock = Cryptpad.createDropdown(dropdownConfig); var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
$newPadBlock.find('button').attr('title', Messages.newButtonTitle); $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
$newPadBlock.find('button').attr('id', 'newdoc'); $newPadBlock.find('button').addClass('fa fa-plus');
return $newPadBlock; return $newPadBlock;
}; };
@ -901,6 +904,7 @@ define([
var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config); var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config);
toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside); toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside); toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
toolbar.$top = $toolbar.find('.'+Bar.constants.top); toolbar.$top = $toolbar.find('.'+Bar.constants.top);
toolbar.$history = $toolbar.find('.'+Bar.constants.history); toolbar.$history = $toolbar.find('.'+Bar.constants.history);

7
www/pad/main.js
Unescape Escape View File

@ -472,6 +472,7 @@ define([
Title.setToolbar(toolbar); Title.setToolbar(toolbar);
var $rightside = toolbar.$rightside; var $rightside = toolbar.$rightside;
var $drawer = toolbar.$drawer;
var editHash; var editHash;
@ -513,7 +514,7 @@ define([
$toolbar: $bar $toolbar: $bar
}; };
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig}); var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
$rightside.append($hist); $drawer.append($hist);
/* save as template */ /* save as template */
if (!Cryptpad.isTemplate(window.location.href)) { if (!Cryptpad.isTemplate(window.location.href)) {
@ -528,12 +529,12 @@ define([
/* add an export button */ /* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportFile); var $export = Cryptpad.createButton('export', true, {}, exportFile);
$rightside.append($export); $drawer.append($export);
if (!readOnly) { if (!readOnly) {
/* add an import button */ /* add an import button */
var $import = Cryptpad.createButton('import', true, {}, importFile); var $import = Cryptpad.createButton('import', true, {}, importFile);
$rightside.append($import); $drawer.append($import);
} }
/* add a forget button */ /* add a forget button */

Write Preview
Loading…
Cancel
Save