CSS based deletion confirmation, freedomofpress#295

daonb · Dec 7, 2017 · c449bbd · c449bbd
1 parent bc5cc50
commit c449bbd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/securedrop/journalist_templates/index.html b/securedrop/journalist_templates/index.html
@@ -12,7 +12,11 @@ <h1><span class="headline">{{ gettext('Sources') }}</span></h1>
         <button type="submit" name="action" value="download-all" class="small"><i class="fa fa-download"></i> {{ gettext('Download') }}</button>
         <button type="submit" name="action" value="star" class="small"><i class="fa fa-star"></i> {{ gettext('Star') }}</button>
         <button type="submit" name="action" value="un-star" class="small"><i class="fa fa-star-half-full"></i> {{ gettext('Un-star') }}</button>
-        <button type="submit" id="delete-collections" name="action" value="delete" class="small-danger"><i class="fa fa-trash-o"></i> {{ gettext('Delete') }}</button>
+        <input type="checkbox" id="delete-checkbox" name="input" class="small-danger" />
+        <label for="delete-checkbox" class="btn" id="delete-label"><i class="fa fa-trash-o"></i>{{ gettext('Delete') }}</label>
+        <button type="submit" id="delete-collections" name="action"
+        value="delete" class="small-danger"> {{
+            gettext('Confirm') }}</button>
       </p>
 
       {% if starred %}

diff --git a/securedrop/sass/journalist.sass b/securedrop/sass/journalist.sass
@@ -98,3 +98,16 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
 
 .journalist-reply__input
   max-width: 700px
+
+#delete-checkbox
+  display: none
+
+#delete-label
+  font-size: 13px
+  padding: 3px 7px
+
+#delete-collections
+  visibility: hidden
+
+#delete-checkbox:checked ~ #delete-collections
+  visibility: visible
diff --git a/securedrop/static/js/journalist.js b/securedrop/static/js/journalist.js
@@ -61,21 +61,6 @@ $(function () {
       }
     });
 
-  $("#delete-collection").submit(function () {
-    return confirm(get_string("collection-delete-confirm-string"));
-  });
-
-  $("#delete-collections").click(function () {
-    var checked = $(".panel ul#cols li :checkbox").filter(":visible").filter(function(index) {
-        return $(this).prop('checked');
-    });
-    if (checked.length > 0) {
-      return confirm(get_string("collection-multi-delete-confirm-string").supplant({ size: checked.length }));
-    }
-    // Don't submit the form if no collections are selected
-    return false;
-  });
-
   $("#delete-selected").click(function () {
       var checked = $(".panel ul#submissions li :checkbox").filter(function() {
           return $(this).prop('checked')