From ecf85e0c21ff09f7d51a9f23cfcf949dd8452fba Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 22 Jan 2019 16:09:12 +0000
Subject: [PATCH] adds action bar component and basic functionality for
selecting multiple checkboxes
---
.../funds/base_submissions_table.html | 1 +
.../includes/table_filter_and_search.html | 36 ++++++++---
opentech/static_src/src/images/add-person.svg | 1 +
.../static_src/src/images/arrow-split.svg | 1 +
.../src/javascript/apply/batch-actions.js | 48 ++++++++++++++
.../sass/apply/components/_actions-bar.scss | 32 ++++++++++
.../src/sass/apply/components/_button.scss | 64 ++++++++++++++-----
opentech/static_src/src/sass/apply/main.scss | 1 +
8 files changed, 160 insertions(+), 24 deletions(-)
create mode 100644 opentech/static_src/src/images/add-person.svg
create mode 100644 opentech/static_src/src/images/arrow-split.svg
create mode 100644 opentech/static_src/src/javascript/apply/batch-actions.js
create mode 100644 opentech/static_src/src/sass/apply/components/_actions-bar.scss
diff --git a/opentech/apply/funds/templates/funds/base_submissions_table.html b/opentech/apply/funds/templates/funds/base_submissions_table.html
index d9214f80d..e9296c842 100644
--- a/opentech/apply/funds/templates/funds/base_submissions_table.html
+++ b/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 %}
diff --git a/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html b/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
index e4cff0f2d..0bf5a3112 100644
--- a/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
+++ b/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
@@ -1,14 +1,32 @@
<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">
diff --git a/opentech/static_src/src/images/add-person.svg b/opentech/static_src/src/images/add-person.svg
new file mode 100644
index 000000000..4d2cd548b
--- /dev/null
+++ b/opentech/static_src/src/images/add-person.svg
@@ -0,0 +1 @@
+<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>
diff --git a/opentech/static_src/src/images/arrow-split.svg b/opentech/static_src/src/images/arrow-split.svg
new file mode 100644
index 000000000..27ba4b500
--- /dev/null
+++ b/opentech/static_src/src/images/arrow-split.svg
@@ -0,0 +1 @@
+<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>
diff --git a/opentech/static_src/src/javascript/apply/batch-actions.js b/opentech/static_src/src/javascript/apply/batch-actions.js
new file mode 100644
index 000000000..f1ad28e3f
--- /dev/null
+++ b/opentech/static_src/src/javascript/apply/batch-actions.js
@@ -0,0 +1,48 @@
+(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);
diff --git a/opentech/static_src/src/sass/apply/components/_actions-bar.scss b/opentech/static_src/src/sass/apply/components/_actions-bar.scss
new file mode 100644
index 000000000..148504ba0
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_actions-bar.scss
@@ -0,0 +1,32 @@
+.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;
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 5ebcce897..706d3ef52 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/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');
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 4423f6ed5..386c5f111 100644
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/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';
--
GitLab