Merge pull request #2510 from ether/chat-users-flow-css

better css

src/static/css/pad.css

@@ -897,7 +897,7 @@ input[type=checkbox] {
 #connectivity,
 #users {
   position: absolute;
-  top: 36px;
+  top: 38px;
   right: 20px;
   display: none;
   z-index: 500;
@@ -919,7 +919,8 @@ input[type=checkbox] {
   right:0px !important;
   border-radius:0px !important;
   width:182px !important;
-  margin:2px 0 0 0 !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;
@@ -935,9 +936,8 @@ input[type=checkbox] {
 .chatAndUsersChat{
   bottom:0px !important;
   padding:0 !important;
-  margin:0 !important;
+  margin: 165px 0px 0px 0px;
   right:0 !important;
-  top: 200px !important;
   width:182px !important;
   border: none !important;
   padding:5px !important;

src/static/js/chat.js

@@ -57,14 +57,18 @@ var chat = (function()
     },
     chatAndUsers: function(fromInitialCall)
     {
-      if(!userAndChat || fromInitialCall){
+      var toEnable = $('#options-chatandusers').is(":checked");
+      if(toEnable || !userAndChat || fromInitialCall){
         padcookie.setPref("chatAndUsers", true);
         chat.stickToScreen(true);
         $('#options-stickychat').prop('checked', true)
+        $('#options-chatandusers').prop('checked', true)
         $('#options-stickychat').prop("disabled", "disabled");
         $('#users').addClass("chatAndUsers");
         $("#chatbox").addClass("chatAndUsersChat");
+        // redraw
         userAndChat = true;
+        padeditbar.redrawHeight()
       }else{
         padcookie.setPref("chatAndUsers", false);
         $('#options-stickychat').prop("disabled", false);

src/static/js/pad_editbar.js

@@ -186,9 +186,20 @@ var padeditbar = (function()
       $('#editbar').css("height", editbarHeight);
 
       $('#editorcontainer').css("top", containerTop);
+
+      // make sure pop ups are in the right place
+      $('.popup').css("top", $('#editorcontainer').offset().top + "px");
+
+      // If sticky chat is enabled..
       if($('#options-stickychat').is(":checked")){
         $('#chatbox').css("top", $('#editorcontainer').offset().top + "px");
       };
+
+      // If chat and Users is enabled..
+      if($('#options-chatandusers').is(":checked")){
+        $('#users').css("top", $('#editorcontainer').offset().top + "px");
+      }
+
     },
     registerDropdownCommand: function (cmd, dropdown) {
       dropdown = dropdown || cmd;