Commit 757fde87 authored by mgabdev's avatar mgabdev

Added user badges and "member since"

added ProBadge, InvestorBadge, DonorBadge components, css
removed "PRO" from appending in display_name
fixes: #50
parent b61596b1
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') && <VerificationBadge />}
{suffix}
{account.get('is_pro') && <DisplayNameBadge label="PRO" />}
</span>
);
}
......
import React from 'react';
const DonorBadge = () => (
<span className='badge badge--donor'>Donor</span>
);
export default DonorBadge;
import React from 'react';
const InvestorBadge = () => (
<span className='badge badge--investor'>Investor</span>
);
export default InvestorBadge;
import React from 'react';
const ProBadge = () => (
<span className='badge badge--pro'>Pro</span>
);
export default ProBadge;
......@@ -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 (
<div className='profile-info-panel'>
......@@ -68,12 +71,23 @@ class ProfileInfoPanel extends ImmutablePureComponent {
<h1>
<span dangerouslySetInnerHTML={displayNameHtml} />
{account.get('is_verified') && <VerificationBadge />}
{account.get('is_pro') && <DisplayNameBadge label="PRO" />}
{badge}
<small>@{acct} {lockedIcon}</small>
</h1>
</div>
<div className='profile-info-panel-content__badges'>
{account.get('is_pro') && <ProBadge />}
{account.get('is_donor') && <DonorBadge />}
{account.get('is_investor') && <InvestorBadge />}
<div className='profile-info-panel-content__badges__join-date'>
<Icon id="calendar"/>
<FormattedMessage id='account.member_since' defaultMessage='Member since {date}' values={{
date: memberSinceDate
}} />
</div>
</div>
{
(account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
<div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />
......
......@@ -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;
}
}
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment