Replace the gear icon with three horizontal dots icon. Fixes #322.

Add a Pause button in the checks list. Fixes #312

CHANGELOG.md

@@ -9,6 +9,8 @@ All notable changes to this project will be documented in this file.
 - For superusers, show "Site Administration" in top navigation, note in README (#317)
 - Make Ping.body size limit configurable (#301)
 - Show sub-second durations with higher precision, 2 digits after decimal point (#321)
+- Replace the gear icon with three horizontal dots icon (#322)
+- Add a Pause button in the checks list (#312)
 
 ### Bug Fixes
 - Increase the allowable length of Matrix room alias to 100 (#320)

hc/front/tests/test_pause.py

@@ -44,3 +44,8 @@ class PauseTestCase(BaseTestCase):
         self.check.refresh_from_db()
         self.assertEqual(self.check.last_start, None)
         self.assertEqual(self.check.alert_after, None)
+
+    def test_it_does_not_redirect_ajax(self):
+        self.client.login(username="alice@example.org", password="password")
+        r = self.client.post(self.url, HTTP_X_REQUESTED_WITH="XMLHttpRequest")
+        self.assertEqual(r.status_code, 200)

hc/front/views.py

@@ -428,6 +428,10 @@ def pause(request, code):
     if "/details/" in request.META.get("HTTP_REFERER", ""):
         return redirect("hc-details", code)
 
+    # Don't redirect after an AJAX request:
+    if request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
+        return HttpResponse()
+
     return redirect("hc-checks", check.project.code)
 
 

static/css/icomoon.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?jvwv9j');
-  src:  url('../fonts/icomoon.eot?jvwv9j#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?jvwv9j') format('truetype'),
-    url('../fonts/icomoon.woff?jvwv9j') format('woff'),
-    url('../fonts/icomoon.svg?jvwv9j#icomoon') format('svg');
+  src:  url('../fonts/icomoon.eot?pl16ut');
+  src:  url('../fonts/icomoon.eot?pl16ut#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?pl16ut') format('truetype'),
+    url('../fonts/icomoon.woff?pl16ut') format('woff'),
+    url('../fonts/icomoon.svg?pl16ut#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

static/css/my_checks_desktop.css

@@ -132,3 +132,29 @@ tr:hover .copy-link {
     color: #888;
     white-space: nowrap;
 }
+
+#checks-table .actions {
+    white-space: nowrap;
+}
+
+#checks-table .btn {
+    border-color: transparent;
+    font-size: 20px;
+    color: #999;
+}
+
+#checks-table tr:hover .btn {
+    color: #666;
+    background: transparent;
+    opacity: 1;
+}
+
+#checks-table tr:hover .btn:hover {
+    background: #DDD;
+    color: #000;
+}
+
+#checks-table .pause {
+    opacity: 0;
+}
+

static/js/checks.js

@@ -138,6 +138,21 @@ $(function () {
         return false;
     });
 
+    $(".pause").click(function(e) {
+        var code = $(this).closest("tr.checks-row").attr("id");
+        $("#" + code + " span.status").attr("class", "status icon-paused");
+
+        var url = base + "/checks/" + code + "/pause/";
+        var token = $('input[name=csrfmiddlewaretoken]').val();
+        $.ajax({
+            url: url,
+            type: "post",
+            headers: {"X-CSRFToken": token}
+        });
+
+        return false;
+    });
+
     $('[data-toggle="tooltip"]').tooltip({
         html: true,
         container: "body",
@@ -171,7 +186,6 @@ $(function () {
                     if (lastStatus[el.code] != el.status) {
                         lastStatus[el.code] = el.status;
                         $("#" + el.code + " span.status").attr("class", "status icon-" + el.status);
-                        $("#" + el.code + " .pause-li").toggleClass("disabled", el.status == "paused");
                     }
 
                     if (lastPing[el.code] != el.last_ping) {

templates/front/my_checks_desktop.html

@@ -120,9 +120,13 @@
                 {% include "front/last_ping_cell.html" with check=check %}
             </div>
         </td>
-        <td>
-            <button class="btn btn-sm btn-default show-log" type="button">
-                <span class="icon-settings" aria-hidden="true"></span>
+        <td class="actions">
+            <button title="Pause" class="btn btn-default pause" type="button">
+                <span class="icon-paused" />
+            </button>
+
+            <button title="Show Details" class="btn btn-default show-log" type="button">
+                <span class="icon-dots" />
             </button>
         </td>
     </tr>