room block enhancements (#1203)

* highlight current room block

* fix duplicated ids

* remove inline js

* remove some trailing whitespaces

* Fixed Server Rooms room settings name

Co-authored-by: farhatahmad <ahmad.af.farhat@gmail.com>
Co-authored-by: Jesus Federico <jesus@123it.ca>

app/assets/javascripts/room.js

@@ -19,6 +19,10 @@ $(document).on('turbolinks:load', function(){
   var controller = $("body").data('controller');
   var action = $("body").data('action');
 
+  // highlight current room
+  $('.room-block').removeClass('current');
+  $('a[href="' + window.location.pathname + '"] .room-block').addClass('current');
+
   // Only run on room pages.
   if (controller == "rooms" && action == "show"){
     var copy = $('#copy');
@@ -57,7 +61,7 @@ $(document).on('turbolinks:load', function(){
       $('#create-room-name').focus()
     }
   })
-  
+
   if (controller == "rooms" && action == "show" || controller == "admins" && action == "server_rooms"){
     // Display and update all fields related to creating a room in the createRoomModal
     $(".update-room").click(function(){
@@ -120,13 +124,13 @@ $(document).on('turbolinks:load', function(){
         let listItem = document.createElement("li")
         listItem.setAttribute('class', 'list-group-item text-left not-saved add-access');
         listItem.setAttribute("data-uid", uid)
-  
+
         let spanItem = "<span class='avatar float-left mr-2'>" + option.text().charAt(0) + "</span> <span class='shared-user'>" +
-          option.text() + " <span class='text-muted'>" + option.data("subtext") + "</span></span>" + 
+          option.text() + " <span class='text-muted'>" + option.data("subtext") + "</span></span>" +
           "<span class='text-primary float-right shared-user cursor-pointer' onclick='removeSharedUser(this)'><i class='fas fa-times'></i></span>"
-        
+
         listItem.innerHTML = spanItem
-  
+
         $("#user-list").append(listItem)
       }
     })
@@ -160,9 +164,9 @@ function showCreateRoom(target) {
 
 function showUpdateRoom(target) {
   var modal = $(target)
-  var update_path = modal.closest("#room-block").data("path")
+  var update_path = modal.closest(".room-block").data("path")
   var settings_path = modal.data("settings-path")
-  $("#create-room-name").val(modal.closest("#room-block").find("#room-name-text").text().trim())
+  $("#create-room-name").val(modal.closest(".room-block").find(".room-name-text").text().trim())
   $("#createRoomModal form").attr("action", update_path)
 
   //show all elements & their children with a update-only class
@@ -178,8 +182,8 @@ function showUpdateRoom(target) {
   })
 
   updateCurrentSettings(settings_path)
-  
-  var accessCode = modal.closest("#room-block").data("room-access-code")
+
+  var accessCode = modal.closest(".room-block").data("room-access-code")
 
   if(accessCode){
     $("#create-room-access-code").text(getLocalizedString("modal.create_room.access_code") + ": " + accessCode)
@@ -199,7 +203,7 @@ function showDeleteRoom(target) {
 function updateCurrentSettings(settings_path){
   // Get current room settings and set checkbox
   $.get(settings_path, function(room_settings) {
-    var settings = JSON.parse(room_settings) 
+    var settings = JSON.parse(room_settings)
     $("#room_mute_on_join").prop("checked", settings.muteOnStart)
     $("#room_require_moderator_approval").prop("checked", settings.requireModeratorApproval)
     $("#room_anyone_can_start").prop("checked", settings.anyoneCanStart)
@@ -249,7 +253,7 @@ function displaySharedUsers(path) {
       user_list_html += "<span class='text-primary float-right shared-user cursor-pointer' onclick='removeSharedUser(this)'><i class='fas fa-times'></i></span>"
       user_list_html += "</li>"
     })
-    
+
     $("#user-list").html(user_list_html)
   });
 }

app/assets/stylesheets/rooms.scss

@@ -57,6 +57,14 @@
   padding-top: 12px;
 }
 
+.room-block {
+  &:not(.current) {
+    .stamp {
+      opacity: 0.5;
+    }
+  }
+}
+
 #create-room-block {
   border: 1px dashed lightgray;
 
@@ -99,4 +107,5 @@
 
 .remove-shared {
   text-decoration: line-through;
-}
+}
+

app/views/admins/components/_server_room_row.html.erb

@@ -13,13 +13,13 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
 
-<tr id="room-block" data-path="<%= update_settings_path(room) %>" data-room-settings=<%= room.room_settings %> data-room-access-code="<%= room.access_code %>">
+<tr class="room-block" data-path="<%= update_settings_path(room) %>" data-room-settings=<%= room.room_settings %> data-room-access-code="<%= room.access_code %>">
   <td>
     <div id="room-title" class="form-inline edit_hover_class">
       <% if room.id == room.owner.room_id %>
         <i class="fas fa-home pr-1"></i>
       <% end %>
-      <text id="room-name-text">
+      <text class="room-name-text">
         <%= room.name %>
       </text>
     </div>

app/views/rooms/components/_room_block.html.erb

@@ -13,7 +13,7 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
 
-<div id="room-block" data-path="<%= update_settings_path(room) %>" data-room-access-code="<%= room.access_code %>" class="card">
+<div data-path="<%= update_settings_path(room) %>" data-room-access-code="<%= room.access_code %>" class="card room-block">
   <div class="card-body p-1">
     <table class="table table-hover table-vcenter text-wrap table-no-border">
       <tbody class="no-border-top">
@@ -27,11 +27,11 @@
           </span>
         </td>
         <td>
-          <div id="room-name">
-            <h4 id="room-name-text" contenteditable="false" class="m-0 force-text-normal" ><%= room.name %></h4>
+          <div>
+            <h4 contenteditable="false" class="m-0 force-text-normal room-name-text" ><%= room.name %></h4>
           </div>
-          <div id="room-name-editable" style="display: none">
-            <input id="room-name-editable-input" class="form-control input-sm w-100 h-4" value="<%= room.name %>">
+          <div style="display: none">
+            <input class="form-control input-sm w-100 h-4 room-name-editable" value="<%= room.name %>">
           </div>
           <div class="small text-muted">
             <% if room.sessions > 0 %>
@@ -41,9 +41,9 @@
             <% end %>
           </div>
         </td>
-        <td class="text-right">          
+        <td class="text-right">
           <div class="item-action dropdown" data-display="static">
-            <a href="javascript:void(0)" data-toggle="dropdown" data-display="static" class="icon">
+            <a href="#" data-toggle="dropdown" data-display="static" class="icon">
               <i class="fas fa-ellipsis-v px-4"></i>
             </a>
             <div class="dropdown-menu dropdown-menu-right dropdown-menu-md-left">
@@ -61,7 +61,7 @@
                 </a>
               <% end %>
             </div>
-          </div>         
+          </div>
         </td>
       </tbody>
     </table>

app/views/rooms/components/_shared_room_block.html.erb

@@ -13,7 +13,7 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
 
-<div id="room-block" data-room-uid="<%= room.uid %>" data-room-settings=<%= room.room_settings %> data-room-access-code="<%= room.access_code %>" class="card">
+<div data-room-uid="<%= room.uid %>" data-room-settings=<%= room.room_settings %> data-room-access-code="<%= room.access_code %>" class="card room-block">
   <div class="card-body p-1">
     <table class="table table-hover table-vcenter text-wrap table-no-border">
       <tbody class="no-border-top">
@@ -37,7 +37,7 @@
             </a>
             <div class="dropdown-menu dropdown-menu-right dropdown-menu-md-left">
               <a href="" data-toggle="modal" data-target="#removeAccessModal" class="remove-share-room dropdown-item" data-path="<%= room_remove_shared_access_path(room) %>">
-                <i class="dropdown-icon far fa-trash-alt"></i> <%= t("remove") %> 
+                <i class="dropdown-icon far fa-trash-alt"></i> <%= t("remove") %>
               </a>
             </div>
           </div>

app/views/rooms/show.html.erb

@@ -84,7 +84,7 @@
           <% end %>
         </div>
       <% end %>
-            
+
       <% if shared_access_allowed %>
         <% current_user.shared_rooms.each do |room| %>
           <div class="col-lg-4 col-md-6 col-sm-12">

app/views/shared/modals/_create_room_modal.html.erb

@@ -58,7 +58,7 @@
                 <span class="custom-switch-indicator float-right cursor-pointer"></span>
               </label>
             <% end %>
-            
+
             <% if Rails.configuration.room_features.include? "anyone-can-start" %>
               <label class="custom-switch pl-0 mt-3 mb-3 w-100 text-left d-inline-block">
                 <span class="custom-switch-description"><%= t("modal.room_settings.start")%></span>
@@ -81,8 +81,8 @@
               <span class="custom-switch-indicator float-right cursor-pointer"></span>
             </label>
           <div class="mt-4">
-            <%= f.submit t("modal.create_room.create"), id: "create-room-submit", class: "create-only btn btn-primary btn-block" %>
-            <%= f.submit t("modal.room_settings.update"), id: "create-room-submit", class: "update-only btn btn-primary btn-block" %>
+            <%= f.submit t("modal.create_room.create"), class: "create-only btn btn-primary btn-block" %>
+            <%= f.submit t("modal.room_settings.update"), class: "update-only btn btn-primary btn-block" %>
           </div>
           <% end %>
         </div>

lib/assets/_primary_themes.scss

@@ -193,4 +193,10 @@ input:focus, select:focus {
   &.selected {
     @extend .btn-primary;
   }
+}
+
+.room-block {
+  &.current {
+    box-shadow: 0 0 10px $primary-color-lighten;
+  }
 }