diff --git a/client/src/components/pages/Steem/Flag.js b/client/src/components/pages/Steem/Flag.js new file mode 100644 index 0000000..4fa6a31 --- /dev/null +++ b/client/src/components/pages/Steem/Flag.js @@ -0,0 +1,82 @@ +import React from 'react'; +import PropTypes from 'prop-types' +import { Icon, Popup } from "semantic-ui-react"; + +import PercentDisplay from './PercentDisplay'; +import UserLink from './UserLink'; +import { getDownvotes, sortVotes } from '../../../utils/helpers'; + +/** + * The flag icon is displayed for anyone logged in. The amount of flags on a + * post is displayed if there are flags applied to a post. Highest SP and + * vote weighted flags are displayed first in a popup window, along with + * the percent of vote applied. + * + * @param {array} activeVotes The list of voters + * @param {array} ratio Ratio of payout divided by rshares for post + * @param {array} user User logged in + */ +const Flag = ({activeVotes, ratio, user}) => { + + const flag = event => { + event.preventDefault(); + } + + let downVotes = getDownvotes(activeVotes); + const votesCount = downVotes.length; + + downVotes = sortVotes(downVotes, 'rshares'); + + let votersPopup = ''; + if (votesCount) { + votersPopup = downVotes.slice(0, 14).map(vote => ( +
+ { } + { + + {`\u00A0\u2022\u00A0`} + + + } +
+ )) + } + + return ( +
  • + + flag(event)} title="Flag this post on Steem"> + + + + { + votesCount !== 0 && ( + + {` ${votesCount}`}} + horizontalOffset={15} + flowing + hoverable + > + {votersPopup} + + + ) + } +
  • + ) +} + +Flag.propTypes = { + activeVotes: PropTypes.arrayOf(PropTypes.object), + ratio: PropTypes.number, + user: PropTypes.string, +}; + +Flag.defaultProps = { + activeVotes: [], + ratio: 0, + user: '', +}; + +export default Flag; diff --git a/client/src/components/pages/Steem/FullPower.js b/client/src/components/pages/Steem/FullPower.js index 8484ea4..8088c62 100644 --- a/client/src/components/pages/Steem/FullPower.js +++ b/client/src/components/pages/Steem/FullPower.js @@ -9,7 +9,7 @@ import logo from '../../../images/steemLogo.svg'; */ const FullPower = () => ( - + {`\u00A0`} ) diff --git a/client/src/components/pages/Steem/PostActions.css b/client/src/components/pages/Steem/PostActions.css index 685f35b..805a6bc 100644 --- a/client/src/components/pages/Steem/PostActions.css +++ b/client/src/components/pages/Steem/PostActions.css @@ -43,10 +43,15 @@ color: var(--action-grey); font-size: 1.2em; } + .post-actions .large.icon:hover { color: var(--light-blue); } +.post-actions .flag.large.icon:hover { + color: #dc2e2e; +} + .post-actions .ui.form .fields { margin:0; } diff --git a/client/src/components/pages/Steem/PostActions.js b/client/src/components/pages/Steem/PostActions.js index 05c6a04..bd62ee4 100644 --- a/client/src/components/pages/Steem/PostActions.js +++ b/client/src/components/pages/Steem/PostActions.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import { Icon, Button, Popup } from "semantic-ui-react"; import Vote from './Vote'; +import Flag from './Flag'; import './PostActions.css'; @@ -78,10 +79,6 @@ class PostActions extends Component { handleResteem(pid, author, permlink); } - flag = event => { - event.preventDefault(); - } - render() { const { props: { @@ -175,13 +172,11 @@ class PostActions extends Component { } { user && ( -
  • - - this.flag(event)} title="Flag this post on Steem"> - - - -
  • + ) } diff --git a/client/src/components/pages/Steem/PostsSummary.css b/client/src/components/pages/Steem/PostsSummary.css index 3b260f3..dee88d8 100644 --- a/client/src/components/pages/Steem/PostsSummary.css +++ b/client/src/components/pages/Steem/PostsSummary.css @@ -1,7 +1,7 @@ @import '../../../variables.css'; .postSummary { - margin-bottom: 1rem; + /*margin-bottom: 0.5rem;*/ } .postSummary .block { @@ -48,7 +48,7 @@ height: 1px; border: 0; border-top: 1px solid var(--main-border-light); - margin: 1em 0; + margin: 0.3rem 0 0.5rem 0; padding: 0; }