From 6444e8c2ab3a374434941c406ad7dfea8ebbe2be Mon Sep 17 00:00:00 2001 From: okbel Date: Thu, 17 May 2018 13:48:30 -0300 Subject: [PATCH] Karma --- .../src/components/KarmaTooltip.css | 76 +++++++++++++++++++ .../src/components/KarmaTooltip.js | 52 +++++++++++++ .../coral-admin/src/components/UserDetail.css | 17 ++--- .../coral-admin/src/components/UserDetail.js | 39 +++++++--- client/coral-framework/utils/user.js | 15 ++++ locales/en.yml | 4 + 6 files changed, 185 insertions(+), 18 deletions(-) create mode 100644 client/coral-admin/src/components/KarmaTooltip.css create mode 100644 client/coral-admin/src/components/KarmaTooltip.js diff --git a/client/coral-admin/src/components/KarmaTooltip.css b/client/coral-admin/src/components/KarmaTooltip.css new file mode 100644 index 000000000..1f7e1b732 --- /dev/null +++ b/client/coral-admin/src/components/KarmaTooltip.css @@ -0,0 +1,76 @@ +.karmaTooltip { + position: relative; + display: inline-block; + margin: 0 4px; +} + +.icon { + font-size: 16px; + color: #0D5B8F; + -ms-user-select:none; + -moz-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout:none; + user-select: none; + -webkit-tap-highlight-color:rgba(0,0,0,0); +} + +.icon:hover { + cursor: pointer; +} + +.menu { + background-color: white; + border: solid 1px #999; + border-radius: 3px; + padding: 10px; + position: absolute; + -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); + z-index: 10; + top: 32px; + left: -100px; + width: 150px; + text-align: left; + color: #616161; +} + +.menu::before{ + content: ''; + border: 10px solid transparent; + border-top-color: #999; + position: absolute; + left: 96px; + top: -20px; + transform: rotate(180deg); +} + +.menu::after{ + content: ''; + border: 10px solid transparent; + border-top-color: white; + position: absolute; + left: 96px; + top: -19px; + transform: rotate(180deg); +} + +.descriptionList { + padding: 0; + margin: 0; + list-style: none; +} + +.strongItem { + margin-right: 3px; +} + +.descriptionItem { + font-size: 0.9em; +} + +.link { + color: #2B7EB5; + text-decoration: underline; + display: block; +} \ No newline at end of file diff --git a/client/coral-admin/src/components/KarmaTooltip.js b/client/coral-admin/src/components/KarmaTooltip.js new file mode 100644 index 000000000..370856f1f --- /dev/null +++ b/client/coral-admin/src/components/KarmaTooltip.js @@ -0,0 +1,52 @@ +import React from 'react'; +import cn from 'classnames'; +import { Icon } from 'coral-ui'; +import styles from './KarmaTooltip.css'; +import ClickOutside from 'coral-framework/components/ClickOutside'; +import t from 'coral-framework/services/i18n'; + +const initialState = { menuVisible: false }; + +class KarmaTooltip extends React.Component { + state = initialState; + + toogleMenu = () => { + this.setState({ menuVisible: !this.state.menuVisible }); + }; + + hideMenu = () => { + this.setState({ menuVisible: false }); + }; + + render() { + const { menuVisible } = this.state; + + return ( + +
+ + + + + {menuVisible && ( +
+ {t('user_detail.user_karma_score')} + + {t('user_detail.learn_more')} + +
+ )} +
+ + ); + } +} + +export default KarmaTooltip; diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css index 58faee5c4..0f034d419 100644 --- a/client/coral-admin/src/components/UserDetail.css +++ b/client/coral-admin/src/components/UserDetail.css @@ -39,17 +39,16 @@ margin-right: 0px; } -.statItem, -.statReportResult { +.statItem, .statReportResult, .statKarmaResult { padding: 3px 5px; background-color: #D8D8D8; border-radius: 3px; font-weight: 500; - display: block; font-size: 0.9em; line-height: normal; letter-spacing: 0.4px; - min-width: 60px; + min-width: 35px; + display: inline-block; } .statResult { @@ -58,21 +57,21 @@ display: inline-block; } -.statReportResult { +.statReportResult, .statKarmaResult { color: white; margin: 5px 0; font-weight: 400; } -.statReportResult.reliable { - background-color: #749C48; +.statReportResult.reliable, .statKarmaResult.good { + background-color: #03AB61; } -.statReportResult.neutral { +.statReportResult.neutral, .statKarmaResult.neutral { background-color: #616161; } -.statReportResult.unreliable { +.statReportResult.unreliable, .statKarmaResult.bad { background-color: #F44336; } diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js index 5dabc5b6f..723a71eef 100644 --- a/client/coral-admin/src/components/UserDetail.js +++ b/client/coral-admin/src/components/UserDetail.js @@ -10,6 +10,7 @@ import { getReliability, isSuspended, isBanned, + getKarma, } from 'coral-framework/utils/user'; import ButtonCopyToClipboard from './ButtonCopyToClipboard'; import ClickOutside from 'coral-framework/components/ClickOutside'; @@ -25,6 +26,7 @@ import { import ActionsMenu from 'coral-admin/src/components/ActionsMenu'; import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem'; import UserInfoTooltip from './UserInfoTooltip'; +import KarmaTooltip from './KarmaTooltip'; import t from 'coral-framework/services/i18n'; class UserDetail extends React.Component { @@ -203,23 +205,29 @@ class UserDetail extends React.Component { diff --git a/client/coral-framework/utils/user.js b/client/coral-framework/utils/user.js index 610557542..693652994 100644 --- a/client/coral-framework/utils/user.js +++ b/client/coral-framework/utils/user.js @@ -49,3 +49,18 @@ export const canUsernameBeUpdated = status => { moment(created_at).isAfter(oldestEditTime) ); }; + +/** + * getKarma + * retrieves karma value as string + */ + +export const getKarma = score => { + if (score === 0) { + return 'neutral'; + } else if (score) { + return 'good'; + } else { + return 'bad'; + } +}; diff --git a/locales/en.yml b/locales/en.yml index f60219472..ab7be8e9d 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -470,6 +470,10 @@ en: all: "All" rejected: "Rejected" user_history: "User History" + karma: "Karma" + learn_more: "Learn More" + user_karma_score: "User Karma Score" + karma_docs_link: "https://docs.coralproject.net/talk/trust/#user-karma-score" user_history: user_banned: "User banned" ban_removed: "Ban removed"