Merge pull request #40 from zach-chai/ui_updates

Ui updates

app/assets/javascripts/channels/recording_update.js

@@ -7,17 +7,20 @@
     },
     {
       received: function(data) {
-        var table = $("#recordings").DataTable();
+        var recordings = Recordings.getInstance();
+        var table = recordings.table.api()
         var row = table.row("#"+data.record_id);
         if (data.action === 'update') {
           var rowData = row.data();
           rowData.published = data.published
-          table.row("#"+data.record_id).data(rowData).draw();
+          table.row("#"+data.record_id).data(rowData);
+          recordings.draw();
 
           var published = (data.published) ? 'published' : 'unpublished';
           showAlert(I18n['recording_'+published], 4000);
         } else if (data.action === 'delete') {
-          row.remove().draw();
+          row.remove();
+          recordings.draw();
 
           showAlert(I18n.recording_deleted, 4000);
         }

app/assets/javascripts/recordings.coffee

@@ -9,18 +9,20 @@ class @Recordings
       data: [],
       rowId: 'id',
       paging: false,
-      searching: false,
+      dom: 't',
       info: false,
       order: [[ 0, "desc" ]],
       language: {
-        emptyTable: " "
+        emptyTable: I18n.no_recordings,
+        zeroRecords: I18n.no_recordings
       },
       columns: [
         { data: "start_time" },
-        { data: "previews" },
+        { data: "previews", orderable: false },
         { data: "duration" },
-        { data: "playbacks" },
+        { data: "playbacks", orderable: false },
-        { data: "id" }
+        { data: "published", visible: false },
+        { data: "id", orderable: false }
       ],
       columnDefs: [
         {
@@ -38,8 +40,9 @@ class @Recordings
           render: (data, type, row) ->
             if type == 'display'
               str = ''
-              for d in data
+              if row.published
-                str += '<img height="50" width="50" src="'+d.url+'" alt="'+d.alt+'"></img> '
+                for d in data
+                  str += '<img height="50" width="50" src="'+d.url+'" alt="'+d.alt+'"></img> '
               return str
             return data
         },
@@ -50,7 +53,7 @@ class @Recordings
               str = ''
               if row.published
                 for d in data
-                  str += '<a href="'+d.url+'">'+d.type_i18n+'</a> '
+                  str += '<a href="'+d.url+'" target="_blank">'+d.type_i18n+'</a> '
               return str
             return data
         },
@@ -61,7 +64,7 @@ class @Recordings
               roomName = Meeting.getInstance().getId()
               published = row.published
               icon = getPublishClass(published)
-              publishText = if published then 'publish' else 'unpublish'
+              publishText = if published then 'unpublish' else 'publish'
               recordingActions = $('.hidden-elements').find('.recording-actions')
               recordingActions.find('.recording-update > i')
                 .removeClass()
@@ -74,6 +77,13 @@ class @Recordings
         }
       ]
     })
+    options = {
+      selector: '.delete-tooltip',
+      container: 'body',
+      placement: 'bottom',
+      title: I18n.delete_recording
+    };
+    $('#recordings').tooltip(options);
 
   # Gets the current instance or creates a new one
   @getInstance: ->
@@ -88,12 +98,17 @@ class @Recordings
   @initialized: ->
     return $.fn.DataTable.isDataTable('#recordings') && _recordingsInstance
 
+  draw: ->
+    if !@isOwner()
+      @table.api().columns(4).search('true')
+    @table.api().columns.adjust().draw()
+
   # refresh the recordings from the server
   refresh: ->
-    _this = this
     table_api = this.table.api()
-    $.get "/rooms/"+Meeting.getInstance().getId()+"/recordings", (data) ->
+    $.get "/rooms/"+Meeting.getInstance().getId()+"/recordings", (data) =>
-      if !data.is_owner
+      @setOwner(data.is_owner)
+      if !@owner
         table_api.column(-1).visible(false)
       for recording in data.recordings
         totalMinutes = Math.round((new Date(recording.end_time) - new Date(recording.start_time)) / 1000 / 60)
@@ -102,7 +117,7 @@ class @Recordings
         return new Date(b.start_time) - new Date(a.start_time)
       table_api.clear()
       table_api.rows.add(data.recordings)
-      table_api.columns.adjust().draw()
+      @draw()
 
   # setup click handlers for the action buttons
   setupActionHandlers: ->
@@ -138,3 +153,9 @@ class @Recordings
       ).fail((data) ->
         btn.prop('disabled', false)
       )
+
+  isOwner: ->
+    @owner
+
+  setOwner: (owner) ->
+    @owner = owner

app/assets/stylesheets/landing.scss

@@ -2,18 +2,6 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.center-panel-wrapper {
-  .join-form {
-    width: 100%;
-  }
-
-  .meeting-url-wrapper {
-    .meeting-url {
-      cursor: default;
-    }
-  }
-}
-
 .rooms {
 
   .table-wrapper {
@@ -25,6 +13,9 @@
           content: none; //removes the sort icon in table header
         }
       }
+      .dataTables_empty {
+        text-align: center;
+      }
     }
   }
 

app/assets/stylesheets/shared.scss

@@ -7,17 +7,17 @@
 html, body {
   width: 100%;
   height: 100%;
+  background: #ffffff;
 }
 
 .app-background {
-  background: #4dc0a2;
+  background: #ffffff;
-  background: -moz-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -moz-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #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-gradient(left top, left bottom, color-stop(0%, #4dc0a2), color-stop(350px, #4dc0a2), color-stop(350px, #ffffff), color-stop(100%, #ffffff));
-  background: -webkit-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -webkit-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: -o-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -o-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: -ms-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -ms-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: linear-gradient(to bottom, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: linear-gradient(to bottom, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dc0a2', endColorstr='#ffffff', GradientType=0 );
 }
 
 #alerts {
@@ -52,7 +52,10 @@ html, body {
     float: none;
   }
   .center-panel-size {
-    width: 650px;
+    max-width: 900px
+  }
+  .center-panel-conent-size {
+    max-width: 800px;
   }
 
   .input-spacing {
@@ -71,4 +74,26 @@ html, body {
   .title-wrapper {
     margin-bottom: 30px;
   }
+
+  .join-form-wrapper {
+    .center-block {
+      max-width: 400px;
+    }
+    .join-form {
+      width: 100%;
+    }
+    .btn {
+      width: initial;
+    }
+  }
+
+  .meeting-url-wrapper {
+    .meeting-url {
+      cursor: default;
+    }
+  }
+
+  .loading-wrapper {
+    text-align: center;
+  }
 }

app/views/landing/_rooms_center_panel.html.erb

@@ -11,14 +11,12 @@
 <% end %>
 
 <%= render layout: 'shared/center_panel' do %>
-  <div class="center-block col-sm-8">
+  <div class="center-block center-panel-conent-size col-xs-12">
     <% if admin? %>
       <%= render 'shared/meeting_url', hidden: false %>
     <% else %>
       <%= render 'shared/meeting_url', hidden: true %>
     <% end %>
-    <div class="join-form-wrapper">
+    <%= render 'shared/join_form' %>
-      <%= render 'shared/join_form' %>
-    </div>
   </div>
 <% end %>

app/views/landing/meetings.html.erb

@@ -24,7 +24,7 @@
 
     <div class="center-panel-wrapper">
       <%= render layout: 'shared/center_panel' do %>
-        <div class="center-block col-sm-8">
+        <div class="center-block center-panel-conent-size col-xs-12">
           <%= render 'shared/meeting_url', hidden: false %>
           <%= render 'shared/join_form' %>
         </div>

app/views/landing/rooms.html.erb

@@ -14,13 +14,13 @@
     </div>
 
     <div class="table-wrapper">
-      <h3><%= t('past_recordings') %></h3>
       <table id="recordings" class="table" width="100%">
         <thead>
           <th><%= t('date_recorded') %></th>
           <th><%= t('thumbnails') %></th>
           <th><%= t('duration') %></th>
           <th><%= t('views') %></th>
+          <th>published</th>
           <th><%= t('actions') %></th>
         </thead>
       </table>
@@ -49,8 +49,8 @@
     <button type="button" class="btn btn-default recording-update bottom-tooltip" data-published="">
         <i class="fa" aria-hidden="true"></i>
     </button>
-    <a tabindex="0" role="button" class="btn btn-default has-popover bottom-tooltip"
+    <a tabindex="0" role="button" class="btn btn-default has-popover delete-tooltip"
-      data-placement="top" title="<%= t('delete_recording') %>">
+      data-placement="top">
         <i class="fa fa-trash-o" aria-hidden="true"></i>
     </a>
   </div>

app/views/landing/wait_for_moderator.html.erb

@@ -5,7 +5,11 @@
   <small>
     <%= t('wait_for_mod_explanation') %>
   </small>
+
 <% end %>
 
 <%= render layout: 'shared/center_panel' do %>
+  <div class="loading-wrapper">
+    <%= image_tag "loading-indicator.gif", :alt => "" %>
+  </div>
 <% end %>

app/views/layouts/application.html.erb

@@ -4,6 +4,7 @@
     <title>Greenlight</title>
     <%= csrf_meta_tags %>
     <%= action_cable_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
@@ -21,14 +22,19 @@
       </span>
       <span class="signup pull-right">
         <% if current_user %>
-          <%= current_user.name %> |
+          <% if !@user %>
-          <%= link_to t('my_room'), current_user.room_url %> |
+            <%= link_to current_user.name, current_user.room_url %> |
+          <% else %>
+            <%= current_user.name %> |
+          <% end %>
           <%= link_to t('logout'), user_logout_url %>
         <% elsif @user %>
           <%= t('are_you', name: @user.username) %> |
           <%= link_to t('login'), "/auth/#{@user.provider}" %>
         <% else %>
-          <%= t('oauth_signup') %>
+          <span class="signup-description hidden-xs">
+            <%= t('oauth_signup') %>
+          </span>
           <%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %>
             <span class="fa fa-twitter"></span>
           <% end %>

app/views/shared/_center_panel.html.erb

@@ -1,6 +1,6 @@
 <div class="center-panel">
   <div class="row">
-    <div class="center-block center-panel-size">
+    <div class="center-block center-panel-size col-xs-12">
       <div class="panel panel-default">
         <div class="panel-body">
           <h3 class="title-wrapper text-center">

app/views/shared/_join_form.html.erb

@@ -1,36 +1,40 @@
-<div class="join-form input-group input-spacing">
+<div class="join-form-wrapper">
-  <% if current_user %>
+  <div class="center-block">
-    <% @current_user = current_user %>
+    <div class="join-form input-group input-spacing">
-    <%= text_field :current_user, :name, class: 'form-control meeting-user-name', type: 'hidden' %>
+      <% if current_user %>
-  <% else %>
+        <% @current_user = current_user %>
-    <%= text_field :nil, :nil, class: 'form-control meeting-user-name', placeholder: t('enter_name') %>
+        <%= text_field :current_user, :name, class: 'form-control meeting-user-name', type: 'hidden' %>
-  <% end %>
+      <% else %>
-  <% if admin? %>
+        <%= text_field :nil, :nil, class: 'form-control meeting-user-name', placeholder: t('enter_name') %>
-    <% if @meeting_running %>
+      <% end %>
-      <div class="col-sm-6">
+      <% if admin? %>
-        <button type="button" class="btn btn-primary meeting-join pull-right">
+        <% if @meeting_running %>
+          <div class="col-sm-6">
+            <button type="button" class="btn btn-primary meeting-join pull-right">
+              <%= t('join') %>
+            </button>
+          </div>
+          <div class="col-sm-6">
+            <button type="button" class="btn btn-danger meeting-end pull-left">
+              <%= t('end') %>
+            </button>
+          </div>
+        <% else %>
+          <button type="button" class="btn btn-primary center-block meeting-join">
+            <%= t('start') %>
+          </button>
+        <% end %>
+      <% elsif current_user %>
+        <button type="button" class="btn btn-primary center-block meeting-join">
           <%= t('join') %>
         </button>
-      </div>
+      <% else %>
-      <div class="col-sm-6">
+        <span class="input-group-btn">
-        <button type="button" class="btn btn-danger meeting-end pull-left">
+          <button type="button" class="btn btn-primary meeting-join">
-          <%= t('end') %>
+            <%= t('join') %>
-        </button>
+          </button>
-      </div>
+        </span>
-    <% else %>
+      <% end %>
-      <button type="button" class="btn btn-primary center-block meeting-join">
+    </div>
-        <%= t('start') %>
+  </div>
-      </button>
-    <% end %>
-  <% elsif current_user %>
-    <button type="button" class="btn btn-primary center-block meeting-join">
-      <%= t('join') %>
-    </button>
-  <% else %>
-    <span class="input-group-btn">
-      <button type="button" class="btn btn-primary meeting-join">
-        <%= t('join') %>
-      </button>
-    </span>
-  <% end %>
 </div>

config/locales/en-us.yml

@@ -24,16 +24,18 @@ en-US:
   are_you: Are you %{name}?
   client:
     are_you_sure: Are you sure?
+    delete_recording: Delete recording
     meeting_ended: Meeting was ended
     meeting_started: Meeting was started
+    no_recordings: No recordings
     publish_recording: Publish recording
     recording_deleted: Recording was deleted
     recording_published: Recording was published
     recording_unpublished: Recording was unpublished
-    unpublish_recording: Unpublish recording
+    unpublish_recording: Hide recording
   copied: Copied
   copy_error: Use Ctrl-c to copy
-  date_recorded: Date Recorded
+  date_recorded: Date
   duration: Duration
   end: End
   enter_name: Enter your name
@@ -52,7 +54,6 @@ en-US:
   powered_bigbluebutton: Powered by BigBlueButton
   presentation: Presentation
   refresh_html: <a href="#" class="generate-link">Click refresh</a> to generate a new meeting URL
-  delete_recording: Delete recording
   session_url_explanation: The session will be taking place using the following URL
   start: Start
   start_new_session: Start a new session