Another large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate group page components.
This commit is contained in:
mgabdev
2019-08-09 12:06:27 -04:00
parent 280dc51d85
commit 3d509c84a2
183 changed files with 4802 additions and 2361 deletions

View File

@@ -3,15 +3,17 @@ import { FormattedDate, FormattedNumber } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames';
import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import StatusContent from '../../../components/status_content';
import MediaGallery from '../../../components/media_gallery';
import Card from './card';
import Video from '../../video';
import scheduleIdleTask from '../../../utils/schedule_idle_task';
import Icon from '../../../components/icon';
import Poll from '../../../components/poll';
import Avatar from '../../../../components/avatar';
import DisplayName from '../../../../components/display_name';
import StatusContent from '../../../../components/status_content';
import MediaGallery from '../../../../components/media_gallery';
import Card from '../card';
import Video from '../../../video';
import scheduleIdleTask from '../../../../utils/schedule_idle_task';
import Icon from '../../../../components/icon';
import Poll from '../../../../components/poll';
import './detailed_status.scss';
export default class DetailedStatus extends ImmutablePureComponent {

View File

@@ -0,0 +1 @@
export { default } from './detailed_status';

View File

@@ -1,14 +1,16 @@
import { openModal } from '../../../actions/modal';
import IconButton from '../../../components/icon_button';
import ImmutablePropTypes from 'react-immutable-proptypes';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { me, isStaff } from '../../../initial_state';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
import { openModal } from '../../../../actions/modal';
import IconButton from '../../../../components/icon_button';
import { me, isStaff } from '../../../../initial_state';
import './detailed_status_action_bar.scss';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
reply: { id: 'status.reply', defaultMessage: 'Reply' },
reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
@@ -36,10 +38,9 @@ const mapDispatchToProps = (dispatch) => ({
},
});
export default @connect(null, mapDispatchToProps)
@injectIntl
class ActionBar extends PureComponent {
class ActionBar extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
@@ -51,7 +52,6 @@ class ActionBar extends PureComponent {
onReblog: PropTypes.func.isRequired,
onFavourite: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
onDirect: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
onMute: PropTypes.func,
onMuteConversation: PropTypes.func,
@@ -95,10 +95,6 @@ class ActionBar extends PureComponent {
this.props.onDelete(this.props.status, this.context.router.history, true);
}
handleDirectClick = () => {
this.props.onDirect(this.props.status.get('account'), this.context.router.history);
}
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.context.router.history);
}
@@ -135,7 +131,7 @@ class ActionBar extends PureComponent {
}
handleCopy = () => {
const url = this.props.status.get('url');
const url = this.props.status.get('url');
const textarea = document.createElement('textarea');
textarea.textContent = url;
@@ -183,7 +179,6 @@ class ActionBar extends PureComponent {
menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
} else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
//menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
@@ -196,7 +191,7 @@ class ActionBar extends PureComponent {
}
const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
<div className='detailed-status-action-bar__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
);
let replyIcon;
@@ -213,13 +208,20 @@ class ActionBar extends PureComponent {
let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
return (
<div className='detailed-status__action-bar'>
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
<div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
<div className='detailed-status__button'><IconButton className='star-icon' active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
<div className='detailed-status-action-bar'>
<div className='detailed-status-action-bar__button'>
<IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
</div>
<div className='detailed-status-action-bar__button'>
<IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
</div>
<div className='detailed-status-action-bar__button'>
<IconButton className='star-icon' active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
</div>
{shareButton}
<div className='detailed-status__action-bar-dropdown'>
<div className='detailed-status-action-bar__dropdown'>
<DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
</div>
</div>

View File

@@ -0,0 +1,20 @@
.detailed-status-action-bar {
display: flex;
flex-direction: row;
padding: 10px 0;
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
&__button {
flex: 1 1 auto;
text-align: center;
}
&__dropdown {
flex: 1 1 auto;
position: relative;
@include flex(center, center);
}
}

View File

@@ -0,0 +1 @@
export { default } from './detailed_status_action_bar';