Progress
This commit is contained in:
mgabdev
parent
4dfb7c9fd6
commit
c1131db577
@ -1,4 +1,5 @@
|
||||
import api from '../api';
|
||||
import { FormattedMessage } from 'react-intl'
|
||||
import { CancelToken, isCancel } from 'axios';
|
||||
import throttle from 'lodash.throttle'
|
||||
import moment from 'moment-mini'
|
||||
@ -13,6 +14,7 @@ import { updateTimeline, dequeueTimeline } from './timelines';
|
||||
import { defineMessages } from 'react-intl';
|
||||
import { openModal, closeModal } from './modal';
|
||||
import { me } from '../initial_state';
|
||||
import { makeGetStatus } from '../selectors'
|
||||
|
||||
let cancelFetchComposeSuggestionsAccounts;
|
||||
|
||||
@ -79,14 +81,88 @@ export const ensureComposeIsVisible = (getState, routerHistory) => {
|
||||
};
|
||||
|
||||
export function changeCompose(text, markdown, replyId) {
|
||||
console.log("changeCompose:", text)
|
||||
return {
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
replyId: replyId,
|
||||
};
|
||||
};
|
||||
return function (dispatch, getState) {
|
||||
const reduxReplyToId = getState().getIn(['compose', 'in_reply_to'])
|
||||
const existingText = getState().getIn(['compose', 'text']).trim()
|
||||
const isModalOpen = getState().getIn(['modal', 'modalType']) === 'COMPOSE'
|
||||
|
||||
let status
|
||||
if (!!replyId) {
|
||||
status = getState().getIn(['statuses', replyId])
|
||||
status = makeGetStatus()(getState(), {
|
||||
id: status.get('id')
|
||||
})
|
||||
}
|
||||
|
||||
if (!!replyId && replyId !== reduxReplyToId && !isModalOpen) {
|
||||
if (existingText.length === 0 && text.trim().length > 0) {
|
||||
dispatch({
|
||||
type: COMPOSE_REPLY,
|
||||
status: status,
|
||||
})
|
||||
dispatch({
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
})
|
||||
} else if (existingText.length > 0 && text.trim().length > 0) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.reply.message' defaultMessage='Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' />,
|
||||
confirm: <FormattedMessage id='confirmations.reply.confirm' defaultMessage='Reply' />,
|
||||
onConfirm: () => {
|
||||
dispatch({
|
||||
type: COMPOSE_REPLY,
|
||||
status: status,
|
||||
})
|
||||
dispatch({
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
})
|
||||
}
|
||||
}))
|
||||
} else {
|
||||
dispatch({
|
||||
type: COMPOSE_REPLY_CANCEL,
|
||||
})
|
||||
}
|
||||
} else if (!replyId && !!reduxReplyToId && !isModalOpen) {
|
||||
if (existingText.length === 0 && text.trim().length > 0) {
|
||||
dispatch({
|
||||
type: COMPOSE_REPLY_CANCEL,
|
||||
})
|
||||
dispatch({
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
})
|
||||
} else if (existingText.length > 0 && text.trim().length > 0) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.new_compose.message' defaultMessage='Composing now will overwrite the reply you are currently writing. Are you sure you want to proceed?' />,
|
||||
confirm: <FormattedMessage id='confirmations.new_compose.confirm' defaultMessage='Yes' />,
|
||||
onConfirm: () => {
|
||||
dispatch({
|
||||
type: COMPOSE_REPLY_CANCEL,
|
||||
})
|
||||
dispatch({
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
})
|
||||
},
|
||||
}))
|
||||
} else {
|
||||
//
|
||||
}
|
||||
} else {
|
||||
dispatch({
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function replyCompose(status, router, showModal) {
|
||||
return (dispatch) => {
|
||||
|
||||
24
app/javascript/gabsocial/assets/block_icon.js
Normal file
24
app/javascript/gabsocial/assets/block_icon.js
Normal file
@ -0,0 +1,24 @@
|
||||
const BlockIcon = ({
|
||||
className = '',
|
||||
size = '16px',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d='M 24 0 C 10.800781 0 0 10.800781 0 24 C 0 37.199219 10.800781 48 24 48 C 37.199219 48 48 37.199219 48 24 C 48 10.800781 37.199219 0 24 0 Z M 4.800781 24 C 4.800781 13.441406 13.441406 4.800781 24 4.800781 C 28.320312 4.800781 32.398438 6.238281 35.761719 8.878906 L 8.878906 35.761719 C 6.238281 32.398438 4.800781 28.320312 4.800781 24 Z M 24 43.199219 C 19.679688 43.199219 15.601562 41.761719 12.238281 39.121094 L 39.121094 12.238281 C 41.761719 15.601562 43.199219 19.679688 43.199219 24 C 43.199219 34.558594 34.558594 43.199219 24 43.199219 Z M 24 43.199219' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default BlockIcon
|
||||
26
app/javascript/gabsocial/assets/trash_icon.js
Normal file
26
app/javascript/gabsocial/assets/trash_icon.js
Normal file
@ -0,0 +1,26 @@
|
||||
const TrashIcon = ({
|
||||
className = '',
|
||||
size = '32px',
|
||||
title = 'Trash',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 48 48'
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d='M 16.171875 4.363281 C 16.171875 2.929688 17.289062 1.886719 18.71875 1.886719 L 29.1875 1.886719 C 30.617188 1.886719 31.734375 2.929688 31.734375 4.363281 L 31.734375 7.074219 L 33.617188 7.074219 L 33.617188 4.363281 C 33.617188 1.890625 31.65625 0 29.1875 0 L 18.71875 0 C 16.25 0 14.285156 1.890625 14.285156 4.363281 L 14.285156 7.074219 L 16.171875 7.074219 Z M 16.171875 4.363281' />
|
||||
<path d='M 12.800781 47.976562 L 35.105469 47.976562 C 37.253906 47.976562 38.921875 46.085938 38.921875 43.734375 L 38.921875 14.617188 L 8.980469 14.617188 L 8.980469 43.734375 C 8.980469 46.085938 10.652344 47.976562 12.800781 47.976562 Z M 29.964844 19.121094 C 29.964844 18.597656 30.386719 18.175781 30.90625 18.175781 C 31.429688 18.175781 31.851562 18.597656 31.851562 19.121094 L 31.851562 41.398438 C 31.851562 41.917969 31.429688 42.339844 30.90625 42.339844 C 30.386719 42.339844 29.964844 41.917969 29.964844 41.398438 Z M 23.007812 19.121094 C 23.007812 18.597656 23.433594 18.175781 23.953125 18.175781 C 24.472656 18.175781 24.894531 18.597656 24.894531 19.121094 L 24.894531 41.398438 C 24.894531 41.917969 24.472656 42.339844 23.953125 42.339844 C 23.433594 42.339844 23.007812 41.917969 23.007812 41.398438 Z M 16.054688 19.121094 C 16.054688 18.597656 16.476562 18.175781 16.996094 18.175781 C 17.519531 18.175781 17.941406 18.597656 17.941406 19.121094 L 17.941406 41.398438 C 17.941406 41.917969 17.519531 42.339844 16.996094 42.339844 C 16.476562 42.339844 16.054688 41.917969 16.054688 41.398438 Z M 16.054688 19.121094' />
|
||||
<path d='M 8.015625 12.730469 L 39.890625 12.730469 C 41.191406 12.730469 42.246094 11.675781 42.246094 10.375 C 42.246094 9.070312 41.191406 8.015625 39.890625 8.015625 L 8.015625 8.015625 C 6.714844 8.015625 5.65625 9.070312 5.65625 10.375 C 5.65625 11.675781 6.714844 12.730469 8.015625 12.730469 Z M 8.015625 12.730469' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default TrashIcon
|
||||
@ -58,8 +58,12 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
dispatch(favorite(status))
|
||||
}
|
||||
},
|
||||
onOpenStatusOptions(status) {
|
||||
dispatch(openPopover('STATUS_OPTOINS', { status }))
|
||||
onOpenStatusOptions(targetRef, status) {
|
||||
dispatch(openPopover('STATUS_OPTIONS', {
|
||||
targetRef,
|
||||
status,
|
||||
position: 'top',
|
||||
}))
|
||||
},
|
||||
onOpenLikes(status) {
|
||||
dispatch(openModal('STATUS_LIKES', { status }))
|
||||
@ -67,6 +71,11 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenReposts(status) {
|
||||
dispatch(openModal('STATUS_REPOSTS', { status }))
|
||||
},
|
||||
onOpenStatusRevisionsPopover(status) {
|
||||
dispatch(openModal('STATUS_REVISIONS', {
|
||||
status,
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
export default
|
||||
@ -87,6 +96,7 @@ class Comment extends ImmutablePureComponent {
|
||||
onOpenStatusOptions: PropTypes.func.isRequired,
|
||||
onOpenLikes: PropTypes.func.isRequired,
|
||||
onOpenReposts: PropTypes.func.isRequired,
|
||||
onOpenStatusRevisionsPopover: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
updateOnProps = [
|
||||
@ -103,6 +113,10 @@ class Comment extends ImmutablePureComponent {
|
||||
height: undefined,
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
//
|
||||
}
|
||||
|
||||
handleOnReply = () => {
|
||||
this.props.onReply(this.props.status)
|
||||
}
|
||||
@ -112,7 +126,11 @@ class Comment extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
handleOnOpenStatusOptions = () => {
|
||||
this.props.onOpenStatusOptions(this.props.status)
|
||||
this.props.onOpenStatusOptions(this.moreNode, this.props.status)
|
||||
}
|
||||
|
||||
setMoreNode = (c) => {
|
||||
this.moreNode = c
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -150,7 +168,7 @@ class Comment extends ImmutablePureComponent {
|
||||
|
||||
return (
|
||||
<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} style={style}>
|
||||
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<NavLink
|
||||
@ -166,6 +184,7 @@ class Comment extends ImmutablePureComponent {
|
||||
<CommentHeader
|
||||
ancestorAccountId={ancestorAccountId}
|
||||
status={status}
|
||||
onOpenRevisions={this.props.onOpenStatusRevisionsPopover}
|
||||
onOpenLikes={this.props.onOpenLikes}
|
||||
onOpenReposts={this.props.onOpenReposts}
|
||||
/>
|
||||
@ -199,10 +218,12 @@ class Comment extends ImmutablePureComponent {
|
||||
title={intl.formatMessage(messages.reply)}
|
||||
onClick={this.handleOnReply}
|
||||
/>
|
||||
<CommentButton
|
||||
title='···'
|
||||
onClick={this.handleOnOpenStatusOptions}
|
||||
/>
|
||||
<div ref={this.setMoreNode}>
|
||||
<CommentButton
|
||||
title='···'
|
||||
onClick={this.handleOnOpenStatusOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -14,6 +14,7 @@ const messages = defineMessages({
|
||||
edited: { id: 'status.edited', defaultMessage: 'Edited' },
|
||||
likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
|
||||
repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
|
||||
original: { id: 'original_gabber', defaultMessage: 'Original Gabber' },
|
||||
})
|
||||
|
||||
export default
|
||||
@ -24,8 +25,9 @@ class CommentHeader extends ImmutablePureComponent {
|
||||
intl: PropTypes.object.isRequired,
|
||||
ancestorAccountId: PropTypes.string.isRequired,
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
openLikesList: PropTypes.func.isRequired,
|
||||
openRepostsList: PropTypes.func.isRequired,
|
||||
onOpenLikes: PropTypes.func.isRequired,
|
||||
onOpenReposts: PropTypes.func.isRequired,
|
||||
onOpenRevisions: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
openLikesList = () => {
|
||||
@ -36,6 +38,10 @@ class CommentHeader extends ImmutablePureComponent {
|
||||
this.props.onOpenReposts(this.props.status)
|
||||
}
|
||||
|
||||
openRevisions = () => {
|
||||
this.props.onOpenRevisions(this.props.status)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
@ -52,27 +58,50 @@ class CommentHeader extends ImmutablePureComponent {
|
||||
const isOwner = ancestorAccountId === status.getIn(['account', 'id'])
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.alignItemsStart, _s.py2, _s.flexGrow1].join(' ')}>
|
||||
<div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsCenter].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
|
||||
<NavLink
|
||||
className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
|
||||
to={`/${status.getIn(['account', 'acct'])}`}
|
||||
title={status.getIn(['account', 'acct'])}
|
||||
>
|
||||
<DisplayName account={status.get('account')} isSmall />
|
||||
<DisplayName
|
||||
account={status.get('account')}
|
||||
isSmall
|
||||
isComment
|
||||
/>
|
||||
</NavLink>
|
||||
|
||||
{
|
||||
isOwner &&
|
||||
<div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}>
|
||||
<span className={_s.visiblyHidden}>
|
||||
Original Gabber
|
||||
{intl.formatMessage(messages.original)}
|
||||
</span>
|
||||
<Icon id='mic' size='10px' className={_s.fillBrand} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!!status.get('group') &&
|
||||
<Fragment>
|
||||
<DotTextSeperator />
|
||||
<Button
|
||||
isText
|
||||
underlineOnHover
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
to={`/groups/${status.getIn(['group', 'id'])}`}
|
||||
className={_s.ml5}
|
||||
>
|
||||
<Text size='extraSmall' color='inherit'>
|
||||
{status.getIn(['group', 'title'])}
|
||||
</Text>
|
||||
</Button>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
{
|
||||
status.get('revised_at') !== null &&
|
||||
<Fragment>
|
||||
@ -82,7 +111,7 @@ class CommentHeader extends ImmutablePureComponent {
|
||||
underlineOnHover
|
||||
backgroundColor='none'
|
||||
color='tertiary'
|
||||
onClick={this.handleOpenStatusEdits}
|
||||
onClick={this.openRevisions}
|
||||
className={_s.ml5}
|
||||
>
|
||||
<Text size='extraSmall' color='inherit'>
|
||||
|
||||
@ -32,6 +32,7 @@ class DisplayName extends ImmutablePureComponent {
|
||||
noHover: PropTypes.bool,
|
||||
noRelationship: PropTypes.bool,
|
||||
noUsername: PropTypes.bool,
|
||||
isComment: PropTypes.bool,
|
||||
}
|
||||
|
||||
updateOnProps = [
|
||||
@ -42,6 +43,7 @@ class DisplayName extends ImmutablePureComponent {
|
||||
'noHover',
|
||||
'noRelationship',
|
||||
'noUsername',
|
||||
'isComment',
|
||||
]
|
||||
|
||||
mouseOverTimeout = null
|
||||
@ -77,7 +79,8 @@ class DisplayName extends ImmutablePureComponent {
|
||||
noHover,
|
||||
noUsername,
|
||||
noRelationship,
|
||||
isSmall
|
||||
isSmall,
|
||||
isComment,
|
||||
} = this.props
|
||||
|
||||
if (!account) return null
|
||||
@ -122,6 +125,7 @@ class DisplayName extends ImmutablePureComponent {
|
||||
|
||||
const iconSize =
|
||||
!!isLarge ? '19px' :
|
||||
!!isComment ? '12px' :
|
||||
!!isSmall ? '14px' : '15px'
|
||||
|
||||
const domain = account.get('acct').split('@')[1]
|
||||
@ -153,7 +157,7 @@ class DisplayName extends ImmutablePureComponent {
|
||||
onMouseLeave={noHover ? undefined : this.handleMouseLeave}
|
||||
ref={this.setRef}
|
||||
>
|
||||
<span className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<span className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.maxWidth180PX, _s.maxWidth100PC].join(' ')}>
|
||||
<bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
|
||||
<strong
|
||||
className={displayNameClasses}
|
||||
|
||||
@ -31,10 +31,11 @@ class FloatingActionButton extends PureComponent {
|
||||
return (
|
||||
<Button
|
||||
onClick={onOpenCompose}
|
||||
className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom50PX, _s.right0].join(' ')}
|
||||
className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom50PX, _s.height60PX, _s.width60PX, _s.right0, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
|
||||
title={message}
|
||||
aria-label={message}
|
||||
icon='pencil'
|
||||
iconSize='20px'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import ArrowRightIcon from '../assets/arrow_right_icon'
|
||||
import AudioIcon from '../assets/audio_icon'
|
||||
import AudioMuteIcon from '../assets/audio_mute_icon'
|
||||
import BackIcon from '../assets/back_icon'
|
||||
import BlockIcon from '../assets/block_icon'
|
||||
import BlockquoteIcon from '../assets/blockquote_icon'
|
||||
import BoldIcon from '../assets/bold_icon'
|
||||
import CalendarIcon from '../assets/calendar_icon'
|
||||
@ -61,6 +62,7 @@ import ShopIcon from '../assets/shop_icon'
|
||||
import StrikethroughIcon from '../assets/strikethrough_icon'
|
||||
import SubtractIcon from '../assets/subtract_icon'
|
||||
import TextSizeIcon from '../assets/text_size_icon'
|
||||
import TrashIcon from '../assets/trash_icon'
|
||||
import TrendsIcon from '../assets/trends_icon'
|
||||
import ULListIcon from '../assets/ul_list_icon'
|
||||
import UnderlineIcon from '../assets/underline_icon'
|
||||
@ -78,6 +80,7 @@ const ICONS = {
|
||||
'audio': AudioIcon,
|
||||
'audio-mute': AudioMuteIcon,
|
||||
'back': BackIcon,
|
||||
'block': BlockIcon,
|
||||
'blockquote': BlockquoteIcon,
|
||||
'bold': BoldIcon,
|
||||
'calendar': CalendarIcon,
|
||||
@ -132,6 +135,7 @@ const ICONS = {
|
||||
'strikethrough': StrikethroughIcon,
|
||||
'subtract': SubtractIcon,
|
||||
'text-size': TextSizeIcon,
|
||||
'trash': TrashIcon,
|
||||
'trends': TrendsIcon,
|
||||
'ul-list': ULListIcon,
|
||||
'underline': UnderlineIcon,
|
||||
|
||||
@ -8,11 +8,19 @@ import TimelineComposeBlock from '../timeline_compose_block'
|
||||
const messages = defineMessages({
|
||||
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
title: { id: 'navigation_bar.compose', defaultMessage: 'Compose new gab' },
|
||||
comment: { id: 'navigation_bar.compose_comment', defaultMessage: 'Compose new comment' },
|
||||
edit: { id: 'navigation_bar.edit_gab', defaultMessage: 'Edit' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
composeText: state.getIn(['compose', 'text']),
|
||||
})
|
||||
const mapStateToProps = (state) => {
|
||||
const status = state.getIn(['statuses', state.getIn(['compose', 'id'])])
|
||||
|
||||
return {
|
||||
composeText: state.getIn(['compose', 'text']),
|
||||
isEditing: !!status,
|
||||
isComment: !!state.getIn(['compose', 'in_reply_to']),
|
||||
}
|
||||
}
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps)
|
||||
@ -24,10 +32,17 @@ class ComposeModal extends ImmutablePureComponent {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
composeText: PropTypes.string,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
isEditing: PropTypes.bool,
|
||||
isComment: PropTypes.bool,
|
||||
}
|
||||
|
||||
onClickClose = () => {
|
||||
const { composeText, dispatch, onClose, intl } = this.props;
|
||||
const {
|
||||
composeText,
|
||||
dispatch,
|
||||
onClose,
|
||||
intl,
|
||||
} = this.props
|
||||
|
||||
if (composeText) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
@ -36,24 +51,30 @@ class ComposeModal extends ImmutablePureComponent {
|
||||
confirm: intl.formatMessage(messages.confirm),
|
||||
onConfirm: () => dispatch(cancelReplyCompose()),
|
||||
onCancel: () => dispatch(openModal('COMPOSE')),
|
||||
}));
|
||||
}))
|
||||
}
|
||||
else {
|
||||
onClose('COMPOSE');
|
||||
onClose('COMPOSE')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl } = this.props
|
||||
const {
|
||||
intl,
|
||||
isEditing,
|
||||
isComment,
|
||||
} = this.props
|
||||
|
||||
const title = isEditing ? messages.edit : isComment ? messages.comment : messages.title
|
||||
|
||||
return (
|
||||
<ModalLayout
|
||||
noPadding
|
||||
title={intl.formatMessage(messages.title)}
|
||||
title={intl.formatMessage(title)}
|
||||
onClose={this.onClickClose}
|
||||
>
|
||||
<TimelineComposeBlock modal />
|
||||
</ModalLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,29 +61,33 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
|
||||
>
|
||||
|
||||
<div className={[_s.default, _s.pb10].join(' ')}>
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'polls']}
|
||||
onChange={onChange}
|
||||
label={intl.formatMessage(messages.showPolls)}
|
||||
/>
|
||||
{
|
||||
/*
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'polls']}
|
||||
onChange={onChange}
|
||||
label={intl.formatMessage(messages.showPolls)}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'photos']}
|
||||
onChange={onChange}
|
||||
label={intl.formatMessage(messages.showPhotos)}
|
||||
/>
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'photos']}
|
||||
onChange={onChange}
|
||||
label={intl.formatMessage(messages.showPhotos)}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'videos']}
|
||||
onChange={onChange}
|
||||
label={intl.formatMessage(messages.showVideos)}
|
||||
/>
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
settings={settings}
|
||||
settingPath={['shows', 'videos']}
|
||||
onChange={onChange}
|
||||
label={intl.formatMessage(messages.showVideos)}
|
||||
/>
|
||||
*/
|
||||
}
|
||||
|
||||
<SettingSwitch
|
||||
prefix='home_timeline'
|
||||
|
||||
@ -23,23 +23,24 @@ class UnauthorizedModal extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl } = this.props
|
||||
const { intl, onClose } = this.props
|
||||
|
||||
return (
|
||||
<ModalLayout
|
||||
title={intl.formatMessage(messages.signup)}
|
||||
onClose={onClose}
|
||||
width={400}
|
||||
>
|
||||
<div className={[_s.default, _s.px10, _s.py10].join(' ')}>
|
||||
<Text className={_s.mb15}>
|
||||
<Text className={_s.mb15} align='center'>
|
||||
{intl.formatMessage(messages.text)}
|
||||
</Text>
|
||||
<Button href='/auth/sign_up' className={[_s.width240PX, _s.mlAuto, _s.mlAuto].join(' ')}>
|
||||
<Button isBlock href='/auth/sign_up' className={[_s.mr15, _s.ml15, _s.mlAuto, _s.mrAuto].join(' ')}>
|
||||
{intl.formatMessage(messages.register)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={[_s.default, _s.px10, _s.py10].join(' ')}>
|
||||
<Text color='secondary'>
|
||||
<div className={[_s.default, _s.px10, _s.py5].join(' ')}>
|
||||
<Text color='secondary' size='small' align='center'>
|
||||
{
|
||||
intl.formatMessage(messages.login, {
|
||||
login: (
|
||||
|
||||
@ -128,7 +128,7 @@ class NavigationBar extends ImmutablePureComponent {
|
||||
noClasses
|
||||
color='primary'
|
||||
backgroundColor='none'
|
||||
className={[_s.alignItemsCenter, _s.height53PX, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
|
||||
className={[_s.height53PX, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
|
||||
icon='arrow-left'
|
||||
iconSize='32px'
|
||||
iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||
import PillItem from './pill_item'
|
||||
|
||||
/**
|
||||
@ -14,7 +15,10 @@ export default class Pills extends PureComponent {
|
||||
const { pills } = this.props
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}>
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
|
||||
classNamesXS={[_s.default, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
|
||||
>
|
||||
{
|
||||
!!pills &&
|
||||
pills.map((tab, i) => (
|
||||
@ -27,7 +31,7 @@ export default class Pills extends PureComponent {
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</ResponsiveClassesComponent>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -145,7 +145,7 @@ class PopoverBase extends ImmutablePureComponent {
|
||||
referenceElement={targetRef}
|
||||
>
|
||||
{({ ref, style, placement, arrowProps }) => (
|
||||
<div ref={ref} style={style} data-placement={placement} className={[_s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
|
||||
<div ref={ref} style={style} data-placement={placement} className={[_s.z4, _s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
|
||||
<div ref={arrowProps.ref} style={arrowProps.style} />
|
||||
<div ref={this.setRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
|
||||
{children}
|
||||
|
||||
@ -1,7 +1,28 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { me, isStaff } from '../../initial_state'
|
||||
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'
|
||||
import { me, isStaff, boostModal, deleteModal } from '../../initial_state'
|
||||
import {
|
||||
repost,
|
||||
unrepost,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../../actions/interactions';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
editStatus,
|
||||
} from '../../actions/statuses';
|
||||
import {
|
||||
fetchGroupRelationships,
|
||||
createRemovedAccount,
|
||||
groupRemoveStatus,
|
||||
} from '../../actions/groups'
|
||||
import { initMuteModal } from '../../actions/mutes'
|
||||
import { initReport } from '../../actions/reports'
|
||||
import { openModal } from '../../actions/modal'
|
||||
import { closePopover } from '../../actions/popover'
|
||||
import PopoverLayout from './popover_layout'
|
||||
import List from '../list'
|
||||
|
||||
@ -16,7 +37,7 @@ const messages = defineMessages({
|
||||
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
|
||||
repost: { id: 'repost', defaultMessage: 'Repost' },
|
||||
quote: { id: 'status.quote', defaultMessage: 'Quote' },
|
||||
repost_private: { id: 'status.repost_private', defaultMessage: 'Repost to original audience' },
|
||||
repost_private: { id: 'status.repost', defaultMessage: 'Repost' },
|
||||
cancel_repost_private: { id: 'status.cancel_repost_private', defaultMessage: 'Remove Repost' },
|
||||
cannot_repost: { id: 'status.cannot_repost', defaultMessage: 'This post cannot be reposted' },
|
||||
cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
|
||||
@ -30,14 +51,128 @@ const messages = defineMessages({
|
||||
admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
|
||||
group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
|
||||
group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove status from group' },
|
||||
repostWithComment: { id: 'repost_with_comment', defaultMessage: 'Repost with comment' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
const mapStateToProps = (state, { status }) => {
|
||||
if (!me) return null
|
||||
|
||||
})
|
||||
const groupId = status ? status.getIn(['group', 'id']) : undefined
|
||||
const groupRelationships = state.getIn(['group_relationships', groupId])
|
||||
|
||||
return {
|
||||
groupId,
|
||||
groupRelationships,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
onMuteConversation(status) {
|
||||
dispatch(closePopover())
|
||||
|
||||
if (status.get('muted')) {
|
||||
dispatch(unmuteStatus(status.get('id')))
|
||||
} else {
|
||||
dispatch(muteStatus(status.get('id')))
|
||||
}
|
||||
},
|
||||
|
||||
onPin(status) {
|
||||
dispatch(closePopover())
|
||||
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status))
|
||||
} else {
|
||||
dispatch(pin(status))
|
||||
}
|
||||
},
|
||||
|
||||
onQuote(status, router) {
|
||||
dispatch(closePopover())
|
||||
|
||||
dispatch((_, getState) => {
|
||||
const state = getState()
|
||||
if (state.getIn(['compose', 'text']).trim().length !== 0) {
|
||||
dispatch(openModal(MODAL_CONFIRM, {
|
||||
message: intl.formatMessage(messages.quoteMessage),
|
||||
confirm: intl.formatMessage(messages.quoteConfirm),
|
||||
onConfirm: () => dispatch(quoteCompose(status, router)),
|
||||
}))
|
||||
} else {
|
||||
dispatch(quoteCompose(status, router))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onRepost(status) {
|
||||
dispatch(closePopover())
|
||||
const alreadyReposted = status.get('reblogged')
|
||||
|
||||
if (boostModal && !alreadyReposted) {
|
||||
dispatch(openModal(MODAL_BOOST, {
|
||||
status,
|
||||
onRepost: () => dispatch(repost(status)),
|
||||
}))
|
||||
} else {
|
||||
if (alreadyReposted) {
|
||||
dispatch(unrepost(status))
|
||||
} else {
|
||||
dispatch(repost(status))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onDelete(status, history) {
|
||||
dispatch(closePopover())
|
||||
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id'), history))
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
|
||||
confirm: <FormattedMessage id='confirmations.delete.confirm' defaultMessage='Delete' />,
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'), history)),
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
onEdit(status) {
|
||||
dispatch(closePopover())
|
||||
dispatch(editStatus(status))
|
||||
},
|
||||
|
||||
onMute(account) {
|
||||
dispatch(closePopover())
|
||||
dispatch(initMuteModal(account))
|
||||
},
|
||||
|
||||
onBlock(status) {
|
||||
dispatch(closePopover())
|
||||
const account = status.get('account')
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
}))
|
||||
},
|
||||
|
||||
onReport(status) {
|
||||
dispatch(closePopover())
|
||||
dispatch(initReport(status.get('account'), status))
|
||||
},
|
||||
|
||||
onGroupRemoveAccount(groupId, accountId) {
|
||||
dispatch(closePopover())
|
||||
dispatch(createRemovedAccount(groupId, accountId))
|
||||
},
|
||||
|
||||
onGroupRemoveStatus(groupId, statusId) {
|
||||
dispatch(closePopover())
|
||||
dispatch(groupRemoveStatus(groupId, statusId))
|
||||
},
|
||||
|
||||
onFetchGroupRelationships(groupId) {
|
||||
dispatch(fetchGroupRelationships([groupId]))
|
||||
}
|
||||
})
|
||||
|
||||
export default
|
||||
@ -47,184 +182,187 @@ class StatusOptionsPopover extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
onOpenUnauthorizedModal: PropTypes.func.isRequired,
|
||||
onOpenStatusSharePopover: PropTypes.func.isRequired,
|
||||
onReply: PropTypes.func,
|
||||
onQuote: PropTypes.func,
|
||||
onFavorite: PropTypes.func,
|
||||
onRepost: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onMention: PropTypes.func,
|
||||
onMute: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onReport: PropTypes.func,
|
||||
onMuteConversation: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
groupRelationships: ImmutablePropTypes.map,
|
||||
groupId: PropTypes.string,
|
||||
onQuote: PropTypes.func.isRequired,
|
||||
onRepost: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
onMute: PropTypes.func.isRequired,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
onReport: PropTypes.func.isRequired,
|
||||
onMuteConversation: PropTypes.func.isRequired,
|
||||
onPin: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onFetchGroupRelationships: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'account',
|
||||
'groupRelationships',
|
||||
]
|
||||
|
||||
handleConversationMuteClick = () => {
|
||||
this.props.onMuteConversation(this.props.status);
|
||||
componentDidMount() {
|
||||
if (!this.props.groupRelationships && this.props.groupId) {
|
||||
this.props.onFetchGroupRelationships(this.props.groupId)
|
||||
}
|
||||
}
|
||||
|
||||
handleGroupRemoveAccount = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
|
||||
handleConversationMuteClick = () => {
|
||||
this.props.onMuteConversation(this.props.status)
|
||||
}
|
||||
|
||||
handleGroupRemoveAccount = () => {
|
||||
const { status } = this.props
|
||||
|
||||
this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']))
|
||||
}
|
||||
|
||||
handleGroupRemovePost = () => {
|
||||
const { status } = this.props;
|
||||
const { status } = this.props
|
||||
|
||||
this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
|
||||
this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'))
|
||||
}
|
||||
|
||||
handleReport = () => {
|
||||
this.props.onReport(this.props.status);
|
||||
this.props.onReport(this.props.status)
|
||||
}
|
||||
|
||||
handleBlockClick = () => {
|
||||
this.props.onBlock(this.props.status);
|
||||
this.props.onBlock(this.props.status)
|
||||
}
|
||||
|
||||
handleMuteClick = () => {
|
||||
this.props.onMute(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleMentionClick = () => {
|
||||
this.props.onMention(this.props.status.get('account'), this.context.router.history);
|
||||
this.props.onMute(this.props.status.get('account'))
|
||||
}
|
||||
|
||||
handlePinClick = () => {
|
||||
this.props.onPin(this.props.status);
|
||||
this.props.onPin(this.props.status)
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
this.props.onDelete(this.props.status, this.context.router.history);
|
||||
this.props.onDelete(this.props.status)
|
||||
}
|
||||
|
||||
handleEditClick = () => {
|
||||
this.props.onEdit(this.props.status);
|
||||
this.props.onEdit(this.props.status)
|
||||
}
|
||||
|
||||
handleRepostClick = (e) => {
|
||||
if (me) {
|
||||
// this.props.onRepost(this.props.status, e)
|
||||
this.props.onQuote(this.props.status, this.context.router.history)
|
||||
} else {
|
||||
this.props.onOpenUnauthorizedModal()
|
||||
}
|
||||
this.props.onRepost(this.props.status, e)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
status,
|
||||
intl,
|
||||
account,
|
||||
groupRelationships,
|
||||
} = this.props
|
||||
|
||||
const mutingConversation = status.get('muted')
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))
|
||||
const isReply = !!status.get('in_reply_to_id')
|
||||
const withGroupAdmin = !!groupRelationships ? groupRelationships.get('admin') : false
|
||||
console.log("withGroupAdmin:", withGroupAdmin, groupRelationships ? groupRelationships.get('admin') : '')
|
||||
|
||||
let menu = [];
|
||||
let menu = []
|
||||
|
||||
if (me) {
|
||||
// if (status.getIn(['account', 'id']) === me) {
|
||||
if (status.getIn(['account', 'id']) === me) {
|
||||
menu.push({
|
||||
icon: 'audio-mute',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
|
||||
onClick: this.handleConversationMuteClick,
|
||||
})
|
||||
// }
|
||||
}
|
||||
|
||||
// if (status.getIn(['account', 'id']) === me) {
|
||||
// if (publicStatus) {
|
||||
if (isReply) {
|
||||
menu.push({
|
||||
icon: 'repost',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
|
||||
onClick: this.handleRepostClick,
|
||||
})
|
||||
menu.push({
|
||||
icon: 'pencil',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.repostWithComment),
|
||||
onClick: this.handleRepostClick,
|
||||
})
|
||||
}
|
||||
|
||||
if (status.getIn(['account', 'id']) === me) {
|
||||
if (publicStatus) {
|
||||
menu.push({
|
||||
icon: 'pin',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
|
||||
onClick: this.handlePinClick,
|
||||
})
|
||||
// } else {
|
||||
// if (status.get('visibility') === 'private') {
|
||||
menu.push({
|
||||
icon: 'repost',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
|
||||
onClick: this.handleRepostClick
|
||||
})
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
menu.push({
|
||||
icon: 'trash',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.delete),
|
||||
action: this.handleDeleteClick
|
||||
});
|
||||
onClick: this.handleDeleteClick,
|
||||
})
|
||||
menu.push({
|
||||
icon: 'pencil',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.edit), action:
|
||||
this.handleEditClick
|
||||
});
|
||||
// } else {
|
||||
title: intl.formatMessage(messages.edit),
|
||||
onClick: this.handleEditClick,
|
||||
})
|
||||
} else {
|
||||
menu.push({
|
||||
icon: 'audio-mute',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleMuteClick
|
||||
});
|
||||
onClick: this.handleMuteClick,
|
||||
})
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
icon: 'block',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleBlockClick
|
||||
});
|
||||
onClick: this.handleBlockClick,
|
||||
})
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
icon: 'warning',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleReport
|
||||
});
|
||||
onClick: this.handleReport,
|
||||
})
|
||||
|
||||
// : todo :
|
||||
// if (withGroupAdmin) {
|
||||
if (withGroupAdmin) {
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
icon: 'trash',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.group_remove_account),
|
||||
action: this.handleGroupRemoveAccount
|
||||
});
|
||||
onClick: this.handleGroupRemoveAccount,
|
||||
})
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
icon: 'trash',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.group_remove_post),
|
||||
action: this.handleGroupRemovePost
|
||||
});
|
||||
// }
|
||||
onClick: this.handleGroupRemovePost,
|
||||
})
|
||||
}
|
||||
|
||||
// if (isStaff) {
|
||||
if (isStaff) {
|
||||
menu.push({
|
||||
title: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
|
||||
href: `/admin/accounts/${status.getIn(['account', 'id'])}`
|
||||
});
|
||||
})
|
||||
menu.push({
|
||||
title: intl.formatMessage(messages.admin_status),
|
||||
href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}`
|
||||
});
|
||||
// }
|
||||
// }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PopoverLayout className={_s.width240PX}>
|
||||
<PopoverLayout>
|
||||
<List
|
||||
size='large'
|
||||
scrollKey='profile_options'
|
||||
|
||||
@ -95,6 +95,7 @@ class Status extends ImmutablePureComponent {
|
||||
commentsLimited: PropTypes.bool,
|
||||
onOpenLikes: PropTypes.func.isRequired,
|
||||
onOpenReposts: PropTypes.func.isRequired,
|
||||
isComposeModalOpen: PropTypes.bool,
|
||||
}
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
@ -136,14 +137,12 @@ class Status extends ImmutablePureComponent {
|
||||
if (nextProps.isChild) return null
|
||||
|
||||
if (!nextProps.isHidden && (nextProps.isIntersecting || !nextProps.commentsLimited) && !prevState.loadedComments) {
|
||||
console.log("111111111111111111111111111111111111", nextProps.isHidden, nextProps.isIntersecting)
|
||||
return {
|
||||
loadedComments: true
|
||||
}
|
||||
}
|
||||
|
||||
if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
|
||||
console.log("2222222222222222222222222222222222222")
|
||||
return {
|
||||
loadedComments: false, //reset
|
||||
showMedia: defaultMediaVisibility(nextProps.status),
|
||||
@ -369,6 +368,7 @@ class Status extends ImmutablePureComponent {
|
||||
ancestorStatus,
|
||||
isComment,
|
||||
contextType,
|
||||
isComposeModalOpen,
|
||||
} = this.props
|
||||
// const { height } = this.state
|
||||
|
||||
@ -423,10 +423,12 @@ class Status extends ImmutablePureComponent {
|
||||
})
|
||||
|
||||
const containerClassesXS = cx({
|
||||
default: 1,
|
||||
bgPrimary: !isChild,
|
||||
boxShadowBlock: !isChild && !compactMode,
|
||||
borderTop1PX: !isChild,
|
||||
borderBottom1PX: !isChild && compactMode,
|
||||
borderColorSecondary: !isChild && compactMode,
|
||||
borderColorSecondary: !isChild,
|
||||
})
|
||||
|
||||
const innerContainerClasses = cx({
|
||||
@ -482,7 +484,10 @@ class Status extends ImmutablePureComponent {
|
||||
isComment={isComment && !isChild}
|
||||
/>
|
||||
|
||||
<StatusHeader status={status} reduced={isChild} />
|
||||
<StatusHeader
|
||||
status={status}
|
||||
reduced={isChild}
|
||||
/>
|
||||
|
||||
<div className={_s.default}>
|
||||
<StatusContent
|
||||
@ -497,6 +502,7 @@ class Status extends ImmutablePureComponent {
|
||||
|
||||
<StatusMedia
|
||||
isChild={isChild}
|
||||
isComposeModalOpen={isComposeModalOpen}
|
||||
status={status}
|
||||
onOpenMedia={this.props.onOpenMedia}
|
||||
cacheWidth={this.props.cacheMediaWidth}
|
||||
|
||||
@ -54,13 +54,14 @@ const addAutoPlay = html => {
|
||||
return html
|
||||
}
|
||||
|
||||
export default class Card extends ImmutablePureComponent {
|
||||
export default class StatusCard extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
card: ImmutablePropTypes.map,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
defaultWidth: PropTypes.number,
|
||||
cacheWidth: PropTypes.func,
|
||||
isReduced: PropTypes.bool,
|
||||
}
|
||||
|
||||
state = {
|
||||
@ -129,7 +130,7 @@ export default class Card extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { card } = this.props
|
||||
const { card, isReduced } = this.props
|
||||
const { width, embedded } = this.state
|
||||
|
||||
if (card === null) return null
|
||||
@ -199,22 +200,25 @@ export default class Card extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
|
||||
<div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
|
||||
{!!embed && embed}
|
||||
{!embed && thumbnail}
|
||||
{!embed &&
|
||||
<div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<button
|
||||
className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
|
||||
onClick={this.handleEmbedClick}
|
||||
>
|
||||
<Icon id={iconVariant} size='22px' className={[_s.fillWhite].join(' ')} />
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!isReduced &&
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
|
||||
{!!embed && embed}
|
||||
{!embed && thumbnail}
|
||||
{!embed &&
|
||||
<div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<button
|
||||
className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
|
||||
onClick={this.handleEmbedClick}
|
||||
>
|
||||
<Icon id={iconVariant} size='22px' className={[_s.fillWhite].join(' ')} />
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
@ -245,7 +249,7 @@ export default class Card extends ImmutablePureComponent {
|
||||
classNames={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
|
||||
classNamesSmall={!cardImg ? undefined : [_s.default, _s.width100PC].join(' ')}
|
||||
>
|
||||
{embed}
|
||||
{!isReduced && embed}
|
||||
{description}
|
||||
</ResponsiveClassesComponent>
|
||||
</a>
|
||||
|
||||
@ -230,6 +230,7 @@ class StatusContent extends ImmutablePureComponent {
|
||||
statusContent: 1,
|
||||
px15: !isComment,
|
||||
outlineNone: 1,
|
||||
mt5: isComment,
|
||||
})
|
||||
|
||||
return (
|
||||
@ -290,8 +291,10 @@ class StatusContent extends ImmutablePureComponent {
|
||||
|
||||
const statusContentClasses = cx({
|
||||
statusContent: 1,
|
||||
height215PX: collapsed,
|
||||
height215PX: collapsed & !isComment,
|
||||
height122PX: collapsed && isComment,
|
||||
overflowHidden: collapsed,
|
||||
mt5: isComment,
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
@ -25,6 +25,8 @@ const makeGetStatusIds = () => createSelector([
|
||||
const statusForId = statuses.get(id);
|
||||
let showStatus = true;
|
||||
|
||||
console.log("columnSettings:", columnSettings)
|
||||
|
||||
if (columnSettings.getIn(['shows', 'reblog']) === false) {
|
||||
showStatus = showStatus && statusForId.get('reblog') === null;
|
||||
}
|
||||
@ -91,7 +93,6 @@ class StatusList extends ImmutablePureComponent {
|
||||
queuedItemSize: PropTypes.number,
|
||||
onDequeueTimeline: PropTypes.func,
|
||||
group: ImmutablePropTypes.map,
|
||||
withGroupAdmin: PropTypes.bool,
|
||||
onScrollToTop: PropTypes.func,
|
||||
onScroll: PropTypes.func,
|
||||
promotion: PropTypes.object, // : todo :
|
||||
@ -164,7 +165,19 @@ class StatusList extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { statusIds, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, promotion, promotedStatus, ...other } = this.props;
|
||||
const {
|
||||
statusIds,
|
||||
featuredStatusIds,
|
||||
onLoadMore,
|
||||
timelineId,
|
||||
totalQueuedItemsCount,
|
||||
isLoading,
|
||||
isPartial,
|
||||
group,
|
||||
promotion,
|
||||
promotedStatus,
|
||||
...other
|
||||
} = this.props
|
||||
|
||||
if (isPartial) {
|
||||
return <ColumnIndicator type='loading' />
|
||||
@ -185,9 +198,6 @@ class StatusList extends ImmutablePureComponent {
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
// : todo :
|
||||
// group={group}
|
||||
// withGroupAdmin={withGroupAdmin}
|
||||
commentsLimited
|
||||
/>
|
||||
))
|
||||
|
||||
@ -22,6 +22,7 @@ export default class StatusMedia extends ImmutablePureComponent {
|
||||
visible: PropTypes.bool,
|
||||
defaultWidth: PropTypes.number,
|
||||
cacheWidth: PropTypes.number,
|
||||
isComposeModalOpen: PropTypes.bool,
|
||||
}
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
@ -34,6 +35,7 @@ export default class StatusMedia extends ImmutablePureComponent {
|
||||
'defaultWidth',
|
||||
'visible',
|
||||
'width',
|
||||
'isComposeModalOpen',
|
||||
]
|
||||
|
||||
renderLoadingMedia() {
|
||||
@ -52,6 +54,7 @@ export default class StatusMedia extends ImmutablePureComponent {
|
||||
visible,
|
||||
defaultWidth,
|
||||
cacheWidth,
|
||||
isComposeModalOpen,
|
||||
} = this.props
|
||||
|
||||
if (!status) return null
|
||||
@ -113,6 +116,7 @@ export default class StatusMedia extends ImmutablePureComponent {
|
||||
cacheWidth={cacheWidth}
|
||||
defaultWidth={defaultWidth}
|
||||
isComment={isComment}
|
||||
isReduced={isComposeModalOpen}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ class TimelineComposeBlock extends ImmutablePureComponent {
|
||||
} = this.props
|
||||
|
||||
if (modal) {
|
||||
console.log("modal timeline composer: ", this.props)
|
||||
return (
|
||||
<section className={_s.default}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
|
||||
@ -9,29 +9,17 @@ import {
|
||||
favorite,
|
||||
unrepost,
|
||||
unfavorite,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../actions/interactions';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
editStatus,
|
||||
hideStatus,
|
||||
revealStatus,
|
||||
fetchComments,
|
||||
fetchContext,
|
||||
} from '../actions/statuses';
|
||||
import { initMuteModal } from '../actions/mutes';
|
||||
import { initReport } from '../actions/reports';
|
||||
import { openModal } from '../actions/modal';
|
||||
import { openPopover } from '../actions/popover';
|
||||
import { me, deleteModal } from '../initial_state';
|
||||
import {
|
||||
createRemovedAccount,
|
||||
groupRemoveStatus,
|
||||
} from '../actions/groups';
|
||||
import { makeGetStatus } from '../selectors';
|
||||
import { me } from '../initial_state';
|
||||
import { makeGetStatus } from '../selectors'
|
||||
import Status from '../components/status';
|
||||
|
||||
const getDescendants = (state, status, highlightStatusId) => {
|
||||
@ -123,6 +111,7 @@ const makeMapStateToProps = () => {
|
||||
ancestorStatus,
|
||||
descendantsIds,
|
||||
isComment,
|
||||
isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,36 +184,6 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
}
|
||||
},
|
||||
|
||||
onPin (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status));
|
||||
} else {
|
||||
dispatch(pin(status));
|
||||
}
|
||||
},
|
||||
|
||||
onDelete (status, history) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id'), history));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
|
||||
confirm: <FormattedMessage id='confirmations.delete.confirm' defaultMessage='Delete' />,
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'), history)),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
onEdit (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(editStatus(status));
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
@ -239,35 +198,6 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
},
|
||||
|
||||
onBlock (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
const account = status.get('account')
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
}))
|
||||
},
|
||||
|
||||
onReport (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(initReport(status.get('account'), status));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(initMuteModal(account));
|
||||
},
|
||||
|
||||
onMuteConversation (status) {
|
||||
if (status.get('muted')) {
|
||||
dispatch(unmuteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(muteStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
|
||||
onToggleHidden (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
@ -278,18 +208,6 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
}
|
||||
},
|
||||
|
||||
onGroupRemoveAccount(groupId, accountId) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(createRemovedAccount(groupId, accountId));
|
||||
},
|
||||
|
||||
onGroupRemoveStatus(groupId, statusId) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(groupRemoveStatus(groupId, statusId));
|
||||
},
|
||||
|
||||
onFetchComments(statusId) {
|
||||
dispatch(fetchComments(statusId))
|
||||
},
|
||||
|
||||
@ -14,27 +14,25 @@ import Avatar from '../../../components/avatar'
|
||||
import Button from '../../../components/button'
|
||||
import CharacterCounter from '../../../components/character_counter'
|
||||
import EmojiPickerButton from './emoji_picker_button'
|
||||
import GifSelectorButton from './gif_selector_button'
|
||||
import PollButton from './poll_button'
|
||||
import PollForm from './poll_form'
|
||||
import RichTextEditorButton from './rich_text_editor_button'
|
||||
import SchedulePostButton from './schedule_post_button'
|
||||
import SpoilerButton from './spoiler_button'
|
||||
import StatusContainer from '../../../containers/status_container'
|
||||
import StatusVisibilityButton from './status_visibility_button'
|
||||
import UploadButton from './media_upload_button'
|
||||
import UploadForm from './upload_form'
|
||||
import GifForm from './gif_form'
|
||||
import Input from '../../../components/input'
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
|
||||
commentPlaceholder: { id: 'compose_form.comment_placeholder', defaultMessage: "Write a comment..." },
|
||||
spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
|
||||
publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
|
||||
publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
|
||||
publishEdit: { id: 'compose_form.publish_edit', defaultMessage: 'Publish Edit' },
|
||||
publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}' },
|
||||
schedulePost: { id: 'compose_form.schedule_post', defaultMessage: 'Schedule Post' },
|
||||
});
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@ -194,7 +192,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
// this.autosuggestTextarea.textbox.setSelectionRange(selectionStart, selectionEnd);
|
||||
// this.autosuggestTextarea.textbox.focus();
|
||||
// this.autosuggestTextarea.textbox.focus();
|
||||
}
|
||||
}
|
||||
|
||||
@ -241,7 +239,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
const text = [this.props.spoilerText, countableText(this.props.text)].join('');
|
||||
const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text) !== 0 && length(text.trim()) === 0 && !anyMedia);
|
||||
const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
|
||||
|
||||
|
||||
const parentContainerClasses = CX({
|
||||
default: 1,
|
||||
width100PC: 1,
|
||||
@ -278,160 +276,212 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={parentContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
|
||||
{
|
||||
shouldCondense &&
|
||||
<div className={[_s.default, _s.mr10, _s.mt5].join(' ')}>
|
||||
<Avatar account={account} size={28} noHover />
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
{
|
||||
shouldCondense &&
|
||||
<div className={parentContainerClasses}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.mr10, _s.mt5].join(' ')}>
|
||||
<Avatar account={account} size={28} noHover />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={childContainerClasses}
|
||||
ref={this.setForm}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
|
||||
<AutosuggestTextbox
|
||||
ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage(messages.commentPlaceholder)}
|
||||
disabled={disabled}
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange}
|
||||
suggestions={this.props.suggestions}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onFocus={this.handleComposeFocus}
|
||||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
||||
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
||||
onSuggestionSelected={this.onSuggestionSelected}
|
||||
onPaste={onPaste}
|
||||
autoFocus={shouldAutoFocus}
|
||||
small={shouldCondense}
|
||||
textarea
|
||||
/>
|
||||
|
||||
<div className={actionsContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
|
||||
|
||||
<EmojiPickerButton small={shouldCondense} isMatch={isMatch} />
|
||||
|
||||
<UploadButton small={shouldCondense} />
|
||||
|
||||
<div className={commentPublishBtnClasses}>
|
||||
<Button
|
||||
isNarrow
|
||||
onClick={this.handleSubmit}
|
||||
isDisabled={disabledButton}
|
||||
className={_s.px10}
|
||||
>
|
||||
{intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
(isUploading || anyMedia) &&
|
||||
<div className={[_s.default, _s.width100PC, _s.pl35, _s.mt5].join(' ')}>
|
||||
<UploadForm
|
||||
replyToId={replyToId}
|
||||
isModalOpen={isModalOpen}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div
|
||||
className={childContainerClasses}
|
||||
ref={this.setForm}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
|
||||
{
|
||||
!!reduxReplyToId && isModalOpen && !shouldCondense &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
contextType='compose'
|
||||
id={reduxReplyToId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!!spoiler &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<Input
|
||||
placeholder={intl.formatMessage(messages.spoiler_placeholder)}
|
||||
value={this.props.spoilerText}
|
||||
onChange={this.handleChangeSpoilerText}
|
||||
disabled={!this.props.spoiler}
|
||||
prependIcon='warning'
|
||||
maxLength={256}
|
||||
id='cw-spoiler-input'
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<AutosuggestTextbox
|
||||
ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) ? messages.commentPlaceholder : messages.placeholder)}
|
||||
disabled={disabled}
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange}
|
||||
suggestions={this.props.suggestions}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onFocus={this.handleComposeFocus}
|
||||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
||||
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
||||
onSuggestionSelected={this.onSuggestionSelected}
|
||||
onPaste={onPaste}
|
||||
autoFocus={shouldAutoFocus}
|
||||
small={shouldCondense}
|
||||
textarea
|
||||
/>
|
||||
|
||||
{
|
||||
(isUploading || anyMedia) &&
|
||||
<div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
|
||||
<UploadForm replyToId={replyToId} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
/* : todo :
|
||||
!!selectedGifSrc && !anyMedia &&
|
||||
<div className={[_s.default, _s.px15].join(' ')}>
|
||||
<GifForm
|
||||
replyToId={replyToId}
|
||||
small={shouldCondense}
|
||||
selectedGifSrc={selectedGifSrc}
|
||||
/>
|
||||
</div>
|
||||
*/
|
||||
}
|
||||
|
||||
{
|
||||
!edit && hasPoll &&
|
||||
<div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
|
||||
<PollForm replyToId={replyToId} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!!quoteOfId && isModalOpen &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
contextType='compose'
|
||||
id={quoteOfId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={actionsContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
|
||||
|
||||
<EmojiPickerButton small={shouldCondense} isMatch={isMatch} />
|
||||
|
||||
<UploadButton small={shouldCondense} />
|
||||
{ /* <GifSelectorButton small={shouldCondense} /> */ }
|
||||
|
||||
{
|
||||
!edit && !shouldCondense &&
|
||||
<PollButton />
|
||||
}
|
||||
|
||||
{ !shouldCondense && <StatusVisibilityButton /> }
|
||||
{ !shouldCondense && <SpoilerButton /> }
|
||||
{ !shouldCondense && <SchedulePostButton /> }
|
||||
{ /* !shouldCondense && <RichTextEditorButton /> */ }
|
||||
{
|
||||
!shouldCondense &&
|
||||
<div className={parentContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
|
||||
<div
|
||||
className={childContainerClasses}
|
||||
ref={this.setForm}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
|
||||
{
|
||||
shouldCondense &&
|
||||
<div className={commentPublishBtnClasses}>
|
||||
<Button
|
||||
isNarrow
|
||||
onClick={this.handleSubmit}
|
||||
isDisabled={disabledButton}
|
||||
className={_s.px10}
|
||||
>
|
||||
{intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
|
||||
</Button>
|
||||
!!reduxReplyToId && isModalOpen &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
contextType='compose'
|
||||
id={reduxReplyToId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!!spoiler &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<Input
|
||||
placeholder={intl.formatMessage(messages.spoiler_placeholder)}
|
||||
value={this.props.spoilerText}
|
||||
onChange={this.handleChangeSpoilerText}
|
||||
disabled={!this.props.spoiler}
|
||||
prependIcon='warning'
|
||||
maxLength={256}
|
||||
id='cw-spoiler-input'
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<AutosuggestTextbox
|
||||
ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) && isMatch ? messages.commentPlaceholder : messages.placeholder)}
|
||||
disabled={disabled}
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange}
|
||||
suggestions={this.props.suggestions}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onFocus={this.handleComposeFocus}
|
||||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
||||
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
||||
onSuggestionSelected={this.onSuggestionSelected}
|
||||
onPaste={onPaste}
|
||||
autoFocus={shouldAutoFocus}
|
||||
small={shouldCondense}
|
||||
textarea
|
||||
/>
|
||||
|
||||
{
|
||||
(isUploading || anyMedia) &&
|
||||
<div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
|
||||
<UploadForm
|
||||
replyToId={replyToId}
|
||||
isModalOpen={isModalOpen}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
/* : todo :
|
||||
!!selectedGifSrc && !anyMedia &&
|
||||
<div className={[_s.default, _s.px15].join(' ')}>
|
||||
<GifForm
|
||||
replyToId={replyToId}
|
||||
small={shouldCondense}
|
||||
selectedGifSrc={selectedGifSrc}
|
||||
/>
|
||||
</div>
|
||||
*/
|
||||
}
|
||||
|
||||
{
|
||||
!edit && hasPoll &&
|
||||
<div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
|
||||
<PollForm replyToId={replyToId} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!!quoteOfId && isModalOpen &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
contextType='compose'
|
||||
id={quoteOfId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={actionsContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
|
||||
|
||||
<EmojiPickerButton small={shouldCondense} isMatch={isMatch} />
|
||||
|
||||
<UploadButton small={shouldCondense} />
|
||||
{ /* <GifSelectorButton small={shouldCondense} /> */}
|
||||
|
||||
{
|
||||
!edit &&
|
||||
<PollButton />
|
||||
}
|
||||
|
||||
<StatusVisibilityButton />
|
||||
<SpoilerButton />
|
||||
<SchedulePostButton />
|
||||
{ /* !shouldCondense && <RichTextEditorButton /> */}
|
||||
</div>
|
||||
|
||||
<CharacterCounter max={MAX_POST_CHARACTER_COUNT} text={text} />
|
||||
|
||||
<Button
|
||||
isOutline
|
||||
isDisabled={disabledButton}
|
||||
backgroundColor='none'
|
||||
color='brand'
|
||||
className={[_s.fs15PX, _s.px15].join(' ')}
|
||||
onClick={this.handleSubmit}
|
||||
>
|
||||
{intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.publishEdit : messages.publish)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
!shouldCondense &&
|
||||
<CharacterCounter max={MAX_POST_CHARACTER_COUNT} text={text} />
|
||||
}
|
||||
|
||||
{
|
||||
!shouldCondense &&
|
||||
<Button
|
||||
isOutline
|
||||
isDisabled={disabledButton}
|
||||
backgroundColor='none'
|
||||
color='brand'
|
||||
className={[_s.fs15PX, _s.px15].join(' ')}
|
||||
onClick={this.handleSubmit}
|
||||
>
|
||||
{intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -15,8 +15,9 @@ export default
|
||||
class UploadForm extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
mediaIds: ImmutablePropTypes.list.isRequired,
|
||||
isModalOpen: PropTypes.bool,
|
||||
isUploading: PropTypes.bool,
|
||||
mediaIds: ImmutablePropTypes.list.isRequired,
|
||||
uploadProgress: PropTypes.number,
|
||||
};
|
||||
|
||||
|
||||
@ -15,12 +15,24 @@ import { me } from '../../../initial_state'
|
||||
const mapStateToProps = (state, { replyToId }) => {
|
||||
|
||||
const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
|
||||
let isMatch = !!reduxReplyToId
|
||||
if (!isMatch) isMatch = replyToId ? reduxReplyToId === replyToId : true
|
||||
const isModalOpen = state.getIn(['modal', 'modalType']) === 'COMPOSE'
|
||||
let isMatch;
|
||||
|
||||
if (!!reduxReplyToId && !!replyToId && replyToId === reduxReplyToId) {
|
||||
isMatch = true
|
||||
} else if (!reduxReplyToId && !replyToId) {
|
||||
isMatch = true
|
||||
} else {
|
||||
isMatch = false
|
||||
}
|
||||
|
||||
if (isModalOpen) isMatch = true
|
||||
|
||||
if (!isMatch) {
|
||||
return {
|
||||
isMatch,
|
||||
isModalOpen,
|
||||
reduxReplyToId,
|
||||
edit: null,
|
||||
text: '',
|
||||
suggestions: ImmutableList(),
|
||||
@ -35,20 +47,22 @@ const mapStateToProps = (state, { replyToId }) => {
|
||||
isUploading: false,
|
||||
showSearch: false,
|
||||
anyMedia: false,
|
||||
isModalOpen: false,
|
||||
quoteOfId: null,
|
||||
scheduledAt: null,
|
||||
account: state.getIn(['accounts', me]),
|
||||
hasPoll: false,
|
||||
selectedGifSrc: null,
|
||||
reduxReplyToId
|
||||
}
|
||||
}
|
||||
|
||||
// console.log("isMatch:", isMatch, reduxReplyToId, replyToId, state.getIn(['compose', 'text']))
|
||||
|
||||
// console.log("reduxReplyToId:", reduxReplyToId, isModalOpen)
|
||||
|
||||
return {
|
||||
isMatch,
|
||||
isModalOpen,
|
||||
reduxReplyToId,
|
||||
edit: state.getIn(['compose', 'id']) !== null,
|
||||
text: state.getIn(['compose', 'text']),
|
||||
suggestions: state.getIn(['compose', 'suggestions']),
|
||||
@ -63,21 +77,17 @@ const mapStateToProps = (state, { replyToId }) => {
|
||||
isUploading: state.getIn(['compose', 'is_uploading']),
|
||||
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
||||
anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
|
||||
isModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
|
||||
quoteOfId: state.getIn(['compose', 'quote_of_id']),
|
||||
scheduledAt: state.getIn(['compose', 'scheduled_at']),
|
||||
account: state.getIn(['accounts', me]),
|
||||
hasPoll: state.getIn(['compose', 'poll']),
|
||||
selectedGifSrc: state.getIn(['tenor', 'selectedGif', 'src']),
|
||||
reduxReplyToId,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch, { reduxReplyToId, replyToId }) => ({
|
||||
|
||||
onChange(text, markdown, newReplyToId) {
|
||||
// : todo :
|
||||
console.log("text:", text, newReplyToId, replyToId, reduxReplyToId)
|
||||
dispatch(changeCompose(text, markdown, newReplyToId))
|
||||
},
|
||||
|
||||
|
||||
@ -91,7 +91,6 @@ class GroupTimeline extends ImmutablePureComponent {
|
||||
timelineId={`group:${id}`}
|
||||
onLoadMore={this.handleLoadMore}
|
||||
group={group}
|
||||
withGroupAdmin={relationships && relationships.get('admin')}
|
||||
emptyMessage={intl.formatMessage(messages.empty)}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -78,7 +78,7 @@ export default class Layout extends PureComponent {
|
||||
{
|
||||
!!tabs &&
|
||||
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
|
||||
<div className={[_s.default, _s.mt10, _s.pb15].join(' ')}>
|
||||
<div className={[_s.default, _s.pb15].join(' ')}>
|
||||
<Pills pills={tabs} />
|
||||
</div>
|
||||
</Responsive>
|
||||
|
||||
@ -72,11 +72,10 @@ class HomePage extends PureComponent {
|
||||
<DefaultLayout
|
||||
title={intl.formatMessage(messages.home)}
|
||||
actions={[
|
||||
// : todo :
|
||||
// {
|
||||
// icon: 'ellipsis',
|
||||
// onClick: onOpenHomePageSettingsModal,
|
||||
// },
|
||||
{
|
||||
icon: 'ellipsis',
|
||||
onClick: onOpenHomePageSettingsModal,
|
||||
},
|
||||
]}
|
||||
layout={(
|
||||
<Fragment>
|
||||
|
||||
@ -269,14 +269,8 @@ export default function compose(state = initialState, action) {
|
||||
map.set('caretPosition', null);
|
||||
map.set('preselectDate', new Date());
|
||||
map.set('idempotencyKey', uuid());
|
||||
|
||||
if (action.status.get('spoiler_text').length > 0) {
|
||||
map.set('spoiler', true);
|
||||
map.set('spoiler_text', action.status.get('spoiler_text'));
|
||||
} else {
|
||||
map.set('spoiler', false);
|
||||
map.set('spoiler_text', '');
|
||||
}
|
||||
map.set('spoiler', false);
|
||||
map.set('spoiler_text', '');
|
||||
});
|
||||
case COMPOSE_QUOTE:
|
||||
return state.withMutations(map => {
|
||||
@ -287,14 +281,8 @@ export default function compose(state = initialState, action) {
|
||||
map.set('caretPosition', null);
|
||||
map.set('preselectDate', new Date());
|
||||
map.set('idempotencyKey', uuid());
|
||||
|
||||
if (action.status.get('spoiler_text').length > 0) {
|
||||
map.set('spoiler', true);
|
||||
map.set('spoiler_text', action.status.get('spoiler_text'));
|
||||
} else {
|
||||
map.set('spoiler', false);
|
||||
map.set('spoiler_text', '');
|
||||
}
|
||||
map.set('spoiler', false);
|
||||
map.set('spoiler_text', '');
|
||||
});
|
||||
case COMPOSE_REPLY_CANCEL:
|
||||
case COMPOSE_RESET:
|
||||
|
||||
@ -238,6 +238,7 @@ body {
|
||||
}
|
||||
|
||||
.overflowYHidden { overflow-y: hidden; }
|
||||
.overflowXScroll { overflow-x: scroll; }
|
||||
|
||||
.textOverflowEllipsis {
|
||||
max-width: 100%;
|
||||
@ -439,6 +440,7 @@ body {
|
||||
.height158PX { height: 158px; }
|
||||
.height122PX { height: 122px; }
|
||||
.height72PX { height: 72px; }
|
||||
.height60PX { height: 60px; }
|
||||
.height53PX { height: 53px; }
|
||||
.height40PX { height: 40px; }
|
||||
.height24PX { height: 24px; }
|
||||
@ -451,6 +453,7 @@ body {
|
||||
|
||||
.maxWidth100PC { max-width: 100%; }
|
||||
.maxWidth640PX { max-width: 640px; }
|
||||
.maxWidth180PX { max-width: 180px; }
|
||||
.maxWidth100PC42PX { max-width: calc(100% - 42px); }
|
||||
|
||||
.width100PC { width: 100%; }
|
||||
@ -466,6 +469,7 @@ body {
|
||||
.width160PX { width: 160px; }
|
||||
.width84PX { width: 84px; }
|
||||
.width72PX { width: 72px; }
|
||||
.width60PX { width: 60px; }
|
||||
.width50PX { width: 50px; }
|
||||
.width20PX { width: 20px; }
|
||||
.width10PX { width: 10px; }
|
||||
@ -659,6 +663,7 @@ body {
|
||||
.pb10 { padding-bottom: 10px; }
|
||||
.pb5 { padding-bottom: 5px; }
|
||||
|
||||
.pl35 { padding-left: 35px; }
|
||||
.pl25 { padding-left: 25px; }
|
||||
.pl15 { padding-left: 15px; }
|
||||
.pl10 { padding-left: 10px; }
|
||||
@ -830,6 +835,14 @@ body {
|
||||
color: rgba(255,255,255,0.65);
|
||||
}
|
||||
|
||||
.noScrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.noScrollbar {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rich Text Editor
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user