Merge pull request #26 from zach-chai/dialogs

Dialogs

app/assets/javascripts/channels/recording_update.js

@@ -11,6 +11,14 @@
         var rowData = table.row("#"+data.record_id).data();
         rowData.published = data.published
         table.row("#"+data.record_id).data(rowData).draw();
+        var publish = (data.published) ? 'publish' : 'unpublish';
+
+        // show alert success alert
+        $('.alert-template .alert-message').html($('.'+publish+'-alert').html());
+        $('#alerts').html($('.alert-template').html());
+        setTimeout(function() {
+          $('#alerts > .alert').alert('close');
+        }, 4000);
       }
     });
   };

app/assets/javascripts/landing.js

@@ -52,6 +52,20 @@
       document.execCommand("copy");
       meetingURL.blur();
     });
+
+    // enable popovers
+    var options = {
+      selector: '.has-popover',
+      html: true,
+      trigger: 'focus',
+      title: function() {
+        return $(".delete-popover-title").html();
+      },
+      content: function() {
+        return $(".delete-popover-body").html();
+      }
+    };
+    $('#recordings').popover(options);
   };
 
   var initIndex = function() {
@@ -141,10 +155,12 @@
               var roomName = getRoomName();
               var published = row.published;
               var eye = getPublishClass(published);
-              return '<button type="button" class="btn btn-default recording-update" data-id="'+data+'" data-room="'+roomName+'" data-published="'+published+'">' +
+              return '<button type="button" class="btn btn-default recording-update" data-published="'+published+'">' +
                 '<i class="fa '+eye+'" aria-hidden="true"></i></button> ' +
-                '<button type="button" class="btn btn-default recording-delete" data-id="'+data+'" data-room="'+roomName+'">' +
-                '<i class="fa fa-trash-o" aria-hidden="true"></i></button>';
+                '<a tabindex="0" role="button" class="btn btn-default has-popover"' +
+                  'data-toggle="popover" data-placement="top">' +
+                    '<i class="fa fa-trash-o" aria-hidden="true"></i>' +
+                '</a>';
             }
             return data;
           }
@@ -154,27 +170,29 @@
 
     $('#recordings').on('click', '.recording-update', function(event) {
       var btn = $(this);
-      var room = btn.data('room');
-      var id = btn.data('id');
+      var row = recordingsTable.api().row($(this).closest('tr')).data();
+      var url = $('.meeting-url').val();
+      var id = row.id;
       var published = btn.data('published');
-      btn.prop("disabled", true);
+      btn.prop('disabled', true);
       $.ajax({
         method: 'PATCH',
-        url: '/rooms/'+room+'/recordings/'+id,
+        url: url+'/recordings/'+id,
         data: {published: (!published).toString()}
       }).done(function(data) {
 
       }).fail(function(data) {
-        btn.prop("disabled", false);
+        btn.prop('disabled', false);
       });
     });
 
     $('#recordings').on('click', '.recording-delete', function(event) {
-      var room = $(this).data('room');
-      var id = $(this).data('id');
+      var row = recordingsTable.api().row($(this).closest('tr')).data();
+      var url = $('.meeting-url').val();
+      var id = row.id;
       $.ajax({
         method: 'DELETE',
-        url: '/rooms/'+room+'/recordings/'+id
+        url: url+'/recordings/'+id
       }).done(function() {
         recordingsTable.api().row("#"+id).remove().draw();
       });

app/assets/stylesheets/shared.scss

@@ -10,7 +10,23 @@ html, body {
 }
 
 .app-background {
-  background: linear-gradient(0, white 65%, #4DC0A2 35%);
+  background: #4dc0a2;
+  background: -moz-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -webkit-gradient(left top, left bottom, color-stop(0%, #4dc0a2), color-stop(35%, #4dc0a2), color-stop(35%, #ffffff), color-stop(100%, #ffffff));
+  background: -webkit-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -o-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -ms-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: linear-gradient(to bottom, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dc0a2', endColorstr='#ffffff', GradientType=0 );
+}
+
+#alerts {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  margin-left: -250px;
+  width: 500px;
+  z-index: 999;
 }
 
 .header {

app/views/landing/rooms.html.erb

@@ -41,7 +41,7 @@
       <table id="recordings" class="table" width="100%">
         <thead>
           <th><%= t('date_recorded') %></th>
-          <th><%= t('presentation') %></th>
+          <th><%= t('thumbnails') %></th>
           <th><%= t('duration') %></th>
           <th><%= t('views') %></th>
           <th><%= t('actions') %></th>
@@ -50,3 +50,31 @@
     </div>
   </div>
 </div>
+
+<div hidden class="hidden-elements">
+  <div class="delete-popover-title">
+    <%= t('are_you_sure') %>
+  </div>
+  <div class="delete-popover-body">
+    <button type="button" class="btn btn-danger recording-delete">
+      <%= t('yes') %>
+    </button>
+    <button type="button" class="btn btn-default">
+      <%= t('no') %>
+    </button>
+  </div>
+  <div class="alert-template">
+    <div class="alert alert-success alert-dismissible fade in" role="alert">
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      <span class="alert-message">Recording was successfully published</span>
+    </div>
+  </div>
+  <div class="publish-alert">
+    <%= t('recording_publish_success') %>
+  </div>
+  <div class="unpublish-alert">
+    <%= t('recording_unpublish_success') %>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -11,9 +11,9 @@
 
   <body class="app-background" data-controller="<%= params[:controller] %>" data-action="<%= params[:action] %>">
     <!-- Messages -->
-    <div id='messages' class='hidden'>
+    <div id='alerts'>
     </div>
-
+    
     <!-- Header -->
     <div class='header'>
       <span class="logo-wrapper pull-left">

config/locales/en-us.yml

@@ -21,7 +21,8 @@
 
 en-US:
   actions: Actions
-  are_you: Are you %{name} ?
+  are_you: Are you %{name}?
+  are_you_sure: Are you sure?
   date_recorded: Date Recorded
   duration: Duration
   end: End
@@ -35,16 +36,21 @@ en-US:
   login: login
   logout: logout
   my_room: my room
+  no: No
   oauth_signup: Signup for customized sessions
   past_recordings: Past Recordings
   powered_bigbluebutton: Powered by BigBlueButton
   presentation: Presentation
+  recording_publish_success: Recording was successfully published
+  recording_unpublish_success: Recording was successfully unpublished
   refresh_html: <a href="#" class="generate-link">Click refresh</a> to generate a new meeting URL
   session_url_explanation: The session will be taking place using the following URL
   start: Start
   start_new_session: Start a new session
+  thumbnails: Thumbnails
   url_copy_explanation: Copy this URL to invite others to the meeting
   video: Video
   views: Views
   wait_for_mod_msg: Looks like you're the first one here...
   wait_for_mod_explanation: You will automatically join when the meeting starts
+  yes: Yes