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 2b4727e2b5128931ddd9b5b5621368b39901e32d..96681248c177350730d2d3beb627323f179c648d 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
@@ -11,16 +11,28 @@
<div class="actions-bar__inner actions-bar__inner--batch-actions">
<p class="actions-bar__total"><span class="js-total-actions">0</span> Selected</p>
- <button data-fancybox data-src="#batch-progress" class="button button--action button--batch-status js-batch-button js-batch-progress" type="button">Status</button>
+ <button
+ data-fancybox
+ type="button"
+ data-src="#batch-progress"
+ class="button button--action button--change-status js-batch-button js-batch-progress"
+ data-tooltip="Status changes can't be applied to submissions with different current status."
+ >
+ <svg><use xlink:href="#arrow-split"></use></svg>
+ Status
+ </button>
- <button data-fancybox data-src="#batch-update-reviewers" class="button button--action button--reviewers js-batch-button" type="button">Reviewers</button>
+ <button data-fancybox data-src="#batch-update-reviewers" class="button button--action js-batch-button" type="button">
+ <svg><use xlink:href="#add-person"></use></svg>
+ Reviewers
+ </button>
</div>
{% endif %}
</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>
+ <button class="button button--filters js-toggle-filters">Filters</button>
{% if use_search|default:False %}
<form method="get" role="search" class="form form--search-desktop js-search-form">
diff --git a/opentech/static_src/src/images/add-person.svg b/opentech/static_src/src/images/add-person.svg
deleted file mode 100644
index 4d2cd548b3494d17e1ba5a881de76ddd8fb753e6..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/images/add-person.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 27ba4b500c1fd7fd6b54c479e9769ca4b4b82ef3..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/images/arrow-split.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 1934b4ed2904254e1a9309941ed5dc86b6ed4f2c..0f325f618b10d90c4db42aad2b7a6f895fad6d0d 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -5,6 +5,15 @@
border: 0;
box-shadow: none;
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.is-disabled {
+ pointer-events: none;
+ opacity: .5;
+ }
+
&--primary {
@include button($color--light-blue, $color--dark-blue);
display: inline-block;
@@ -16,10 +25,6 @@
}
}
- &:hover {
- cursor: pointer;
- }
-
&--contains-icons {
display: flex;
align-items: center;
@@ -80,10 +85,24 @@
width: 100%;
@include media-query(tablet-landscape) {
+ background: none;
+ padding: 10px;
+ border: 0;
+ justify-content: flex-start;
+ width: auto;
+ opacity: .7;
+
&::before {
content: '';
background-image: url('./../../images/filters.svg');
transform: rotate(90deg);
+ background-color: transparent;
+ background-position: left center;
+ background-size: 20px;
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ margin-right: 10px;
}
}
}
@@ -157,11 +176,6 @@
}
}
- &.is-disabled {
- pointer-events: none;
- opacity: .5;
- }
-
&--top-space {
margin-top: 20px;
}
@@ -209,49 +223,86 @@
&--action {
display: flex;
- font-weight: $weight--normal;
color: $color--default;
- transition: none;
+ align-items: center;
+ transition: opacity $transition;
+ font-weight: $weight--semibold;
+ position: relative;
- @include media-query(tablet-landscape) {
- background: none;
- padding: 10px;
- border: 0;
- align-items: center;
- justify-content: flex-start;
- width: auto;
- transition: opacity $transition;
- opacity: .7;
- font-weight: $weight--semibold;
+ &:hover {
+ opacity: 1;
+ }
+
+ &:disabled {
+ color: $color--mid-dark-grey;
+ cursor: not-allowed;
+
+ // tooltip
+ &::before {
+ content: attr(data-tooltip);
+ pointer-events: none;
+ position: absolute;
+ width: 200px;
+ padding: 12px;
+ font-size: 12px;
+ font-weight: $weight--normal;
+ white-space: normal;
+ background: $color--light-blue;
+ opacity: 0;
+ transition: opacity $transition;
+ bottom: 45px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: $color--white;
+ text-align: left;
+ line-height: 1rem;
+ border: 1px solid $color--white;
+ border-radius: 3px;
+ }
+
+ &::after {
+ @include triangle(bottom, $color--primary, 7px);
+ position: absolute;
+ top: -22px;
+ left: 50%;
+ transform: translateX(-50%);
+ opacity: 0;
+ transition: opacity $transition;
+ z-index: 10;
+ }
+
+ svg {
+ fill: $color--mid-dark-grey;
+ }
&: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;
+ // show tooltip
+ &::before {
+ pointer-events: all;
+ z-index: 10;
+ opacity: 1;
+ }
+
+ &::after {
+ opacity: 1;
+ }
}
}
- }
- &--batch-status {
- &::before {
- background-image: url('./../../images/arrow-split.svg');
- transform: rotate(90deg);
+ svg {
+ fill: $color--light-blue;
+ width: 24px;
+ height: 24px;
+ margin-right: 10px;
+ pointer-events: none;
}
}
- &--reviewers {
- &::before {
- background-image: url('./../../images/add-person.svg');
+ &--change-status {
+ svg {
+ transform: rotate(90deg);
}
}
}
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index 42bf4cb3d50f9fe3d9a3ac8da8fd2091430dcb80..bc2e557b45e1756eb06551ce86540379b4e181d5 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -304,4 +304,16 @@
<symbol id="open-in-new-tab" viewbox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</symbol>
+
+ <symbol id="add-person" viewbox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path
+ 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" />
+ </symbol>
+
+ <symbol id="arrow-split" viewbox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path
+ 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" />
+ </symbol>
</svg>