diff --git a/cms/static/js/spec/views/previous_video_upload_list_spec.js b/cms/static/js/spec/views/previous_video_upload_list_spec.js index 0cfa18b15c..e5563db519 100644 --- a/cms/static/js/spec/views/previous_video_upload_list_spec.js +++ b/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() { diff --git a/cms/static/js/views/previous_video_upload.js b/cms/static/js/views/previous_video_upload.js index 11b507cfbf..e2b293187a 100644 --- a/cms/static/js/views/previous_video_upload.js +++ b/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(); - } }); } ); diff --git a/cms/static/js/views/video_thumbnail.js b/cms/static/js/views/video_thumbnail.js index 40c08a4e45..ebab2c4344 100644 --- a/cms/static/js/views/video_thumbnail.js +++ b/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) { diff --git a/cms/static/sass/elements/_uploaded-assets.scss b/cms/static/sass/elements/_uploaded-assets.scss index 443ce72682..488f7bf172 100644 --- a/cms/static/sass/elements/_uploaded-assets.scss +++ b/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; diff --git a/cms/static/sass/views/_video-upload.scss b/cms/static/sass/views/_video-upload.scss index 8c5e5054bc..61582063cb 100644 --- a/cms/static/sass/views/_video-upload.scss +++ b/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%; - .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); diff --git a/cms/templates/js/previous-video-upload-list.underscore b/cms/templates/js/previous-video-upload-list.underscore index b0cc3cb806..1661210ab8 100644 --- a/cms/templates/js/previous-video-upload-list.underscore +++ b/cms/templates/js/previous-video-upload-list.underscore @@ -5,17 +5,17 @@ <%- gettext("Download available encodings (.csv)") %> - - - - - - - - - - - - -
<%- gettext("Thumbnail") %><%- gettext("Name") %><%- gettext("Date Added") %><%- gettext("Video ID") %><%- gettext("Status") %><%- gettext("Action") %>
+
+
+
+
<%- gettext("Thumbnail") %>
+
<%- gettext("Name") %>
+
<%- gettext("Date Added") %>
+
<%- gettext("Video ID") %>
+
<%- gettext("Status") %>
+
<%- gettext("Action") %>
+
+
+
+
diff --git a/cms/templates/js/previous-video-upload.underscore b/cms/templates/js/previous-video-upload.underscore index e9154bcb3c..dd18fc2a50 100644 --- a/cms/templates/js/previous-video-upload.underscore +++ b/cms/templates/js/previous-video-upload.underscore @@ -1,15 +1,17 @@ - -<%- client_video_id %> -<%- created %> -<%- edx_video_id %> -<%- status %> - - - +
+
+
<%- client_video_id %>
+
<%- created %>
+
<%- edx_video_id %>
+
<%- status %>
+
+ +
+
diff --git a/cms/templates/js/video-thumbnail-error.underscore b/cms/templates/js/video-thumbnail-error.underscore index ef7d265a38..8e0e84a7d6 100644 --- a/cms/templates/js/video-thumbnail-error.underscore +++ b/cms/templates/js/video-thumbnail-error.underscore @@ -1,7 +1,8 @@ - - - - <%- errorText %> - +
+
+ + <%- errorText %> +
+