Browse Source

fix: minor poll view improvements

develop
Ezerous 4 years ago
parent
commit
299e60f720
  1. 4
      packages/concordia-app/public/locales/en/translation.json
  2. 6
      packages/concordia-app/src/components/PollView/PollGraph/PollChartDonut/index.jsx
  3. 23
      packages/concordia-app/src/components/PollView/PollGraph/index.jsx
  4. 4
      packages/concordia-app/src/components/PollView/PollGraph/styles.css
  5. 13
      packages/concordia-app/src/components/PollView/PollVote/index.jsx
  6. 3
      packages/concordia-app/src/components/PollView/PollVote/styles.css

4
packages/concordia-app/public/locales/en/translation.json

@ -90,8 +90,8 @@
"topic.poll.invalid.data.header": "This topic has a poll but the data are untrusted!",
"topic.poll.invalid.data.sub.header": "The poll data downloaded from the poster have been tampered with.",
"topic.poll.tab.graph.title": "Results",
"topic.poll.tab.results.votes.count": "Total votes: {{totalVotes}}",
"topic.poll.tab.results.user.vote": "You voted: {{userVote}}",
"topic.poll.tab.results.votes": "Votes",
"topic.poll.tab.results.user.vote": "You voted: ",
"topic.poll.tab.vote.no.changes": "This poll does not allow vote changes.",
"topic.poll.tab.vote.form.button.submit": "Submit",
"topic.poll.tab.vote.form.button.unvote": "Remove Vote",

6
packages/concordia-app/src/components/PollView/PollGraph/PollChartDonut/index.jsx

@ -9,6 +9,12 @@ const PollChartDonut = (props) => {
const chartOptions = useMemo(() => ({
chart: {
id: 'chart-donut',
toolbar: {
show: true,
tools: {
download: true,
},
},
},
theme: {
palette: 'palette8',

23
packages/concordia-app/src/components/PollView/PollGraph/index.jsx

@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
import { Grid, Header, Tab } from 'semantic-ui-react';
import { Grid, Statistic, Tab } from 'semantic-ui-react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import PollChartBar from './PollChartBar';
@ -12,19 +12,18 @@ const PollGraph = (props) => {
const footer = useMemo(() => (
<>
{' '}
<Header as="h4">
{t('topic.poll.tab.results.votes.count', {
totalVotes: voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0),
})}
</Header>
<Statistic size="mini">
<Statistic.Value>
{voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0)}
</Statistic.Value>
<Statistic.Label>{t('topic.poll.tab.results.votes')}</Statistic.Label>
</Statistic>
{userVoteIndex !== -1
&& (
<Header as="h4">
{t('topic.poll.tab.results.user.vote', {
userVote: pollOptions[userVoteIndex],
})}
</Header>
<div>
{t('topic.poll.tab.results.user.vote')}
<span className="poll-voted-option">{pollOptions[userVoteIndex]}</span>
</div>
)}
</>
), [pollOptions, t, userVoteIndex, voteCounts]);

4
packages/concordia-app/src/components/PollView/PollGraph/styles.css

@ -2,7 +2,3 @@
box-shadow: none;
border: none;
}
#topic-poll-container h4 {
margin-top: 0.5rem;
}

13
packages/concordia-app/src/components/PollView/PollVote/index.jsx

@ -1,11 +1,12 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { Button, Form, Header } from 'semantic-ui-react';
import { Button, Form } from 'semantic-ui-react';
import { useTranslation } from 'react-i18next';
import { VOTING_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
import { drizzle } from '../../../redux/store';
import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus';
import './styles.css';
const { contracts: { [VOTING_CONTRACT]: { methods: { vote } } } } = drizzle;
@ -52,11 +53,10 @@ const PollVote = (props) => {
if (hasUserVoted && !enableVoteChanges) {
return (
<>
<Header as="h4">
{t('topic.poll.tab.results.user.vote', {
userVote: pollOptions[userVoteIndex],
})}
</Header>
<div>
{t('topic.poll.tab.results.user.vote')}
<span className="poll-voted-option">{pollOptions[userVoteIndex]}</span>
</div>
<div>
{t('topic.poll.tab.vote.no.changes')}
</div>
@ -73,6 +73,7 @@ const PollVote = (props) => {
key={pollOption}
label={pollOption}
value={index}
className={index === userVoteIndex ? 'poll-voted-option' : null}
checked={index === selectedOptionIndex}
disabled={voting}
onChange={onOptionSelected}

3
packages/concordia-app/src/components/PollView/PollVote/styles.css

@ -0,0 +1,3 @@
.poll-voted-option{
font-weight: bold;
}
Loading…
Cancel
Save