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');
@@ -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
@@ -179,7 +183,7 @@ 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)

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;
 
@@ -100,3 +108,4 @@
 .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">
+          <div>
-            <h4 id="room-name-text" contenteditable="false" class="m-0 force-text-normal" ><%= room.name %></h4>
+            <h4 contenteditable="false" class="m-0 force-text-normal room-name-text" ><%= room.name %></h4>
           </div>
-          <div id="room-name-editable" style="display: none">
+          <div style="display: none">
-            <input id="room-name-editable-input" class="form-control input-sm w-100 h-4" value="<%= room.name %>">
+            <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 %>
@@ -43,7 +43,7 @@
         </td>
         <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">

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">

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

@@ -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.create_room.create"), 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.room_settings.update"), class: "update-only btn btn-primary btn-block" %>
           </div>
           <% end %>
         </div>

lib/assets/_primary_themes.scss

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