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] 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>