Merge pull request #15641 from jspayd/toggle-timer-upstream

Toggle timer visibility on timed exams

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,26 @@
             color: $action-primary-bg;
           }
         }
+        .exam-timer-clock {
+          background-color: transparent;
+          border: 1px solid $white;
+          #toggle_timer, b {
+            color: $white;
+          }
+          #toggle_timer {
+            border-top: none;
+            border-right: none;
+            border-bottom: none;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+
+            &:hover {
+              border-top: none;
+              border-right: none;
+              border-bottom: none;
+            }
+          }
+        }
       }
     }
     &.warning {
@@ -128,5 +145,27 @@
         border: 0;
       }
     }
+    .exam-timer-clock {
+      display: inline-block;
+      padding: 0 0 0 ($baseline/3);
+      background-color: $gray-l3;
+      border-radius: 3px;
+
+      #toggle_timer {
+        @extend .exam-button-turn-in-exam;
+
+        padding: ($baseline/5) ($baseline/3);
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        margin-right: 0;
+      }
+      b {
+        padding-right: ($baseline/5);
+
+        &.timer-hidden {
+          visibility: hidden;
+        }
+      }
+    }
   }
 }

lms/templates/courseware/proctored-exam-status.underscore

@@ -19,9 +19,14 @@
             <% } %>
         </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">
+                <b>
+                </b>
+            </span>
+            <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>
     </div>
 </div>