New toolbar
yflory
parent
503e9de07c
commit
8d956c3de6
|
|
@ -8,7 +8,8 @@ CKEDITOR.editorConfig = function( config ) {
|
|||
config.removeButtons= 'Source,Maximize';
|
||||
// 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
|
||||
config.removePlugins= 'resize';
|
||||
config.removePlugins= 'resize,elementspath';
|
||||
config.resize_enabled= false; //bottom-bar
|
||||
config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify';
|
||||
config.toolbarGroups= [
|
||||
// {"name":"clipboard","groups":["clipboard","undo"]},
|
||||
|
|
|
|||
|
|
@ -435,7 +435,7 @@
|
|||
display: block;
|
||||
}
|
||||
.dropdown-bar .dropdown-bar-content a {
|
||||
color: black !important;
|
||||
color: black;
|
||||
padding: 5px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
|
@ -449,11 +449,11 @@
|
|||
}
|
||||
.dropdown-bar .dropdown-bar-content a:hover {
|
||||
background-color: #f1f1f1;
|
||||
color: black !important;
|
||||
color: black;
|
||||
}
|
||||
.dropdown-bar .dropdown-bar-content a.active {
|
||||
background-color: #e8e8e8;
|
||||
color: black !important;
|
||||
color: black;
|
||||
}
|
||||
.dropdown-bar .dropdown-bar-content hr {
|
||||
margin: 5px 0px;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: black !important;
|
||||
color: black;
|
||||
padding: 5px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
|
@ -56,12 +56,12 @@
|
|||
|
||||
&:hover {
|
||||
background-color: #f1f1f1;
|
||||
color: black !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e8e8e8;
|
||||
color: black !important;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,72 +32,157 @@
|
|||
|
||||
//background-color: #BBBBFF;
|
||||
background-color: @toolbar-default-bg;
|
||||
color: @toolbar-default-color;
|
||||
color: @toolbar-default-color;/*
|
||||
&.pad {
|
||||
@color: @toolbar-pad-bg;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
border-bottom: 2px solid @color;
|
||||
@bgcolor: @toolbar-pad-bg;
|
||||
@color: @toolbar-pad-color;
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
}
|
||||
&.code {
|
||||
@color: @toolbar-code-bg;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
border-bottom: 2px solid @color;
|
||||
@bgcolor: @toolbar-code-bg;
|
||||
@color: @toolbar-code-color;
|
||||
background-color: @bgcolor;
|
||||
color: @color;
|
||||
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
|
||||
lighten($bgcolor, 15%);
|
||||
}
|
||||
}
|
||||
&.slide {
|
||||
@color: @toolbar-slide-bg;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
@bgcolor: @toolbar-slide-bg;
|
||||
@color: @toolbar-slide-color;
|
||||
background-color: @toolbar-default-bg 150px);
|
||||
border-bottom: 2px solid @color;
|
||||
}
|
||||
&.poll {
|
||||
@color: @toolbar-poll-bg;
|
||||
@bgcolor: @toolbar-poll-bg;
|
||||
@color: @toolbar-poll-color;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
border-bottom: 2px solid @color;
|
||||
}
|
||||
&.whiteboard {
|
||||
@color: @toolbar-whiteboard-bg;
|
||||
@bgcolor: @toolbar-whiteboard-bg;
|
||||
@color: @toolbar-whiteboard-color;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
border-bottom: 2px solid @color;
|
||||
}
|
||||
&.drive {
|
||||
@color: @toolbar-drive-bg;
|
||||
@bgcolor: @toolbar-drive-bg;
|
||||
@color: @toolbar-drive-color;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
border-bottom: 2px solid @color;
|
||||
}
|
||||
&.file {
|
||||
@color: @toolbar-file-bg;
|
||||
@bgcolor: @toolbar-file-bg;
|
||||
@color: @toolbar-file-color;
|
||||
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
|
||||
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 {
|
||||
background-color: @toolbar-pad-bg;
|
||||
color: @toolbar-pad-color;
|
||||
@bgcolor: @toolbar-pad-bg;
|
||||
@color: @toolbar-pad-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.code {
|
||||
background-color: @toolbar-code-bg;
|
||||
color: @toolbar-code-color;
|
||||
@bgcolor: @toolbar-code-bg;
|
||||
@color: @toolbar-code-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.slide {
|
||||
background-color: @toolbar-slide-bg;
|
||||
color: @toolbar-slide-color;
|
||||
@bgcolor: @toolbar-slide-bg;
|
||||
@color: @toolbar-slide-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.poll {
|
||||
background-color: @toolbar-poll-bg;
|
||||
color: @toolbar-poll-color;
|
||||
@bgcolor: @toolbar-poll-bg;
|
||||
@color: @toolbar-poll-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.whiteboard {
|
||||
background-color: @toolbar-whiteboard-bg;
|
||||
color: @toolbar-whiteboard-color;
|
||||
@bgcolor: @toolbar-whiteboard-bg;
|
||||
@color: @toolbar-whiteboard-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.drive {
|
||||
background-color: @toolbar-drive-bg;
|
||||
color: @toolbar-drive-color;
|
||||
@bgcolor: @toolbar-drive-bg;
|
||||
@color: @toolbar-drive-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.file {
|
||||
background-color: @toolbar-file-bg;
|
||||
color: @toolbar-file-color;
|
||||
@bgcolor: @toolbar-file-bg;
|
||||
@color: @toolbar-file-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
*/
|
||||
|
||||
.fa {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-family: FontAwesome;
|
||||
|
|
@ -121,10 +206,25 @@
|
|||
height: 100%;
|
||||
border-radius: 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 {
|
||||
.unselectable();
|
||||
&#shareButton, &.buttonSuccess {
|
||||
// Bootstrap 4 colors
|
||||
color: #fff;
|
||||
|
|
@ -162,21 +262,24 @@
|
|||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Bootstrap 4 colors (btn-secondary)
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #ccc;
|
||||
color: inherit;
|
||||
font: @toolbar-button-font;
|
||||
* {
|
||||
color: #000;
|
||||
color: inherit;
|
||||
font: @toolbar-button-font;
|
||||
}
|
||||
}
|
||||
.cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
|
||||
//background-color: #fff;
|
||||
//border-color: #ccc;
|
||||
background: transparent;
|
||||
&:hover {
|
||||
color: #292b2c;
|
||||
background-color: #e6e6e6;
|
||||
//color: #292b2c;
|
||||
background-color: rgba(50,50,50,0.3);
|
||||
//background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
}
|
||||
|
|
@ -204,68 +307,95 @@
|
|||
}
|
||||
|
||||
.clag () {
|
||||
background: transparent;
|
||||
background: transparent
|
||||
}
|
||||
|
||||
.cryptpad-state {
|
||||
line-height: @toolbar-top-height;
|
||||
}
|
||||
.cryptpad-lag {
|
||||
height: 20px;
|
||||
width: 23px;
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
margin: 3px;
|
||||
vertical-align: top;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
span {
|
||||
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;
|
||||
width: 4px;
|
||||
margin: 0;
|
||||
margin-right: 1px;
|
||||
background: black;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
transition: background 1s, border 1s;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
margin: 0;
|
||||
margin-right: 1px;
|
||||
background: white;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
visibility: hidden;
|
||||
transition: background 1s, border 1s;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.bar1 { height: 6px; }
|
||||
&.bar2 { height: 12px; }
|
||||
&.bar3 { height: 18px; }
|
||||
&.bar4 { height: 24px; }
|
||||
}
|
||||
}
|
||||
&.dc {
|
||||
.disconnected {
|
||||
display: inline;
|
||||
}
|
||||
.bars {
|
||||
display: none
|
||||
}
|
||||
&.bar1 { height: 5px; }
|
||||
&.bar2 { height: 10px; }
|
||||
&.bar3 { height: 15px; }
|
||||
&.bar4 { height: 20px; }
|
||||
}
|
||||
&.lag0 {
|
||||
span {
|
||||
span span {
|
||||
.clag();
|
||||
border-color: red;
|
||||
//border-color: red;
|
||||
}
|
||||
}
|
||||
&.lag1 {
|
||||
.bar2, .bar3, .bar4 { .clag(); }
|
||||
span {
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
span span {
|
||||
visibility: visible;
|
||||
//background-color: orange;
|
||||
//border-color: orange;
|
||||
}
|
||||
}
|
||||
&.lag2 {
|
||||
.bar3, .bar4 { .clag(); }
|
||||
span {
|
||||
background-color: orange;
|
||||
border-color: orange;
|
||||
span span {
|
||||
visibility: visible;
|
||||
//background-color: orange;
|
||||
//border-color: orange;
|
||||
}
|
||||
}
|
||||
&.lag3 {
|
||||
.bar4 { .clag(); }
|
||||
span {
|
||||
background-color: @toolbar-green;
|
||||
border-color: @toolbar-green;
|
||||
span span {
|
||||
visibility: visible;
|
||||
//background-color: @toolbar-green;
|
||||
//border-color: @toolbar-green;
|
||||
}
|
||||
}
|
||||
&.lag4 {
|
||||
span {
|
||||
background-color: @toolbar-green;
|
||||
border-color: @toolbar-green;
|
||||
span span {
|
||||
visibility: visible;
|
||||
//background-color: @toolbar-green;
|
||||
//border-color: @toolbar-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -287,15 +417,6 @@
|
|||
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 {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
|
@ -381,7 +502,8 @@
|
|||
}
|
||||
|
||||
.cryptpad-toolbar:not(.notitle) {
|
||||
.cryptpad-toolbar-top {
|
||||
// TODO
|
||||
/*.cryptpad-toolbar-top {
|
||||
@media screen and (max-width: @media-medium-screen) {
|
||||
height: 67px;
|
||||
}
|
||||
|
|
@ -393,116 +515,174 @@
|
|||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.cryptpad-toolbar-top {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: @toolbar-top-height;
|
||||
position: relative;
|
||||
.cryptpad-title {
|
||||
order: 3;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
line-height: @toolbar-top-height;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
.title, .pencilIcon, .saveIcon {
|
||||
font-size: 1.5em;
|
||||
font-size: 25px;
|
||||
vertical-align: middle;
|
||||
line-height: 32px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.pencilIcon {
|
||||
margin-left: 11px;
|
||||
&:hover {
|
||||
color: #999;
|
||||
margin-left: 0px;
|
||||
}
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
span {
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.saveIcon {
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
background: white;
|
||||
padding: 5px;
|
||||
display: inline;
|
||||
margin-left: -1px;
|
||||
border-collapse: collapse;
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
span {
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:not(input):hover {
|
||||
.editable {
|
||||
border: 1px solid #888;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
background: white;
|
||||
padding: 5px;
|
||||
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;
|
||||
}
|
||||
.editable {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
input {
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
background: #fff;
|
||||
cursor: auto;
|
||||
width: 300px;
|
||||
font-size: 25px;
|
||||
padding: 5px 5px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.cryptpad-link, .cryptpad-new {
|
||||
font-size: 48px;
|
||||
line-height: 64px;
|
||||
width: @toolbar-top-height;
|
||||
height: @toolbar-top-height;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
|
||||
color: white;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.cryptpad-new {
|
||||
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;
|
||||
height: auto;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
&::before {
|
||||
padding-top: 4px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: initial;
|
||||
border-color: transparent;
|
||||
}
|
||||
span {
|
||||
vertical-align: top;
|
||||
font-size: 1em;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.dropdown-bar-content {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.cryptpad-link {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
height: 32px;
|
||||
background: @toolbar-drive-bg;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
height: 32px;
|
||||
font-size: 1em;
|
||||
height: auto;
|
||||
padding: 0px 5px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span {
|
||||
font-size: 1.5em;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cryptpad-user {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
:not(.cryptpad-lag) span {
|
||||
display: inline-block;
|
||||
order: 4;
|
||||
line-height: @toolbar-top-height;
|
||||
&> * {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
button {
|
||||
span.fa {
|
||||
vertical-align: baseline;
|
||||
.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 {
|
||||
display: flex;
|
||||
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;
|
||||
border-radius: 0;
|
||||
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 {
|
||||
|
|
@ -567,13 +768,16 @@
|
|||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.cryptpad-spinner > span {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 8px;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
.cryptpad-spinner {
|
||||
line-height: @toolbar-top-height;
|
||||
&> span {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 8px;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.cryptpad-readonly {
|
||||
margin-right: 5px;
|
||||
|
|
@ -582,7 +786,6 @@
|
|||
}
|
||||
.cryptpad-user {
|
||||
p.accountData {
|
||||
background: #f0f0f0;
|
||||
&> span {
|
||||
font-weight: bold;
|
||||
span {
|
||||
|
|
@ -590,14 +793,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.buttonTitle {
|
||||
.fa:not(.fa-caret-down) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.account-name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cryptpad-dropdown-share {
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -99,6 +99,8 @@
|
|||
@topbar-button-color: #fff;
|
||||
@topbar-height: 50px;
|
||||
|
||||
@toolbar-top-height: 64px;
|
||||
|
||||
@main-border-width: 15vw;
|
||||
@cp-darkblue: #3333ff;
|
||||
@cp-accent2: darken(@cp-darkblue, 20%);
|
||||
|
|
@ -108,3 +110,12 @@
|
|||
@main-bg: url('/customize/bg3.jpg') no-repeat center center;
|
||||
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -74,7 +74,7 @@ define(function () {
|
|||
|
||||
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.redLight = "Vous êtes déconnecté de la session";
|
||||
|
||||
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>" +
|
||||
|
|
|
|||
|
|
@ -100,6 +100,8 @@ Version 1
|
|||
|
||||
var ret = {};
|
||||
|
||||
if (typeof href !== "string") { console.error(href); }
|
||||
|
||||
if (!href) { return ret; }
|
||||
if (href.slice(-1) !== '/') { href += '/'; }
|
||||
|
||||
|
|
|
|||
|
|
@ -530,7 +530,7 @@ define([
|
|||
};
|
||||
|
||||
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);
|
||||
if (!parsed.hash) { return; }
|
||||
href = getRelativeHref(href);
|
||||
|
|
@ -924,6 +924,7 @@ define([
|
|||
common.createButton = function (type, rightside, data, callback) {
|
||||
var button;
|
||||
var size = "17px";
|
||||
console.log(type);
|
||||
switch (type) {
|
||||
case 'export':
|
||||
button = $('<button>', {
|
||||
|
|
@ -1096,6 +1097,13 @@ define([
|
|||
});
|
||||
}
|
||||
break;
|
||||
case 'more':
|
||||
button = $('<button>', {
|
||||
title: Messages.moreActions || 'TODO',
|
||||
'class': "fa fa-ellipsis-h",
|
||||
style: 'font:'+size+' FontAwesome'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
button = $('<button>', {
|
||||
'class': "fa fa-question",
|
||||
|
|
@ -1143,9 +1151,9 @@ define([
|
|||
var $button = $('<button>', {
|
||||
'class': ''
|
||||
}).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
|
||||
$('<span>', {
|
||||
/*$('<span>', {
|
||||
'class': 'fa fa-caret-down',
|
||||
}).appendTo($button);
|
||||
}).appendTo($button);*/
|
||||
|
||||
// Menu
|
||||
var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'});
|
||||
|
|
@ -1186,7 +1194,7 @@ define([
|
|||
}
|
||||
};
|
||||
|
||||
$button.click(function (e) {
|
||||
$container.click(function (e) {
|
||||
e.stopPropagation();
|
||||
var state = $innerblock.is(':visible');
|
||||
$('.dropdown-bar-content').hide();
|
||||
|
|
@ -1365,15 +1373,19 @@ define([
|
|||
content: Messages.login_register
|
||||
});
|
||||
}
|
||||
var $icon = $('<span>', {'class': 'fa fa-user'});
|
||||
var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
|
||||
var $userButton = $('<div>').append($icon).append($userbig);
|
||||
if (account && config.displayNameCls) {
|
||||
var $icon = $('<span>', {'class': 'fa fa-user-secret'});
|
||||
//var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
|
||||
var $userButton = $('<div>').append($icon);//.append($userbig);
|
||||
if (account) {
|
||||
|
||||
$userButton = $('<div>').append(accountName.slice(0,1).toUpperCase());
|
||||
}
|
||||
/*if (account && config.displayNameCls) {
|
||||
$userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
|
||||
} else if (account) {
|
||||
// If no display name, do not display the parentheses
|
||||
$userbig.append($('<span>', {'class': 'account-name'}).text(accountName));
|
||||
}
|
||||
}*/
|
||||
var dropdownConfigUser = {
|
||||
text: $userButton.html(), // Button initial text
|
||||
options: options, // Entries displayed in the menu
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ define([
|
|||
var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top';
|
||||
var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
|
||||
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';
|
||||
|
||||
// Userlist
|
||||
|
|
@ -81,7 +82,7 @@ define([
|
|||
$('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
|
||||
$('<span>', {'class': LAG_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);
|
||||
|
||||
$toolbar.append($topContainer)
|
||||
|
|
@ -89,6 +90,15 @@ define([
|
|||
.append($('<div>', {'class': RIGHTSIDE_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
|
||||
if (!config.title || typeof config.title !== "object") {
|
||||
$toolbar.addClass('notitle');
|
||||
|
|
@ -216,9 +226,11 @@ define([
|
|||
var fa_viewusers = '<span class="fa fa-eye"></span>';
|
||||
var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
|
||||
var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor;
|
||||
var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + ' ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
|
||||
var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + fa_viewusers + ' ' + numberOfViewUsers);
|
||||
$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
|
||||
//var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + ' ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
|
||||
//var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + fa_viewusers + ' ' + numberOfViewUsers);
|
||||
//$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
|
||||
var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + ' ' + fa_viewusers + ' ' + numberOfViewUsers);
|
||||
$userButtons.find('.buttonTitle').html('').append($spansmall);
|
||||
|
||||
// Change username in useradmin dropdown
|
||||
if (config.displayed.indexOf('useradmin') !== -1) {
|
||||
|
|
@ -269,6 +281,7 @@ define([
|
|||
};
|
||||
var $block = Cryptpad.createDropdown(dropdownConfig);
|
||||
$block.attr('id', 'userButtons');
|
||||
toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
|
||||
toolbar.$leftside.prepend($block);
|
||||
|
||||
return $block;
|
||||
|
|
@ -282,7 +295,6 @@ define([
|
|||
}
|
||||
Cryptpad.getRecentPads(function (err, recent) {
|
||||
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
|
||||
var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
|
||||
var hashes = Cryptpad.getHashes(channel, secret);
|
||||
var options = [];
|
||||
|
||||
|
|
@ -342,11 +354,11 @@ define([
|
|||
});
|
||||
}
|
||||
var dropdownConfigShare = {
|
||||
text: $('<div>').append($shareIcon).append($span).html(),
|
||||
text: $('<div>').append($shareIcon).html(),
|
||||
options: options
|
||||
};
|
||||
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);
|
||||
|
||||
if (hashes.editHash) {
|
||||
|
|
@ -401,6 +413,8 @@ define([
|
|||
'class': TITLE_CLS
|
||||
}).appendTo(toolbar.$top);
|
||||
|
||||
var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
|
||||
|
||||
if (typeof config.title !== "object") {
|
||||
console.error("config.title", config);
|
||||
throw new Error("config.title is not an object");
|
||||
|
|
@ -412,7 +426,7 @@ define([
|
|||
// Buttons
|
||||
var $text = $('<span>', {
|
||||
'class': 'title'
|
||||
}).appendTo($titleContainer);
|
||||
}).appendTo($hoverable);
|
||||
var $pencilIcon = $('<span>', {
|
||||
'class': 'pencilIcon',
|
||||
'title': Messages.clickToEdit
|
||||
|
|
@ -425,7 +439,7 @@ define([
|
|||
var $input = $('<input>', {
|
||||
type: 'text',
|
||||
placeholder: placeholder
|
||||
}).appendTo($titleContainer).hide();
|
||||
}).appendTo($hoverable).hide();
|
||||
if (config.readOnly !== 1) {
|
||||
$text.attr("title", Messages.clickToEdit);
|
||||
$text.addClass("editable");
|
||||
|
|
@ -433,12 +447,12 @@ define([
|
|||
'class': 'fa fa-pencil readonly',
|
||||
style: 'font-family: FontAwesome;'
|
||||
});
|
||||
$pencilIcon.append($icon).appendTo($titleContainer);
|
||||
$pencilIcon.append($icon).appendTo($hoverable);
|
||||
var $icon2 = $('<span>', {
|
||||
'class': 'fa fa-check readonly',
|
||||
style: 'font-family: FontAwesome;'
|
||||
});
|
||||
$saveIcon.append($icon2).appendTo($titleContainer);
|
||||
$saveIcon.append($icon2).appendTo($hoverable);
|
||||
}
|
||||
|
||||
// Events
|
||||
|
|
@ -454,15 +468,14 @@ define([
|
|||
if (name === "") {
|
||||
name = $input.attr('placeholder');
|
||||
}
|
||||
Cryptpad.renamePad(name, function (err, newtitle) {
|
||||
if (err) { return; }
|
||||
Cryptpad.renamePad(name, null, function (err, newtitle) {
|
||||
if (err) { return console.error(err); }
|
||||
$text.text(newtitle);
|
||||
callback(null, newtitle);
|
||||
$input.hide();
|
||||
$text.show();
|
||||
$pencilIcon.show();
|
||||
$saveIcon.hide();
|
||||
//$pencilIcon.css('display', '');
|
||||
});
|
||||
};
|
||||
$input.on('keyup', function (e) {
|
||||
|
|
@ -498,20 +511,13 @@ define([
|
|||
var $linkContainer = $('<span>', {
|
||||
'class': "cryptpad-link"
|
||||
}).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!
|
||||
var $aTagSmall = $('<a>', {
|
||||
var $aTag = $('<a>', {
|
||||
href: "/",
|
||||
title: Messages.header_logoTitle,
|
||||
'class': "cryptpad-logo"
|
||||
}).append($imgTag);
|
||||
//var $span = $('<span>').text('CryptDrive');
|
||||
var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
|
||||
$aTagSmall.addClass('narrow');
|
||||
'class': "cryptpad-logo fa fa-hdd-o"
|
||||
});
|
||||
var onClick = function (e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey) {
|
||||
|
|
@ -523,10 +529,9 @@ define([
|
|||
|
||||
var onContext = function (e) { e.stopPropagation(); };
|
||||
|
||||
$aTagBig.click(onClick).contextmenu(onContext);
|
||||
$aTagSmall.click(onClick).contextmenu(onContext);
|
||||
$aTag.click(onClick).contextmenu(onContext);
|
||||
|
||||
$linkContainer.append($aTagSmall).append($aTagBig);
|
||||
$linkContainer.append($aTag);
|
||||
|
||||
return $linkContainer;
|
||||
};
|
||||
|
|
@ -539,9 +544,6 @@ define([
|
|||
if(typeof getLag === "function") {
|
||||
lag = getLag();
|
||||
}
|
||||
var lagLight = $('<div>', {
|
||||
'class': 'lag'
|
||||
});
|
||||
var title;
|
||||
if (lag && toolbar.connected) {
|
||||
$lag.attr('class', LAG_CLS);
|
||||
|
|
@ -566,9 +568,10 @@ define([
|
|||
}
|
||||
else if (!toolbar.firstConnection) {
|
||||
$lag.attr('class', LAG_CLS);
|
||||
// Display the red light at the 2nd failed attemp to get the lag
|
||||
lagLight.addClass('lag-red');
|
||||
$lag.addClass('dc');
|
||||
title = Messages.redLight;
|
||||
} else {
|
||||
$lag.addClass('lag4');
|
||||
}
|
||||
if (title) {
|
||||
$lag.attr('title', title);
|
||||
|
|
@ -576,10 +579,12 @@ define([
|
|||
};
|
||||
var createLag = function (toolbar, config) {
|
||||
var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show();
|
||||
$('<span>', {'class': 'bar1'}).appendTo($a);
|
||||
$('<span>', {'class': 'bar2'}).appendTo($a);
|
||||
$('<span>', {'class': 'bar3'}).appendTo($a);
|
||||
$('<span>', {'class': 'bar4'}).appendTo($a);
|
||||
var $container = $('<span>', {'class': 'bars'}).appendTo($a);
|
||||
$('<span>', {'class': 'bar1'}).appendTo($container);
|
||||
$('<span>', {'class': 'bar2'}).appendTo($container);
|
||||
$('<span>', {'class': 'bar3'}).appendTo($container);
|
||||
$('<span>', {'class': 'bar4'}).appendTo($container);
|
||||
$('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
|
||||
if (config.realtime) {
|
||||
checkLag(toolbar, config, $a);
|
||||
setInterval(function () {
|
||||
|
|
@ -664,7 +669,9 @@ define([
|
|||
};
|
||||
|
||||
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 = [];
|
||||
Config.availablePadTypes.forEach(function (p) {
|
||||
|
|
@ -680,18 +687,14 @@ define([
|
|||
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 = {
|
||||
text: $newButton.html(), // Button initial text
|
||||
text: '', // Button initial text
|
||||
options: pads_options, // Entries displayed in the menu
|
||||
left: true, // Open to the left of the button,
|
||||
container: $newPad
|
||||
};
|
||||
var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
|
||||
$newPadBlock.find('button').attr('title', Messages.newButtonTitle);
|
||||
$newPadBlock.find('button').attr('id', 'newdoc');
|
||||
$newPadBlock.find('button').addClass('fa fa-plus');
|
||||
return $newPadBlock;
|
||||
};
|
||||
|
||||
|
|
@ -901,6 +904,7 @@ define([
|
|||
var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config);
|
||||
toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
|
||||
toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
|
||||
toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
|
||||
toolbar.$top = $toolbar.find('.'+Bar.constants.top);
|
||||
toolbar.$history = $toolbar.find('.'+Bar.constants.history);
|
||||
|
||||
|
|
|
|||
|
|
@ -472,6 +472,7 @@ define([
|
|||
Title.setToolbar(toolbar);
|
||||
|
||||
var $rightside = toolbar.$rightside;
|
||||
var $drawer = toolbar.$drawer;
|
||||
|
||||
var editHash;
|
||||
|
||||
|
|
@ -513,7 +514,7 @@ define([
|
|||
$toolbar: $bar
|
||||
};
|
||||
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
|
||||
$rightside.append($hist);
|
||||
$drawer.append($hist);
|
||||
|
||||
/* save as template */
|
||||
if (!Cryptpad.isTemplate(window.location.href)) {
|
||||
|
|
@ -528,12 +529,12 @@ define([
|
|||
|
||||
/* add an export button */
|
||||
var $export = Cryptpad.createButton('export', true, {}, exportFile);
|
||||
$rightside.append($export);
|
||||
$drawer.append($export);
|
||||
|
||||
if (!readOnly) {
|
||||
/* add an import button */
|
||||
var $import = Cryptpad.createButton('import', true, {}, importFile);
|
||||
$rightside.append($import);
|
||||
$drawer.append($import);
|
||||
}
|
||||
|
||||
/* add a forget button */
|
||||
|
|
|
|||
Loading…
Reference in New Issue