Skip to content
Snippets Groups Projects
Commit 204923c8 authored by vimal1083's avatar vimal1083
Browse files

Update thumbs icon in react

parent 3fb6d73f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 21 deletions
hypha/apply/funds/templates/funds/includes/screening_status_block.html
+ 6
− 4
View file @ 204923c8
......@@ -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 %}
......
hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
+ 18
− 12
View file @ 204923c8
......@@ -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 />
}
......
hypha/static_src/src/app/src/containers/ScreeningStatus/styles.scss
+ 12
− 3
View file @ 204923c8
......@@ -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;
}
hypha/static_src/src/javascript/apply/screening-status.js
+ 1
− 2
View file @ 204923c8
......@@ -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');
......
hypha/static_src/src/sass/apply/components/_sidebar.scss
+ 10
− 0
View file @ 204923c8
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment