Merge pull request #39 from zach-chai/usability

Usability

app/assets/javascripts/landing.js

@@ -15,7 +15,7 @@
   var init = function() {
     Meeting.clear();
 
-    // setup click handlers
+    // setup event handlers
     $('.center-panel-wrapper').on ('click', '.meeting-join', function (event) {
       var name = $('.meeting-user-name').val();
       Meeting.getInstance().setName(name);
@@ -54,11 +54,57 @@
 
     $('.center-panel-wrapper').on ('click', '.meeting-url-copy', function (event) {
       meetingURLInput = $('.meeting-url');
+
+      // copy URL
       meetingURLInput.select();
-      document.execCommand("copy");
+      try {
+        var success = document.execCommand("copy");
+        if (success) {
           meetingURLInput.blur();
+          $(this).trigger('hint', [$(this).data('copied-hint')]);
+        } else {
+          $(this).trigger('hint', [$(this).data('copy-error')]);
+        }
+      } catch (err) {
+        $(this).trigger('hint', [$(this).data('copy-error')]);
+      }
     });
 
+    $('.center-panel-wrapper').on('hint', '.meeting-url-copy', function (event, msg) {
+      $(this).focus();
+      $(this).attr('title', msg)
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', $(this).data('copy-hint'))
+        .tooltip('fixTitle');
+    });
+
+    $('.center-panel-wrapper').on('mouseleave', '.meeting-url-copy', function (event, msg) {
+      $(this).blur();
+    });
+
+    $('.center-panel-wrapper').on('focus', '.meeting-url', function (event, msg) {
+      $(this).select();
+    });
+
+    // only allow ctrl commands
+    $('.center-panel-wrapper').on('keydown', '.meeting-url', function (event, msg) {
+      if(!event.ctrlKey) {
+        event.preventDefault();
+      }
+    });
+
+    // enable tooltips
+    var options = {
+      selector: '.has-tooltip'
+    };
+    $(document).tooltip(options)
+    var options = {
+      selector: '.bottom-tooltip',
+      placement: 'bottom'
+    };
+    $(document).tooltip(options);
+
     // enable popovers
     var options = {
       selector: '.has-popover',
@@ -73,7 +119,7 @@
     };
     $('#recordings').popover(options);
 
-    // focus user
+    // focus name input or join button
     if ($('.meeting-user-name').is(':visible')) {
       $('.meeting-user-name').focus();
     } else {

app/assets/javascripts/recordings.coffee

@@ -60,13 +60,16 @@ class @Recordings
             if type == 'display'
               roomName = Meeting.getInstance().getId()
               published = row.published
-              eye = getPublishClass(published)
+              icon = getPublishClass(published)
-              return '<button type="button" class="btn btn-default recording-update" data-published="'+published+'">' +
+              publishText = if published then 'publish' else 'unpublish'
-                '<i class="fa '+eye+'" aria-hidden="true"></i></button> ' +
+              recordingActions = $('.hidden-elements').find('.recording-actions')
-                '<a tabindex="0" role="button" class="btn btn-default has-popover"' +
+              recordingActions.find('.recording-update > i')
-                  'data-toggle="popover" data-placement="top">' +
+                .removeClass()
-                    '<i class="fa fa-trash-o" aria-hidden="true"></i>' +
+                .addClass('fa '+icon)
-                '</a>'
+              recordingActions.find('.recording-update')
+                .attr('data-published', published)
+                .attr('title', I18n[publishText+'_recording'])
+              return recordingActions.html()
             return data
         }
       ]

app/assets/stylesheets/landing.scss

@@ -2,11 +2,20 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.join-form {
+.center-panel-wrapper {
+  .join-form {
     width: 100%;
+  }
+
+  .meeting-url-wrapper {
+    .meeting-url {
+      cursor: default;
+    }
+  }
 }
 
 .rooms {
+
   .table-wrapper {
     padding: 40px 50px 10px 50px;
 
@@ -18,4 +27,5 @@
       }
     }
   }
+
 }

app/views/landing/rooms.html.erb

@@ -45,4 +45,13 @@
       <span class="alert-message"></span>
     </div>
   </div>
+  <div class="recording-actions">
+    <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"
+      data-placement="top" title="<%= t('delete_recording') %>">
+        <i class="fa fa-trash-o" aria-hidden="true"></i>
+    </a>
+  </div>
 </div>

app/views/shared/_meeting_url.html.erb

@@ -1,13 +1,15 @@
 <div <%= "hidden" if hidden %> class="meeting-url-wrapper">
   <div class="input-group">
-    <input type="text" readonly="readonly" class="form-control meeting-url"/>
+    <input type="text" class="form-control meeting-url"/>
     <span class="input-group-btn">
-      <button type="button" class="btn btn-default meeting-url-copy">
+      <button type="button" class="btn btn-default meeting-url-copy has-tooltip"
+        title="<%= t('url_copy_explanation') %>"
+        data-copied-hint="<%= t('copied') %>"
+        data-copy-error="<%= t('copy_error') %>"
+        data-copy-hint="<%= t('url_copy_explanation') %>"
+      >
         <i class="fa fa-paperclip" aria-hidden="true"></i>
       </button>
     </span>
   </div>
-  <small>
-    <em><%= t('url_copy_explanation') %></em>
-  </small>
 </div>

config/locales/en-us.yml

@@ -26,9 +26,13 @@ en-US:
     are_you_sure: Are you sure?
     meeting_ended: Meeting was ended
     meeting_started: Meeting was started
+    publish_recording: Publish recording
     recording_deleted: Recording was deleted
     recording_published: Recording was published
     recording_unpublished: Recording was unpublished
+    unpublish_recording: Unpublish recording
+  copied: Copied
+  copy_error: Use Ctrl-c to copy
   date_recorded: Date Recorded
   duration: Duration
   end: End
@@ -48,6 +52,7 @@ 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