From 204923c8cbe7e930ee373b5f78107366ca7b0556 Mon Sep 17 00:00:00 2001
From: vimal1083 <vimal1083@gmail.com>
Date: Mon, 30 Nov 2020 18:00:23 +0530
Subject: [PATCH] Update thumbs icon in react
---
.../includes/screening_status_block.html | 10 ++++---
.../src/containers/ScreeningStatus/index.js | 30 +++++++++++--------
.../containers/ScreeningStatus/styles.scss | 15 ++++++++--
.../src/javascript/apply/screening-status.js | 3 +-
.../src/sass/apply/components/_sidebar.scss | 10 +++++++
5 files changed, 47 insertions(+), 21 deletions(-)
diff --git a/hypha/apply/funds/templates/funds/includes/screening_status_block.html b/hypha/apply/funds/templates/funds/includes/screening_status_block.html
index 23ede32e2..c9f8ddccf 100644
--- a/hypha/apply/funds/templates/funds/includes/screening_status_block.html
+++ b/hypha/apply/funds/templates/funds/includes/screening_status_block.html
@@ -3,16 +3,16 @@
<h5>Screening Status</h5>
{% if object.supports_default_screening %}
<div class="sidebar__screening-thumbs screening-status-box">
- <div class="screening-status-yes">
- <div class="thumb thumbs-up" data-id="{{ object.id }}" data-yes="true">
+ <div class="sidebar__screening-status-yes">
+ <div class="thumb thumbs-up" data-id="{{ object.id }}" data-yes="true" style="align-self: center;">
<svg class="icon icon--like {% if object.has_yes_default_screening_status_set %}icon--like-yes{% endif %} {% if object.can_not_edit_default %}icon--like-disable{% endif %}"><use xlink:href="#like"></use></svg>
</div>
<div>
{{ default_yes }}
</div>
</div>
- <div class="screening-status-no">
- <div class="thumb thumbs-down" data-id="{{ object.id }}" data-yes="false">
+ <div class="sidebar__screening-status-no">
+ <div class="thumb thumbs-down" data-id="{{ object.id }}" data-yes="false" style="align-self: center;">
<svg class="icon icon--dislike {% if object.has_no_default_screening_status_set %}icon--dislike-no{% endif %} {% if object.can_not_edit_default %}icon--dislike-disable{% endif %}"><use xlink:href="#dislike"></use></svg>
</div>
<div>
@@ -25,11 +25,13 @@
<div class="show-screening-options">
{% if object.has_default_screening_status_set %}
<p id="screening-options-para">
+ {% if object.screening_statuses.all.count > 1 %}
<div class="sidebar__screening-selected-options">
{% for status in object.screening_statuses.all%}
<span class="sidebar__screening-option">{{ status }}</span>
{% endfor%}
</div>
+ {% endif %}
<a id="screening-options" data-fancybox="" data-src="#screen-application" data-yes="{% if object.has_yes_default_screening_status_set %}true{% else %}false{% endif %}" class="link link--secondary-change" href="#">Screening Options</a>
</p>
{% endif %}
diff --git a/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js b/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
index 2a38fff5e..86da37631 100644
--- a/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
+++ b/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
@@ -14,8 +14,7 @@ import { SidebarBlock } from '@components/SidebarBlock'
import LoadingPanel from '@components/LoadingPanel'
import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done';
-import ThumbUpIcon from '@material-ui/icons/ThumbUp';
-import ThumbDownIcon from '@material-ui/icons/ThumbDown';
+import SvgIcon from '@material-ui/core/SvgIcon';
class ScreeningStatusContainer extends React.PureComponent {
@@ -46,19 +45,22 @@ class ScreeningStatusContainer extends React.PureComponent {
screeningInfo,
visibleOptions,
selectVisibleOption } = this.props
-
- return !screeningInfo.loading ? screeningStatuses && <SidebarBlock title="Screening Status">
- <div className="screening-status-box" >
- <div className="screening-default-options">
+
+ return !screeningInfo.loading ? screeningStatuses && <SidebarBlock title="Screening Status" >
+ <div className="screening-status-box" style={{ borderBottom: '1px solid #e8e8e8'}}>
+ <div className="screening-default-options" >
<div
className={screeningInfo.selectedValues.length ||
screeningInfo.defaultSelectedValue.id == defaultOptions.yes.id ?
"screening-status-yes-disabled": "screening-status-yes-enabled"}
onClick={this.updateDefaultValue(submissionID, defaultOptions.yes)}
>
- <ThumbUpIcon
- className = { screeningInfo.defaultSelectedValue.id == defaultOptions.yes.id ? "thumbs-up-color" : ""}
- />
+ <SvgIcon
+ className = { screeningInfo.defaultSelectedValue.id == defaultOptions.yes.id ? "thumbs-up-color" : ""}
+ style={{ alignSelf: 'center'}}
+ >
+ <path d="m1.75 23h2.5c.965 0 1.75-.785 1.75-1.75v-11.5c0-.965-.785-1.75-1.75-1.75h-2.5c-.965 0-1.75.785-1.75 1.75v11.5c0 .965.785 1.75 1.75 1.75z"></path><path d="m12.781.75c-1 0-1.5.5-1.5 3 0 2.376-2.301 4.288-3.781 5.273v12.388c1.601.741 4.806 1.839 9.781 1.839h1.6c1.95 0 3.61-1.4 3.94-3.32l1.12-6.5c.42-2.45-1.46-4.68-3.94-4.68h-4.72s.75-1.5.75-4c0-3-2.25-4-3.25-4z"></path>
+ </SvgIcon>
<div>{defaultOptions.yes.title}</div>
</div>
<div
@@ -67,13 +69,16 @@ class ScreeningStatusContainer extends React.PureComponent {
"screening-status-no-disabled" :"screening-status-no-enabled"}
onClick={this.updateDefaultValue(submissionID, defaultOptions.no)}
>
- <ThumbDownIcon
+ <SvgIcon
className = { screeningInfo.defaultSelectedValue.id == defaultOptions.no.id ? "thumbs-down-color" : ""}
- />
+ style={{ alignSelf: 'center'}}
+ >
+ <path d="m22.25 1h-2.5c-.965 0-1.75.785-1.75 1.75v11.5c0 .965.785 1.75 1.75 1.75h2.5c.965 0 1.75-.785 1.75-1.75v-11.5c0-.965-.785-1.75-1.75-1.75z"></path><path d="m5.119.75c-1.95 0-3.61 1.4-3.94 3.32l-1.12 6.5c-.42 2.45 1.46 4.68 3.94 4.68h4.72s-.75 1.5-.75 4c0 3 2.25 4 3.25 4s1.5-.5 1.5-3c0-2.376 2.301-4.288 3.781-5.273v-12.388c-1.601-.741-4.806-1.839-9.781-1.839z"></path>
+ </SvgIcon>
<div>{defaultOptions.no.title}</div>
</div>
</div>
- {visibleOptions &&
+ {visibleOptions.length > 0 &&
<div className="screening-visible-options" >
<h6 style={{ fontWeight: '550', width : '100%'}}>Screening reasons</h6>
{visibleOptions.map(option =>
@@ -88,6 +93,7 @@ class ScreeningStatusContainer extends React.PureComponent {
}
</div>
}
+
</div>
</SidebarBlock> : <LoadingPanel />
}
diff --git a/hypha/static_src/src/app/src/containers/ScreeningStatus/styles.scss b/hypha/static_src/src/app/src/containers/ScreeningStatus/styles.scss
index 74f92eeff..34ad7771d 100644
--- a/hypha/static_src/src/app/src/containers/ScreeningStatus/styles.scss
+++ b/hypha/static_src/src/app/src/containers/ScreeningStatus/styles.scss
@@ -8,27 +8,36 @@
.screening-default-options{
display: flex;
- margin-bottom: 1em ;
justify-content: space-evenly;
}
.screening-visible-options{
display : flex;
flex-wrap: wrap;
+ margin-top: 1em ;
+ margin-bottom: 1em ;
}
.screening-status-yes-enabled{
- cursor : pointer
+ cursor : pointer;
+ display: flex;
+ flex-direction: column;
}
.screening-status-yes-disabled{
- cursor : not-allowed
+ cursor : not-allowed;
+ display: flex;
+ flex-direction: column;
}
.screening-status-no-enabled{
cursor: pointer;
+ display: flex;
+ flex-direction: column;
}
.screening-status-no-disabled{
cursor: not-allowed;
+ display: flex;
+ flex-direction: column;
}
diff --git a/hypha/static_src/src/javascript/apply/screening-status.js b/hypha/static_src/src/javascript/apply/screening-status.js
index 6d98162b4..3bae6fe1a 100644
--- a/hypha/static_src/src/javascript/apply/screening-status.js
+++ b/hypha/static_src/src/javascript/apply/screening-status.js
@@ -15,7 +15,7 @@
data: {yes: yes},
success: function (json) {
if (json) {
- var screeningOptions = $('<p id="screening-options-para">' + json.title + '<a id="screening-options-ajax" data-fancybox="" data-src="#screen-application" data-yes=' + yes + ' class="link link--secondary-change" href="#"> Screening Options</a></p>');
+ var screeningOptions = $('<p id="screening-options-para">' + '<a id="screening-options-ajax" data-fancybox="" data-src="#screen-application" data-yes=' + yes + ' class="link link--secondary-change" href="#"> Screening Options</a></p>');
$('.show-screening-options').find('#screening-options-para').remove();
$('.show-screening-options').append(screeningOptions);
if (yes === true) {
@@ -32,7 +32,6 @@
});
$('.show-screening-options').on('click', '#screening-options-ajax', function () {
-
var $screeningOptions = $(this);
var currentStatus = $screeningOptions.data('yes');
var $screenApplication = $('#screen-application');
diff --git a/hypha/static_src/src/sass/apply/components/_sidebar.scss b/hypha/static_src/src/sass/apply/components/_sidebar.scss
index 8afcfb57a..1d0e6feed 100644
--- a/hypha/static_src/src/sass/apply/components/_sidebar.scss
+++ b/hypha/static_src/src/sass/apply/components/_sidebar.scss
@@ -41,6 +41,16 @@
justify-content: space-evenly;
}
+ &__screening-status-yes {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__screening-status-no {
+ display: flex;
+ flex-direction: column;
+ }
+
&__screening-option {
margin: .3em;
border: 1px solid $color--black-20;
--
GitLab