Video Uploads Cleanup - Replace table grid layout with div grid layout and do related adjustments - EDUCATOR-562
This commit is contained in:
Mushtaq Ali
@@ -44,10 +44,10 @@ define(
|
||||
$el = render(numVideos),
|
||||
firstVideoId = 'dummy_id_0',
|
||||
requests = AjaxHelpers.requests(test),
|
||||
firstVideoSelector = '.js-table-body tr:first-child';
|
||||
firstVideoSelector = '.js-table-body .video-row:first-child';
|
||||
|
||||
// total number of videos should be 5 before remove
|
||||
expect($el.find('.js-table-body tr').length).toEqual(numVideos);
|
||||
expect($el.find('.js-table-body .video-row').length).toEqual(numVideos);
|
||||
|
||||
// get first video element
|
||||
firstVideo = $el.find(firstVideoSelector);
|
||||
@@ -72,7 +72,7 @@ define(
|
||||
}
|
||||
|
||||
// verify total number of videos after Remove/Cancel
|
||||
expect($el.find('.js-table-body tr').length).toEqual(numVideos);
|
||||
expect($el.find('.js-table-body .video-row').length).toEqual(numVideos);
|
||||
|
||||
// verify first video id after Remove/Cancel
|
||||
firstVideo = $el.find(firstVideoSelector);
|
||||
@@ -82,13 +82,13 @@ define(
|
||||
it('should render an empty collection', function() {
|
||||
var $el = render(0);
|
||||
expect($el.find('.js-table-body').length).toEqual(1);
|
||||
expect($el.find('.js-table-body tr').length).toEqual(0);
|
||||
expect($el.find('.js-table-body .video-row').length).toEqual(0);
|
||||
});
|
||||
|
||||
it('should render a non-empty collection', function() {
|
||||
var $el = render(5);
|
||||
expect($el.find('.js-table-body').length).toEqual(1);
|
||||
expect($el.find('.js-table-body tr').length).toEqual(5);
|
||||
expect($el.find('.js-table-body .video-row').length).toEqual(5);
|
||||
});
|
||||
|
||||
it('removes video upon click on Remove button', function() {
|
||||
|
||||
@@ -8,7 +8,9 @@ define(
|
||||
'use strict';
|
||||
|
||||
var PreviousVideoUploadView = BaseView.extend({
|
||||
tagName: 'tr',
|
||||
tagName: 'div',
|
||||
|
||||
className: 'video-row',
|
||||
|
||||
events: {
|
||||
'click .remove-video-button.action-button': 'removeVideo'
|
||||
@@ -41,10 +43,7 @@ define(
|
||||
},
|
||||
|
||||
removeVideo: function(event) {
|
||||
var $thumbnailEl,
|
||||
videoView = this,
|
||||
videoId = videoView.model.get('edx_video_id');
|
||||
|
||||
var videoView = this;
|
||||
event.preventDefault();
|
||||
|
||||
ViewUtils.confirmThenRunOperation(
|
||||
@@ -60,11 +59,6 @@ define(
|
||||
type: 'DELETE'
|
||||
}).done(function() {
|
||||
videoView.remove();
|
||||
// TODO: Remove this when cleaning up - EDUCATOR-562
|
||||
$thumbnailEl = $('.thumbnail-error-wrapper[data-video-id="' + videoId + '"]');
|
||||
if ($thumbnailEl.length) {
|
||||
$thumbnailEl.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -246,12 +246,7 @@ define(
|
||||
} else if (this.action === 'edit') {
|
||||
this.setActionInfo(this.action, true);
|
||||
}
|
||||
|
||||
// When we had error, focused effect was not wearing off after hover out.
|
||||
// Add focused class to all rows except rows having error.
|
||||
if (!$(this.$el.parent()).hasClass('has-thumbnail-error')) {
|
||||
this.$('.thumbnail-wrapper').addClass('focused');
|
||||
}
|
||||
this.$('.thumbnail-wrapper').addClass('focused');
|
||||
},
|
||||
|
||||
hideHoverState: function() {
|
||||
@@ -260,6 +255,7 @@ define(
|
||||
} else if (this.action === 'edit') {
|
||||
this.setActionInfo(this.action, false);
|
||||
}
|
||||
this.$('.thumbnail-wrapper').removeClass('focused');
|
||||
},
|
||||
|
||||
setActionInfo: function(action, showText, additionalSRText) {
|
||||
@@ -334,86 +330,12 @@ define(
|
||||
this.setActionInfo(this.action, true);
|
||||
this.readMessages([gettext('Could not upload the video image file'), errorText]);
|
||||
|
||||
// Add css classes so as to distinguish.
|
||||
$parentRowEl.addClass('has-thumbnail-error thumbnail-error');
|
||||
|
||||
// We need to update data attr in DOM too so as to find our element on hover.
|
||||
$parentRowEl.attr('data-video-id', videoId);
|
||||
|
||||
// Add error wrapper html before current video element row.
|
||||
// Add error wrapper html to current video element row.
|
||||
$parentRowEl.before( // safe-lint: disable=javascript-jquery-insertion
|
||||
HtmlUtils.ensureHtml(
|
||||
this.thumbnailErrorTemplate({videoId: videoId, errorText: errorText})
|
||||
).toString()
|
||||
);
|
||||
|
||||
// We need to treat error and error throwing row as one.
|
||||
// Refresh table rows to reflect error row.
|
||||
this.refreshVideoTableRowClasses();
|
||||
|
||||
// To treat current row and it's error row as one on hover,
|
||||
// we add hover effect to both rows, even if it is hovered on only one row, thus, giving us
|
||||
// the combined one row feel.
|
||||
$('.thumbnail-error[data-video-id="' + videoId + '"]').hover(function() {
|
||||
$('.thumbnail-error[data-video-id="' + videoId + '"]').toggleClass('blue-l5');
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
Refresh video table classes.
|
||||
|
||||
This method treats row and their corresponsing error rows as one, for that to achieve we need to reset
|
||||
table row even odd colors.
|
||||
*/
|
||||
refreshVideoTableRowClasses: function() {
|
||||
var savedClass, // this class will be applied to the row corresponding to error row.
|
||||
oddRowClass = 'white',
|
||||
evenRowClass = 'gray-l6';
|
||||
|
||||
$('.view-video-uploads .assets-table .js-table-body tr').each(function(index) {
|
||||
var currentRowClass;
|
||||
|
||||
// Decide current iterated row is even or odd.
|
||||
if (index % 2 === 0) {
|
||||
currentRowClass = evenRowClass;
|
||||
} else {
|
||||
currentRowClass = oddRowClass;
|
||||
}
|
||||
|
||||
// If the row is error row, save it's class so that it can be applied to it's corresponding row.
|
||||
if ($(this).hasClass('thumbnail-error-wrapper')) {
|
||||
savedClass = currentRowClass;
|
||||
}
|
||||
|
||||
// If current iterated row is the row which generated error
|
||||
// Apply the class same as it's corresponding error row. The class was saved.
|
||||
if ($(this).hasClass('has-thumbnail-error')) {
|
||||
// First remove previously added classes.
|
||||
$(this).removeClass(evenRowClass);
|
||||
$(this).removeClass(oddRowClass);
|
||||
|
||||
// Apply new class now.
|
||||
$(this).addClass(savedClass);
|
||||
|
||||
// Now after the saved class, swap even odd row classes.
|
||||
if (currentRowClass === oddRowClass) {
|
||||
oddRowClass = evenRowClass;
|
||||
evenRowClass = currentRowClass;
|
||||
} else {
|
||||
evenRowClass = oddRowClass;
|
||||
oddRowClass = currentRowClass;
|
||||
}
|
||||
// Reset the saved class after it has been applied.
|
||||
savedClass = '';
|
||||
} else {
|
||||
// For all simple rows, first remove classes if added
|
||||
$(this).removeClass(evenRowClass);
|
||||
$(this).removeClass(oddRowClass);
|
||||
|
||||
// then add the class based on it's rows.
|
||||
$(this).addClass(currentRowClass);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
readMessages: function(messages) {
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
font-size: 80%;
|
||||
word-wrap: break-word;
|
||||
|
||||
th {
|
||||
th, .video-head-col {
|
||||
@extend %t-copy-sub2;
|
||||
background-color: $gray-l5;
|
||||
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
|
||||
@@ -60,18 +60,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
td, .video-col {
|
||||
padding: ($baseline/2);
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tbody, .js-table-body {
|
||||
box-shadow: 0 2px 2px $shadow-l1;
|
||||
border: 1px solid $gray-l4;
|
||||
background: $white;
|
||||
|
||||
tr {
|
||||
tr, .video-row {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
border-top: 1px solid $gray-l4;
|
||||
|
||||
|
||||
@@ -169,34 +169,57 @@
|
||||
}
|
||||
}
|
||||
|
||||
.gray-l6 {
|
||||
background: $gray-l6 !important;
|
||||
}
|
||||
.video-table {
|
||||
.video-row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
.white {
|
||||
background: white !important;
|
||||
}
|
||||
.video-col {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.blue-l5 {
|
||||
background: $blue-l5 !important;
|
||||
.thumbnail-col {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.name-col {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.date-col {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.video-id-col {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.status-col {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.actions-col {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-error-wrapper {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
display: table-row;
|
||||
white-space: nowrap;
|
||||
|
||||
.thumbnail-error-text {
|
||||
color: $red;
|
||||
padding: 10px 10px 0;
|
||||
.action-text {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.has-thumbnail-error {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
$thumbnail-width: ($baseline*7.5);
|
||||
$thumbnail-height: ($baseline*5);
|
||||
|
||||
|
||||
@@ -5,17 +5,17 @@
|
||||
<%- gettext("Download available encodings (.csv)") %>
|
||||
</a>
|
||||
</div>
|
||||
<table class="assets-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"><%- gettext("Thumbnail") %></th>
|
||||
<th scope="col"><%- gettext("Name") %></th>
|
||||
<th scope="col"><%- gettext("Date Added") %></th>
|
||||
<th scope="col"><%- gettext("Video ID") %></th>
|
||||
<th scope="col"><%- gettext("Status") %></th>
|
||||
<th scope="col"><%- gettext("Action") %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="js-table-body"></tbody>
|
||||
</table>
|
||||
<div class="assets-table video-table">
|
||||
<div class="js-table-head">
|
||||
<div class="video-row">
|
||||
<div class="video-head-col video-col thumbnail-col"><%- gettext("Thumbnail") %></div>
|
||||
<div class="video-head-col video-col name-col"><%- gettext("Name") %></div>
|
||||
<div class="video-head-col video-col date-col"><%- gettext("Date Added") %></div>
|
||||
<div class="video-head-col video-col video-id-col"><%- gettext("Video ID") %></div>
|
||||
<div class="video-head-col video-col status-col"><%- gettext("Status") %></div>
|
||||
<div class="video-head-col video-col actions-col"><%- gettext("Action") %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-table-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
<td class="thumbnail-col"></td>
|
||||
<td class="name-col"><%- client_video_id %></td>
|
||||
<td class="date-col"><%- created %></td>
|
||||
<td class="video-id-col"><%- edx_video_id %></td>
|
||||
<td class="status-col"><%- status %></td>
|
||||
<td class="actions-col">
|
||||
<ul class="actions-list">
|
||||
<li class="action-item action-remove">
|
||||
<a href="#" data-tooltip="<%- gettext('Remove this video') %>" class="remove-video-button action-button">
|
||||
<span class="icon fa fa-times-circle" aria-hidden="true"></span>
|
||||
<span class="sr"><%- StringUtils.interpolate(gettext("Remove {video_name} video"), {video_name: client_video_id}) %></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<div class="video-row-container">
|
||||
<div class="video-col thumbnail-col"></div>
|
||||
<div class="video-col name-col"><%- client_video_id %></div>
|
||||
<div class="video-col date-col"><%- created %></div>
|
||||
<div class="video-col video-id-col"><%- edx_video_id %></div>
|
||||
<div class="video-col status-col"><%- status %></div>
|
||||
<div class="video-col actions-col">
|
||||
<ul class="actions-list">
|
||||
<li class="action-item action-remove">
|
||||
<a href="#" data-tooltip="<%- gettext('Remove this video') %>" class="remove-video-button action-button">
|
||||
<span class="icon fa fa-times-circle" aria-hidden="true"></span>
|
||||
<span class="sr"><%- StringUtils.interpolate(gettext("Remove {video_name} video"), {video_name: client_video_id}) %></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<tr class="thumbnail-error-wrapper thumbnail-error" data-video-id="<%- videoId %>">
|
||||
<td colspan="6" class="thumbnail-error-text" colspan="6">
|
||||
<span class="action-icon" aria-hidden="true">
|
||||
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
|
||||
</span>
|
||||
<span class="action-text"><%- errorText %></span></td>
|
||||
</tr>
|
||||
<div class="thumbnail-error-wrapper thumbnail-error" data-video-id="<%- videoId %>">
|
||||
<div class="thumbnail-error-text">
|
||||
<span class="action-icon" aria-hidden="true">
|
||||
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
|
||||
</span>
|
||||
<span class="action-text"><%- errorText %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user