From dd6d172abe3198e7a4460eff93b5dd2bb571c6b9 Mon Sep 17 00:00:00 2001
From: Joshua Spayd <jds9496@gmail.com>
Date: Fri, 30 Jun 2017 14:15:54 -0700
Subject: [PATCH 1/6] WIP: Add toggle timer functionality

JavaScript needs to be moved to edx-proctoring repo
---
 .../course/layout/_courseware_preview.scss    | 43 +++++++++++++++++--
 .../proctored-exam-status.underscore          | 23 ++++++++--
 2 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 2261747188..2779390bf2 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -88,9 +88,6 @@
       }
       .pull-right {
         color: $gray-l3;
-        b {
-          color: $white;
-        }
 
         .exam-button-turn-in-exam {
           background-color: transparent;
@@ -103,6 +100,27 @@
             color: $action-primary-bg;
           }
         }
+        .exam-timer-clock {
+          background-color: transparent;
+          border: 1px solid $white;
+          a, b {
+            color: $white;
+          }
+          a {
+            // Overrides:
+            border-top: none;
+            border-right: none;
+            border-bottom: none;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            &:hover {
+              // Overrides:
+              border-top: none;
+              border-right: none;
+              border-bottom: none;
+            }
+          }
+        }
       }
     }
     &.warning {
@@ -128,5 +146,24 @@
         border: 0;
       }
     }
+    .exam-timer-clock {
+      display: inline-block;
+      padding: 0 0 0 ($baseline/3);
+      background-color: $gray-l3;
+      border-radius: 3px;
+
+      a {
+        @extend .exam-button-turn-in-exam;
+
+        //Overrides:
+        padding: ($baseline/5) ($baseline/3);
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        margin-right: 0;
+      }
+      b {
+        padding-right: ($baseline/5);
+      }
+    }
   }
 }
diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index 68fd212247..2c65760ec5 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -19,9 +19,26 @@
             <% } %>
         </span>
         <span class="sr timer-announce" aria-live="assertive"></span>
-        <span id="time_remaining_id">
-            <b>
-            </b>
+        <span class="exam-timer-clock">
+            <span id="time_remaining_id" style="visibility: visible;">
+                <b>
+                </b>
+            </span>
+            <a id="toggle_timer" href="#" title="<%- gettext("Hide Timer") %>"><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
+            <script type="text/javascript">
+                $("#toggle_timer").click(function() {
+                    if ($("#time_remaining_id").css("visibility") === "visible") {
+                        $("#time_remaining_id").css("visibility", "hidden");
+                        $(this).attr("title", "<%- gettext("Show Timer") %>");
+                        $(this).find("i").removeClass("fa-eye-slash").addClass("fa-eye");
+                    } else {
+                        $("#time_remaining_id").css("visibility", "visible");
+                        $(this).attr("title", "<%- gettext("Hide Timer") %>");
+                        $(this).find("i").removeClass("fa-eye").addClass("fa-eye-slash");
+                    }
+                    return false; // prevents the window from scrolling up on click
+                });
+            </script>
         </span>
     </div>
 </div>

From 9da5be0298574429acc6f4b994f234c67730f8fd Mon Sep 17 00:00:00 2001
From: Joshua Spayd <jds9496@gmail.com>
Date: Thu, 20 Jul 2017 16:02:09 -0700
Subject: [PATCH 2/6] Move JavaScript to edx-proctoring repo

---
 .../courseware/proctored-exam-status.underscore    | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index 2c65760ec5..bf7c815a86 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -25,20 +25,6 @@
                 </b>
             </span>
             <a id="toggle_timer" href="#" title="<%- gettext("Hide Timer") %>"><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
-            <script type="text/javascript">
-                $("#toggle_timer").click(function() {
-                    if ($("#time_remaining_id").css("visibility") === "visible") {
-                        $("#time_remaining_id").css("visibility", "hidden");
-                        $(this).attr("title", "<%- gettext("Show Timer") %>");
-                        $(this).find("i").removeClass("fa-eye-slash").addClass("fa-eye");
-                    } else {
-                        $("#time_remaining_id").css("visibility", "visible");
-                        $(this).attr("title", "<%- gettext("Hide Timer") %>");
-                        $(this).find("i").removeClass("fa-eye").addClass("fa-eye-slash");
-                    }
-                    return false; // prevents the window from scrolling up on click
-                });
-            </script>
         </span>
     </div>
 </div>

From db6f59987d4cdd8a170d93caefcde4f7fcfd3e7c Mon Sep 17 00:00:00 2001
From: Joshua Spayd <jds9496@gmail.com>
Date: Tue, 25 Jul 2017 00:12:11 +0000
Subject: [PATCH 3/6] Style timer with class rather than style attribute

---
 lms/static/sass/course/layout/_courseware_preview.scss    | 4 ++++
 lms/templates/courseware/proctored-exam-status.underscore | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 2779390bf2..b913b78f1e 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -163,6 +163,10 @@
       }
       b {
         padding-right: ($baseline/5);
+
+        &.timer-hidden {
+          visibility: hidden;
+        }
       }
     }
   }
diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index bf7c815a86..f19cee8151 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -20,7 +20,7 @@
         </span>
         <span class="sr timer-announce" aria-live="assertive"></span>
         <span class="exam-timer-clock">
-            <span id="time_remaining_id" style="visibility: visible;">
+            <span id="time_remaining_id">
                 <b>
                 </b>
             </span>

From dc22ec501846564ab74fcbcf0416e8b2c24a149d Mon Sep 17 00:00:00 2001
From: Joshua Spayd <jds9496@gmail.com>
Date: Wed, 26 Jul 2017 18:41:06 +0000
Subject: [PATCH 4/6] Make timer toggle accessible

---
 lms/static/sass/course/layout/_courseware_preview.scss    | 6 +++---
 lms/templates/courseware/proctored-exam-status.underscore | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index b913b78f1e..9a0b5e7d3a 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -103,10 +103,10 @@
         .exam-timer-clock {
           background-color: transparent;
           border: 1px solid $white;
-          a, b {
+          #toggle_timer, b {
             color: $white;
           }
-          a {
+          #toggle_timer {
             // Overrides:
             border-top: none;
             border-right: none;
@@ -152,7 +152,7 @@
       background-color: $gray-l3;
       border-radius: 3px;
 
-      a {
+      #toggle_timer {
         @extend .exam-button-turn-in-exam;
 
         //Overrides:
diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index f19cee8151..3ff21f35ed 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -24,7 +24,9 @@
                 <b>
                 </b>
             </span>
-            <a id="toggle_timer" href="#" title="<%- gettext("Hide Timer") %>"><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
+            <button id="toggle_timer" title="<%- gettext("Hide Timer") %>" aria-label="<%- gettext("Hide Timer") %>">
+                <i class="fa fa-eye-slash" aria-hidden="true"></i>
+            </button>
         </span>
     </div>
 </div>

From bdeb2e865a51eb8d63776300affbd5bc4b131fba Mon Sep 17 00:00:00 2001
From: Joshua Spayd <jds9496@gmail.com>
Date: Wed, 26 Jul 2017 22:13:50 +0000
Subject: [PATCH 5/6] Remove unnecessary "// Overrides" comments

---
 lms/static/sass/course/layout/_courseware_preview.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 9a0b5e7d3a..46397c96ad 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -107,14 +107,13 @@
             color: $white;
           }
           #toggle_timer {
-            // Overrides:
             border-top: none;
             border-right: none;
             border-bottom: none;
             border-top-right-radius: 2px;
             border-bottom-right-radius: 2px;
+
             &:hover {
-              // Overrides:
               border-top: none;
               border-right: none;
               border-bottom: none;
@@ -155,7 +154,6 @@
       #toggle_timer {
         @extend .exam-button-turn-in-exam;
 
-        //Overrides:
         padding: ($baseline/5) ($baseline/3);
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;

From ab8717edbfb3afe485590e2dcf00cc9a8f54f2b2 Mon Sep 17 00:00:00 2001
From: Joshua Spayd <jds9496@gmail.com>
Date: Thu, 17 Aug 2017 14:42:04 -0700
Subject: [PATCH 6/6] Fix timer accessibility problems

---
 lms/templates/courseware/proctored-exam-status.underscore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index 3ff21f35ed..301223673a 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -24,7 +24,7 @@
                 <b>
                 </b>
             </span>
-            <button id="toggle_timer" title="<%- gettext("Hide Timer") %>" aria-label="<%- gettext("Hide Timer") %>">
+            <button role="button" id="toggle_timer" aria-label="<%- gettext("Hide Timer") %>" aria-pressed="false">
                 <i class="fa fa-eye-slash" aria-hidden="true"></i>
             </button>
         </span>