Cleanup etherpad button

public/js/vroom.js

@@ -1996,20 +1996,19 @@ function initVroom(room) {
   });
 
   if (etherpad.enabled){
-    $('#etherpadButton').change(function(){
+    $('.btn-etherpad').click(function(){
-      var action = ($(this).is(':checked')) ? 'show':'hide';
+      var action = ($(this).hasClass('btn-danger')) ? 'hide':'show';
       if (action === 'show'){
         // If not already loaded, load etherpad in the iFrame
         if ($('#etherpadContainer').html() == ''){
           loadEtherpadIframe();
         }
-        $('#etherpadLabel').addClass('btn-danger');
         $('#etherpadContainer').slideDown('200');
       }
       else{
-        $('#etherpadLabel').removeClass('btn-danger');
         $('#etherpadContainer').slideUp('200');
       }
+      $('.btn-etherpad').toggleClass('btn-danger').button('toggle');
     });
   }
 

templates/default/join.html.ep

@@ -44,28 +44,20 @@
           </div>
         </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left">
+          <button id="chatDropdown" class="btn btn-default collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>">
+            <span class="glyphicon glyphicon-comment">
+            </span>
+            <span class="badge" id="unreadMsg">
+              0
+            </span>
+          </button>
           <% if ($etherpad eq 'true'){ %>
-          <div class="btn-group">
+          <button class="btn btn-default help btn-etherpad" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
-          <% } %>
+            <span class="glyphicon glyphicon-pencil">
-            <button id="chatDropdown" class="btn btn-default collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>">
+            </span>
-              <span class="glyphicon glyphicon-comment">
+          </button>
-              </span>
-              <span class="badge" id="unreadMsg">
-                0
-              </span>
-            </button>
-          </div>
-          <% if ($etherpad eq 'true'){ %>
-          <div class="btn-group" data-toggle="buttons">
-            <label class="btn btn-default help" id="etherpadLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
-              <input type = "checkbox" id="etherpadButton">
-                <span class="glyphicon glyphicon-pencil">
-                </span>
-              </button>
-            </label>
-          </div>
-        </div>
         <% } %>
+        </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs">
           <button class="btn btn-default btn-mute-mic help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
             <span class="glyphicon glyphicon-volume-off">