lino.jorzick
/
greenlight
forked from External/greenlight
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #40 from zach-chai/ui_updates 

Ui updates
This commit is contained in:
Zachary Chai 2016-11-21 15:18:50 -05:00 committed by GitHub
parent b8ec40c35f 6144a7b45b
commit c79ae3c1d6
13 changed files with 138 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/loading-indicator.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 673 B

9
app/assets/javascripts/channels/recording_update.js
View File

@ -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);
}

43
app/assets/javascripts/recordings.coffee
View File

@ -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: "id" }
{ data: "playbacks", orderable: false },
{ data: "published", visible: false },
{ data: "id", orderable: false }
],
columnDefs: [
{
@ -38,6 +40,7 @@ class @Recordings
render: (data, type, row) ->
if type == 'display'
str = ''
if row.published
for d in data
str += '<img height="50" width="50" src="'+d.url+'" alt="'+d.alt+'"></img> '
return str
@ -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) ->
if !data.is_owner
$.get "/rooms/"+Meeting.getInstance().getId()+"/recordings", (data) =>
@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

15
app/assets/stylesheets/landing.scss
View File

@ -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;
}
}
}

43
app/assets/stylesheets/shared.scss
View File

@ -7,17 +7,17 @@
html, body {
width: 100%;
height: 100%;
background: #ffffff;
}
.app-background {
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 );
background: #ffffff;
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(350px, #4dc0a2), color-stop(350px, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
background: -o-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
background: -ms-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
background: linear-gradient(to bottom, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
}
#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;
}
}

4
app/views/landing/_rooms_center_panel.html.erb
View File

@ -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' %>
</div>
</div>
<% end %>

2
app/views/landing/meetings.html.erb
View File

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

6
app/views/landing/rooms.html.erb
View File

@ -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"
data-placement="top" title="<%= t('delete_recording') %>">
<a tabindex="0" role="button" class="btn btn-default has-popover delete-tooltip"
data-placement="top">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
</div>

4
app/views/landing/wait_for_moderator.html.erb
View File

@ -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 %>

8
app/views/layouts/application.html.erb
View File

@ -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 %>
<% if !@user %>
<%= link_to current_user.name, current_user.room_url %> |
<% else %>
<%= current_user.name %> |
<%= link_to t('my_room'), current_user.room_url %> |
<% end %>
<%= link_to t('logout'), user_logout_url %>
<% elsif @user %>
<%= t('are_you', name: @user.username) %> |
<%= link_to t('login'), "/auth/#{@user.provider}" %>
<% else %>
<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 %>

2
app/views/shared/_center_panel.html.erb
View File

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

6
app/views/shared/_join_form.html.erb
View File

@ -1,4 +1,6 @@
<div class="join-form input-group input-spacing">
<div class="join-form-wrapper">
<div class="center-block">
<div class="join-form input-group input-spacing">
<% if current_user %>
<% @current_user = current_user %>
<%= text_field :current_user, :name, class: 'form-control meeting-user-name', type: 'hidden' %>
@ -33,4 +35,6 @@
</button>
</span>
<% end %>
</div>
</div>
</div>

7
config/locales/en-us.yml
View File

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