random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-04-02 12:57:04 -04:00
parent d79133c72d
commit 416bc3d603
19 changed files with 209 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/gabsocial/components/button.js
View File

@@ -38,6 +38,7 @@ export default class Button extends PureComponent {
underlineOnHover: PropTypes.bool,
radiusSmall: PropTypes.bool,
noClasses: PropTypes.bool,
buttonRef: PropTypes.func,
}
static defaultProps = {

47
app/javascript/gabsocial/components/domain.js
View File

@@ -1,47 +0,0 @@
import { defineMessages, injectIntl } from 'react-intl';
import Button from './button';
const messages = defineMessages({
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
});
export default
@injectIntl
class Domain extends PureComponent {
static propTypes = {
domain: PropTypes.string,
onUnblockDomain: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
handleDomainUnblock = () => {
this.props.onUnblockDomain(this.props.domain);
}
render () {
const { domain, intl } = this.props;
return (
<div className='domain'>
<div className='domain__wrapper'>
<span className='domain__name'>
<strong>{domain}</strong>
</span>
<div className='domain__buttons'>
<Button
active
icon='unlock'
title={intl.formatMessage(messages.unblockDomain, {
domain,
})}
onClick={this.handleDomainUnblock}
/>
</div>
</div>
</div>
);
}
}

2
app/javascript/gabsocial/components/icon.js
View File

@@ -26,6 +26,7 @@ import HomeIcon from '../assets/home_icon'
import InvestorIcon from '../assets/investor_icon'
import ItalicIcon from '../assets/italic_icon'
import LikeIcon from '../assets/like_icon'
import LikedIcon from '../assets/liked_icon'
import LinkIcon from '../assets/link_icon'
import ListIcon from '../assets/list_icon'
import ListAddIcon from '../assets/list_add_icon'
@@ -84,6 +85,7 @@ const ICONS = {
'investor': InvestorIcon,
'italic': ItalicIcon,
'like': LikeIcon,
'liked': LikedIcon,
'link': LinkIcon,
'list': ListIcon,
'list-add': ListAddIcon,

13
app/javascript/gabsocial/components/list.js
View File

@@ -10,14 +10,25 @@ export default class List extends ImmutablePureComponent {
scrollKey: PropTypes.string,
emptyMessage: PropTypes.any,
small: PropTypes.bool,
onLoadMore: PropTypes.func,
hasMore: PropTypes.bool,
}
render() {
const { items, scrollKey, emptyMessage, small } = this.props
const {
items,
scrollKey,
emptyMessage,
hasMore,
small,
onLoadMore
} = this.props
return (
<Block>
<ScrollableList
onLoadMore={onLoadMore}
hasMore={hasMore}
scrollKey={scrollKey}
emptyMessage={emptyMessage}
>

56
app/javascript/gabsocial/components/modal/block_domain_modal.js
View File

@@ -1,70 +1,50 @@
import { injectIntl, defineMessages } from 'react-intl'
import { muteAccount } from '../../actions/accounts'
import { blockDomain } from '../../actions/domain_blocks'
import ConfirmationModal from './confirmation_modal'
const messages = defineMessages({
muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
blockDomain: { id: 'block_domain', defaultMessage: 'Block {domain}' },
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
blockDomainMessage: { id: 'confirmations.domain_block.message', defaultMessage: 'Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' },
cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
})
const mapStateToProps = state => {
return {
isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
account: state.getIn(['mutes', 'new', 'account']),
}
}
const mapDispatchToProps = dispatch => {
return {
onConfirm(account, notifications) {
dispatch(muteAccount(account.get('id'), notifications))
onConfirm(domain) {
dispatch(blockDomain(domain))
},
}
}
export default
@connect(mapStateToProps, mapDispatchToProps)
@connect(null, mapDispatchToProps)
@injectIntl
class BlockDomainModal extends PureComponent {
static propTypes = {
isSubmitting: PropTypes.bool.isRequired,
account: PropTypes.object.isRequired,
domain: PropTypes.string.isRequired,
onConfirm: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
}
componentDidMount() {
this.button.focus()
}
handleClick = () => {
this.props.onClose()
this.props.onConfirm(this.props.account, this.props.notifications)
}
handleCancel = () => {
this.props.onClose()
this.props.onConfirm(this.props.domain)
}
render() {
const { account, intl } = this.props
const { onClose, domain, intl } = this.props
// dispatch(openModal('CONFIRM', {
// message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
// confirm: intl.formatMessage(messages.blockDomainConfirm),
// onConfirm: () => dispatch(blockDomain(domain)),
// }));
console.log("this.props: ", this.props)
return (
<ConfirmationModal
title={`Mute @${account.get('acct')}`}
message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
onConfirm={() => {
// dispatch(blockDomain(domain))
// dispatch(blockDomain(domain))
}}
title={intl.formatMessage(messages.blockDomain, { domain })}
message={intl.formatMessage(messages.blockDomainMessage, { domain })}
confirm={intl.formatMessage(messages.blockDomainConfirm)}
onConfirm={this.handleClick}
onClose={onClose}
/>
)
}

10
app/javascript/gabsocial/components/popover/profile_options_popover.js
View File

@@ -216,7 +216,7 @@ class ProfileOptionsPopover extends PureComponent {
title: intl.formatMessage(isBlockingDomain ? messages.unblockDomain : messages.blockDomain, {
domain,
}),
onClick: this.handleUnblockDomain
onClick: isBlockingDomain ? this.handleUnblockDomain : this.handleBlockDomain,
})
}
@@ -275,12 +275,14 @@ class ProfileOptionsPopover extends PureComponent {
}
handleBlockDomain = () => {
const domain = this.props.account.get('acct').split('@')[1];
const domain = this.props.account.get('acct').split('@')[1]
console.log("handleBlockDomain:", domain)
// : todo : alert
if (!domain) return;
if (!domain) return
this.props.onBlockDomain(domain);
this.props.onBlockDomain(domain)
}
handleUnblockDomain = () => {

22
app/javascript/gabsocial/components/status_action_bar.js
View File

@@ -27,6 +27,9 @@ const messages = defineMessages({
cannot_repost: { id: 'status.cannot_repost', defaultMessage: 'This post cannot be reposted' },
cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
like: { id: 'status.like', defaultMessage: 'Like' },
likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
commentsLabel: { id: 'comments.label', defaultMessage: '{number, plural, one {# comment} other {# comments}}' },
open: { id: 'status.open', defaultMessage: 'Expand this status' },
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
@@ -195,8 +198,9 @@ class StatusActionBar extends ImmutablePureComponent {
favoriteCount > 0 &&
<button className={interactionBtnClasses}>
<Text color='secondary' size='small'>
{favoriteCount}
&nbsp;Likes
{formatMessage(messages.likesLabel, {
number: favoriteCount,
})}
</Text>
</button>
}
@@ -204,8 +208,9 @@ class StatusActionBar extends ImmutablePureComponent {
replyCount > 0 &&
<button className={interactionBtnClasses}>
<Text color='secondary' size='small'>
{replyCount}
&nbsp;Comments
{formatMessage(messages.commentsLabel, {
number: replyCount,
})}
</Text>
</button>
}
@@ -213,8 +218,9 @@ class StatusActionBar extends ImmutablePureComponent {
repostCount > 0 &&
<button className={interactionBtnClasses}>
<Text color='secondary' size='small'>
{repostCount}
&nbsp;Reposts
{formatMessage(messages.repostsLabel, {
number: repostCount,
})}
</Text>
</button>
}
@@ -224,8 +230,8 @@ class StatusActionBar extends ImmutablePureComponent {
<div className={[_s.default, _s.flexRow, _s.py2, _s.width100PC].join(' ')}>
<StatusActionBarItem
title={formatMessage(messages.like)}
icon='like'
active={!!status.get('favorited')}
icon={!!status.get('favourited') ? 'liked' : 'like'}
active={!!status.get('favourited')}
onClick={this.handleFavoriteClick}
/>
<StatusActionBarItem

39
app/javascript/gabsocial/components/status_action_bar_item.js
View File

@@ -1,5 +1,7 @@
import classNames from 'classnames/bind'
import Button from './button'
import Icon from './icon'
import Text from './text'
const cx = classNames.bind(_s)
@@ -24,37 +26,36 @@ export default class StatusActionBarItem extends PureComponent {
} = this.props
const btnClasses = cx({
default: 1,
text: 1,
fontSize13PX: 1,
fontWeightMedium: 1,
cursorPointer: 1,
displayFlex: 1,
justifyContentCenter: 1,
flexRow: 1,
alignItemsCenter: 1,
py10: 1,
px10: 1,
width100PC: 1,
radiusSmall: 1,
outlineNone: 1,
backgroundTransparent: 1,
backgroundSubtle_onHover: 1,
colorSecondary: 1,
})
const color = active ? 'brand' : 'secondary'
const weight = active ? 'bold' : 'medium'
return (
<div className={[_s.default, _s.flexGrow1, _s.px5].join(' ')}>
<button
ref={buttonRef}
<div className={[_s.default, _s.flexNormal, _s.px5].join(' ')}>
<Button
block
radiusSmall
backgroundColor='none'
color={color}
buttonRef={buttonRef}
className={btnClasses}
onClick={onClick}
active={active}
disabled={disabled}
icon={icon}
iconWidth='16px'
iconHeight='16px'
iconClassName={[_s.default, _s.mr10, _s.inheritFill].join(' ')}
>
<Icon width='16px' height='16px' id={icon} className={[_s.default, _s.mr10, _s.fillColorSecondary].join(' ')} />
{title}
</button>
<Text color='inherit' size='small' weight={weight}>
{title}
</Text>
</Button>
</div>
)
}