mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-02-08 03:02:03 +01:00
css: refactor element positioning
No more javascript to change css properties Remove a number of useless tables Try to stop positioning elements with absolute, but use flex-boxes instead Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward) Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example) Remove two columns in the popups, just use one column Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically
This commit is contained in:
Sebastian Castro
muxator
parent
0603bf8097
commit
5fd6aeeea6
20 changed files with 839 additions and 1224 deletions
|
|
@ -1,46 +1,61 @@
|
||||||
/* These CSS rules are included in both the outer and inner ACE iframe.
|
/*
|
||||||
Also see inner.css, included only in the inner one.
|
These CSS rules are included in both the outer and inner ACE iframe (pad editor)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import url('./lists_and_indents.css');
|
@import url('./lists_and_indents.css');
|
||||||
|
|
||||||
|
html.inner-editor {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
#outerdocbody {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
min-height: 100vh; /* take at least full height */
|
||||||
|
}
|
||||||
|
#outerdocbody iframe {
|
||||||
|
flex: 1 auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#outerdocbody #sidediv {
|
||||||
|
order: -1; /* display it on the first row positionning, i.e. on the left */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ACE-PAD Container (i.e. where the text is displayed) */
|
||||||
|
#innerdocbody {
|
||||||
|
padding: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#innerdocbody, #sidediv {
|
||||||
|
padding-top: 10px; /* Both must have same top padding, so line number are aligned with the rows */
|
||||||
|
padding-bottom: 10px; /* some space when we scroll to the bottom */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------- */
|
||||||
|
/* -- BROWSER SUPPORT -- */
|
||||||
|
/* --------------------- */
|
||||||
|
|
||||||
|
body.mozilla, body.safari {
|
||||||
|
display: table-cell; /* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */
|
||||||
|
}
|
||||||
|
.safari div {
|
||||||
|
padding-right: 1px; /* prevents the caret from disappearing on the longest line of the doc */
|
||||||
|
}
|
||||||
html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */
|
html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */
|
||||||
span { cursor: auto; }
|
span { cursor: auto; }
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: #acf;
|
|
||||||
}
|
|
||||||
::-moz-selection {
|
|
||||||
background: #acf;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
/* -------------- */
|
||||||
cursor: pointer !important;
|
/* -- WRAPPING -- */
|
||||||
white-space:pre-wrap;
|
/* -------------- */
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
#outerdocbody {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
body.grayedout { background-color: #eee !important }
|
|
||||||
|
|
||||||
#innerdocbody {
|
|
||||||
font-size: 12px; /* overridden by body.style */
|
|
||||||
font-family:Arial, sans-serif; /* overridden by body.style */
|
|
||||||
line-height: 16px; /* overridden by body.style */
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.doesWrap {
|
body.doesWrap {
|
||||||
|
display: block !important;
|
||||||
/* white-space: pre-wrap; */
|
/* white-space: pre-wrap; */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Must be pre-wrap to keep trailing spaces. Otherwise you get a zombie caret,
|
Must be pre-wrap to keep trailing spaces. Otherwise you get a zombie caret,
|
||||||
walking around your screen (see #1766).
|
walking around your screen (see #1766).
|
||||||
|
|
@ -53,81 +68,37 @@ body.doesWrap {
|
||||||
*/
|
*/
|
||||||
word-wrap: break-word; /* fix for issue #1648 - firefox not wrapping long lines (without spaces) correctly */
|
word-wrap: break-word; /* fix for issue #1648 - firefox not wrapping long lines (without spaces) correctly */
|
||||||
}
|
}
|
||||||
|
|
||||||
.noprewrap{
|
.noprewrap{
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
body.doesWrap:not(.noprewrap) > div {
|
||||||
body.doesWrap:not(.noprewrap) > div{
|
|
||||||
/* Related to #1766 */
|
/* Related to #1766 */
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#innerdocbody {
|
|
||||||
padding-top: 1px; /* important for some reason? */
|
/* ------------------------------------------ */
|
||||||
padding-right: 10px;
|
/* -- SIDEDIV (line number, text author..) -- */
|
||||||
padding-bottom: 8px;
|
/* ------------------------------------------ */
|
||||||
padding-left: 1px /* prevents characters from looking chopped off in FF3 -- Removed because it added too much whitespace */;
|
|
||||||
overflow: hidden;
|
|
||||||
/* blank 1x1 gif, so that IE8 doesn't consider the body transparent */
|
|
||||||
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidediv {
|
#sidediv {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
line-height: 16px; /* overridden by sideDiv.style */
|
padding-right: 5px;
|
||||||
padding-top: 8px; /* EDIT_BODY_PADDING_TOP */
|
padding-left: 5px;
|
||||||
padding-right: 3px; /* LINE_NUMBER_PADDING_RIGHT - 1 */
|
background-color: #eee;
|
||||||
position: absolute;
|
border-right: 1px solid #ccc;
|
||||||
width: 20px; /* MIN_LINEDIV_WIDTH */
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
cursor: default;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidedivinner {
|
#sidedivinner {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
opacity: .7;
|
||||||
}
|
}
|
||||||
|
#sidediv:not(.sidedivdelayed) { /* before sidediv get initialized, hide text */
|
||||||
.sidedivdelayed { /* class set after sizes are set */
|
color: transparent;
|
||||||
background-color: #eee;
|
|
||||||
color: #888 !important;
|
|
||||||
border-right: 1px solid #ccc;
|
|
||||||
}
|
}
|
||||||
.sidedivhidden {
|
.sidedivhidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#outerdocbody iframe {
|
|
||||||
display: block; /* codemirror says it suppresses bugs */
|
|
||||||
position: relative;
|
|
||||||
left: 32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */
|
|
||||||
top: 7px; /* EDIT_BODY_PADDING_TOP - 1*/
|
|
||||||
border: 0;
|
|
||||||
width: 1px; /* changed programmatically */
|
|
||||||
height: 1px; /* changed programmatically */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */
|
|
||||||
body.mozilla, body.safari {
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.doesWrap {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.safari div {
|
|
||||||
/* prevents the caret from disappearing on the longest line of the doc */
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#linemetricsdiv {
|
#linemetricsdiv {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -1000px;
|
left: -1000px;
|
||||||
|
|
@ -137,11 +108,34 @@ p {
|
||||||
font-size: 12px; /* overridden by lineMetricsDiv.style */
|
font-size: 12px; /* overridden by lineMetricsDiv.style */
|
||||||
font-family: monospace; /* overridden by lineMetricsDiv.style */
|
font-family: monospace; /* overridden by lineMetricsDiv.style */
|
||||||
}
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
/* Stops super long lines without being spaces such as aaaaaaaaaaaaaa*100 breaking the editor
|
#sidediv {
|
||||||
Commented out because it stops IE from being able to render the document, crazy IE bug is crazy. */
|
/* Do not use display: none to hide the sidediv, otherwise the parent container does not
|
||||||
/*
|
get its height properly calculated by flexboxes */
|
||||||
.ace-line{
|
visibility: hidden;
|
||||||
overflow:hidden;
|
width: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------- */
|
||||||
|
/* -- OTHER -- */
|
||||||
|
/* ----------- */
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #acf;
|
||||||
|
}
|
||||||
|
::-moz-selection {
|
||||||
|
background: #acf;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
cursor: pointer !important;
|
||||||
|
white-space:pre-wrap;
|
||||||
|
}
|
||||||
|
body.grayedout {
|
||||||
|
background-color: #eee !important
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
|
||||||
|
|
@ -10,22 +10,22 @@
|
||||||
@import url("pad/gritter.css");
|
@import url("pad/gritter.css");
|
||||||
@import url("pad/loadingbox.css");
|
@import url("pad/loadingbox.css");
|
||||||
|
|
||||||
*,
|
html {
|
||||||
html,
|
font-size: 13px;
|
||||||
body,
|
font-family: Arial, sans-serif;
|
||||||
p {
|
line-height: 16px;
|
||||||
|
background-color: white;
|
||||||
|
color: #3e3e3e;
|
||||||
|
}
|
||||||
|
*, p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0px;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.clear {
|
.clear {
|
||||||
clear: both
|
clear: both
|
||||||
}
|
}
|
||||||
body,
|
a {
|
||||||
textarea {
|
color: inherit;
|
||||||
font-family: Helvetica, Arial, sans-serif
|
|
||||||
}
|
|
||||||
.readonly .acl-write {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
a img {
|
a img {
|
||||||
border: 0
|
border: 0
|
||||||
|
|
@ -34,20 +34,10 @@ a img {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttontext:focus{
|
.buttontext:focus{
|
||||||
/* Not sure why important is required here but it is */
|
/* Not sure why important is required here but it is */
|
||||||
border: 1px solid #666 !important;
|
border: 1px solid #666 !important;
|
||||||
}
|
}
|
||||||
.time {
|
|
||||||
float: right;
|
|
||||||
color: #333;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 10px;
|
|
||||||
margin-left: 3px;
|
|
||||||
margin-right: 3px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
.rtl {
|
.rtl {
|
||||||
direction: RTL
|
direction: RTL
|
||||||
}
|
}
|
||||||
|
|
@ -56,29 +46,9 @@ a img {
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
vertical-align: -1px
|
vertical-align: -1px
|
||||||
}
|
}
|
||||||
|
input {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
.right {
|
.right {
|
||||||
float: right
|
float: right
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.row + .row {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
.column {
|
|
||||||
float: left;
|
|
||||||
width:50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#passwordRequired, #permissionDenied, #wrongPassword, #noCookie {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hideControlsEditor{
|
|
||||||
top:0px !important;
|
|
||||||
}
|
|
||||||
.hideControlsEditbar{
|
|
||||||
display:none !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +1,113 @@
|
||||||
#chatbox {
|
#chaticon, #chatbox {
|
||||||
|
z-index: 400;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
width: 180px;
|
|
||||||
height: 200px;
|
|
||||||
z-index: 400;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border-left: 1px solid #999;
|
|
||||||
border-right: 1px solid #999;
|
|
||||||
border-top: 1px solid #999;
|
|
||||||
padding: 3px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-top-left-radius: 5px;
|
border-top-left-radius: 5px;
|
||||||
border-top-right-radius: 5px;
|
border-top-right-radius: 5px;
|
||||||
display: none;
|
display: none;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
#chatbox {
|
||||||
|
width: 400px;
|
||||||
|
height: 300px;
|
||||||
|
z-index: 401;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatbox.stickyChat {
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
flex: 1 auto; /* take reminaning vertical space */
|
||||||
|
height: auto;
|
||||||
|
right: 0;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
#chatbox.stickyChat .stick-to-screen-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#chatbox.stickyChat.chatAndUsersChat .hide-reduce-btn {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- TITLE BAR -- */
|
||||||
|
#titlebar {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#titlebar #titlelabel {
|
||||||
|
margin: 4px 0 0 4px;
|
||||||
|
}
|
||||||
|
#titlebar .stick-to-screen-btn,
|
||||||
|
#titlebar .hide-reduce-btn {
|
||||||
|
font-size: 25px;
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#titlebar .stick-to-screen-btn {
|
||||||
|
font-size: 10px;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- MESSAGES -- */
|
||||||
#chattext {
|
#chattext {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid white;
|
overflow-y: auto;
|
||||||
-ms-overflow-y: scroll;
|
flex: 1 auto;
|
||||||
overflow-y: scroll;
|
|
||||||
font-size: 12px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
left: 0px;
|
|
||||||
top: 25px;
|
|
||||||
bottom: 25px;
|
|
||||||
z-index: 1002;
|
|
||||||
}
|
}
|
||||||
#chattext p {
|
#chattext p {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
-ms-overflow-x: hidden;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
#chattext .time {
|
||||||
|
float: right;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: .85rem;
|
||||||
|
opacity: .8;
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- INPUT BOX -- */
|
||||||
|
#chatinputbox {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#chatinputbox #chatinput {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -- CHAT ICON -- */
|
||||||
|
#chaticon {
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#chaticon a {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
#chaticon #chatlabel {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 3px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#chaticon #chatcounter {
|
||||||
|
font-size: .8rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- LOAD MESSAGES -- */
|
||||||
.chatloadmessages
|
.chatloadmessages
|
||||||
{
|
{
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -49,133 +124,10 @@
|
||||||
{
|
{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#chatinputbox {
|
|
||||||
padding: 3px 2px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
left: 3px;
|
|
||||||
}
|
|
||||||
#chatlabel {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #555;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-right: 3px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
#chatinput {
|
|
||||||
border: 1px solid #BBBBBB;
|
|
||||||
width: 100%;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#chaticon {
|
|
||||||
z-index: 400;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 20px;
|
|
||||||
padding: 5px;
|
|
||||||
border-left: 1px solid #999;
|
|
||||||
border-right: 1px solid #999;
|
|
||||||
border-top: 1px solid #999;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#chaticon a {
|
|
||||||
text-decoration: none
|
|
||||||
}
|
|
||||||
#chatcounter {
|
|
||||||
color: #777;
|
|
||||||
font-size: 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
#chattext p {
|
|
||||||
word-wrap: break-word
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar {
|
|
||||||
line-height: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #555;
|
|
||||||
position: relative;
|
|
||||||
bottom: 2px;
|
|
||||||
}
|
|
||||||
#titlelabel {
|
|
||||||
font-size: 13px;
|
|
||||||
margin: 4px 0 0 4px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
#titlesticky{
|
|
||||||
font-size: 10px;
|
|
||||||
padding-top:2px;
|
|
||||||
float: right;
|
|
||||||
text-align: right;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
#titlecross {
|
|
||||||
font-size: 25px;
|
|
||||||
float: right;
|
|
||||||
text-align: right;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stickyChat {
|
|
||||||
background-color: #f1f1f1 !important;
|
|
||||||
right: 0px !important;
|
|
||||||
top: 37px;
|
|
||||||
-webkit-border-radius: 0px !important;
|
|
||||||
-moz-border-radius: 0px !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
height: auto !important;
|
|
||||||
border: none !important;
|
|
||||||
border-left: 1px solid #ccc !important;
|
|
||||||
width: 185px !important;
|
|
||||||
}
|
|
||||||
.chatAndUsers{
|
|
||||||
display:block !important;
|
|
||||||
right:0px !important;
|
|
||||||
border-radius:0px !important;
|
|
||||||
width:182px !important;
|
|
||||||
/* Below makes UI look weird when X makes editbar flow onto two lines */
|
|
||||||
/* margin:2px 0 0 0 !important;*/
|
|
||||||
border: none !important;
|
|
||||||
border-bottom: 1px solid #ccc !important;
|
|
||||||
height:155px !important;
|
|
||||||
border-left: 1px solid #ccc !important;
|
|
||||||
}
|
|
||||||
.chatAndUsers > #otherusers{
|
|
||||||
max-height: 100px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.chatAndUsersChat > div > #titlecross{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.chatAndUsersChat{
|
|
||||||
bottom:0px !important;
|
|
||||||
padding:0 !important;
|
|
||||||
margin: 165px 0px 0px 0px;
|
|
||||||
right:0 !important;
|
|
||||||
width:182px !important;
|
|
||||||
border: none !important;
|
|
||||||
padding:5px !important;
|
|
||||||
border-left: 1px solid #ccc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 720px) {
|
@media only screen and (max-width: 720px) {
|
||||||
#chaticon {
|
|
||||||
position:fixed;
|
|
||||||
right:48px;
|
|
||||||
}
|
|
||||||
#chatbox {
|
#chatbox {
|
||||||
position:fixed;
|
right: 0;
|
||||||
bottom:33px !important;
|
width: 80%;
|
||||||
margin: 65px 0 0 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,10 +32,9 @@
|
||||||
}
|
}
|
||||||
.gritter-item {
|
.gritter-item {
|
||||||
display:block;
|
display:block;
|
||||||
color:#eee;
|
color: #eee;
|
||||||
padding:2px 11px 8px 11px;
|
padding: 2px 11px 8px 11px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-family:verdana;
|
|
||||||
}
|
}
|
||||||
.hover .gritter-item {
|
.hover .gritter-item {
|
||||||
background-position:right -40px;
|
background-position:right -40px;
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,45 @@
|
||||||
html {
|
html, body {
|
||||||
font-size: 62.5%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
#editbar {
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
#editorcontainerbox {
|
#editorcontainerbox {
|
||||||
position: absolute;
|
flex: 1 auto;
|
||||||
bottom: 0;
|
position: relative; /* for nested popup to use absolute positionning */
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#editorcontainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 37px; /* + 1px border */
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
/* Required to be able to scroll on iOS: */
|
/* For sticky chat */
|
||||||
-webkit-overflow-scrolling: touch;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
#editorcontainer iframe {
|
#editorcontainerbox #editorcontainer {
|
||||||
|
display: flex; /* transfer flex properties to nested elements, here the iframe */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
flex: 1 auto;
|
||||||
|
}
|
||||||
|
#editorcontainerbox #editorcontainer iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
left: 0; /* Required for safari fixes RTL */
|
|
||||||
}
|
}
|
||||||
iframe {
|
#editorcontainerbox .sticky-container { /* container for #users, #chat, #toc (table of content) and so on... */
|
||||||
position: absolute
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 200px;
|
||||||
|
max-width: 40%;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@media all and (max-width: 400px) {
|
#editorcontainerbox .sticky-container:not(.stikyUsers):not(.stickyChat) {
|
||||||
#editorcontainer {
|
width: 0; /* hide when the container is empty */
|
||||||
top: 68px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 720px) {
|
@media only screen and (max-width: 720px) {
|
||||||
#editorcontainer {
|
#editorcontainerbox {
|
||||||
margin-bottom: 33px
|
margin-bottom: 37px; /* Leave space for the bottom toolbar on mobile */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -56,3 +56,7 @@
|
||||||
transform: rotate(359deg);
|
transform: rotate(359deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#passwordRequired, #permissionDenied, #wrongPassword, #noCookie {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
@ -1,28 +1,21 @@
|
||||||
.popup {
|
.popup {
|
||||||
font-size: 12px;
|
position: absolute;
|
||||||
width: 80%;
|
top: 0;
|
||||||
max-width: 500px;
|
right: 20px;
|
||||||
|
display: none;
|
||||||
|
z-index: 500;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 600px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 0 0 6px 6px;
|
border-radius: 0 0 6px 6px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background: #f7f7f7;
|
|
||||||
background: -webkit-linear-gradient(#F7F7F7, #EEE);
|
|
||||||
background: -moz-linear-gradient(#F7F7F7, #EEE);
|
|
||||||
background: -ms-linear-gradient(#F7F7F7, #EEE);
|
|
||||||
background: -o-linear-gradient(#F7F7F7, #EEE);
|
|
||||||
background: linear-gradient(#F7F7F7, #EEE);
|
|
||||||
-webkit-box-shadow: 0 0 8px #888;
|
|
||||||
-moz-box-shadow: 0 0 8px #888;
|
|
||||||
box-shadow: 0 2px 4px #ddd;
|
box-shadow: 0 2px 4px #ddd;
|
||||||
color: #222;
|
background: #f7f7f7;
|
||||||
}
|
}
|
||||||
.popup input[type=text] {
|
.popup input[type=text] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
-ms-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
@ -38,15 +31,16 @@
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
}
|
}
|
||||||
.popup h1 {
|
.popup h1 {
|
||||||
color: #555;
|
font-size: 1.4rem;
|
||||||
font-size: 18px
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.popup h2 {
|
.popup h2 {
|
||||||
color: #777;
|
opacity: .7;
|
||||||
font-size: 15px
|
margin: 10px 0;
|
||||||
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
.popup p {
|
.popup p {
|
||||||
margin: 5px 0
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
.popup select {
|
.popup select {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -57,58 +51,21 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
#settings,
|
|
||||||
#import_export,
|
|
||||||
#embed,
|
|
||||||
#connectivity,
|
|
||||||
#users {
|
|
||||||
position: absolute;
|
|
||||||
top: 38px;
|
|
||||||
right: 20px;
|
|
||||||
display: none;
|
|
||||||
z-index: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 400px){
|
|
||||||
.popup {
|
|
||||||
width:100%;
|
|
||||||
max-width:300px;
|
|
||||||
top: 72px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile devices */
|
/* Mobile devices */
|
||||||
@media only screen and (max-width: 720px) {
|
@media only screen and (max-width: 720px) {
|
||||||
#users {
|
|
||||||
top: auto;
|
|
||||||
right:0px !important;
|
|
||||||
bottom: 33px;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
height: 55px !important;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
#mycolorpicker {
|
|
||||||
left: 0px;
|
|
||||||
top:37px !important;
|
|
||||||
position:fixed;
|
|
||||||
}
|
|
||||||
.popup {
|
.popup {
|
||||||
-webkit-border-radius: 0;
|
|
||||||
-moz-border-radius: 0;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
-webkit-box-sizing: border-box;
|
top: auto;
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
-ms-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#settings,
|
|
||||||
#import_export,
|
|
||||||
#connectivity,
|
|
||||||
#embed {
|
|
||||||
top:auto;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 33px;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
max-height: 80vh;
|
||||||
|
max-width: none;
|
||||||
|
|
||||||
|
border-radius: 6px 6px 0 0;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-bottom: none;
|
||||||
|
box-shadow: 0 -2px 4px #ddd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,39 +1,29 @@
|
||||||
#exportColumn{
|
.readonly .acl-write {
|
||||||
margin-top:20px;
|
display: none;
|
||||||
}
|
}
|
||||||
.exporttype {
|
.exporttype {
|
||||||
margin-top: 4px;
|
margin-bottom: 5px;
|
||||||
background-repeat: no-repeat;
|
|
||||||
padding-left: 25px;
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
padding-bottom:2px;
|
|
||||||
display:inline;
|
|
||||||
padding-left:5px;
|
|
||||||
font-family: "Arial";
|
|
||||||
}
|
}
|
||||||
.exportlink{
|
.exporttype:before{
|
||||||
font-family: "fontawesome-etherpad";
|
font-family: "fontawesome-etherpad";
|
||||||
display:block;
|
margin-right: 5px;
|
||||||
margin:5px;
|
|
||||||
color:#666;
|
|
||||||
}
|
}
|
||||||
#exporthtmla:before {
|
#exporthtmla .exporttype:before {
|
||||||
content: "\e826";
|
content: "\e826";
|
||||||
}
|
}
|
||||||
#exportplaina:before {
|
#exportplaina .exporttype:before {
|
||||||
content: "\e802";
|
content: "\e802";
|
||||||
}
|
}
|
||||||
#exportworda:before {
|
#exportworda .exporttype:before {
|
||||||
content: "\e804";
|
content: "\e804";
|
||||||
}
|
}
|
||||||
#exportpdfa:before {
|
#exportpdfa .exporttype:before {
|
||||||
content: "\e803";
|
content: "\e803";
|
||||||
}
|
}
|
||||||
#exportetherpada:before {
|
#exportetherpada .exporttype:before {
|
||||||
content: "\e806";
|
content: "\e806";
|
||||||
}
|
}
|
||||||
#exportopena:before {
|
#exportopena .exporttype:before {
|
||||||
content: "\e805";
|
content: "\e805";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,5 +41,5 @@
|
||||||
|
|
||||||
#importsubmitinput {
|
#importsubmitinput {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding:2px 4px 2px 4px;
|
padding: 2px 4px 2px 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -1,27 +1,50 @@
|
||||||
#users {
|
/* --------------- */
|
||||||
background: #f7f7f7;
|
/* --- LAYOUT ---- */
|
||||||
background: -webkit-linear-gradient( #F7F7F7,#EEE);
|
/* --------------- */
|
||||||
background: -moz-linear-gradient( #F7F7F7,#EEE);
|
|
||||||
background: -ms-linear-gradient( #F7F7F7,#EEE);
|
.popup#users {
|
||||||
background: -o-linear-gradient( #F7F7F7,#EEE);
|
flex-direction: column;
|
||||||
background: linear-gradient( #F7F7F7,#EEE);
|
max-height: 500px;
|
||||||
width: 160px;
|
height: auto;
|
||||||
color: #fff;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 0 0 6px 6px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
}
|
||||||
#otherusers {
|
.popup#users #myuser {
|
||||||
max-height: 400px;
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.popup#users #otherusers {
|
||||||
|
flex: 1 auto;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
max-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popup#users.chatAndUsers {
|
||||||
|
display: flex !important; /* always visible */
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
height: 200px;
|
||||||
|
min-width: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --------------- */
|
||||||
|
/* --- MY USER --- */
|
||||||
|
/* --------------- */
|
||||||
|
|
||||||
#myswatchbox {
|
#myswatchbox {
|
||||||
position: absolute;
|
float: left;
|
||||||
left: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border: 1px solid #000;
|
border: 1px solid #ccc
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -30,18 +53,53 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: transparent; /*...initially*/
|
background: transparent; /*...initially*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#myusernameform {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
input#myusernameedit {
|
||||||
|
height: 26px;
|
||||||
|
font-size: 1.3em;
|
||||||
|
padding: 3px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
input#myusernameedit:not(.editable) {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
#myuser .myusernameedithoverable:hover {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
#myusernameform .editactive,
|
||||||
|
#myusernameform .editempty {
|
||||||
|
background: white;
|
||||||
|
border-left: 1px solid #c3c3c3;
|
||||||
|
border-top: 1px solid #c3c3c3;
|
||||||
|
border-right: 1px solid #e6e6e6;
|
||||||
|
border-bottom: 1px solid #e6e6e6;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
#myusernameform .editempty {
|
||||||
|
color: #333
|
||||||
|
}
|
||||||
|
#myusernameedit, #otheruserstable .swatch {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --------------------------- */
|
||||||
|
/* --- MY USER COLORPICKER --- */
|
||||||
|
/* --------------------------- */
|
||||||
|
|
||||||
#mycolorpicker {
|
#mycolorpicker {
|
||||||
|
display: none;
|
||||||
width: 232px;
|
width: 232px;
|
||||||
height: 265px;
|
height: 265px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -250px;
|
right: calc(100% + 15px);
|
||||||
top: 0px;
|
top: 0;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
display: none;
|
|
||||||
border-radius: 0 0 6px 6px;
|
|
||||||
background: #f7f7f7;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: 0;
|
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -55,14 +113,7 @@
|
||||||
#mycolorpickersave,
|
#mycolorpickersave,
|
||||||
#mycolorpickercancel {
|
#mycolorpickercancel {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
background: -webkit-linear-gradient(#fff, #ccc);
|
|
||||||
background: -moz-linear-gradient(#fff, #ccc);
|
|
||||||
background: -o-linear-gradient(#fff, #ccc);
|
|
||||||
background: -ms-linear-gradient(#fff, #ccc);
|
|
||||||
background: linear-gradient(#fff, #ccc);
|
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -87,110 +138,24 @@
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
#myusernameform {
|
|
||||||
margin-left: 30px
|
|
||||||
}
|
/* ------------------- */
|
||||||
#myusernameedit {
|
/* --- OTHER USERS --- */
|
||||||
font-size: 1.3em;
|
/* ------------------- */
|
||||||
color: #fff;
|
|
||||||
padding: 3px;
|
|
||||||
height: 18px;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
width: 122px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
#myusernameform input.editable {
|
|
||||||
border: 1px solid #444
|
|
||||||
}
|
|
||||||
#myuser .myusernameedithoverable:hover {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
#mystatusform {
|
|
||||||
margin-left: 35px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
#mystatusedit {
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: #777;
|
|
||||||
font-style: italic;
|
|
||||||
display: none;
|
|
||||||
padding: 2px;
|
|
||||||
height: 14px;
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
width: 199px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
#myusernameform .editactive,
|
|
||||||
#myusernameform .editempty {
|
|
||||||
background: white;
|
|
||||||
border-left: 1px solid #c3c3c3;
|
|
||||||
border-top: 1px solid #c3c3c3;
|
|
||||||
border-right: 1px solid #e6e6e6;
|
|
||||||
border-bottom: 1px solid #e6e6e6;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
#myusernameform .editempty {
|
|
||||||
color: #333
|
|
||||||
}
|
|
||||||
#myswatchbox, #myusernameedit, #otheruserstable .swatch {
|
|
||||||
border: 1px solid #ccc !important;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
table#otheruserstable {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
#otheruserstable td {
|
#otheruserstable td {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
vertical-align: middle;
|
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
#otheruserstable .swatch {
|
#otheruserstable .swatch {
|
||||||
border: 1px solid #000;
|
border: 1px solid #ccc;
|
||||||
width: 13px;
|
width: 13px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.usertdswatch {
|
|
||||||
width: 1%
|
|
||||||
}
|
|
||||||
.usertdname {
|
.usertdname {
|
||||||
font-size: 1.3em;
|
font-size: 1.2rem;
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
.usertdstatus {
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-style: italic;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.usertdactivity {
|
|
||||||
font-size: 1.1em;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
.usertdname input {
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
width: 80px;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
.usertdname input.editactive,
|
|
||||||
.usertdname input.editempty {
|
|
||||||
background: white;
|
|
||||||
border-left: 1px solid #c3c3c3;
|
|
||||||
border-top: 1px solid #c3c3c3;
|
|
||||||
border-right: 1px solid #e6e6e6;
|
|
||||||
border-bottom: 1px solid #e6e6e6;
|
|
||||||
}
|
|
||||||
.usertdname input.editempty {
|
|
||||||
color: #888;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,129 +1,78 @@
|
||||||
/* menu */
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display:none; /* hidden by default */
|
display: none;
|
||||||
}
|
background-color: #f4f4f4;
|
||||||
.toolbar {
|
|
||||||
background: #f7f7f7;
|
|
||||||
background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-top: 4px;
|
justify-content: space-between;
|
||||||
width: 100%;
|
padding: 0px 5px 5px 5px;
|
||||||
white-space: nowrap;
|
flex-shrink: 0;
|
||||||
height: 32px;
|
|
||||||
}
|
}
|
||||||
.toolbar ul {
|
.toolbar ul {
|
||||||
position: absolute;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-right: 3px;
|
|
||||||
padding-left: 1px;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
float: left
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.toolbar ul.menu_left {
|
||||||
|
flex-wrap: wrap; /* wrap left toolbar so if a lot of icons are present it goes on multiple lines */
|
||||||
|
}
|
||||||
|
.toolbar ul.menu_right {
|
||||||
|
flex-shrink: 0; /* prevent from shrinking */
|
||||||
|
}
|
||||||
|
.toolbar ul li, .toolbar ul > div {
|
||||||
|
display: flex; /* transfer flexbox positionning to children */
|
||||||
}
|
}
|
||||||
.toolbar ul li {
|
.toolbar ul li {
|
||||||
float: left;
|
margin-top: 5px; /* when icons goes multi rows, have space betwwen each row */
|
||||||
margin-left: 2px;
|
|
||||||
height:32px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.toolbar ul li.separator {
|
.toolbar ul li.separator {
|
||||||
border: inherit;
|
|
||||||
background: inherit;
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 0px;
|
width: 10px;
|
||||||
padding: 5px;
|
|
||||||
height:22px;
|
|
||||||
}
|
|
||||||
.toolbar ul li a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.toolbar ul li a:hover {
|
|
||||||
background: #fff;
|
|
||||||
background: -webkit-linear-gradient(#f4f4f4, #e4e4e4);
|
|
||||||
background: -moz-linear-gradient(#f4f4f4, #e4e4e4);
|
|
||||||
background: -o-linear-gradient(#f4f4f4, #e4e4e4);
|
|
||||||
background: -ms-linear-gradient(#f4f4f4, #e4e4e4);
|
|
||||||
background: linear-gradient(#f4f4f4, #e4e4e4);
|
|
||||||
}
|
|
||||||
.toolbar ul li a:active {
|
|
||||||
background: #eee;
|
|
||||||
background: -webkit-linear-gradient(#ddd, #fff);
|
|
||||||
background: -moz-linear-gradient(#ddd, #fff);
|
|
||||||
background: -o-linear-gradient(#ddd, #fff);
|
|
||||||
background: -ms-linear-gradient(#ddd, #fff);
|
|
||||||
background: linear-gradient(#ddd, #fff);
|
|
||||||
-webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
|
||||||
-moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
|
||||||
box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
|
||||||
}
|
|
||||||
.toolbar ul li .activeButton {
|
|
||||||
background: #eee;
|
|
||||||
background: -webkit-linear-gradient(#ddd, #fff);
|
|
||||||
background: -moz-linear-gradient(#ddd, #fff);
|
|
||||||
background: -o-linear-gradient(#ddd, #fff);
|
|
||||||
background: -ms-linear-gradient(#ddd, #fff);
|
|
||||||
background: linear-gradient(#ddd, #fff);
|
|
||||||
-webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
|
||||||
-moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
|
||||||
box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
|
||||||
}
|
}
|
||||||
.toolbar ul li a {
|
.toolbar ul li a {
|
||||||
background: #fff;
|
|
||||||
background: -webkit-linear-gradient(#fff, #f0f0f0);
|
|
||||||
background: -moz-linear-gradient(#fff, #f0f0f0);
|
|
||||||
background: -o-linear-gradient(#fff, #f0f0f0);
|
|
||||||
background: -ms-linear-gradient(#fff, #f0f0f0);
|
|
||||||
background: linear-gradient(#fff, #f0f0f0);
|
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
|
cursor: pointer;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
background: #fff;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
|
||||||
min-height: 18px;
|
min-height: 18px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 4px 5px;
|
padding: 4px 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
min-width: 18px;
|
min-width: 18px;
|
||||||
|
transition: background-color .1s;
|
||||||
}
|
}
|
||||||
.toolbar ul li a .buttonicon {
|
.toolbar ul li button:active, .toolbar ul li button:focus {
|
||||||
position: relative;
|
outline: 0;
|
||||||
top: 1px;
|
border: none;
|
||||||
}
|
}
|
||||||
.toolbar ul li a .buttontext {
|
.toolbar ul li a:hover {
|
||||||
color: #666;
|
text-decoration: none;
|
||||||
font-size: 14px;
|
background-color: #f2f2f2;
|
||||||
border:none;
|
|
||||||
background:none;
|
|
||||||
margin-top:1px;
|
|
||||||
color:#666;
|
|
||||||
}
|
}
|
||||||
|
.toolbar ul li a:active, .toolbar ul li a:focus {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
.toolbar ul li a.selected {
|
||||||
|
background: #dadada !important;
|
||||||
|
}
|
||||||
|
|
||||||
.toolbar ul li a.grouped-left {
|
.toolbar ul li a.grouped-left {
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
}
|
}
|
||||||
.toolbar ul li a.grouped-middle {
|
.toolbar ul li a.grouped-middle {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-left: -2px;
|
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
.toolbar ul li a.grouped-right {
|
.toolbar ul li a.grouped-right {
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
margin-left: -2px;
|
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
.toolbar ul li a.selected {
|
|
||||||
background: #eee !important;
|
|
||||||
background: -webkit-linear-gradient(#EEE, #F0F0F0) !important;
|
|
||||||
background: -moz-linear-gradient(#EEE, #F0F0F0) !important;
|
|
||||||
background: -o-linear-gradient(#EEE, #F0F0F0) !important;
|
|
||||||
background: -ms-linear-gradient(#EEE, #F0F0F0) !important;
|
|
||||||
background: linear-gradient(#EEE, #F0F0F0) !important;
|
|
||||||
}
|
|
||||||
.toolbar ul li select {
|
.toolbar ul li select {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -133,121 +82,58 @@
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.toolbar ul.menu_left {
|
|
||||||
left: 0px;
|
|
||||||
right: 210px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar ul.menu_right {
|
.toolbar ul li[data-key=showusers] > a {
|
||||||
right:0px;
|
|
||||||
}
|
|
||||||
li[data-key=showusers] > a {
|
|
||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
li[data-key=showusers] > a #online_count {
|
.toolbar ul li[data-key=showusers] > a #online_count {
|
||||||
color: #777;
|
color: #777;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
}
|
}
|
||||||
.toolbar #overlay {
|
|
||||||
|
.toolbar #toolbar-overlay {
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
display: none;
|
display: none;
|
||||||
background-repeat: repeat-both;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
bottom: 0;
|
||||||
* html #overlay {
|
right: 0;
|
||||||
/* for IE 6+ */
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
||||||
filter: alpha(opacity=100);
|
|
||||||
opacity: 1; /* in case this is looked at */
|
|
||||||
background-image: none;
|
|
||||||
background-repeat: no-repeat; /* scale the image */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 400px){
|
|
||||||
.toolbar {
|
|
||||||
height: 62px;
|
|
||||||
}
|
|
||||||
.toolbar ul.menu_left {
|
|
||||||
left:0px;
|
|
||||||
right:100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.toolbar ul li.separator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.toolbar ul li a {
|
|
||||||
padding: 4px 1px
|
|
||||||
}
|
|
||||||
.toolbar ul.menu_left {
|
|
||||||
left:0px;
|
|
||||||
right:150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 720px) {
|
@media only screen and (max-width: 720px) {
|
||||||
/* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */
|
.toolbar ul li.separator {
|
||||||
.toolbar {
|
width: 5px;
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
.toolbar ul {
|
|
||||||
background: #f7f7f7;
|
|
||||||
background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.toolbar ul.menu_left {
|
|
||||||
right:0px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
top: 0;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 4px 0 0 0;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
/* menu_right act like a new toolbar on the bottom of the screen */
|
||||||
.toolbar ul.menu_right, .timeslider-bar .editbarright {
|
.toolbar ul.menu_right, .timeslider-bar .editbarright {
|
||||||
right:0px !important;
|
|
||||||
height: 32px;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
}
|
background-color: #f4f4f4;
|
||||||
.toolbar ul.menu_right > li:last-child {
|
padding: 0 5px 5px 5px;
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
.toolbar ul.menu_right > li a {
|
.toolbar ul.menu_right > li a {
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background-color: transparent;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.toolbar ul.menu_right > li[data-key="showusers"] {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 8px;
|
|
||||||
}
|
}
|
||||||
.toolbar ul li a.selected {
|
.toolbar ul.menu_right > li[data-key="showusers"] a {
|
||||||
background: none !important
|
padding-top: 10px;
|
||||||
}
|
border-radius: 0;
|
||||||
li[data-key="showusers"] > a {
|
|
||||||
|
|
||||||
margin-top:-10px;
|
|
||||||
padding-top:2px !important;
|
|
||||||
line-height:20px;
|
|
||||||
vertical-align:top !important;
|
|
||||||
}
|
|
||||||
.toolbar ul li .separator {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
.toolbar #online_count {
|
|
||||||
line-height: 24px
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -201,7 +201,6 @@ stepper:active{
|
||||||
background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent;
|
background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent;
|
||||||
padding:2px;
|
padding:2px;
|
||||||
border-radius:2px;
|
border-radius:2px;
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
left: 7px;
|
left: 7px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -225,7 +225,7 @@ function Ace2Editor()
|
||||||
var iframeHTML = [];
|
var iframeHTML = [];
|
||||||
|
|
||||||
iframeHTML.push(doctype);
|
iframeHTML.push(doctype);
|
||||||
iframeHTML.push("<html><head>");
|
iframeHTML.push("<html class='inner-editor'><head>");
|
||||||
|
|
||||||
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed
|
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed
|
||||||
// and compressed, putting the compressed code from the named file directly into the
|
// and compressed, putting the compressed code from the named file directly into the
|
||||||
|
|
@ -316,7 +316,7 @@ window.onload = function () {\n\
|
||||||
}, 0);\n\
|
}, 0);\n\
|
||||||
}';
|
}';
|
||||||
|
|
||||||
var outerHTML = [doctype, '<html><head>']
|
var outerHTML = [doctype, '<html class="inner-editor outerdoc"><head>']
|
||||||
|
|
||||||
var includedCSS = [];
|
var includedCSS = [];
|
||||||
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};
|
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};
|
||||||
|
|
|
||||||
|
|
@ -69,12 +69,6 @@ function Ace2Inner(){
|
||||||
var THE_TAB = ' '; //4
|
var THE_TAB = ' '; //4
|
||||||
var MAX_LIST_LEVEL = 16;
|
var MAX_LIST_LEVEL = 16;
|
||||||
|
|
||||||
var LINE_NUMBER_PADDING_RIGHT = 4;
|
|
||||||
var LINE_NUMBER_PADDING_LEFT = 4;
|
|
||||||
var MIN_LINEDIV_WIDTH = 20;
|
|
||||||
var EDIT_BODY_PADDING_TOP = 8;
|
|
||||||
var EDIT_BODY_PADDING_LEFT = 8;
|
|
||||||
|
|
||||||
var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough'];
|
var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough'];
|
||||||
var SELECT_BUTTON_CLASS = 'selected';
|
var SELECT_BUTTON_CLASS = 'selected';
|
||||||
|
|
||||||
|
|
@ -127,12 +121,6 @@ function Ace2Inner(){
|
||||||
var hasLineNumbers = true;
|
var hasLineNumbers = true;
|
||||||
var isStyled = true;
|
var isStyled = true;
|
||||||
|
|
||||||
// space around the innermost iframe element
|
|
||||||
var iframePadLeft = MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT;
|
|
||||||
var iframePadTop = EDIT_BODY_PADDING_TOP;
|
|
||||||
var iframePadBottom = 0,
|
|
||||||
iframePadRight = 0;
|
|
||||||
|
|
||||||
var console = (DEBUG && window.console);
|
var console = (DEBUG && window.console);
|
||||||
var documentAttributeManager;
|
var documentAttributeManager;
|
||||||
|
|
||||||
|
|
@ -4766,70 +4754,7 @@ function Ace2Inner(){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setIfNecessary(obj, prop, value)
|
|
||||||
{
|
|
||||||
if (obj[prop] != value)
|
|
||||||
{
|
|
||||||
obj[prop] = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var lineNumberWidth = sideDiv.firstChild.offsetWidth;
|
|
||||||
var newSideDivWidth = lineNumberWidth + LINE_NUMBER_PADDING_LEFT;
|
|
||||||
if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH;
|
|
||||||
iframePadLeft = EDIT_BODY_PADDING_LEFT;
|
|
||||||
if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT;
|
|
||||||
setIfNecessary(iframe.style, "left", iframePadLeft + "px");
|
|
||||||
setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px");
|
|
||||||
|
|
||||||
for (var i = 0; i < 2; i++)
|
|
||||||
{
|
|
||||||
var newHeight = root.clientHeight;
|
|
||||||
var newWidth = (browser.msie ? root.createTextRange().boundingWidth : root.clientWidth);
|
|
||||||
var viewHeight = getInnerHeight() - iframePadBottom - iframePadTop;
|
|
||||||
var viewWidth = getInnerWidth() - iframePadLeft - iframePadRight;
|
|
||||||
if (newHeight < viewHeight)
|
|
||||||
{
|
|
||||||
newHeight = viewHeight;
|
|
||||||
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'auto');
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'scroll');
|
|
||||||
}
|
|
||||||
if (doesWrap)
|
|
||||||
{
|
|
||||||
newWidth = viewWidth;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
if (newWidth < viewWidth) newWidth = viewWidth;
|
|
||||||
}
|
|
||||||
setIfNecessary(iframe.style, "height", newHeight + "px");
|
|
||||||
setIfNecessary(iframe.style, "width", newWidth + "px");
|
|
||||||
setIfNecessary(sideDiv.style, "height", newHeight + "px");
|
|
||||||
}
|
|
||||||
if (browser.firefox)
|
|
||||||
{
|
|
||||||
if (!doesWrap)
|
|
||||||
{
|
|
||||||
// the body:display:table-cell hack makes mozilla do scrolling
|
|
||||||
// correctly by shrinking the <body> to fit around its content,
|
|
||||||
// but mozilla won't act on clicks below the body. We keep the
|
|
||||||
// style.height property set to the viewport height (editor height
|
|
||||||
// not including scrollbar), so it will never shrink so that part of
|
|
||||||
// the editor isn't clickable.
|
|
||||||
var body = root;
|
|
||||||
var styleHeight = viewHeight + "px";
|
|
||||||
setIfNecessary(body.style, "height", styleHeight);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
setIfNecessary(root.style, "height", "");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var win = outerWin;
|
var win = outerWin;
|
||||||
var r = 20;
|
|
||||||
|
|
||||||
enforceEditability();
|
enforceEditability();
|
||||||
|
|
||||||
|
|
@ -5160,7 +5085,6 @@ function Ace2Inner(){
|
||||||
{
|
{
|
||||||
var win = outerWin;
|
var win = outerWin;
|
||||||
var odoc = outerWin.document;
|
var odoc = outerWin.document;
|
||||||
pixelX += iframePadLeft;
|
|
||||||
var distInsideLeft = pixelX - win.scrollX;
|
var distInsideLeft = pixelX - win.scrollX;
|
||||||
var distInsideRight = win.scrollX + getInnerWidth() - pixelX;
|
var distInsideRight = win.scrollX + getInnerWidth() - pixelX;
|
||||||
if (distInsideLeft < 0)
|
if (distInsideLeft < 0)
|
||||||
|
|
@ -5358,7 +5282,7 @@ function Ace2Inner(){
|
||||||
function initLineNumbers()
|
function initLineNumbers()
|
||||||
{
|
{
|
||||||
lineNumbersShown = 1;
|
lineNumbersShown = 1;
|
||||||
sideDiv.innerHTML = '<table border="0" cellpadding="0" cellspacing="0" align="right"><tr><td id="sidedivinner" class="sidedivinner"><div>1</div></td></tr></table>';
|
sideDiv.innerHTML = '<div id="sidedivinner" class="sidedivinner"><div>1</div></div>';
|
||||||
sideDivInner = outerWin.document.getElementById("sidedivinner");
|
sideDivInner = outerWin.document.getElementById("sidedivinner");
|
||||||
$(sideDiv).addClass("sidediv");
|
$(sideDiv).addClass("sidediv");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ var chat = (function()
|
||||||
show: function ()
|
show: function ()
|
||||||
{
|
{
|
||||||
$("#chaticon").hide();
|
$("#chaticon").hide();
|
||||||
$("#chatbox").show();
|
$("#chatbox").css('display', 'flex');
|
||||||
$("#gritter-notice-wrapper").hide();
|
$("#gritter-notice-wrapper").hide();
|
||||||
self.scrollDown();
|
self.scrollDown();
|
||||||
chatMentions = 0;
|
chatMentions = 0;
|
||||||
|
|
@ -46,42 +46,28 @@ var chat = (function()
|
||||||
stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen
|
stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen
|
||||||
{
|
{
|
||||||
chat.show();
|
chat.show();
|
||||||
if(!isStuck || fromInitialCall) { // Stick it to
|
isStuck = (!isStuck || fromInitialCall);
|
||||||
padcookie.setPref("chatAlwaysVisible", true);
|
|
||||||
$('#chatbox').addClass("stickyChat");
|
$('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck);
|
||||||
$('#titlesticky').hide();
|
padcookie.setPref("chatAlwaysVisible", isStuck);
|
||||||
$('#editorcontainer').css({"right":"192px"});
|
$('#options-stickychat').prop('checked', isStuck);
|
||||||
$('.stickyChat').css("top",$('#editorcontainer').offset().top+"px");
|
|
||||||
isStuck = true;
|
|
||||||
} else { // Unstick it
|
|
||||||
padcookie.setPref("chatAlwaysVisible", false);
|
|
||||||
$('.stickyChat').css("top", "auto");
|
|
||||||
$('#chatbox').removeClass("stickyChat");
|
|
||||||
$('#titlesticky').show();
|
|
||||||
$('#editorcontainer').css({"right":"0px"});
|
|
||||||
isStuck = false;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
chatAndUsers: function(fromInitialCall)
|
chatAndUsers: function(fromInitialCall)
|
||||||
{
|
{
|
||||||
var toEnable = $('#options-chatandusers').is(":checked");
|
var toEnable = $('#options-chatandusers').is(":checked");
|
||||||
if(toEnable || !userAndChat || fromInitialCall){
|
if(toEnable || !userAndChat || fromInitialCall){
|
||||||
padcookie.setPref("chatAndUsers", true);
|
|
||||||
chat.stickToScreen(true);
|
chat.stickToScreen(true);
|
||||||
$('#options-stickychat').prop('checked', true)
|
$('#options-stickychat').prop('checked', true)
|
||||||
$('#options-chatandusers').prop('checked', true)
|
$('#options-chatandusers').prop('checked', true)
|
||||||
$('#options-stickychat').prop("disabled", "disabled");
|
$('#options-stickychat').prop("disabled", "disabled");
|
||||||
$('#users').addClass("chatAndUsers");
|
|
||||||
$("#chatbox").addClass("chatAndUsersChat");
|
|
||||||
// redraw
|
|
||||||
userAndChat = true;
|
userAndChat = true;
|
||||||
padeditbar.redrawHeight()
|
|
||||||
}else{
|
}else{
|
||||||
padcookie.setPref("chatAndUsers", false);
|
|
||||||
$('#options-stickychat').prop("disabled", false);
|
$('#options-stickychat').prop("disabled", false);
|
||||||
$('#users').removeClass("chatAndUsers");
|
userAndChat = false;
|
||||||
$("#chatbox").removeClass("chatAndUsersChat");
|
|
||||||
}
|
}
|
||||||
|
padcookie.setPref("chatAndUsers", userAndChat);
|
||||||
|
$('#users, .sticky-container').toggleClass("chatAndUsers stickyUsers", userAndChat);
|
||||||
|
$("#chatbox").toggleClass("chatAndUsersChat", userAndChat);
|
||||||
},
|
},
|
||||||
hide: function ()
|
hide: function ()
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ function randomString()
|
||||||
// callback: the function to call when all above succeeds, `val` is the value supplied by the user
|
// callback: the function to call when all above succeeds, `val` is the value supplied by the user
|
||||||
var getParameters = [
|
var getParameters = [
|
||||||
{ name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } },
|
{ name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } },
|
||||||
{ name: "showControls", checkVal: "false", callback: function(val) { $('#editbar').addClass('hideControlsEditbar'); $('#editorcontainer').addClass('hideControlsEditor'); } },
|
{ name: "showControls", checkVal: "true", callback: function(val) { $('#editbar').css('display', 'flex') } },
|
||||||
{ name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } },
|
{ name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } },
|
||||||
{ name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } },
|
{ name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } },
|
||||||
{ name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } },
|
{ name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } },
|
||||||
|
|
|
||||||
|
|
@ -141,11 +141,6 @@ var padeditbar = (function()
|
||||||
init: function() {
|
init: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
self.dropdowns = [];
|
self.dropdowns = [];
|
||||||
// Listen for resize events (sucks but needed as iFrame ace_inner has to be position absolute
|
|
||||||
// A CSS fix for this would be nice but I'm not sure how we'd do it.
|
|
||||||
$(window).resize(function(){
|
|
||||||
self.redrawHeight();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
|
$("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
|
||||||
$("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
|
$("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
|
||||||
|
|
@ -160,10 +155,6 @@ var padeditbar = (function()
|
||||||
bodyKeyEvent(evt);
|
bodyKeyEvent(evt);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#editbar').show();
|
|
||||||
|
|
||||||
this.redrawHeight();
|
|
||||||
|
|
||||||
registerDefaultCommands(self);
|
registerDefaultCommands(self);
|
||||||
|
|
||||||
hooks.callAll("postToolbarInit", {
|
hooks.callAll("postToolbarInit", {
|
||||||
|
|
@ -173,7 +164,6 @@ var padeditbar = (function()
|
||||||
},
|
},
|
||||||
isEnabled: function()
|
isEnabled: function()
|
||||||
{
|
{
|
||||||
// return !$("#editbar").hasClass('disabledtoolbar');
|
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
disable: function()
|
disable: function()
|
||||||
|
|
@ -185,55 +175,6 @@ var padeditbar = (function()
|
||||||
this.commands[cmd] = callback;
|
this.commands[cmd] = callback;
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
calculateEditbarHeight: function() {
|
|
||||||
// if we're on timeslider, there is nothing on editbar, so we just use zero
|
|
||||||
var onTimeslider = $('.menu_left').length === 0;
|
|
||||||
if (onTimeslider) return 0;
|
|
||||||
|
|
||||||
// if editbar has both menu left and right, its height must be
|
|
||||||
// the max between the height of these two parts
|
|
||||||
var leftMenuPosition = $('.menu_left').offset().top;
|
|
||||||
var rightMenuPosition = $('.menu_right').offset().top;
|
|
||||||
var editbarHasMenuLeftAndRight = (leftMenuPosition === rightMenuPosition);
|
|
||||||
|
|
||||||
var height;
|
|
||||||
if (editbarHasMenuLeftAndRight) {
|
|
||||||
height = Math.max($('.menu_left').height(), $('.menu_right').height());
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
height = $('.menu_left').height();
|
|
||||||
}
|
|
||||||
|
|
||||||
return height;
|
|
||||||
},
|
|
||||||
redrawHeight: function(){
|
|
||||||
var minimunEditbarHeight = self.calculateEditbarHeight();
|
|
||||||
var editbarHeight = minimunEditbarHeight + 1 + "px";
|
|
||||||
var containerTop = minimunEditbarHeight + 6 + "px";
|
|
||||||
$('#editbar').css("height", editbarHeight);
|
|
||||||
|
|
||||||
$('#editorcontainer').css("top", containerTop);
|
|
||||||
|
|
||||||
// make sure pop ups are in the right place
|
|
||||||
if($('#editorcontainer').offset()){
|
|
||||||
$('.popup').css("top", $('#editorcontainer').offset().top + "px");
|
|
||||||
}
|
|
||||||
|
|
||||||
// If sticky chat is enabled..
|
|
||||||
if($('#options-stickychat').is(":checked")){
|
|
||||||
if($('#editorcontainer').offset()){
|
|
||||||
$('#chatbox').css("top", $('#editorcontainer').offset().top + "px");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// If chat and Users is enabled..
|
|
||||||
if($('#options-chatandusers').is(":checked")){
|
|
||||||
if($('#editorcontainer').offset()){
|
|
||||||
$('#users').css("top", $('#editorcontainer').offset().top + "px");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
registerDropdownCommand: function (cmd, dropdown) {
|
registerDropdownCommand: function (cmd, dropdown) {
|
||||||
dropdown = dropdown || cmd;
|
dropdown = dropdown || cmd;
|
||||||
self.dropdowns.push(dropdown)
|
self.dropdowns.push(dropdown)
|
||||||
|
|
@ -256,6 +197,11 @@ var padeditbar = (function()
|
||||||
},
|
},
|
||||||
toggleDropDown: function(moduleName, cb)
|
toggleDropDown: function(moduleName, cb)
|
||||||
{
|
{
|
||||||
|
// do nothing if users are sticked
|
||||||
|
if (moduleName === "users" && $('#users').hasClass('stickyUsers')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// hide all modules and remove highlighting of all buttons
|
// hide all modules and remove highlighting of all buttons
|
||||||
if(moduleName == "none")
|
if(moduleName == "none")
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -44,10 +44,10 @@ var padmodals = (function()
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
showOverlay: function() {
|
showOverlay: function() {
|
||||||
$("#overlay").show();
|
$("#toolbar-overlay").show();
|
||||||
},
|
},
|
||||||
hideOverlay: function() {
|
hideOverlay: function() {
|
||||||
$("#overlay").hide();
|
$("#toolbar-overlay").hide();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return self;
|
return self;
|
||||||
|
|
|
||||||
|
|
@ -110,5 +110,5 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titlesticky { display: none; }
|
.stick-to-screen-btn { display: none; }
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
@media (max-width:600px) {
|
|
||||||
#sidediv {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -5,88 +5,348 @@
|
||||||
;
|
;
|
||||||
%>
|
%>
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
||||||
<% e.begin_block("htmlHead"); %>
|
<% e.begin_block("htmlHead"); %>
|
||||||
<html class="<%=hooks.clientPluginNames().join(' '); %>">
|
<html class="<%=hooks.clientPluginNames().join(' '); %>">
|
||||||
<% e.end_block(); %>
|
<% e.end_block(); %>
|
||||||
|
|
||||||
<title><%=settings.title%></title>
|
<title><%=settings.title%></title>
|
||||||
<script>
|
<script>
|
||||||
/*
|
/*
|
||||||
|@licstart The following is the entire license notice for the
|
|@licstart The following is the entire license notice for the
|
||||||
JavaScript code in this page.|
|
JavaScript code in this page.|
|
||||||
|
|
||||||
Copyright 2011 Peter Martischka, Primary Technology.
|
Copyright 2011 Peter Martischka, Primary Technology.
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
You may obtain a copy of the License at
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
Unless required by applicable law or agreed to in writing, software
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
|
|
||||||
|@licend The above is the entire license notice
|
|@licend The above is the entire license notice
|
||||||
for the JavaScript code in this page.|
|
for the JavaScript code in this page.|
|
||||||
*/
|
*/
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="robots" content="noindex, nofollow">
|
<meta name="robots" content="noindex, nofollow">
|
||||||
<meta name="referrer" content="no-referrer">
|
<meta name="referrer" content="no-referrer">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
|
||||||
<link rel="shortcut icon" href="<%=settings.faviconPad%>">
|
<link rel="shortcut icon" href="<%=settings.faviconPad%>">
|
||||||
|
|
||||||
<% e.begin_block("styles"); %>
|
<% e.begin_block("styles"); %>
|
||||||
<link href="../static/css/pad.css" rel="stylesheet">
|
<link href="../static/css/pad.css" rel="stylesheet">
|
||||||
|
|
||||||
<% e.begin_block("customStyles"); %>
|
<% e.begin_block("customStyles"); %>
|
||||||
<link href="../static/skins/<%=encodeURI(settings.skinName)%>/pad.css" rel="stylesheet">
|
<link href="../static/skins/<%=encodeURI(settings.skinName)%>/pad.css" rel="stylesheet">
|
||||||
<% e.end_block(); %>
|
<% e.end_block(); %>
|
||||||
|
|
||||||
<style title="dynamicsyntax"></style>
|
<style title="dynamicsyntax"></style>
|
||||||
<% e.end_block(); %>
|
<% e.end_block(); %>
|
||||||
|
|
||||||
<link rel="localizations" type="application/l10n+json" href="../locales.json" />
|
<link rel="localizations" type="application/l10n+json" href="../locales.json" />
|
||||||
<script type="text/javascript" src="../static/js/html10n.js"></script>
|
<script type="text/javascript" src="../static/js/html10n.js"></script>
|
||||||
<script type="text/javascript" src="../static/js/l10n.js"></script>
|
<script type="text/javascript" src="../static/js/l10n.js"></script>
|
||||||
|
|
||||||
<!-- head and body had been removed intentionally -->
|
<!-- head and body had been removed intentionally -->
|
||||||
|
|
||||||
<% e.begin_block("body"); %>
|
<% e.begin_block("body"); %>
|
||||||
<div id="editbar" class="toolbar" title="Toolbar (Alt F9)">
|
|
||||||
<div id="overlay">
|
|
||||||
<div id="overlay-inner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="menu_left" role="toolbar">
|
<!----------------------------->
|
||||||
<% e.begin_block("editbarMenuLeft"); %>
|
<!--------- TOOLBAR ----------->
|
||||||
<%- toolbar.menu(settings.toolbar.left, isReadOnly, 'left', 'pad') %>
|
<!----------------------------->
|
||||||
<% e.end_block(); %>
|
<div id="editbar" class="toolbar" title="Toolbar (Alt F9)">
|
||||||
</ul>
|
<div id="toolbar-overlay"></div>
|
||||||
<ul class="menu_right" role="toolbar">
|
|
||||||
<% e.begin_block("editbarMenuRight"); %>
|
<ul class="menu_left" role="toolbar">
|
||||||
<%- toolbar.menu(settings.toolbar.right, isReadOnly, 'right', 'pad') %>
|
<% e.begin_block("editbarMenuLeft"); %>
|
||||||
<% e.end_block(); %>
|
<%- toolbar.menu(settings.toolbar.left, isReadOnly, 'left', 'pad') %>
|
||||||
</ul>
|
<% e.end_block(); %>
|
||||||
|
</ul>
|
||||||
|
<ul class="menu_right" role="toolbar">
|
||||||
|
<% e.begin_block("editbarMenuRight"); %>
|
||||||
|
<%- toolbar.menu(settings.toolbar.right, isReadOnly, 'right', 'pad') %>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<% e.begin_block("afterEditbar"); %><% e.end_block(); %>
|
||||||
|
|
||||||
|
<div id="editorcontainerbox">
|
||||||
|
|
||||||
|
<% e.begin_block("editorContainerBox"); %>
|
||||||
|
|
||||||
|
<!----------------------------->
|
||||||
|
<!--- PAD EDITOR (in iframe) -->
|
||||||
|
<!----------------------------->
|
||||||
|
<div id="editorcontainer" class="editorcontainer"></div>
|
||||||
|
|
||||||
|
<div id="editorloadingbox">
|
||||||
|
<div id="passwordRequired">
|
||||||
|
<p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p>
|
||||||
|
<form class='passForm' method='POST'>
|
||||||
|
<input id='passwordinput' type='password' name='password'><input type='submit' value='Submit'>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<% e.begin_block("afterEditbar"); %><% e.end_block(); %>
|
<div id="permissionDenied">
|
||||||
|
<p data-l10n-id="pad.permissionDenied">You do not have permission to access this pad</p>
|
||||||
|
</div>
|
||||||
|
<div id="wrongPassword">
|
||||||
|
<p data-l10n-id="pad.wrongPassword">Your password was wrong</p>
|
||||||
|
</div>
|
||||||
|
<div id="noCookie">
|
||||||
|
<p data-l10n-id="pad.noCookie">Cookie could not be found. Please allow cookies in your browser!</p>
|
||||||
|
</div>
|
||||||
|
<% e.begin_block("loading"); %>
|
||||||
|
<p data-l10n-id="pad.loading" id="loading">Loading...</p>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
<noscript><strong>Sorry, you have to enable Javascript in order to use this.</strong></noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="users">
|
|
||||||
|
<!------------------------------------------------------------->
|
||||||
|
<!-- SETTINGS POPUP (change font, language, chat parameters) -->
|
||||||
|
<!------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div id="settings" class="popup">
|
||||||
|
<h1 data-l10n-id="pad.settings.padSettings"></h1>
|
||||||
|
<% e.begin_block("mySettings"); %>
|
||||||
|
<h2 data-l10n-id="pad.settings.myView"></h2>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" id="options-stickychat" onClick="chat.stickToScreen();">
|
||||||
|
<label for="options-stickychat" data-l10n-id="pad.settings.stickychat"></label>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" id="options-chatandusers" onClick="chat.chatAndUsers();">
|
||||||
|
<label for="options-chatandusers" data-l10n-id="pad.settings.chatandusers"></label>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" id="options-colorscheck">
|
||||||
|
<label for="options-colorscheck" data-l10n-id="pad.settings.colorcheck"></label>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" id="options-linenoscheck" checked>
|
||||||
|
<label for="options-linenoscheck" data-l10n-id="pad.settings.linenocheck"></label>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" id="options-rtlcheck">
|
||||||
|
<label for="options-rtlcheck" data-l10n-id="pad.settings.rtlcheck"></label>
|
||||||
|
</p>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
|
||||||
|
<% e.begin_block("mySettings.dropdowns"); %>
|
||||||
|
<label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
|
||||||
|
<select id="viewfontmenu">
|
||||||
|
<option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
|
||||||
|
<option value="monospace" data-l10n-id="pad.settings.fontType.monospaced"></option>
|
||||||
|
<option value="montserrat" data-l10n-id="pad.settings.fontType.montserrat"></option>
|
||||||
|
<option value="opendyslexic" data-l10n-id="pad.settings.fontType.opendyslexic"></option>
|
||||||
|
<option value="comicsans" data-l10n-id="pad.settings.fontType.comicsans"></option>
|
||||||
|
<option value="georgia" data-l10n-id="pad.settings.fontType.georgia"></option>
|
||||||
|
<option value="impact" data-l10n-id="pad.settings.fontType.impact"></option>
|
||||||
|
<option value="lucida" data-l10n-id="pad.settings.fontType.lucida"></option>
|
||||||
|
<option value="lucidasans" data-l10n-id="pad.settings.fontType.lucidasans"></option>
|
||||||
|
<option value="palatino" data-l10n-id="pad.settings.fontType.palatino"></option>
|
||||||
|
<option value="robotomono" data-l10n-id="pad.settings.fontType.robotomono"></option>
|
||||||
|
<option value="tahoma" data-l10n-id="pad.settings.fontType.tahoma"></option>
|
||||||
|
<option value="timesnewroman" data-l10n-id="pad.settings.fontType.timesnewroman"></option>
|
||||||
|
<option value="trebuchet" data-l10n-id="pad.settings.fontType.trebuchet"></option>
|
||||||
|
<option value="verdana" data-l10n-id="pad.settings.fontType.verdana"></option>
|
||||||
|
<option value="symbol" data-l10n-id="pad.settings.fontType.symbol"></option>
|
||||||
|
<option value="webdings" data-l10n-id="pad.settings.fontType.webdings"></option>
|
||||||
|
<option value="wingdings" data-l10n-id="pad.settings.fontType.wingdings"></option>
|
||||||
|
<option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
|
||||||
|
<option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label for="languagemenu" data-l10n-id="pad.settings.language">Language:</label>
|
||||||
|
<select id="languagemenu">
|
||||||
|
<% for (lang in langs) { %>
|
||||||
|
<option value="<%=lang%>"><%=langs[lang].nativeName%></option>
|
||||||
|
<% } %>
|
||||||
|
</select>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
|
||||||
|
<h2 data-l10n-id="pad.settings.about">About</h2>
|
||||||
|
<span data-l10n-id="pad.settings.poweredBy">Powered by</span>
|
||||||
|
<a href="http://etherpad.org">Etherpad-lite</a>
|
||||||
|
<% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!------------------------->
|
||||||
|
<!-- IMPORT EXPORT POPUP -->
|
||||||
|
<!------------------------->
|
||||||
|
|
||||||
|
<div id="import_export" class="popup">
|
||||||
|
<h1 data-l10n-id="pad.importExport.import_export"></h1>
|
||||||
|
<div class="acl-write">
|
||||||
|
<% e.begin_block("importColumn"); %>
|
||||||
|
<h2 data-l10n-id="pad.importExport.import"></h2>
|
||||||
|
<div class="importmessage" id="importmessageabiword" data-l10n-id="pad.importExport.abiword.innerHTML"></div><br>
|
||||||
|
<form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data">
|
||||||
|
<div class="importformdiv" id="importformfilediv">
|
||||||
|
<input type="file" name="file" size="10" id="importfileinput">
|
||||||
|
<div class="importmessage" id="importmessagefail"></div>
|
||||||
|
</div>
|
||||||
|
<div id="import"></div>
|
||||||
|
<div class="importmessage" id="importmessagesuccess" data-l10n-id="pad.importExport.importSuccessful"></div>
|
||||||
|
<div class="importformdiv" id="importformsubmitdiv">
|
||||||
|
<span class="nowrap">
|
||||||
|
<input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput">
|
||||||
|
<div alt="" id="importstatusball" class="loadingAnimation" align="top"></div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
</div>
|
||||||
|
<div id="exportColumn">
|
||||||
|
<h2 data-l10n-id="pad.importExport.export"></h2>
|
||||||
|
<% e.begin_block("exportColumn"); %>
|
||||||
|
<a id="exportetherpada" target="_blank" class="exportlink">
|
||||||
|
<div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div>
|
||||||
|
</a>
|
||||||
|
<a id="exporthtmla" target="_blank" class="exportlink">
|
||||||
|
<div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div>
|
||||||
|
</a>
|
||||||
|
<a id="exportplaina" target="_blank" class="exportlink">
|
||||||
|
<div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div>
|
||||||
|
</a>
|
||||||
|
<a id="exportworda" target="_blank" class="exportlink">
|
||||||
|
<div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div>
|
||||||
|
</a>
|
||||||
|
<a id="exportpdfa" target="_blank" class="exportlink">
|
||||||
|
<div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div>
|
||||||
|
</a>
|
||||||
|
<a id="exportopena" target="_blank" class="exportlink">
|
||||||
|
<div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div>
|
||||||
|
</a>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!---------------------------------------------------->
|
||||||
|
<!-- CONNECTIVITY POPUP (when you get disconnected) -->
|
||||||
|
<!---------------------------------------------------->
|
||||||
|
|
||||||
|
<div id="connectivity" class="popup">
|
||||||
|
<% e.begin_block("modals"); %>
|
||||||
|
<div class="connected visible">
|
||||||
|
<h2 data-l10n-id="pad.modals.connected"></h2>
|
||||||
|
</div>
|
||||||
|
<div class="reconnecting">
|
||||||
|
<h1 data-l10n-id="pad.modals.reconnecting"></h1>
|
||||||
|
<p class='loadingAnimation'></p>
|
||||||
|
</div>
|
||||||
|
<div class="userdup">
|
||||||
|
<h1 data-l10n-id="pad.modals.userdup"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.userdup.explanation"></h2>
|
||||||
|
<p id="defaulttext" data-l10n-id="pad.modals.userdup.advice"></p>
|
||||||
|
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
||||||
|
</div>
|
||||||
|
<div class="unauth">
|
||||||
|
<h1 data-l10n-id="pad.modals.unauth"></h1>
|
||||||
|
<p id="defaulttext" data-l10n-id="pad.modals.unauth.explanation"></p>
|
||||||
|
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
||||||
|
</div>
|
||||||
|
<div class="looping">
|
||||||
|
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.looping.explanation"></h2>
|
||||||
|
<p data-l10n-id="pad.modals.looping.cause"></p>
|
||||||
|
</div>
|
||||||
|
<div class="initsocketfail">
|
||||||
|
<h1 data-l10n-id="pad.modals.initsocketfail"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.initsocketfail.explanation"></h2>
|
||||||
|
<p data-l10n-id="pad.modals.initsocketfail.cause"></p>
|
||||||
|
</div>
|
||||||
|
<div class="slowcommit with_reconnect_timer">
|
||||||
|
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.slowcommit.explanation"></h2>
|
||||||
|
<p id="defaulttext" data-l10n-id="pad.modals.slowcommit.cause"></p>
|
||||||
|
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
||||||
|
</div>
|
||||||
|
<div class="badChangeset with_reconnect_timer">
|
||||||
|
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.badChangeset.explanation"></h2>
|
||||||
|
<p id="defaulttext" data-l10n-id="pad.modals.badChangeset.cause"></p>
|
||||||
|
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
||||||
|
</div>
|
||||||
|
<div class="corruptPad">
|
||||||
|
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.corruptPad.explanation"></h2>
|
||||||
|
<p data-l10n-id="pad.modals.corruptPad.cause"></p>
|
||||||
|
</div>
|
||||||
|
<div class="deleted">
|
||||||
|
<h1 data-l10n-id="pad.modals.deleted"></h1>
|
||||||
|
<p data-l10n-id="pad.modals.deleted.explanation"></p>
|
||||||
|
</div>
|
||||||
|
<div class="disconnected with_reconnect_timer">
|
||||||
|
<% e.begin_block("disconnected"); %>
|
||||||
|
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
||||||
|
<h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
|
||||||
|
<p id="defaulttext" data-l10n-id="pad.modals.disconnected.cause"></p>
|
||||||
|
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
</div>
|
||||||
|
<form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
|
||||||
|
<input type="hidden" class="padId" name="padId">
|
||||||
|
<input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
|
||||||
|
<input type="hidden" class="missedChanges" name="missedChanges">
|
||||||
|
</form>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-------------------------------->
|
||||||
|
<!-- EMBED POPUP (Share, embed) -->
|
||||||
|
<!-------------------------------->
|
||||||
|
|
||||||
|
<div id="embed" class="popup">
|
||||||
|
<% e.begin_block("embedPopup"); %>
|
||||||
|
<h1 data-l10n-id="pad.share"></h1>
|
||||||
|
<div id="embedreadonly" class="acl-write">
|
||||||
|
<input type="checkbox" id="readonlyinput">
|
||||||
|
<label for="readonlyinput" data-l10n-id="pad.share.readonly"></label>
|
||||||
|
</div>
|
||||||
|
<div id="linkcode">
|
||||||
|
<h2 data-l10n-id="pad.share.link"></h2>
|
||||||
|
<input id="linkinput" type="text" value="" onclick="this.select()">
|
||||||
|
</div>
|
||||||
|
<div id="embedcode">
|
||||||
|
<h2 data-l10n-id="pad.share.emebdcode"></h2>
|
||||||
|
<input id="embedinput" type="text" value="" onclick="this.select()">
|
||||||
|
</div>
|
||||||
|
<% e.end_block(); %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sticky-container">
|
||||||
|
|
||||||
|
<!---------------------------------------------------------------------->
|
||||||
|
<!-- USERS POPUP (set username, color, see other users names & color) -->
|
||||||
|
<!---------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div id="users" class="popup">
|
||||||
<% e.begin_block("userlist"); %>
|
<% e.begin_block("userlist"); %>
|
||||||
<div id="connectionstatus"></div>
|
<div id="connectionstatus"></div>
|
||||||
<div id="myuser">
|
<div id="myuser">
|
||||||
<div id="mycolorpicker">
|
<div id="mycolorpicker" class="popup">
|
||||||
<div id="colorpicker"></div>
|
<div id="colorpicker"></div>
|
||||||
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
|
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
|
||||||
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
|
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
|
||||||
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
|
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
|
||||||
</div>
|
</div>
|
||||||
<div id="myswatchbox"><div id="myswatch"></div></div>
|
<div id="myswatchbox"><div id="myswatch"></div></div>
|
||||||
<div id="myusernameform"><input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername"></div>
|
<div id="myusernameform">
|
||||||
|
<input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="otherusers" aria-role="document">
|
<div id="otherusers" aria-role="document">
|
||||||
<div id="guestprompts"></div>
|
<div id="guestprompts"></div>
|
||||||
|
|
@ -98,235 +358,10 @@
|
||||||
<% e.end_block(); %>
|
<% e.end_block(); %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="editorcontainerbox">
|
|
||||||
<div id="editorcontainer" class="editorcontainer"></div>
|
|
||||||
<div id="editorloadingbox">
|
|
||||||
<div id="passwordRequired">
|
|
||||||
<p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p>
|
|
||||||
<form class='passForm' method='POST'>
|
|
||||||
<input id='passwordinput' type='password' name='password'><input type='submit' value='Submit'>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div id="permissionDenied">
|
|
||||||
<p data-l10n-id="pad.permissionDenied">You do not have permission to access this pad</p>
|
|
||||||
</div>
|
|
||||||
<div id="wrongPassword">
|
|
||||||
<p data-l10n-id="pad.wrongPassword">Your password was wrong</p>
|
|
||||||
</div>
|
|
||||||
<div id="noCookie">
|
|
||||||
<p data-l10n-id="pad.noCookie">Cookie could not be found. Please allow cookies in your browser!</p>
|
|
||||||
</div>
|
|
||||||
<% e.begin_block("loading"); %>
|
|
||||||
<p data-l10n-id="pad.loading" id="loading">Loading...</p>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
<noscript><strong>Sorry, you have to enable Javascript in order to use this.</strong></noscript>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="settings" class="popup">
|
<!----------------------------->
|
||||||
<h1 data-l10n-id="pad.settings.padSettings"></h1>
|
<!----------- CHAT ------------>
|
||||||
<div class="row">
|
<!----------------------------->
|
||||||
<div class="column">
|
|
||||||
<% e.begin_block("mySettings"); %>
|
|
||||||
<h2 data-l10n-id="pad.settings.myView"></h2>
|
|
||||||
<p>
|
|
||||||
<input type="checkbox" id="options-stickychat" onClick="chat.stickToScreen();">
|
|
||||||
<label for="options-stickychat" data-l10n-id="pad.settings.stickychat"></label>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<input type="checkbox" id="options-chatandusers" onClick="chat.chatAndUsers();">
|
|
||||||
<label for="options-chatandusers" data-l10n-id="pad.settings.chatandusers"></label>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<input type="checkbox" id="options-colorscheck">
|
|
||||||
<label for="options-colorscheck" data-l10n-id="pad.settings.colorcheck"></label>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<input type="checkbox" id="options-linenoscheck" checked>
|
|
||||||
<label for="options-linenoscheck" data-l10n-id="pad.settings.linenocheck"></label>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<input type="checkbox" id="options-rtlcheck">
|
|
||||||
<label for="options-rtlcheck" data-l10n-id="pad.settings.rtlcheck"></label>
|
|
||||||
</p>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
<table>
|
|
||||||
<% e.begin_block("mySettings.dropdowns"); %>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<select id="viewfontmenu">
|
|
||||||
<option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
|
|
||||||
<option value="monospace" data-l10n-id="pad.settings.fontType.monospaced"></option>
|
|
||||||
<option value="montserrat" data-l10n-id="pad.settings.fontType.montserrat"></option>
|
|
||||||
<option value="opendyslexic" data-l10n-id="pad.settings.fontType.opendyslexic"></option>
|
|
||||||
<option value="comicsans" data-l10n-id="pad.settings.fontType.comicsans"></option>
|
|
||||||
<option value="georgia" data-l10n-id="pad.settings.fontType.georgia"></option>
|
|
||||||
<option value="impact" data-l10n-id="pad.settings.fontType.impact"></option>
|
|
||||||
<option value="lucida" data-l10n-id="pad.settings.fontType.lucida"></option>
|
|
||||||
<option value="lucidasans" data-l10n-id="pad.settings.fontType.lucidasans"></option>
|
|
||||||
<option value="palatino" data-l10n-id="pad.settings.fontType.palatino"></option>
|
|
||||||
<option value="robotomono" data-l10n-id="pad.settings.fontType.robotomono"></option>
|
|
||||||
<option value="tahoma" data-l10n-id="pad.settings.fontType.tahoma"></option>
|
|
||||||
<option value="timesnewroman" data-l10n-id="pad.settings.fontType.timesnewroman"></option>
|
|
||||||
<option value="trebuchet" data-l10n-id="pad.settings.fontType.trebuchet"></option>
|
|
||||||
<option value="verdana" data-l10n-id="pad.settings.fontType.verdana"></option>
|
|
||||||
<option value="symbol" data-l10n-id="pad.settings.fontType.symbol"></option>
|
|
||||||
<option value="webdings" data-l10n-id="pad.settings.fontType.webdings"></option>
|
|
||||||
<option value="wingdings" data-l10n-id="pad.settings.fontType.wingdings"></option>
|
|
||||||
<option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
|
|
||||||
<option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<label for="languagemenu" data-l10n-id="pad.settings.language">Language:</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<select id="languagemenu">
|
|
||||||
<% for (lang in langs) { %>
|
|
||||||
<option value="<%=lang%>"><%=langs[lang].nativeName%></option>
|
|
||||||
<% } %>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<h2 data-l10n-id="pad.settings.about">About</h2>
|
|
||||||
<span data-l10n-id="pad.settings.poweredBy">Powered by</span>
|
|
||||||
<a href="http://etherpad.org">Etherpad-lite</a>
|
|
||||||
<% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="import_export" class="popup">
|
|
||||||
<h1 data-l10n-id="pad.importExport.import_export"></h1>
|
|
||||||
<div class="column acl-write">
|
|
||||||
<% e.begin_block("importColumn"); %>
|
|
||||||
<h2 data-l10n-id="pad.importExport.import"></h2>
|
|
||||||
<div class="importmessage" id="importmessageabiword" data-l10n-id="pad.importExport.abiword.innerHTML"></div><br>
|
|
||||||
<form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data">
|
|
||||||
<div class="importformdiv" id="importformfilediv">
|
|
||||||
<input type="file" name="file" size="10" id="importfileinput">
|
|
||||||
<div class="importmessage" id="importmessagefail"></div>
|
|
||||||
</div>
|
|
||||||
<div id="import"></div>
|
|
||||||
<div class="importmessage" id="importmessagesuccess" data-l10n-id="pad.importExport.importSuccessful"></div>
|
|
||||||
<div class="importformdiv" id="importformsubmitdiv">
|
|
||||||
<span class="nowrap">
|
|
||||||
<input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput">
|
|
||||||
<div alt="" id="importstatusball" class="loadingAnimation" align="top"></div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
</div>
|
|
||||||
<div class="column" id="exportColumn">
|
|
||||||
<h2 data-l10n-id="pad.importExport.export"></h2>
|
|
||||||
<% e.begin_block("exportColumn"); %>
|
|
||||||
<a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
|
|
||||||
<a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div></a>
|
|
||||||
<a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div></a>
|
|
||||||
<a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div></a>
|
|
||||||
<a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
|
|
||||||
<a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="connectivity" class="popup">
|
|
||||||
<% e.begin_block("modals"); %>
|
|
||||||
<div class="connected visible">
|
|
||||||
<h2 data-l10n-id="pad.modals.connected"></h2>
|
|
||||||
</div>
|
|
||||||
<div class="reconnecting">
|
|
||||||
<h1 data-l10n-id="pad.modals.reconnecting"></h1>
|
|
||||||
<p class='loadingAnimation'></p>
|
|
||||||
</div>
|
|
||||||
<div class="userdup">
|
|
||||||
<h1 data-l10n-id="pad.modals.userdup"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.userdup.explanation"></h2>
|
|
||||||
<p id="defaulttext" data-l10n-id="pad.modals.userdup.advice"></p>
|
|
||||||
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
|
||||||
</div>
|
|
||||||
<div class="unauth">
|
|
||||||
<h1 data-l10n-id="pad.modals.unauth"></h1>
|
|
||||||
<p id="defaulttext" data-l10n-id="pad.modals.unauth.explanation"></p>
|
|
||||||
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
|
||||||
</div>
|
|
||||||
<div class="looping">
|
|
||||||
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.looping.explanation"></h2>
|
|
||||||
<p data-l10n-id="pad.modals.looping.cause"></p>
|
|
||||||
</div>
|
|
||||||
<div class="initsocketfail">
|
|
||||||
<h1 data-l10n-id="pad.modals.initsocketfail"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.initsocketfail.explanation"></h2>
|
|
||||||
<p data-l10n-id="pad.modals.initsocketfail.cause"></p>
|
|
||||||
</div>
|
|
||||||
<div class="slowcommit with_reconnect_timer">
|
|
||||||
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.slowcommit.explanation"></h2>
|
|
||||||
<p id="defaulttext" data-l10n-id="pad.modals.slowcommit.cause"></p>
|
|
||||||
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
|
||||||
</div>
|
|
||||||
<div class="badChangeset with_reconnect_timer">
|
|
||||||
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.badChangeset.explanation"></h2>
|
|
||||||
<p id="defaulttext" data-l10n-id="pad.modals.badChangeset.cause"></p>
|
|
||||||
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
|
||||||
</div>
|
|
||||||
<div class="corruptPad">
|
|
||||||
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.corruptPad.explanation"></h2>
|
|
||||||
<p data-l10n-id="pad.modals.corruptPad.cause"></p>
|
|
||||||
</div>
|
|
||||||
<div class="deleted">
|
|
||||||
<h1 data-l10n-id="pad.modals.deleted"></h1>
|
|
||||||
<p data-l10n-id="pad.modals.deleted.explanation"></p>
|
|
||||||
</div>
|
|
||||||
<div class="disconnected with_reconnect_timer">
|
|
||||||
<% e.begin_block("disconnected"); %>
|
|
||||||
<h1 data-l10n-id="pad.modals.disconnected"></h1>
|
|
||||||
<h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
|
|
||||||
<p id="defaulttext" data-l10n-id="pad.modals.disconnected.cause"></p>
|
|
||||||
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
</div>
|
|
||||||
<form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
|
|
||||||
<input type="hidden" class="padId" name="padId">
|
|
||||||
<input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
|
|
||||||
<input type="hidden" class="missedChanges" name="missedChanges">
|
|
||||||
</form>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="embed" class="popup">
|
|
||||||
<% e.begin_block("embedPopup"); %>
|
|
||||||
<div id="embedreadonly" class="right acl-write">
|
|
||||||
<input type="checkbox" id="readonlyinput">
|
|
||||||
<label for="readonlyinput" data-l10n-id="pad.share.readonly"></label>
|
|
||||||
</div>
|
|
||||||
<h1 data-l10n-id="pad.share"></h1>
|
|
||||||
<div id="linkcode">
|
|
||||||
<h2 data-l10n-id="pad.share.link"></h2>
|
|
||||||
<input id="linkinput" type="text" value="" onclick="this.select()">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div id="embedcode">
|
|
||||||
<h2 data-l10n-id="pad.share.emebdcode"></h2>
|
|
||||||
<input id="embedinput" type="text" value="" onclick="this.select()">
|
|
||||||
</div>
|
|
||||||
<% e.end_block(); %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="chaticon" onclick="chat.show();return false;" title="Chat (Alt C)">
|
<div id="chaticon" onclick="chat.show();return false;" title="Chat (Alt C)">
|
||||||
<span id="chatlabel" data-l10n-id="pad.chat"></span>
|
<span id="chatlabel" data-l10n-id="pad.chat"></span>
|
||||||
|
|
@ -335,9 +370,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chatbox">
|
<div id="chatbox">
|
||||||
<div id="titlebar"><span id ="titlelabel" data-l10n-id="pad.chat"></span>
|
<div id="titlebar">
|
||||||
<a id="titlecross" onClick="chat.hide();return false;">- </a>
|
<span id ="titlelabel" data-l10n-id="pad.chat"></span>
|
||||||
<a id="titlesticky" onClick="chat.stickToScreen(true);$('#options-stickychat').prop('checked', true);return false;" data-l10n-id="pad.chat.stick.title">█ </a>
|
<a id="titlecross" class="hide-reduce-btn" onClick="chat.hide();return false;">- </a>
|
||||||
|
<a id="titlesticky" class="stick-to-screen-btn" onClick="chat.stickToScreen(true);return false;" data-l10n-id="pad.chat.stick.title">█ </a>
|
||||||
</div>
|
</div>
|
||||||
<div id="chattext" class="authorColors" aria-live="polite" aria-relevant="additions removals text" role="log" aria-atomic="false">
|
<div id="chattext" class="authorColors" aria-live="polite" aria-relevant="additions removals text" role="log" aria-atomic="false">
|
||||||
<div alt="loading.." id="chatloadmessagesball" class="chatloadmessages loadingAnimation" align="top"></div>
|
<div alt="loading.." id="chatloadmessagesball" class="chatloadmessages loadingAnimation" align="top"></div>
|
||||||
|
|
@ -349,88 +385,96 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<% e.end_block(); %>
|
<% e.end_block(); %>
|
||||||
|
|
||||||
<% e.end_block(); %>
|
</div> <!-- End of #editorcontainerbox -->
|
||||||
|
|
||||||
<% e.begin_block("scripts"); %>
|
<% e.end_block(); %>
|
||||||
|
|
||||||
<script type="text/javascript" src="../static/js/require-kernel.js"></script>
|
|
||||||
|
|
||||||
<!-- Include pad_utils manually -->
|
<!----------------------------->
|
||||||
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/pad_utils.js?callback=require.define"></script>
|
<!-------- JAVASCRIPT --------->
|
||||||
|
<!----------------------------->
|
||||||
|
|
||||||
<script type="text/javascript">
|
<% e.begin_block("scripts"); %>
|
||||||
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
|
|
||||||
(function() {
|
|
||||||
// Display errors on page load to the user
|
|
||||||
// (Gets overridden by padutils.setupGlobalExceptionHandler)
|
|
||||||
var originalHandler = window.onerror;
|
|
||||||
window.onerror = function(msg, url, line) {
|
|
||||||
var box = document.getElementById('editorloadingbox');
|
|
||||||
box.innerHTML = '<p><b>An error occurred while loading the pad</b></p>'
|
|
||||||
+ '<p><b>'+msg+'</b> '
|
|
||||||
+ '<small>in '+ padutils.escapeHTML(url) +' (line '+ line +')</small></p>';
|
|
||||||
// call original error handler
|
|
||||||
if(typeof(originalHandler) == 'function') originalHandler.call(null, arguments);
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
// @license-end
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../socket.io/socket.io.js"></script>
|
<script type="text/javascript" src="../static/js/require-kernel.js"></script>
|
||||||
|
|
||||||
<!-- Include base packages manually (this help with debugging) -->
|
<!-- Include pad_utils manually -->
|
||||||
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define"></script>
|
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/pad_utils.js?callback=require.define"></script>
|
||||||
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define"></script>
|
|
||||||
|
|
||||||
<% e.begin_block("customScripts"); %>
|
<script type="text/javascript">
|
||||||
<script type="text/javascript" src="../static/skins/<%=encodeURI(settings.skinName)%>/pad.js"></script>
|
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
|
||||||
<% e.end_block(); %>
|
(function() {
|
||||||
|
// Display errors on page load to the user
|
||||||
|
// (Gets overridden by padutils.setupGlobalExceptionHandler)
|
||||||
|
var originalHandler = window.onerror;
|
||||||
|
window.onerror = function(msg, url, line) {
|
||||||
|
var box = document.getElementById('editorloadingbox');
|
||||||
|
box.innerHTML = '<p><b>An error occurred while loading the pad</b></p>'
|
||||||
|
+ '<p><b>'+msg+'</b> '
|
||||||
|
+ '<small>in '+ padutils.escapeHTML(url) +' (line '+ line +')</small></p>';
|
||||||
|
// call original error handler
|
||||||
|
if(typeof(originalHandler) == 'function') originalHandler.call(null, arguments);
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
// @license-end
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- Bootstrap page -->
|
<script type="text/javascript" src="../socket.io/socket.io.js"></script>
|
||||||
<script type="text/javascript">
|
|
||||||
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
|
|
||||||
var clientVars = {};
|
|
||||||
(function () {
|
|
||||||
var pathComponents = location.pathname.split('/');
|
|
||||||
|
|
||||||
// Strip 'p' and the padname from the pathname and set as baseURL
|
<!-- Include base packages manually (this help with debugging) -->
|
||||||
var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/';
|
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define"></script>
|
||||||
|
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define"></script>
|
||||||
|
|
||||||
require.setRootURI(baseURL + "javascripts/src");
|
<% e.begin_block("customScripts"); %>
|
||||||
require.setLibraryURI(baseURL + "javascripts/lib");
|
<script type="text/javascript" src="../static/skins/<%=encodeURI(settings.skinName)%>/pad.js"></script>
|
||||||
require.setGlobalKeyPath("require");
|
<% e.end_block(); %>
|
||||||
|
|
||||||
$ = jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery; // Expose jQuery #HACK
|
<!-- Bootstrap page -->
|
||||||
browser = require('ep_etherpad-lite/static/js/browser');
|
<script type="text/javascript">
|
||||||
|
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
|
||||||
|
var clientVars = {};
|
||||||
|
(function () {
|
||||||
|
var pathComponents = location.pathname.split('/');
|
||||||
|
|
||||||
var plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
|
// Strip 'p' and the padname from the pathname and set as baseURL
|
||||||
var hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks');
|
var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/';
|
||||||
|
|
||||||
plugins.baseURL = baseURL;
|
require.setRootURI(baseURL + "javascripts/src");
|
||||||
plugins.update(function () {
|
require.setLibraryURI(baseURL + "javascripts/lib");
|
||||||
hooks.plugins = plugins;
|
require.setGlobalKeyPath("require");
|
||||||
|
|
||||||
// Call documentReady hook
|
$ = jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery; // Expose jQuery #HACK
|
||||||
$(function() {
|
browser = require('ep_etherpad-lite/static/js/browser');
|
||||||
hooks.aCallAll('documentReady');
|
|
||||||
});
|
|
||||||
|
|
||||||
var pad = require('ep_etherpad-lite/static/js/pad');
|
var plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
|
||||||
pad.baseURL = baseURL;
|
var hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks');
|
||||||
pad.init();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* TODO: These globals shouldn't exist. */
|
plugins.baseURL = baseURL;
|
||||||
pad = require('ep_etherpad-lite/static/js/pad').pad;
|
plugins.update(function () {
|
||||||
chat = require('ep_etherpad-lite/static/js/chat').chat;
|
hooks.plugins = plugins;
|
||||||
padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
|
|
||||||
padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
|
// Call documentReady hook
|
||||||
}());
|
$(function() {
|
||||||
// @license-end
|
hooks.aCallAll('documentReady');
|
||||||
</script>
|
});
|
||||||
<div style="display:none"><a href="/javascript" data-jslicense="1">JavaScript license information</a></div>
|
|
||||||
<% e.end_block(); %>
|
var pad = require('ep_etherpad-lite/static/js/pad');
|
||||||
|
pad.baseURL = baseURL;
|
||||||
|
pad.init();
|
||||||
|
});
|
||||||
|
|
||||||
|
/* TODO: These globals shouldn't exist. */
|
||||||
|
pad = require('ep_etherpad-lite/static/js/pad').pad;
|
||||||
|
chat = require('ep_etherpad-lite/static/js/chat').chat;
|
||||||
|
padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
|
||||||
|
padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
|
||||||
|
}());
|
||||||
|
// @license-end
|
||||||
|
</script>
|
||||||
|
<div style="display:none"><a href="/javascript" data-jslicense="1">JavaScript license information</a></div>
|
||||||
|
<% e.end_block(); %>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue