adds action bar component and basic functionality for selecting multiple checkboxes

opentech/apply/funds/templates/funds/base_submissions_table.html

@@ -22,4 +22,5 @@
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
     <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/tabs.js' %}"></script>
+    <script src="{% static 'js/apply/batch-actions.js' %}"></script>
 {% endblock %}

opentech/apply/funds/templates/funds/includes/table_filter_and_search.html

 <div class="wrapper wrapper--table-actions">
-    <button class="button button--filters button--contains-icons js-toggle-filters">Filters</button>
+    <div class="actions-bar">
+        {# Left #}
+        <div class="actions-bar__inner actions-bar__inner--left">
+            <p class="actions-bar__total"><span class="js-total-actions">0</span> Selected</p>
+            <form>
+                <button class="button button--action button--change-status" type="submit">Change status</button>
+            </form>
+
+            <form>
+                <button class="button button--action button--reviewers" type="submit">Reviewers</button>
+            </form>
+        </div>
+
+        {# Right #}
+        <div class="actions-bar__inner actions-bar__inner--right">
+            <button class="button button--filters button--contains-icons button--action js-toggle-filters">Filters</button>
+
+            {% if use_search|default:False %}
+            <form method="get" role="search" class="form form--search-desktop js-search-form">
+                <button class="button button--search" type="submit" aria-label="Search">
+                    <svg class="icon icon--magnifying-glass icon--search"><use xlink:href="#magnifying-glass"></use></svg>
+                </button>
+                <input class="input input--search input--secondary js-search-input" type="text" placeholder="Search submissions" name="query"{% if search_term %} value="{{ search_term }}"{% endif %} aria-label="Search input">
+            </form>
+            {% endif %}
+        </div>
+    </div>
 
-    {% if use_search|default:False %}
-    <form method="get" role="search" class="form form--search js-search-form">
-        <button class="button button--search" type="submit" aria-label="Search">
-            <svg class="icon icon--magnifying-glass icon--search"><use xlink:href="#magnifying-glass"></use></svg>
-        </button>
-        <input class="input input--search input--secondary js-search-input" type="text" placeholder="Search submissions" name="query"{% if search_term %} value="{{ search_term }}"{% endif %} aria-label="Search input">
-    </form>
-    {% endif %}
 </div>
 
 <div class="filters">

opentech/static_src/src/images/add-person.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#0d7db0" d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>

opentech/static_src/src/images/arrow-split.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#0d7db0" d="M14 4l2.29 2.29-2.88 2.88 1.42 1.42 2.88-2.88L20 10V4zm-4 0H4v6l2.29-2.29 4.71 4.7V20h2v-8.41l-5.29-5.3z"/></svg>

opentech/static_src/src/javascript/apply/batch-actions.js

+(function ($) {
+
+    'use strict';
+
+    const $body = $('body');
+    const $checkbox = $('.js-batch-select');
+    const $allCheckboxInput = $('.js-batch-select-all');
+    const activeClass = 'batch-actions-enabled';
+
+    $allCheckboxInput.change(function() {
+        if ($(this).is(':checked')) {
+            $checkbox.each(function() {
+                this.checked = true;
+            });
+        } else {
+            $checkbox.each(function() {
+                this.checked = false;
+            });
+        }
+
+        updateCount();
+    })
+
+    $checkbox.change(function () {
+
+        // see how many checkboxes are :checked
+        checkTotalSelected();
+
+        // updates selected checbox count
+        updateCount();
+    });
+
+    function checkTotalSelected() {
+        if ($('.js-batch-select:checked').length) {
+            $body.addClass(activeClass);
+        }
+        else {
+            $body.removeClass(activeClass);
+        }
+    }
+
+    function updateCount() {
+        $('.js-total-actions').html($('.js-batch-select:checked').length);
+    }
+
+
+
+})(jQuery);

opentech/static_src/src/sass/apply/components/_actions-bar.scss

+.actions-bar {
+    margin-bottom: 20px;
+
+    @include media-query(tablet-landscape) {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__inner {
+        display: flex;
+        align-items: center;
+
+        & > * {
+            padding-left: 20px;
+        }
+
+        &--left {
+            display: none;
+
+            @include media-query(tablet-landscape) {
+                display: flex;
+            }
+        }
+    }
+
+    &__total {
+        background-color: $color--light-blue;
+        color: $color--white;
+        padding: 6px 16px;
+        border-radius: 30px;
+    }
+}

opentech/static_src/src/sass/apply/components/_button.scss

@@ -80,25 +80,10 @@
         width: 100%;
 
         @include media-query(tablet-landscape) {
-            background: none;
-            padding: 0 10px;
-            border: 0;
-            align-items: center;
-            justify-content: flex-start;
-            max-width: initial;
-            width: auto;
-
             &::before {
                 content: '';
                 background-image: url('./../../images/filters.svg');
-                background-color: transparent;
-                background-position: left center;
                 transform: rotate(90deg);
-                background-size: 20px;
-                width: 20px;
-                height: 20px;
-                display: inline-block;
-                margin-right: 10px;
             }
         }
     }
@@ -221,4 +206,53 @@
             fill: $color--white;
         }
     }
+
+    &--action {
+        display: flex;
+        font-weight: $weight--normal;
+        color: $color--default;
+        transition: none;
+
+        @include media-query(tablet-landscape) {
+            background: none;
+            padding: 0;
+            border: 0;
+            align-items: center;
+            justify-content: flex-start;
+            max-width: initial;
+            width: auto;
+            transition: opacity $transition;
+            opacity: 0.7;
+            font-weight: $weight--semibold;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            &::before {
+                content: '';
+                background-image: url('./../../images/filters.svg');
+                background-color: transparent;
+                background-position: left center;
+                background-size: 20px;
+                width: 20px;
+                height: 20px;
+                display: inline-block;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    &--change-status {
+        &::before {
+            background-image: url('./../../images/arrow-split.svg');
+            transform: rotate(90deg);
+        }
+    }
+
+    &--reviewers {
+        &::before {
+            background-image: url('./../../images/add-person.svg');
+        }
+    }
 }

opentech/static_src/src/sass/apply/main.scss

@@ -12,6 +12,7 @@
 @import 'components/all-rounds-table';
 @import 'components/admin-bar';
 @import 'components/activity-feed';
+@import 'components/actions-bar';
 @import 'components/comment';
 @import 'components/button';
 @import 'components/editor';