Skip to content

E
edx-platform
Commit 9750cd2a by Mushtaq Ali
Options

Video Uploads Cleanup - Replace table grid layout with div grid layout and do… 

Video Uploads Cleanup - Replace table grid layout with div grid layout and do related adjustments - EDUCATOR-562
parent 7bf717f7
Showing with 91 additions and 149 deletions
cms/static/js/spec/views/previous_video_upload_list_spec.js
......@@ -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() {
......
cms/static/js/views/previous_video_upload.js
......@@ -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();
}
});
}
);
......
cms/static/js/views/video_thumbnail.js
......@@ -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) {
......
cms/static/sass/elements/_uploaded-assets.scss
......@@ -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;
......
cms/static/sass/views/_video-upload.scss
......@@ -169,34 +169,57 @@
}
}
.gray-l6 {
background: $gray-l6 !important;
}
.video-table {
.video-row {
display: table;
table-layout: fixed;
width: 100%;
.video-col {
display: table-cell;
}
.white {
background: white !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%;
}
.blue-l5 {
background: $blue-l5 !important;
}
}
.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);
......
cms/templates/js/previous-video-upload-list.underscore
......@@ -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>
cms/templates/js/previous-video-upload.underscore
<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>
cms/templates/js/video-thumbnail-error.underscore
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment