diff --git a/static/css/pad_lite.css b/static/css/pad_lite.css index 00952b09..e232ec85 100644 --- a/static/css/pad_lite.css +++ b/static/css/pad_lite.css @@ -1,3 +1,6 @@ +/* @override + http://localhost:9001/static/css/pad_lite.css */ + *,html.body,p { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; margin: 0; padding: 0; } @@ -337,58 +340,12 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } background: url(/static/img/jun09/pad/colorpicker.gif) no-repeat left top; width: 232px; height: 140px; position: absolute; - left: 13px; top: 13px; z-index: 101; + left: 10px; top: 18px; z-index: 101; display: none;/*...initially*/ } -#mycolorpicker .n1 { left: 13px; } -#mycolorpicker .n2 { left: 40px; } -#mycolorpicker .n3 { left: 67px; } -#mycolorpicker .n4 { left: 94px; } -#mycolorpicker .n5 { left: 121px; } -#mycolorpicker .n6 { left: 148px; } -#mycolorpicker .n7 { left: 175px; } -#mycolorpicker .n8 { left: 202px; } -#mycolorpicker .n9 { left: 13px; top: 34px ! important;} -#mycolorpicker .n10 { left: 40px; top: 34px ! important;} -#mycolorpicker .n11 { left: 67px; top: 34px ! important;} -#mycolorpicker .n12 { left: 94px; top: 34px ! important;} -#mycolorpicker .n13 { left: 121px; top: 34px ! important;} -#mycolorpicker .n14 { left: 148px; top: 34px ! important;} -#mycolorpicker .n15 { left: 175px; top: 34px ! important;} -#mycolorpicker .n16 { left: 202px; top: 34px ! important;} +#mycolorpicker .picked { border: 1px solid #fff !important; } -#mycolorpicker .n17 { left: 13px; top: 56px ! important;} -#mycolorpicker .n18 { left: 40px; top: 56px ! important;} -#mycolorpicker .n19 { left: 67px; top: 56px ! important;} -#mycolorpicker .n20 { left: 94px; top: 56px ! important;} -#mycolorpicker .n21 { left: 121px; top: 56px ! important;} -#mycolorpicker .n22 { left: 148px; top: 56px ! important;} -#mycolorpicker .n23 { left: 175px; top: 56px ! important;} -#mycolorpicker .n24 { left: 202px; top: 56px ! important;} - -#mycolorpicker .n25 { left: 13px; top: 78px ! important;} -#mycolorpicker .n26 { left: 40px; top: 78px ! important;} -#mycolorpicker .n27 { left: 67px; top: 78px ! important;} -#mycolorpicker .n28 { left: 94px; top: 78px ! important;} -#mycolorpicker .n29 { left: 121px; top: 78px ! important;} -#mycolorpicker .n30 { left: 148px; top: 78px ! important;} -#mycolorpicker .n31 { left: 175px; top: 78px ! important;} -#mycolorpicker .n32 { left: 202px; top: 78px ! important;} - -#mycolorpicker .pickerswatchouter { - border: 1px solid white; - width: 15px; height: 15px; position: absolute; - top: 12px; -} -#mycolorpicker .pickerswatch { - border: 1px solid #999; - width: 13px; - height: 13px; - position: absolute; - left: 0; top: 0; -} -#mycolorpicker .picked { border: 1px solid #666 !important; } #mycolorpicker .picked .pickerswatch { border: 1px solid #666; } #mycolorpickersave { position: absolute; left: 14px; top: 102px; width: 47px; height: 0; padding-top: 20px; overflow: hidden; @@ -1073,10 +1030,41 @@ font-size:14px; width:100%; } -#userscont{ -margin-left:6px; -width:90%; -height:30px; +#users ul li +{ +float: left; +list-style: none; +margin-left: 10px; +padding-right: 10px; +border-right: 1px solid #000; +} + +#users ul li a:hover +{ +text-decoration: underline; +cursor: pointer; +} + +ul#colorpickerswatches +{ + padding-left: 3px; + padding-top: 5px; +} + +ul#colorpickerswatches li +{ + border: 1px solid #999; + width: 14px; + height: 14px; + overflow: hidden; + margin: 3px 6px; + padding: 0px; +} + +ul#colorpickerswatches li:hover +{ + border: 1px solid #000; + cursor: pointer; } .user{ diff --git a/static/js/pad_userlist.js b/static/js/pad_userlist.js index 6b36273f..3e2f38b5 100644 --- a/static/js/pad_userlist.js +++ b/static/js/pad_userlist.js @@ -14,41 +14,72 @@ * limitations under the License. */ - var colorPickerOpen = false; +var myUserInfo = {}; - function getColorPickerSwatchIndex(jnode) { - return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1; - } - function closeColorPicker(accept) { - if (accept) { - var newColorId = getColorPickerSwatchIndex($("#mycolorpicker .picked")); - if (newColorId >= 0) { // fails on NaN - myUserInfo.colorId = newColorId; - pad.notifyChangeColor(newColorId); - } +var colorPickerOpen = false; +var colorPickerSetup = false; +var previousColorId = 0; + +function getColorPickerSwatchIndex(jnode) { +// return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1; + return $("#colorpickerswatches li").index(jnode); +} +function closeColorPicker(accept) { + if (accept) { + var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked")); + if (newColorId >= 0) { // fails on NaN + myUserInfo.colorId = newColorId; + pad.notifyChangeColor(newColorId); } - colorPickerOpen = false; - $("#mycolorpicker").css('display', 'none'); - renderMyUserInfo(); + } else { + pad.notifyChangeColor(previousColorId); } + colorPickerOpen = false; + $("#mycolorpicker").css('display', 'none'); + //renderMyUserInfo(); +} +function showColorPicker() { + previousColorId = myUserInfo.colorId ; - function showColorPicker() { - if (! colorPickerOpen) { - var palette = pad.getColorPalette(); + if (! colorPickerOpen) { + var palette = pad.getColorPalette(); + + if(!colorPickerSetup) { + var colorsList = $("#colorpickerswatches") for(var i=0;i', { + style: 'background: '+palette[i]+';' + }); + + li.appendTo(colorsList); + + li.bind('click', function(event){ + $("#colorpickerswatches li").removeClass('picked'); + $(event.target).addClass("picked"); + + var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked")); + pad.notifyChangeColor(newColorId); + }); + + if(myUserInfo.colorId == i){ + $(event.target).addClass("picked"); + } } - $("#mycolorpicker").css('display', 'block'); - colorPickerOpen = true; - renderMyUserInfo(); + + colorPickerSetup = true; } - // this part happens even if color picker is already open - $("#mycolorpicker .pickerswatchouter").removeClass('picked'); - $("#mycolorpicker .pickerswatchouter:eq("+(myUserInfo.colorId||0)+")"). - addClass('picked'); - } + + $("#mycolorpicker").css('display', 'block'); + colorPickerOpen = true; + + $("#colorpickerswatches li").removeClass('picked'); + $($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird + + //paduserlist.renderMyUserInfo(); + } +} var paduserlist = (function() { @@ -311,7 +342,6 @@ var paduserlist = (function() { return self; }()); ////////// rowManager - var myUserInfo = {}; var otherUsersInfo = []; var otherUsersData = []; @@ -604,5 +634,4 @@ var paduserlist = (function() { } }; return self; -}()); - +}()); \ No newline at end of file diff --git a/static/padhtml b/static/padhtml index 518a295e..2b13908c 100644 --- a/static/padhtml +++ b/static/padhtml @@ -2,17 +2,16 @@ "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - - - - - Etherpad Lite v0.0.1: test - - - - - - @@ -22,7 +21,7 @@ var clientVars = {}; // ]]> - + @@ -41,205 +40,226 @@ var clientVars = {}; // ]]> - - - -
-
- -
+ + +
-
- -
- -
- -
- +
- - - - - - - - - - - - - - - - + + + + + + + + + + + + + -
    + + + + + + + + + + + + +    + + + + + + + + + + + +   +
- +
+ + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + -
   - - - - - - - -   + + + + + + +    + + + + + + + + + + + + + + + + + + + + + +    + + + + + + +
-
-
- - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Save
-
Cancel
-
+
John
+ +
+ + +
+
    +
+
+ Save +
+
+ Cancel +
+
+
+
+
+
+
-     - Joe - -
-
-
-
-
+
+
+ Loading Etherpad Lite... +
+
+
-
-
Loading Etherpad Lite...
-
-
-
-
-
-
- -
-
-
- 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.

-
-
-

If this continues to happen, please let us know - (opens in new window).

-
-
- -
-
-
-
-
+ +
+
+
- - - - - +
+
+
+
+
+ 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. +

+
+
+

+ If this continues to happen, please let us know + (opens in new window). +

+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file