AC-524 - label - test_lms_instructor_dashboard.py

lms/static/coffee/fixtures/autoenrollment.html

@@ -7,14 +7,14 @@
 
   <form id="student-auto-enroll-form">
     <div class="customBrowseBtn">
-      <input disabled="disabled" id="browseFile" placeholder="choose file"/>
-
-      <div class="file-browse btn btn-primary">
-        <label for="browseBtn-auto_enroll_csv" class="browse">Browse</label>
-        <input class="file_field" id="browseBtn-auto_enroll_csv" name="students_list" type="file" accept=".csv"/>
-      </div>
+        <label for="browseBtn-auto-enroll">Upload a CSV for bulk enrollment</label>
+        <span id="browseFile" class="enhanced-input-file"></span>
+        <div class="file-browse btn btn-primary" aria-hidden="true">
+            <span class="browse">Browse</span>
+            <input class="file_field" id="browseBtn-auto-enroll" name="students_list" type="file" accept=".csv"/>
+        </div>
     </div>
-    <button type="submit" id="submitBtn-auto_enroll_csv" name="enrollment_signup_button">Upload CSV</button>
+    <button type="submit" class="btn-blue" id="submitBtn-auto_enroll_csv" name="enrollment_signup_button">Upload CSV</button>
   </form>
   <div class="results"></div>
 </div>

lms/static/coffee/src/instructor_dashboard/membership.coffee

@@ -186,7 +186,7 @@ class @AutoEnrollmentViaCsv
     @$students_list_file = @$container.find("input[name='students_list']")
     @$csrf_token = @$container.find("input[name='csrfmiddlewaretoken']")
     @$results = @$container.find("div.results")
-    @$browse_button = @$container.find("#browseBtn-auto_enroll_csv")
+    @$browse_button = @$container.find("#browseBtn-auto-enroll")
     @$browse_file = @$container.find("#browseFile")
 
     @processing = false

lms/static/js/certificates/views/certificate_bulk_whitelist.js

@@ -31,9 +31,9 @@
             return Backbone.View.extend({
                 el: DOM_SELECTORS.bulk_exception,
                 events: {
-                    'change #browseBtn': 'chooseFile',
+                    'change #browseBtn-bulk-csv': 'chooseFile',
                     'click .upload-csv-button': 'uploadCSV',
-                    'click a.arrow': 'toggleMessageDetails'
+                    'click .arrow': 'toggleMessageDetails'
                 },
 
                 initialize: function(options){
@@ -138,7 +138,7 @@
                         $('<div/>', {
                             class: 'message ' + group
                         }).appendTo('.bulk-exception-results').prepend(
-                                "<a  id= '" + group + "' href='javascript:void(0);' class='arrow'> + </a>" +  heading
+                                "<button type='button' id= '" + group + "' class='arrow'> + </button>" +  heading
                         ).append($('<ul/>', {
                                 class: group
                             }));
@@ -206,7 +206,7 @@
                 chooseFile: function(event) {
                     if (event && event.preventDefault) { event.preventDefault(); }
                     if (event.currentTarget.files.length === 1) {
-                        this.$el.find(DOM_SELECTORS.upload_csv_button).attr('disabled', 'false');
+                        this.$el.find(DOM_SELECTORS.upload_csv_button).removeAttr('disabled');
                         this.$el.find(DOM_SELECTORS.browse_file).val(
                             event.currentTarget.value.substring(event.currentTarget.value.lastIndexOf("\\") + 1));
                     }

lms/static/js/spec/instructor_dashboard/certificates_bulk_exception_spec.js

@@ -136,7 +136,7 @@ define([
                 this.view.$el.find(SELECTORS.bulk_white_list_exception_form).submit(submitCallback);
                 this.view.$el.find(SELECTORS.upload_csv_button).click();
                 expect(this.view.$el.find("div.message > .successfully-added")).toBeHidden();
-                this.view.$el.find("a.arrow#successfully-added").trigger( "click" );
+                this.view.$el.find(".arrow#successfully-added").trigger( "click" );
                 expect(this.view.$el.find("div.message > .successfully-added")).toBeVisible();
 
             });

lms/static/sass/course/instructor/_instructor_2.scss

@@ -134,6 +134,70 @@
       }
     }
   }
+  
+    .btn-blue {
+        @extend %btn-primary-blue;
+        margin-bottom: 0;
+        padding: ($baseline/2.5) ($baseline/2);
+        text-shadow: none;
+    }
+
+    // Custom File upload
+    .customBrowseBtn {
+        display: inline-block;
+        position: relative;
+        margin: ($baseline/2) 0 0;
+        width: 350px;
+        overflow: hidden;
+        vertical-align: bottom;
+
+        .enhanced-input-file {
+            @include border-radius(4px 0 0 4px);
+            @include padding(23px 6px 5px);
+            position: relative;
+            display: inline-block;
+            width: 250px;
+            vertical-align: middle;
+            border: 1px solid $lightGrey1;
+            background: $white;
+            cursor: not-allowed;
+            z-index: 2;
+        }
+
+        .file-browse {
+            @include margin-left(-4px);
+            display: inline-block;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+
+            .browse {
+                @include button(simple, $uxpl-blue-base);
+                @include margin-left(268px);
+                border-radius: 0 3px 3px 0;
+                padding: 6px ($baseline/2);
+                font-size: 12px;
+            }
+
+            .file_field {
+                @include left(-27%);
+                position: absolute;
+                z-index: 3;
+                height: 24px; // To match bull browse button
+                width: 124%;
+                margin: 0;
+                padding: 4px 0 0 0;
+                cursor: pointer;
+
+                // for visual sync, need to make button similar to firefox
+                &::-webkit-file-upload-button {
+                    width: 100px;
+                }
+            }
+        }
+    }
 }
 
 // instructor dashboard 2
@@ -2167,13 +2231,6 @@ input[name="subject"] {
 // --------------------
 .instructor-dashboard-wrapper-2 section.idash-section#certificates {
 
-  .btn-blue {
-    @extend %btn-primary-blue;
-    padding: ($baseline/2.5) ($baseline/2);
-    text-shadow: none;
-    margin-bottom: 10px;
-  }
-
   %exception-message {
         margin-top: 15px;
         background-color: $gray-l4;
@@ -2343,47 +2400,14 @@ input[name="subject"] {
         }
 
       }
-      .arrow {
-        font-weight: bold;
-      }
+        .arrow {
+            @include margin-right($baseline/2);
+            border: none;
+            background: transparent;
+            box-shadow: none;
+            color: $uxpl-blue-base;
+            font-weight: bold;
+        }
     }
   }
-
-}
-
-// Custom File upload
-.customBrowseBtn {
-  margin: ($baseline/2) 0;
-  display: inline-block;
-  .file-browse {
-    position: relative;
-    overflow: hidden;
-    display: inline;
-    @include margin-left(-5px);
-    span.browse {
-      @include button(simple, $uxpl-blue-base);
-      @include margin-right($baseline);
-      padding: 6px ($baseline/2);
-      font-size: 12px;
-      border-radius: 0 3px 3px 0;
-    }
-    input.file_field {
-      @extend %cont-text-sr;
-      position: absolute;
-      @include right(0);
-      top: 0;
-      margin: 0;
-      padding: 0;
-      cursor: pointer;
-    }
-  }
-  & > span, & input[disabled] {
-    vertical-align: middle;
-  }
-  input[disabled] {
-    @include border-radius(4px 0 0 4px);
-    @include padding(6px 6px 5px);
-    border: 1px solid $lightGrey1;
-    cursor: not-allowed;
-  }
 }