From 57075d15453331cd1ff6ad1175cb67bd7852d4d2 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 26 Jan 2012 17:22:44 +0100 Subject: [PATCH] Beautified html, sticky chat, dynamic inputs, beautified qr-code, fixed chat bug --- node/utils/tar.json | 2 + static/css/pad.css | 87 +++--- static/index.html | 19 +- static/js/chat.js | 33 ++- static/js/pad_editbar.js | 9 +- static/js/pad_editor.js | 9 +- static/js/pad_utils.js | 20 +- static/pad.html | 613 ++++++++++++++++++--------------------- 8 files changed, 371 insertions(+), 421 deletions(-) diff --git a/node/utils/tar.json b/node/utils/tar.json index 92883bb7..fd285b94 100644 --- a/node/utils/tar.json +++ b/node/utils/tar.json @@ -1,6 +1,7 @@ { "pad.js": [ "jquery.js" + , "ace2_common.js" , "pad_utils.js" , "plugins.js" , "undo-xpopup.js" @@ -29,6 +30,7 @@ , "json2.js" , "colorutils.js" , "draggable.js" + , "ace2_common.js" , "pad_utils.js" , "pad_cookie.js" , "pad_editor.js" diff --git a/static/css/pad.css b/static/css/pad.css index 41ef7590..88775fa2 100644 --- a/static/css/pad.css +++ b/static/css/pad.css @@ -1,13 +1,13 @@ *,html,body,p{ margin: 0; padding: 0; } .clear { clear: both; } -html { font-size: 62.5%; } +html { font-size: 62.5%; width: 100%; } body, textarea { font-family: Helvetica, Arial, sans-serif; } iframe {position:absolute;} #users { position: absolute; - z-index: 10; + z-index:500; background-color: #000; background-color: rgba(0,0,0,0.7); width: 160px; @@ -560,28 +560,6 @@ table#otheruserstable { display: none; } display: none; z-index: 55; } #revision-notifier .label { color: #777; font-weight: bold; } -/* We don't ever actually hide the wrapper, even when the panel is - cloased, so that its contents can always be manipulated accurately. */ - - -#padoptions { position: absolute; top: 0; left: 0; font-size: 1.2em; - color: #444; height: 100%; width: 100%; line-height: 15px; } -#options-viewhead { font-weight: bold; position: absolute; top: 10px; left: 15px; - width: auto; height: auto; } -#padoptions label { display: block; } -#padoptions input { padding: 0; margin: 0; } -#options-colorscheck { position: absolute; left: 15px; top: 34px; width: 15px; height: 15px; } -#options-colorslabel { position: absolute; left: 35px; top: 34px; } -#options-linenoscheck { position: absolute; left: 15px; top: 57px; width: 15px; height: 15px; } -#options-linenoslabel { position: absolute; left: 35px; top: 57px; } -#options-fontlabel { position: absolute; left: 15px; top: 82px; } -#viewfontmenu { position: absolute; top: 80px; left: 90px; width: 110px; } -#options-viewexplain { position: absolute; left: 215px; top: 15px; width: 100px; height: 70px; font-size: .7em; - padding-left: 10px; padding-top: 10px; border-left: 1px solid #ccc; - line-height: 20px; font-weight: bold; color: #999; } -#options-close { display: block; position: absolute; right: 7px; bottom: 8px; - width: auto; height: auto; font-size: 85%; color: #444; } - #mainmodals { z-index: 600; /* higher than the modals themselves so that modals are on top in IE */ } .modalfield { font-size: 1.2em; padding: 1px; border: 1px solid #bbb;} @@ -763,7 +741,26 @@ a#topbarmaximize { width: 100%; } -#embed, #readonly { +#settingsmenu { + position:absolute; + top:40px; + right:20px; + width:400px; + z-index:500; + padding:10px; + border-radius:6px; + background:black; + background:rgba(0, 0, 0, 0.7); + color: #fff; + font-size:14px; + display:none; +} +#settingsmenu p { + margin: 5px 0; +} + + +#embed { display:none; position:absolute; top:40px; @@ -780,20 +777,17 @@ padding: 10px; border-radius: 6px; } -#embedreadonly { +.right { float:right; } -#embedcode, #readonlyUrl, #linkcode { -margin-left:10px; -} - -#embedinput, #readonlyInput, #linkinput { -width:375px; -height:24px; -display:inline; +#embed input[type=text] { +width: 100%; +padding: 5px; +box-sizing: border-box; +-moz-box-sizing: border-box; +display:block; margin-top: 10px; -padding-left:4px; } ul#colorpickerswatches @@ -850,6 +844,7 @@ ul#colorpickerswatches li:hover left:0px; top:25px; bottom:25px; + z-index:1002; } #chattext p @@ -1006,7 +1001,7 @@ position: relative; #import{ position:absolute; - width:250px; + width:240px; left:10px; line-height:20px; } @@ -1019,7 +1014,7 @@ position: relative; } .exporttype{ - line-height:20px; + margin-top: 2px; background-repeat:no-repeat; padding-left:25px; background-image: url("../../static/img/etherpad_lite_icons.png"); @@ -1028,8 +1023,8 @@ position: relative; } #importexportline{ - border: dotted 1px; - height: 185px; + border-left: 1px solid #fff; + height: 190px; position:absolute; width:0px; left:260px; @@ -1149,14 +1144,22 @@ label[for=readonlyinput] { margin: 0 10px 0 2px; } - #qr_center { margin: 10px 10px auto 0; text-align: center; } -#qrcode{ - margin-left:10px; +#embedreadonlyqr { + box-shadow: 0 0 10px #000; + border-radius: 3px; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; +} + +#embedreadonlyqr:hover { + cursor: none; + -moz-transform: scale(1.5); + -webkit-transform: scale(1.5); } @media screen and (max-width: 960px) { diff --git a/static/index.html b/static/index.html index 1e186163..fe38318b 100644 --- a/static/index.html +++ b/static/index.html @@ -1,8 +1,11 @@ - - - Etherpad Lite + + + Etherpad Lite + + + + +
New Pad

or create/open a Pad with the name
- +
-
+ + + + diff --git a/static/js/chat.js b/static/js/chat.js index e2ecfb27..6d071137 100644 --- a/static/js/chat.js +++ b/static/js/chat.js @@ -21,18 +21,17 @@ */ var padutils = require('/pad_utils').padutils; +var browser = require('/ace2_common').browser; var chat = (function() { var isStuck = false; - var bottomMargin = "0px"; var sDuration = 500; var hDuration = 750; var chatMentions = 0; var title = document.title; - if ($.browser.mobile){ - sDuration = 0; - hDuration = 0; + if (browser.mobile){ + sDuration = hDuration = 0; } var self = { show: function () @@ -57,11 +56,12 @@ var chat = (function() { $("#focusprotector").hide(); - if($.browser.mobile) - bottommargin = "32px"; - - $("#chatbox").css({right: "20px", bottom: bottomMargin, left: "", top: ""}); - + if(browser.mobile) { + $("#chatbox").css({right: "0px", bottom: "32px", left: "", top: ""}); + } else { + $("#chatbox").css({right: "20px", bottom: "0px", left: "", top: ""}); + } + self.scrollDown(); } }); @@ -73,18 +73,18 @@ var chat = (function() { console.log(isStuck); chat.show(); - if(!isStuck){ // Stick it to - $('#chatbox').css({"right":"0px", "top":"35px", "border-radius":"0px", "height":"auto"}); + if(!isStuck) { // Stick it to + $('#chatbox').css({"right":"0px", "top":"36px", "border-radius":"0px", "height":"auto", "border-right":"none", "border-left":"1px solid #ccc", "border-top":"none", "background-color":"#f1f1f1"}); + $('#chattext').css({"top":"0px"}); $('#editorcontainer').css({"right":"170px", "width":"auto"}); isStuck = true; - } - else{ // Unstick it - $('#chatbox').css({"right":"20px", "top":"auto", "border-top-left-radius":"5px", "border-top-right-radius":"5px", "height":"200px"}); + } else { // Unstick it + $('#chatbox').css({"right":"20px", "top":"auto", "border-top-left-radius":"5px", "border-top-right-radius":"5px", "border-right":"1px solid #999", "height":"200px", "border-top":"1px solid #999", "background-color":"#f7f7f7"}); + $('#chattext').css({"top":"25px"}); $('#editorcontainer').css({"right":"0px", "width":"100%"}); isStuck = false; } - } - , + }, hide: function () { $("#chatcounter").text("0"); @@ -194,3 +194,4 @@ var chat = (function() }()); exports.chat = chat; + diff --git a/static/js/pad_editbar.js b/static/js/pad_editbar.js index d542b05d..e6ff9adf 100644 --- a/static/js/pad_editbar.js +++ b/static/js/pad_editbar.js @@ -108,17 +108,20 @@ var padeditbar = (function() { self.toogleDropDown("users"); } + else if (cmd == 'settings') + { + self.toogleDropDown("settingsmenu"); + } else if (cmd == 'embed') { self.setEmbedLinks(); - $('#embedinput').focus().select(); + $('#linkinput').focus().select(); self.toogleDropDown("embed"); } else if (cmd == 'import_export') { self.toogleDropDown("importexport"); } - else if (cmd == 'save') { padsavedrevs.saveNow(); @@ -165,7 +168,7 @@ var padeditbar = (function() }, toogleDropDown: function(moduleName) { - var modules = ["embed", "users", "readonly", "importexport"]; + var modules = ["embed", "users", "readonly", "importexport", "settingsmenu"]; //hide all modules if(moduleName == "none") diff --git a/static/js/pad_editor.js b/static/js/pad_editor.js index bb775e95..e7be8175 100644 --- a/static/js/pad_editor.js +++ b/static/js/pad_editor.js @@ -87,6 +87,11 @@ var padeditor = (function() if (value == "false") return false; return defaultValue; } + + self.ace.setProperty("showsauthorcolors", settings.noColors); + + self.ace.setProperty("rtlIsTrue", settings.rtlIsTrue); + var v; v = getOption('showLineNumbers', true); @@ -100,10 +105,6 @@ var padeditor = (function() v = getOption('useMonospaceFont', false); self.ace.setProperty("textface", (v ? "monospace" : "Arial, sans-serif")); $("#viewfontmenu").val(v ? "monospace" : "normal"); - - self.ace.setProperty("showsauthorcolors", settings.noColors); - - self.ace.setProperty("rtlIsTrue", settings.rtlIsTrue); }, initViewZoom: function() { diff --git a/static/js/pad_utils.js b/static/js/pad_utils.js index aa469d87..8583ca9e 100644 --- a/static/js/pad_utils.js +++ b/static/js/pad_utils.js @@ -110,24 +110,6 @@ var padutils = { var x = ua.split(' ')[0]; return clean(x); }, - // "func" is a function over 0..(numItems-1) that is monotonically - // "increasing" with index (false, then true). Finds the boundary - // between false and true, a number between 0 and numItems inclusive. - binarySearch: function(numItems, func) - { - if (numItems < 1) return 0; - if (func(0)) return 0; - if (!func(numItems - 1)) return numItems; - var low = 0; // func(low) is always false - var high = numItems - 1; // func(high) is always true - while ((high - low) > 1) - { - var x = Math.floor((low + high) / 2); // x != low, x != high - if (func(x)) high = x; - else low = x; - } - return high; - }, // e.g. "Thu Jun 18 2009 13:09" simpleDateTime: function(date) { @@ -489,4 +471,6 @@ window.onerror = function test (msg, url, linenumber) return false; }; +padutils.binarySearch = require('/ace2_common').binarySearch; + exports.padutils = padutils; diff --git a/static/pad.html b/static/pad.html index 4b4b4226..3a5d01a3 100644 --- a/static/pad.html +++ b/static/pad.html @@ -1,350 +1,299 @@ - - - - - Etherpad Lite - - - - - - - - - - - - + - + Etherpad Lite -
+ + + - + + + - +
+ + +
-
+
+
+
+
+
+ Save + Cancel + +
+
+
+
+
+
+
+ + +
+
+
+
+
-
-
- -
+
+
+
Loading...
+
-
- -
-
- - - Save - - - Cancel - - -
+
+

Pad settings

+

Global

+

These options affect everyone viewing this pad. [BETA]

+

+ Authorship colors +

+

+ Line numbers +

+

+ Used font for this pad: + +

+

Local

+

+ Sticky chat +

+
-
-
-
-
- -
-
- - - - - -
-
- -
-
-
- -
- -
- -
- - - - +
+
+ Read only +
+

Share this pad

+
+ +
+
+
+ +
+
+
+
+
+
+
-
+
-
- -
-
- Loading... -
+
+ + Chat +
+ + 0 +
-
+
+
Chat- 
+
+
+
+ +
+
+
- -
+
 
-
- Import from text file, HTML, PDF, Word, ODT or RTF:

-
-
- -
-
-
Successful!
-
- - - - - - -
-
-
+
+
+
+ +
+
+
+
Connecting...
+
Reestablishing connection...
+
+

Disconnected.

+

Opened in another window.

+

No Authorization.

+
+

We're having trouble talking to the EtherPad lite synchronization server. You may be connecting through an incompatible firewall or proxy server.

+
+
+

We were unable to connect to the EtherPad lite synchronization server. This may be due to an incompatibility with your web browser or internet connection.

+
+
+

You seem to have opened this pad in another browser window. If you'd like to use this window instead, you can reconnect.

+
+
+

Lost connection with the EtherPad lite synchronization server. This may be due to a loss of network connectivity.

+
+
+

Server not responding. This may be due to network connectivity issues or high load on the server.

+
+
+

Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.

+
+
+

This pad was deleted.

+
+
+

If this continues to happen, please let us know

+
+
+ +
+
+
+ +
+ +
-
- -
- Export current pad as: -
HTML
 -
Plain text
 -
Microsoft Word
 -
PDF
 -
OpenDocument
 -
DokuWiki text
 -
Wordle
 -
-
-
-
-
- - -
-
- -
- Share: -
-
- -

-
- -

-
-
-
-
-
- -
- -
- -
- - Chat -
- -0 -
- -
-
Chat- 
-
-
-
- -
-
-
- -
 
- - -
-
- - -
-
-
-
-
-
- Connecting... -
-
- Reestablishing connection... -
-
-

Disconnected.

-

Opened in another window.

-

No Authorization.

-
-

- We're having trouble talking to the EtherPad lite synchronization server. - You may be connecting through an incompatible firewall or proxy server. -

-
-
-

- We were unable to connect to the EtherPad lite synchronization server. - This may be due to an incompatibility with your web browser or internet connection. -

-
-
-

- You seem to have opened this pad in another browser window. - If you'd like to use this window instead, you can reconnect. -

-
-
-

- Lost connection with the EtherPad lite synchronization server. This may be due to a loss of network connectivity. -

-
-
-

- Server not responding. This may be due to network connectivity issues or high load on the server. -

-
-
-

- Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting. -

-
-
-

- This pad was deleted. -

-
-
-

- If this continues to happen, please let us know -

-
-
- -
-
-
- - - - - - + +