diff --git a/cms/static/js/spec/views/active_video_upload_list_spec.js b/cms/static/js/spec/views/active_video_upload_list_spec.js index 35cfe5076c..cc1a16d05a 100644 --- a/cms/static/js/spec/views/active_video_upload_list_spec.js +++ b/cms/static/js/spec/views/active_video_upload_list_spec.js @@ -57,6 +57,20 @@ define( jasmine.Ajax.uninstall(); }); + it('renders correct text in file drag/drop area', function() { + var messages = { + '.video-uploads-header': this.view.uploadHeader, + '.video-upload-text': this.view.uploadText.toString(), + '.video-max-file-size-text': this.view.maxSizeText, + '.video-allowed-extensions-text': this.view.supportedVideosText + }, + self = this; + + Object.keys(messages).forEach(function(messageClass) { + expect(self.view.$(messageClass).html()).toEqual(messages[messageClass]); + }); + }); + it('should trigger file selection when either the upload button or the drop zone is clicked', function() { var clickSpy = jasmine.createSpy(); clickSpy.and.callFake(function(event) { event.preventDefault(); }); diff --git a/cms/static/js/views/active_video_upload_list.js b/cms/static/js/views/active_video_upload_list.js index 5b53ff12ca..d34533890d 100644 --- a/cms/static/js/views/active_video_upload_list.js +++ b/cms/static/js/views/active_video_upload_list.js @@ -23,10 +23,18 @@ define([ 'drop .file-drop-area': 'dragleave' }, + uploadHeader: gettext('Upload Videos'), + uploadText: HtmlUtils.interpolateHtml( + gettext('Drag and drop or {spanStart}browse your computer{spanEnd}.'), + { + spanStart: HtmlUtils.HTML(''), + spanEnd: HtmlUtils.HTML('') + } + ), defaultFailureMessage: gettext('This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.'), // eslint-disable-line max-len initialize: function(options) { - this.template = HtmlUtils.template(activeVideoUploadListTemplate)({}); + this.template = HtmlUtils.template(activeVideoUploadListTemplate); this.collection = new Backbone.Collection(); this.itemViews = []; this.listenTo(this.collection, 'add', this.addUpload); @@ -38,6 +46,19 @@ define([ if (options.uploadButton) { options.uploadButton.click(this.chooseFile.bind(this)); } + + this.maxSizeText = StringUtils.interpolate( + gettext('Maximum file size: {maxFileSize} GB'), + { + maxFileSize: this.videoUploadMaxFileSizeInGB + } + ); + this.supportedVideosText = edx.StringUtils.interpolate( + gettext('Supported file types: {supportedVideoTypes}'), + { + supportedVideoTypes: this.videoSupportedFileFormats.join(', ') + } + ); }, render: function() { @@ -45,7 +66,12 @@ define([ HtmlUtils.setHtml( this.$el, - this.template + this.template({ + uploadHeader: this.uploadHeader, + uploadText: this.uploadText, + maxSizeText: this.maxSizeText, + supportedVideosText: this.supportedVideosText + }) ); _.each(this.itemViews, this.renderUploadView.bind(this)); this.$uploadForm = this.$('.file-upload-form'); diff --git a/cms/static/sass/views/_video-upload.scss b/cms/static/sass/views/_video-upload.scss index 9cf03eaa53..0753ff3621 100644 --- a/cms/static/sass/views/_video-upload.scss +++ b/cms/static/sass/views/_video-upload.scss @@ -4,14 +4,6 @@ @include box-sizing(border-box); } - .content-primary { - @extend .ui-col-wide; - } - - .content-supplementary { - @extend .ui-col-narrow; - } - .nav-actions { .fa-cloud-upload { @@ -23,15 +15,15 @@ .file-upload-form { @include clearfix(); - margin-bottom: ($baseline*1.5); width: 100%; .file-drop-area { border: 2px dashed $gray-l3; border-radius: ($baseline/5); - padding: ($baseline*3); + padding: ($baseline*1.25); background: $white; - text-align: center; + @include text-align(center); + cursor: pointer; &:hover, &.is-dragged { @@ -39,6 +31,35 @@ border-style: solid; border-color: $blue-l4; } + + &:hover .upload-text-link { + text-decoration:underline; + } + + .fa-cloud-upload{ + font-size:7em; + vertical-align: top; + @include margin-right(0.1em); + } + + .text-container { + display: inline-block; + @include text-align(left); + + .upload-text-link { + color: $ui-link-color; + } + + .video-uploads-header { + font-size: 1.5em; + margin-bottom: .25em; + font-weight: 600 + } + + .video-max-file-size-text { + margin-top: ($baseline/2); + } + } } } diff --git a/cms/templates/js/active-video-upload-list.underscore b/cms/templates/js/active-video-upload-list.underscore index 87b2e012f8..4525e4cf02 100644 --- a/cms/templates/js/active-video-upload-list.underscore +++ b/cms/templates/js/active-video-upload-list.underscore @@ -1,6 +1,12 @@
diff --git a/cms/templates/videos_index.html b/cms/templates/videos_index.html index 94e5acb901..6c8f96f4f5 100644 --- a/cms/templates/videos_index.html +++ b/cms/templates/videos_index.html @@ -66,36 +66,6 @@