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-17 01:35:46 -04:00
parent 35852e7fee
commit 4d7aee59c9
37 changed files with 568 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -136,6 +136,7 @@ export default class Button extends PureComponent {
backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary,
backgroundColorBlackOpaque_onHover: backgroundColor === COLORS.black,
backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,
backgroundColorBrand_onHover: color === COLORS.brand && outline,
colorWhite_onHover: !!children && color === COLORS.brand && outline,

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

@@ -52,7 +52,7 @@ class Comment extends ImmutablePureComponent {
// : todo : add media
return (
<div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
<div className={[_s.default, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
<div className={[_s.default].join(' ')} style={style}>
<div className={[_s.default, _s.flexRow].join(' ')}>

35
app/javascript/gabsocial/components/comment_list.js
View File

@@ -1,20 +1,30 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import Button from './button'
import Comment from './comment'
import Text from './text'
export default class CommentList extends ImmutablePureComponent {
static propTypes = {
commentsLimited: PropTypes.bool,
descendants: ImmutablePropTypes.list,
}
render() {
const { descendants } = this.props
const {
descendants,
commentsLimited,
} = this.props
const size = descendants.size
const max = Math.min(commentsLimited ? 2 : 6, size)
console.log("max:", size, max)
return (
<div>
{
descendants.map((descendant, i) => (
descendants.slice(0, max).map((descendant, i) => (
<Comment
key={`comment-${descendant.get('statusId')}-${i}`}
id={descendant.get('statusId')}
@@ -22,6 +32,27 @@ export default class CommentList extends ImmutablePureComponent {
/>
))
}
{
size > 0 && size > max &&
<div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
<Button
text
backgroundColor='none'
color='tertiary'
>
<Text weight='bold' color='inherit'>
View more comments
</Text>
</Button>
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
<Text color='tertiary'>
{max}
&nbsp;of&nbsp;
{size}
</Text>
</div>
</div>
}
</div>
)
}

48
app/javascript/gabsocial/components/load_more.js
View File

@@ -33,29 +33,31 @@ class LoadMore extends PureComponent {
const { disabled, visible, gap, intl } = this.props
return (
<Button
block
radiusSmall
backgroundColor='tertiary'
color='primary'
disabled={disabled || !visible}
style={{ visibility: visible ? 'visible' : 'hidden' }}
onClick={this.handleClick}
aria-label={intl.formatMessage(messages.load_more)}
>
{
!gap &&
<Text color='inherit'>
{intl.formatMessage(messages.load_more)}
</Text>
}
{
gap &&
<Text align='center'>
<Icon id='ellipsis' />
</Text>
}
</Button>
<div className={[_s.default, _s.py10, _s.px10].join(' ')}>
<Button
block
radiusSmall
backgroundColor='tertiary'
color='primary'
disabled={disabled || !visible}
style={{ visibility: visible ? 'visible' : 'hidden' }}
onClick={this.handleClick}
aria-label={intl.formatMessage(messages.load_more)}
>
{
!gap &&
<Text color='inherit'>
{intl.formatMessage(messages.load_more)}
</Text>
}
{
gap &&
<Text align='center'>
<Icon id='ellipsis' />
</Text>
}
</Button>
</div>
)
}

2
app/javascript/gabsocial/components/modal/gif_picker_modal.js
View File

@@ -99,7 +99,7 @@ class GifPickerModal extends PureComponent {
}
handleSelectGifResult = (resultId) => {
console.log("handleSelectGifResult:", resultId)
}
render() {

68
app/javascript/gabsocial/components/modal/status_stats_modal.js Normal file
View File

@@ -0,0 +1,68 @@
import { injectIntl, defineMessages } from 'react-intl'
import { muteAccount } from '../../actions/accounts'
const messages = defineMessages({
muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
})
const mapStateToProps = (state) => ({
isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
account: state.getIn(['mutes', 'new', 'account']),
})
const mapDispatchToProps = (dispatch) => ({
onConfirm(account, notifications) {
dispatch(muteAccount(account.get('id'), notifications))
},
})
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class UnfollowModal extends PureComponent {
static propTypes = {
isSubmitting: PropTypes.bool.isRequired,
account: PropTypes.object.isRequired,
onConfirm: 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()
}
render() {
const { account, intl } = this.props
// , {
// message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
// confirm: intl.formatMessage(messages.unfollowConfirm),
// onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
// }));
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))
}}
/>
)
}
}

304
app/javascript/gabsocial/components/profile_header.js
View File

@@ -1,7 +1,7 @@
import axios from 'axios'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
import Sticky from 'react-stickynode'
import classNames from 'classnames/bind'
import {
followAccount,
@@ -26,9 +26,11 @@ const cx = classNames.bind(_s)
const messages = defineMessages({
follow: { id: 'follow', defaultMessage: 'Follow' },
following: { id: 'following', defaultMessage: 'Following' },
unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
requested: { id: 'requested', defaultMessage: 'Requested' },
unblock: { id: 'unblock', defaultMessage: 'Unblock' },
blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
profile: { id: 'account.profile', defaultMessage: 'Profile' },
@@ -92,6 +94,10 @@ class ProfileHeader extends ImmutablePureComponent {
openProfileOptionsPopover: PropTypes.func.isRequired,
}
state = {
stickied: false,
}
handleOpenMore = () => {
const { openProfileOptionsPopover, account } = this.props
openProfileOptionsPopover({
@@ -110,7 +116,7 @@ class ProfileHeader extends ImmutablePureComponent {
}
// : todo :
makeInfo() {
makeInfo = () => {
const { account, intl } = this.props
const info = []
@@ -132,12 +138,24 @@ class ProfileHeader extends ImmutablePureComponent {
return info
}
onStickyStateChange = (status) => {
switch (status.status) {
case Sticky.STATUS_FIXED:
this.setState({ stickied: true })
break;
default:
this.setState({ stickied: false })
break;
}
}
setOpenMoreNodeRef = (n) => {
this.openMoreNode = n
}
render() {
const { account, intl } = this.props
const { stickied } = this.state
const tabs = !account ? null : [
{
@@ -160,6 +178,60 @@ class ProfileHeader extends ImmutablePureComponent {
const headerSrc = !!account ? account.get('header') : ''
const headerMissing = headerSrc.indexOf('/headers/original/missing.png') > -1 || !headerSrc
const avatarSize = headerMissing ? '75' : '150'
let buttonText = ''
let buttonOptions = {}
if (!account) {
//
} else {
if (!account.get('relationship')) {
// Wait until the relationship is loaded
} else {
const isRequested = account.getIn(['relationship', 'requested'])
const isBlocking = account.getIn(['relationship', 'blocking'])
const isFollowing = account.getIn(['relationship', 'following'])
const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
if (isRequested) {
buttonText = intl.formatMessage(messages.requested)
buttonOptions = {
onClick: this.handleFollow,
color: 'primary',
backgroundColor: 'tertiary',
}
} else if (isBlocking) {
buttonText = intl.formatMessage(messages.blocked)
buttonOptions = {
onClick: this.handleBlock,
color: 'white',
backgroundColor: 'danger',
}
} else if (isFollowing) {
buttonText = intl.formatMessage(messages.following)
buttonOptions = {
onClick: this.handleFollow,
color: 'white',
backgroundColor: 'brand',
}
} else if (isBlockedBy) {
//Don't show
}
else {
buttonText = intl.formatMessage(messages.follow)
buttonOptions = {
onClick: this.handleFollow,
color: 'brand',
backgroundColor: 'none',
outline: true,
}
}
}
}
console.log('buttonOptions:', buttonText, buttonOptions)
console.log('account: ', account)
const avatarContainerClasses = cx({
circle: 1,
@@ -168,78 +240,18 @@ class ProfileHeader extends ImmutablePureComponent {
border2PX: 1,
})
const avatarSize = headerMissing ? '75' : '150'
const stickyBarContainerClasses = cx({
default: 1,
flexRow: 1,
px15: 1,
alignItemsCenter: 1,
displayNone: !stickied,
})
let buttonText = ''
let buttonOptions = {}
if (!account) {
console.log('no account')
} else {
if (!account.get('relationship')) {
console.log('no relationship')
// Wait until the relationship is loaded
} else if (account.getIn(['relationship', 'requested'])) {
buttonText = intl.formatMessage(messages.requested)
buttonOptions = {
narrow: true,
onClick: this.handleFollow,
color: 'primary',
backgroundColor: 'tertiary',
}
} else if (!account.getIn(['relationship', 'blocking'])) {
const isFollowing = account.getIn(['relationship', 'following'])
const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
buttonText = intl.formatMessage(isFollowing ? messages.unfollow : messages.follow)
buttonOptions = {
narrow: true,
onClick: this.handleFollow,
color: 'primary',
backgroundColor: 'tertiary',
disabled: isBlockedBy,
}
} else if (account.getIn(['relationship', 'blocking'])) {
buttonText = intl.formatMessage(messages.unblock)
buttonOptions = {
narrow: true,
onClick: this.handleBlock,
color: 'primary',
backgroundColor: 'tertiary',
}
} else {
console.log('no nothin')
}
// if (account.get('id') !== me && account.get('relationship', null) !== null) {
// const following = account.getIn(['relationship', 'following'])
// const requested = account.getIn(['relationship', 'requested'])
// const blocking = account.getIn(['relationship', 'blocking'])
// if (requested || blocking) {
// buttonText = intl.formatMessage(requested ? messages.requested : messages.unblock)
// buttonOptions = {
// narrow: true,
// onClick: requested ? this.handleFollow : this.handleBlock,
// color: 'primary',
// backgroundColor: 'tertiary',
// }
// } else if (!account.get('moved') || following) {
// buttonOptions = {
// narrow: true,
// outline: !following,
// color: !following ? 'brand' : 'white',
// backgroundColor: !following ? 'none' : 'brand',
// onClick: this.handleFollow,
// }
// buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
// } else {
// console.log("SHOW ELSE")
// }
// }
}
console.log('buttonOptions:', buttonText, buttonOptions)
console.log('account: ', account)
const tabBarContainerClasses = cx({
default: 1,
displayNone: stickied,
})
// : todo : "follows you", "mutual follow"
@@ -260,7 +272,7 @@ class ProfileHeader extends ImmutablePureComponent {
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px15].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px15, _s.mb5].join(' ')}>
<div className={avatarContainerClasses}>
<Avatar size={avatarSize} account={account} />
</div>
@@ -271,87 +283,103 @@ class ProfileHeader extends ImmutablePureComponent {
account && account.get('locked') &&
<Icon id='lock-filled' height='14px' width='14px' className={[_s.mt10, _s.ml10].join(' ')} />
}
{
/* : todo :
account.getIn(['relationship', 'muting'])
*/
}
</div>
</div>
<div className={[_s.default, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary, _s.mt5, _s.height53PX].join(' ')}>
<div className={[_s.default].join(' ')}>
<TabBar tabs={tabs} large />
</div>
{
account && account.get('id') === me &&
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
<Button
outline
backgroundColor='none'
color='brand'
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
href=''
>
<Text
color='inherit'
weight='bold'
size='medium'
className={[_s.px15].join(' ')}
>
Edit Profile
</Text>
</Button>
<Sticky enabled onStateChange={this.onStickyStateChange}>
<div className={[_s.default, _s.flexRow, _s.backgroundColorSecondary3, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX].join(' ')}>
<div className={tabBarContainerClasses}>
<TabBar tabs={tabs} large />
</div>
}
{
account && account.get('id') !== me &&
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
<div ref={this.setOpenMoreNodeRef}>
<Button
outline
icon='ellipsis'
iconWidth='18px'
iconHeight='18px'
iconClassName={_s.inheritFill}
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
onClick={this.handleOpenMore}
/>
<div className={stickyBarContainerClasses}>
<Avatar size={36} account={account} />
<div className={[_s.default, _s.ml10].join(' ')}>
<DisplayName account={account} noUsername large />
</div>
</div>
<form action='https://chat.gab.com/private-message' method='POST'>
{
account && account.get('id') === me &&
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
<Button
type='submit'
outline
icon='chat'
iconWidth='18px'
iconHeight='18px'
iconClassName={_s.inheritFill}
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
/>
<input type='hidden' value={account.get('username')} name='username' />
</form>
<Button
{...buttonOptions}
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
>
<span className={[_s.px15].join(' ')}>
color='brand'
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
href=''
>
<Text
color='inherit'
weight='bold'
size='medium'
className={[_s.px15].join(' ')}
>
{buttonText}
Edit Profile
</Text>
</span>
</Button>
</Button>
</div>
}
</div>
}
</div>
{
account && account.get('id') !== me &&
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
<div ref={this.setOpenMoreNodeRef}>
<Button
outline
icon='ellipsis'
iconWidth='18px'
iconHeight='18px'
iconClassName={_s.inheritFill}
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
onClick={this.handleOpenMore}
/>
</div>
<form action='https://chat.gab.com/private-message' method='POST'>
<Button
type='submit'
outline
icon='chat'
iconWidth='18px'
iconHeight='18px'
iconClassName={_s.inheritFill}
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
/>
<input type='hidden' value={account.get('username')} name='username' />
</form>
{
!!buttonText &&
<Button
{...buttonOptions}
narrow
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
>
<Text
color='inherit'
weight='bold'
size='medium'
className={_s.px10}
>
{buttonText}
</Text>
</Button>
}
</div>
}
</div>
</Sticky>
</div>
</div>
)

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

@@ -106,8 +106,6 @@ class Sidebar extends ImmutablePureComponent {
const acct = account.get('acct')
const isPro = account.get('is_pro')
console.log('showCommunityTimeline:', showCommunityTimeline)
const menuItems = [
{
title: 'Home',

16
app/javascript/gabsocial/components/status.js
View File

@@ -84,7 +84,6 @@ class Status extends ImmutablePureComponent {
hidden: PropTypes.bool,
onMoveUp: PropTypes.func,
onMoveDown: PropTypes.func,
showThread: PropTypes.bool,
getScrollPosition: PropTypes.func,
updateScrollBottom: PropTypes.func,
cacheMediaWidth: PropTypes.func,
@@ -93,7 +92,6 @@ class Status extends ImmutablePureComponent {
promoted: PropTypes.bool,
onOpenProUpgradeModal: PropTypes.func,
intl: PropTypes.object.isRequired,
borderless: PropTypes.bool,
isChild: PropTypes.bool,
}
@@ -267,10 +265,8 @@ class Status extends ImmutablePureComponent {
intl,
hidden,
featured,
showThread,
group,
promoted,
borderless,
isChild,
} = this.props
@@ -386,8 +382,8 @@ class Status extends ImmutablePureComponent {
const containerClasses = cx({
default: 1,
radiusSmall: !borderless && !isChild,
// mb15: !borderless && !isChild,
radiusSmall: !isChild,
// mb15: !isChild,
// backgroundColorPrimary: 1,
pb15: featured,
borderBottom1PX: featured && !isChild,
@@ -397,9 +393,9 @@ class Status extends ImmutablePureComponent {
const innerContainerClasses = cx({
default: 1,
overflowHidden: 1,
radiusSmall: !borderless,
borderColorSecondary: !borderless,
border1PX: !borderless,
radiusSmall: isChild,
borderColorSecondary: isChild,
border1PX: isChild,
pb10: isChild && status.get('media_attachments').size === 0,
pb5: isChild && status.get('media_attachments').size > 1,
cursorPointer: isChild,
@@ -409,7 +405,7 @@ class Status extends ImmutablePureComponent {
return (
<HotKeys handlers={handlers}>
<div
className={containerClasses}
className={containerClasses}
tabIndex={this.props.muted ? null : 0}
data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText)}

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

@@ -105,14 +105,6 @@ class StatusActionBar extends ImmutablePureComponent {
}
}
handleQuoteClick = () => {
if (me) {
this.props.onQuote(this.props.status, this.context.router.history)
} else {
this.props.onOpenUnauthorizedModal()
}
}
handleFavoriteClick = () => {
if (me) {
this.props.onFavorite(this.props.status)
@@ -123,17 +115,29 @@ class StatusActionBar extends ImmutablePureComponent {
handleRepostClick = e => {
if (me) {
this.props.onRepost(this.props.status, e)
// this.props.onRepost(this.props.status, e)
this.props.onQuote(this.props.status, this.context.router.history)
} else {
this.props.onOpenUnauthorizedModal()
}
}
handleShareClick = () => {
console.log("handleShareClick:", this.shareButton, this.props.status)
this.props.onOpenStatusSharePopover(this.shareButton, this.props.status)
}
openLikesList = () => {
}
toggleCommentsVisible = () => {
}
openRepostsList = () => {
}
setShareButton = (n) => {
this.shareButton = n
}
@@ -176,6 +180,7 @@ class StatusActionBar extends ImmutablePureComponent {
text: 1,
cursorPointer: 1,
fontWeightNormal: 1,
underline_onHover: 1,
mr10: 1,
py5: 1,
})
@@ -187,7 +192,7 @@ class StatusActionBar extends ImmutablePureComponent {
<div className={[_s.default, _s.flexRow, _s.px5].join(' ')}>
{
favoriteCount > 0 &&
<button className={interactionBtnClasses}>
<button className={interactionBtnClasses} onClick={this.openLikesList}>
<Text color='secondary' size='small'>
{formatMessage(messages.likesLabel, {
number: favoriteCount,
@@ -197,7 +202,7 @@ class StatusActionBar extends ImmutablePureComponent {
}
{
replyCount > 0 &&
<button className={interactionBtnClasses}>
<button className={interactionBtnClasses} onClick={this.toggleCommentsVisible}>
<Text color='secondary' size='small'>
{formatMessage(messages.commentsLabel, {
number: replyCount,
@@ -207,7 +212,7 @@ class StatusActionBar extends ImmutablePureComponent {
}
{
repostCount > 0 &&
<button className={interactionBtnClasses}>
<button className={interactionBtnClasses} onClick={this.openRepostsList}>
<Text color='secondary' size='small'>
{formatMessage(messages.repostsLabel, {
number: repostCount,

12
app/javascript/gabsocial/components/status_list.js
View File

@@ -38,7 +38,9 @@ const makeGetStatusIds = () => createSelector([
});
});
const mapStateToProps = (state, {timelineId}) => {
const mapStateToProps = (state, { timelineId }) => {
if (!timelineId) return {}
const getStatusIds = makeGetStatusIds();
const promotion = promotions.length > 0 && sample(promotions.filter(p => p.timeline_id === timelineId));
@@ -181,15 +183,15 @@ class StatusList extends ImmutablePureComponent {
contextType={timelineId}
group={group}
withGroupAdmin={withGroupAdmin}
showThread
commentsLimited
/>
{
{ /* : todo : */
promotedStatus && index === promotion.position &&
<Status
id={promotion.status_id}
contextType={timelineId}
promoted
showThread
commentsLimited
/>
}
</Fragment>
@@ -205,7 +207,7 @@ class StatusList extends ImmutablePureComponent {
onMoveUp={this.handleMoveUp}
onMoveDown={this.handleMoveDown}
contextType={timelineId}
showThread
commentsLimited
/>
)).concat(scrollableContent)
}

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

@@ -5,6 +5,7 @@ const cx = classNames.bind(_s)
const COLORS = {
primary: 'primary',
secondary: 'secondary',
tertiary: 'tertiary',
brand: 'brand',
error: 'error',
white: 'white',
@@ -78,6 +79,7 @@ export default class Text extends PureComponent {
colorPrimary: color === COLORS.primary,
colorSecondary: color === COLORS.secondary,
colorTertiary: color === COLORS.tertiary,
colorBrand: color === COLORS.brand,
colorWhite: color === COLORS.white,
colorGabPro: color === COLORS.pro,