From 757fde8798bbcb3e25242336f42a4cab464e1716 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Tue, 23 Jul 2019 00:21:46 -0400 Subject: [PATCH] Added user badges and "member since" added ProBadge, InvestorBadge, DonorBadge components, css removed "PRO" from appending in display_name fixes: #50 --- .../gabsocial/components/display_name.js | 2 - .../gabsocial/components/donor_badge.js | 7 +++ .../gabsocial/components/investor_badge.js | 7 +++ .../gabsocial/components/pro_badge.js | 7 +++ .../ui/components/profile_info_panel.js | 18 +++++++- .../styles/gabsocial/components.scss | 46 +++++++++++++++++++ app/serializers/rest/account_serializer.rb | 2 +- 7 files changed, 84 insertions(+), 5 deletions(-) create mode 100644 app/javascript/gabsocial/components/donor_badge.js create mode 100644 app/javascript/gabsocial/components/investor_badge.js create mode 100644 app/javascript/gabsocial/components/pro_badge.js diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js index 2bbf5719..109778b5 100644 --- a/app/javascript/gabsocial/components/display_name.js +++ b/app/javascript/gabsocial/components/display_name.js @@ -1,7 +1,6 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; -import DisplayNameBadge from './display_name_badge'; import VerificationBadge from './verification_badge'; export default class DisplayName extends React.PureComponent { @@ -39,7 +38,6 @@ export default class DisplayName extends React.PureComponent { {displayName} {account.get('is_verified') && } {suffix} - {account.get('is_pro') && } ); } diff --git a/app/javascript/gabsocial/components/donor_badge.js b/app/javascript/gabsocial/components/donor_badge.js new file mode 100644 index 00000000..d39ca9e0 --- /dev/null +++ b/app/javascript/gabsocial/components/donor_badge.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const DonorBadge = () => ( + Donor +); + +export default DonorBadge; diff --git a/app/javascript/gabsocial/components/investor_badge.js b/app/javascript/gabsocial/components/investor_badge.js new file mode 100644 index 00000000..84c8efba --- /dev/null +++ b/app/javascript/gabsocial/components/investor_badge.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const InvestorBadge = () => ( + Investor +); + +export default InvestorBadge; diff --git a/app/javascript/gabsocial/components/pro_badge.js b/app/javascript/gabsocial/components/pro_badge.js new file mode 100644 index 00000000..151492ce --- /dev/null +++ b/app/javascript/gabsocial/components/pro_badge.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const ProBadge = () => ( + Pro +); + +export default ProBadge; diff --git a/app/javascript/gabsocial/features/ui/components/profile_info_panel.js b/app/javascript/gabsocial/features/ui/components/profile_info_panel.js index d5613a25..e63d3427 100644 --- a/app/javascript/gabsocial/features/ui/components/profile_info_panel.js +++ b/app/javascript/gabsocial/features/ui/components/profile_info_panel.js @@ -8,8 +8,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import Button from 'gabsocial/components/button'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Icon from 'gabsocial/components/icon'; -import DisplayNameBadge from 'gabsocial/components/display_name_badge'; import VerificationBadge from 'gabsocial/components/verification_badge'; +import ProBadge from 'gabsocial/components/pro_badge'; +import DonorBadge from 'gabsocial/components/donor_badge'; +import InvestorBadge from 'gabsocial/components/investor_badge'; import { List as ImmutableList } from 'immutable'; const messages = defineMessages({ @@ -59,6 +61,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { const fields = account.get('fields'); const acct = account.get('acct'); const displayNameHtml = { __html: account.get('display_name_html') }; + const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' }); return (
@@ -68,12 +71,23 @@ class ProfileInfoPanel extends ImmutablePureComponent {

{account.get('is_verified') && } - {account.get('is_pro') && } {badge} @{acct} {lockedIcon}

+
+ {account.get('is_pro') && } + {account.get('is_donor') && } + {account.get('is_investor') && } +
+ + +
+
+ { (account.get('note').length > 0 && account.get('note') !== '

') &&
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss index 455f9af5..0bc32ea6 100644 --- a/app/javascript/styles/gabsocial/components.scss +++ b/app/javascript/styles/gabsocial/components.scss @@ -4942,6 +4942,29 @@ noscript { .profile-info-panel-content { display: flex; + &__badges { + display: flex; + margin: 5px 0; + flex-direction: row; + flex-wrap: wrap; + + &__join-date { + display: block; + margin-top: 5px; + + .fa { + margin-right: 8px; + } + + span { + color: $primary-text-color; + body.theme-gabsocial-light & {color: $gab-default-text-light;} + font-size: 15px; + line-height: 1.25; + } + } + } + &__name { display: block; @@ -5181,3 +5204,26 @@ noscript { } } } + +.badge { + font-size: 12px; + text-transform: uppercase; + padding: 2px 6px; + border-radius: 2px; + margin: 0 5px 5px 0; + + &--pro { + background-color: blueviolet; + color: #fff; + } + + &--investor { + background-color: gold; + color: #000; + } + + &--donor { + background-color: lightgreen; + color: #000; + } +} diff --git a/app/serializers/rest/account_serializer.rb b/app/serializers/rest/account_serializer.rb index b415926c..2b23e33c 100644 --- a/app/serializers/rest/account_serializer.rb +++ b/app/serializers/rest/account_serializer.rb @@ -5,7 +5,7 @@ class REST::AccountSerializer < ActiveModel::Serializer attributes :id, :username, :acct, :display_name, :locked, :bot, :created_at, :note, :url, :avatar, :avatar_static, :header, :header_static, - :followers_count, :following_count, :statuses_count, :is_pro, :is_verified + :followers_count, :following_count, :statuses_count, :is_pro, :is_verified, :is_donor, :is_investor has_one :moved_to_account, key: :moved, serializer: REST::AccountSerializer, if: :moved_and_not_nested? has_many :emojis, serializer: REST::CustomEmojiSerializer