From c43cf0ba9fe7cf2655645bec71fb24f12561c31f Mon Sep 17 00:00:00 2001
From: Chris Lawton <31627284+chris-lawton@users.noreply.github.com>
Date: Thu, 29 Aug 2019 11:16:38 +0100
Subject: [PATCH] Feature/gh 1339 project messages (#1457)
* add tooltip logic for submit for approval button
* update error bar styling on project page
* add tooltips and add to disabled button
---
opentech/apply/projects/models.py | 4 +++
.../project_admin_detail.html | 26 +++++++++++-----
.../project_applicant_detail.html | 14 ++++-----
.../src/sass/apply/abstracts/_variables.scss | 2 ++
.../src/sass/apply/components/_button.scss | 9 ++++++
.../src/sass/apply/components/_error-bar.scss | 15 ++++++++++
.../src/sass/apply/components/_tooltip.scss | 30 +++++++++++++++++++
opentech/static_src/src/sass/apply/main.scss | 2 ++
8 files changed, 87 insertions(+), 15 deletions(-)
create mode 100644 opentech/static_src/src/sass/apply/components/_error-bar.scss
create mode 100644 opentech/static_src/src/sass/apply/components/_tooltip.scss
diff --git a/opentech/apply/projects/models.py b/opentech/apply/projects/models.py
index d971b4072..5d72a9718 100644
--- a/opentech/apply/projects/models.py
+++ b/opentech/apply/projects/models.py
@@ -289,6 +289,10 @@ class Project(models.Model):
correct_state = self.status == COMMITTED and not self.is_locked
return correct_state and self.user_has_updated_details
+ @property
+ def requires_approval(self):
+ return not self.approvals.exists()
+
def get_missing_document_categories(self):
"""
Get the number of documents required to meet each DocumentCategorys minimum
diff --git a/opentech/apply/projects/templates/application_projects/project_admin_detail.html b/opentech/apply/projects/templates/application_projects/project_admin_detail.html
index d2d810e21..103d65b26 100644
--- a/opentech/apply/projects/templates/application_projects/project_admin_detail.html
+++ b/opentech/apply/projects/templates/application_projects/project_admin_detail.html
@@ -46,13 +46,25 @@
</div>
{% endif %}
-{% if object.can_send_for_approval %}
-<a data-fancybox
- data-src="#send-for-approval"
- class="button button--bottom-space button--primary button--full-width"
- href="#">
- Submit for Approval
-</a>
+{% if object.requires_approval %}
+ <a
+ {% if not object.can_send_for_approval %}
+ onclick="return false"
+ data-tooltip="
+ {% if not object.lead %}
+ A lead must be assigned
+ {% elif not object.user_has_updated_details %}
+ Project approval form must be completed
+ {% elif object.is_locked %}
+ Currently awaiting approval
+ {% endif %}"
+ {% endif %}
+ data-fancybox
+ data-src="#send-for-approval"
+ class="button button--bottom-space button--primary button--full-width {% if not object.can_send_for_approval %}button--tooltip-disabled{% endif %}"
+ href="#">
+ Submit for Approval
+ </a>
{% endif %}
{% if object.can_make_approval %}
diff --git a/opentech/apply/projects/templates/application_projects/project_applicant_detail.html b/opentech/apply/projects/templates/application_projects/project_applicant_detail.html
index 2ca4b4597..d7e3d95b3 100644
--- a/opentech/apply/projects/templates/application_projects/project_applicant_detail.html
+++ b/opentech/apply/projects/templates/application_projects/project_applicant_detail.html
@@ -2,17 +2,15 @@
{% block notifications %}
{% if not object.editable %}
-<div class="wrapper wrapper--sidebar">
- <div class="wrapper--sidebar--inner wrapper--error">
- <div>
- <p>Your project is not editable at this point.</p>
+ <div class="error-bar">
+ <p class="error-bar__copy">
+ Your project is not editable at this point.
{% if not object.lead %}
- <p>We are awaiting a lead to be assigned.</p>
+ We are awaiting a lead to be assigned.
{% else %}
- <p>It is currently under review by a staff member.</p>
+ It is currently under review by a staff member.
{% endif %}
- </div>
+ </p>
</div>
-</div>
{% endif %}
{% endblock %}
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 579ea4e6f..aadcc4a8f 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -17,6 +17,7 @@ $color--mid-dark-grey: #919191;
// Brand
$color--lightest-blue: #24aae1;
$color--light-blue: #0d7db0;
+$color--lighter-blue: #7ab8d4;
$color--dark-blue: #0c72a0;
$color--darkest-blue: #3d6bdb;
$color--mustard: #e6ab32;
@@ -61,6 +62,7 @@ $color--default: $color--dark-grey;
$color--primary: $color--light-blue;
$color--error: $color--tomato;
$color--correct: $color--mint;
+$color--button-disabled: $color--lighter-blue;
// Fonts
$font--primary: 'noto-sans';
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 03396c4f0..f5b89abb3 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -317,4 +317,13 @@
&--link {
color: $color--primary;
}
+
+ &--tooltip-disabled {
+ background-color: $color--button-disabled;
+
+ &:hover {
+ cursor: default;
+ background-color: $color--button-disabled;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_error-bar.scss b/opentech/static_src/src/sass/apply/components/_error-bar.scss
new file mode 100644
index 000000000..07465dce7
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_error-bar.scss
@@ -0,0 +1,15 @@
+.error-bar {
+ padding: $mobile-gutter;
+ margin: 0 auto 2rem;
+ background: $color--tomato;
+ color: $color--white;
+
+ &__copy {
+ margin: 0 0 1rem;
+ font-weight: $weight--bold;
+
+ &:last-child {
+ margin: 0;
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_tooltip.scss b/opentech/static_src/src/sass/apply/components/_tooltip.scss
new file mode 100644
index 000000000..61af9c25a
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_tooltip.scss
@@ -0,0 +1,30 @@
+[data-tooltip] {
+ position: relative;
+ z-index: 2;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+[data-tooltip]::before {
+ visibility: hidden;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity, bottom, $transition;
+ position: absolute;
+ bottom: 110%;
+ margin-bottom: 5px;
+ padding: 7px;
+ background-color: $color--dark-grey;
+ color: $color--white;
+ content: attr(data-tooltip);
+ text-align: center;
+ font-size: 14px;
+}
+
+[data-tooltip]:hover::before {
+ visibility: visible;
+ opacity: 1;
+ bottom: 130%;
+}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 77d1f71ed..0510a5a0c 100644
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -16,6 +16,7 @@
@import 'components/comment';
@import 'components/button';
@import 'components/editor';
+@import 'components/error-bar';
@import 'components/feed';
@import 'components/filters';
@import 'components/grid';
@@ -49,6 +50,7 @@
@import 'components/submission-meta';
@import 'components/revision';
@import 'components/table';
+@import 'components/tooltip';
@import 'components/traffic-light';
@import 'components/wrapper';
@import 'components/revisions';
--
GitLab