Progress on deck, dms

This commit is contained in:
mgabdev
2020-12-10 11:51:45 -05:00
parent c35e651b43
commit de0c977950
40 changed files with 660 additions and 274 deletions

View File

@@ -6,7 +6,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import debounce from 'lodash.debounce'
import { me } from '../initial_state'
import { fetchBlocks, expandBlocks } from '../actions/blocks'
import {
fetchChatMessengerBlocks,
expandChatMessengerBlocks,
unblockChatMessenger,
} from '../actions/chat_conversation_accounts'
import Account from '../components/account'
import Block from '../components/block'
import BlockHeading from '../components/block_heading'
@@ -14,7 +18,7 @@ import Divider from '../components/divider'
import ScrollableList from '../components/scrollable_list'
import AccountPlaceholder from '../components/placeholder/account_placeholder'
class MessagesBlockedAccounts extends ImmutablePureComponent {
class ChatConversationBlockedAccounts extends ImmutablePureComponent {
componentDidMount() {
this.props.onFetchBlocks()
@@ -40,7 +44,7 @@ class MessagesBlockedAccounts extends ImmutablePureComponent {
<BlockHeading title={intl.formatMessage(messages.blocks)} />
</div>
<ScrollableList
scrollKey='blocked_accounts'
scrollKey='chat_blocked_accounts'
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
isLoading={isLoading}
@@ -55,6 +59,9 @@ class MessagesBlockedAccounts extends ImmutablePureComponent {
key={`blocked-accounts-${id}`}
id={id}
compact
actionIcon='subtract'
onActionClick={() => this.props.onRemove(id)}
actionTitle='Remove'
/>
))
}
@@ -66,22 +73,23 @@ class MessagesBlockedAccounts extends ImmutablePureComponent {
}
const messages = defineMessages({
empty: { id: 'empty_column.blocks', defaultMessage: 'You haven\'t blocked any users yet.' },
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
empty: { id: 'empty_column.chat_blocks', defaultMessage: 'You haven\'t blocked any chat users yet.' },
blocks: { id: 'navigation_bar.chat_blocks', defaultMessage: 'Blocked chat users' },
})
const mapStateToProps = (state) => ({
accountIds: state.getIn(['user_lists', 'blocks', me, 'items']),
hasMore: !!state.getIn(['user_lists', 'blocks', me, 'next']),
isLoading: state.getIn(['user_lists', 'blocks', me, 'isLoading']),
accountIds: state.getIn(['user_lists', 'chat_blocks', me, 'items']),
hasMore: !!state.getIn(['user_lists', 'chat_blocks', me, 'next']),
isLoading: state.getIn(['user_lists', 'chat_blocks', me, 'isLoading']),
})
const mapDispatchToProps = (dispatch) => ({
onFetchBlocks: () => dispatch(fetchBlocks()),
onExpandBlocks: () => dispatch(expandBlocks()),
onFetchBlocks: () => dispatch(fetchChatMessengerBlocks()),
onExpandBlocks: () => dispatch(expandChatMessengerBlocks()),
onRemove: (accountId) => dispatch(unblockChatMessenger(accountId)),
})
MessagesBlockedAccounts.propTypes = {
ChatConversationBlockedAccounts.propTypes = {
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
intl: PropTypes.object.isRequired,
@@ -90,4 +98,4 @@ MessagesBlockedAccounts.propTypes = {
onFetchBlocks: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(MessagesBlockedAccounts))
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ChatConversationBlockedAccounts))

View File

@@ -6,13 +6,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import debounce from 'lodash.debounce'
import { me } from '../initial_state'
import { fetchMutes, expandMutes } from '../actions/mutes'
import {
fetchChatMessengerMutes,
expandChatMessengerMutes,
unmuteChatMessenger,
} from '../actions/chat_conversation_accounts'
import Account from '../components/account'
import Block from '../components/block'
import BlockHeading from '../components/block_heading'
import ScrollableList from '../components/scrollable_list'
class MessagesMutedAccounts extends ImmutablePureComponent {
class ChatConversationMutedAccounts extends ImmutablePureComponent {
componentWillMount() {
this.props.onFetchMutes()
@@ -32,14 +36,14 @@ class MessagesMutedAccounts extends ImmutablePureComponent {
return (
<div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
<div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<BlockHeading title={<FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />} />
<BlockHeading title={<FormattedMessage id='navigation_bar.chat_mutes' defaultMessage='Muted chat users' />} />
</div>
<ScrollableList
scrollKey='mutes'
scrollKey='chat_muted_accounts'
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
isLoading={isLoading}
emptyMessage={<FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />}
emptyMessage={<FormattedMessage id='empty_column.chat_mutes' defaultMessage="You haven't muted any chat users yet." />}
>
{
accountIds && accountIds.map((id) =>
@@ -47,6 +51,9 @@ class MessagesMutedAccounts extends ImmutablePureComponent {
key={`mutes-${id}`}
id={id}
compact
actionIcon='subtract'
onActionClick={() => this.props.onRemove(id)}
actionTitle='Remove'
/>
)
}
@@ -58,17 +65,18 @@ class MessagesMutedAccounts extends ImmutablePureComponent {
}
const mapStateToProps = (state) => ({
accountIds: state.getIn(['user_lists', 'mutes', me, 'items']),
hasMore: !!state.getIn(['user_lists', 'mutes', me, 'next']),
isLoading: state.getIn(['user_lists', 'mutes', me, 'isLoading']),
accountIds: state.getIn(['user_lists', 'chat_mutes', me, 'items']),
hasMore: !!state.getIn(['user_lists', 'chat_mutes', me, 'next']),
isLoading: state.getIn(['user_lists', 'chat_mutes', me, 'isLoading']),
})
const mapDispatchToProps = (dispatch) => ({
onFetchMutes: () => dispatch(fetchMutes()),
onExpandMutes: () => dispatch(expandMutes()),
onFetchMutes: () => dispatch(fetchChatMessengerMutes()),
onExpandMutes: () => dispatch(expandChatMessengerMutes()),
onRemove: (accountId) => dispatch(unmuteChatMessenger(accountId)),
})
MessagesMutedAccounts.propTypes = {
ChatConversationMutedAccounts.propTypes = {
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
isLoading: PropTypes.bool,
@@ -76,4 +84,4 @@ MessagesMutedAccounts.propTypes = {
onFetchMutes: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(MessagesMutedAccounts))
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ChatConversationMutedAccounts))

View File

@@ -17,6 +17,7 @@ class ComposeExtraButton extends React.PureComponent {
buttonRef,
isLast,
small,
iconClassName,
} = this.props
const containerClasses = CX({
@@ -42,7 +43,7 @@ class ComposeExtraButton extends React.PureComponent {
px10: 1,
})
const iconClasses = CX({
const iconClasses = CX(iconClassName, {
cSecondary: !active,
cWhite: active,
mr10: 1,
@@ -89,6 +90,7 @@ ComposeExtraButton.propTypes = {
active: PropTypes.bool,
buttonRef: PropTypes.func,
small: PropTypes.bool,
iconClassName: PropTypes.string,
}
export default ComposeExtraButton

View File

@@ -43,10 +43,16 @@ class ComposeExtraButtonList extends React.PureComponent {
render() {
const { isMatch, edit, hidePro, isModal } = this.props
const {
isMatch,
edit,
hidePro,
isModal,
isStandalone,
} = this.props
const { height } = this.state
const small = height <= 660 || isModal
const small = (height <= 660 || isModal) && !isStandalone
const containerClasses = CX({
d: 1,
@@ -84,6 +90,7 @@ ComposeExtraButtonList.propTypes = {
edit: PropTypes.bool,
isMatch: PropTypes.bool,
isModal: PropTypes.bool,
isStandalone: PropTypes.bool,
}
export default ComposeExtraButtonList

View File

@@ -28,6 +28,7 @@ import ExpiresPostButton from './expires_post_button'
import RichTextEditorButton from './rich_text_editor_button'
import StatusContainer from '../../../containers/status_container'
import StatusVisibilityButton from './status_visibility_button'
import MoreButton from './more_button'
import UploadButton from './media_upload_button'
import UploadForm from './upload_form'
import Input from '../../../components/input'
@@ -82,6 +83,8 @@ class ComposeForm extends ImmutablePureComponent {
if (!this.form.contains(e.target)) {
this.handleClickOutside()
} else {
// : todo :
// if mobile go to /compose else openModal
if (!isStandalone && !isModalOpen && !shouldCondense) {
this.props.openComposeModal()
return false
@@ -395,7 +398,7 @@ class ComposeForm extends ImmutablePureComponent {
{ !isModalOpen && <ComposeFormSubmitButton /> }
<ComposeExtraButtonList isMatch={isMatch} hidePro={hidePro} edit={edit} isModal={isModalOpen} />
<ComposeExtraButtonList isStandalone={isStandalone} isMatch={isMatch} hidePro={hidePro} edit={edit} isModal={isModalOpen} />
</div>
)
}
@@ -413,6 +416,7 @@ class ComposeForm extends ImmutablePureComponent {
<UploadButton />
<EmojiPickerButton isMatch={isMatch} />
<PollButton />
<MoreButton />
<ComposeFormSubmitButton />
</div>
<div className={[_s.d, _s.posAbs, _s.z2, _s.left0, _s.right0, _s.bottom0, _s.top0].join(' ')} />

View File

@@ -12,6 +12,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
active,
small,
disabledButton,
type,
} = this.props
const containerClasses = CX({
@@ -72,7 +73,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
// {intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.postEdit : messages.post)}
ComposeFormSubmitButton.propTypes = {
type: PropTypes.oneOf(['header', 'block', 'comment'])
}
export default ComposeFormSubmitButton

View File

@@ -32,6 +32,7 @@ class EmojiPickerButton extends React.PureComponent {
active={active && isMatch}
buttonRef={this.setButton}
small={small}
iconClassName={_s.cIconComposeEmoji}
/>
)
}

View File

@@ -40,6 +40,7 @@ class ExpiresPostButton extends React.PureComponent {
onClick={this.handleToggle}
small={small}
title={intl.formatMessage(messages.expires)}
iconClassName={_s.cIconComposeExpires}
/>
)
}

View File

@@ -42,6 +42,7 @@ class UploadButton extends ImmutablePureComponent {
onClick={this.handleClick}
small={small}
icon='media'
iconClassName={_s.cIconComposeMedia}
>
<label>
<span className={_s.displayNone}>{intl.formatMessage(messages.upload)}</span>

View File

@@ -0,0 +1,10 @@
import React from 'react'
import ComposeExtraButton from './compose_extra_button'
class MoreButton extends React.PureComponent {
render () {
return <ComposeExtraButton title='More' icon='more' iconClassName={_s.cTertiary} />
}
}
export default MoreButton

View File

@@ -30,6 +30,7 @@ class PollButton extends React.PureComponent {
icon='poll'
small={small}
active={active}
iconClassName={_s.cIconComposePoll}
/>
)
}

View File

@@ -28,6 +28,7 @@ class RichTextEditorButton extends React.PureComponent {
onClick={this.handleClick}
small={small}
active={active}
iconClassName={_s.cIconComposeRichText}
/>
)
}

View File

@@ -41,6 +41,7 @@ class SchedulePostButton extends React.PureComponent {
onClick={this.handleToggle}
small={small}
title={intl.formatMessage(messages.schedule_status)}
iconClassName={_s.cIconComposeSchedule}
/>
)
}

View File

@@ -22,6 +22,7 @@ class SpoilerButton extends React.PureComponent {
onClick={this.handleClick}
small={small}
active={active}
iconClassName={_s.cIconComposeSpoiler}
/>
)
}

View File

@@ -42,6 +42,7 @@ class StatusVisibilityButton extends React.PureComponent {
onClick={this.handleOnClick}
small={small}
buttonRef={this.setButton}
iconClassName={_s.cIconComposeSensitive}
/>
)
}

View File

@@ -114,7 +114,7 @@ class ChatMessagesComposeForm extends React.PureComponent {
disabled={disabled}
onClick={this.handleOnSendChatMessage}
>
<Text color='inherit' className={_s.px10}>Send</Text>
<Text color='inherit' weight='medium' className={_s.px10}>Send</Text>
</Button>
)