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;
}