matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'develop' into 'snackbar-action-link'

Browse Source 
# Conflicts:
#   app/soapbox/features/edit_profile/index.js
This commit is contained in:
marcin mikołajczak
2022-02-01 08:27:38 +00:00
parent bf7cd98c03 c4c6e24c48
commit 8fed920bb7
45 changed files with 2168 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/soapbox/features/account/components/header.js
View File

@@ -283,7 +283,21 @@ class Header extends ImmutablePureComponent {
});
}
if (features.accountSubscriptions) {
if (features.accountNotifies) {
if (account.getIn(['relationship', 'notifying'])) {
menu.push({
text: intl.formatMessage(messages.unsubscribe, { name: account.get('username') }),
action: this.props.onNotifyToggle,
icon: require('@tabler/icons/icons/bell.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.subscribe, { name: account.get('username') }),
action: this.props.onNotifyToggle,
icon: require('@tabler/icons/icons/bell-off.svg'),
});
}
} else if (features.accountSubscriptions) {
if (account.getIn(['relationship', 'subscribing'])) {
menu.push({
text: intl.formatMessage(messages.unsubscribe, { name: account.get('username') }),
@@ -589,8 +603,8 @@ class Header extends ImmutablePureComponent {
<StillImage src={account.get('header')} alt='' className='parallax' />
</a>}
{features.accountSubscriptions && <div className='account__header__subscribe'>
<SubscriptionButton account={account} />
{(features.accountNotifies || features.accountSubscriptions) && <div className='account__header__subscribe'>
<SubscriptionButton account={account} features={features} />
</div>}
</div>

5
app/soapbox/features/account_timeline/components/header.js
View File

@@ -59,6 +59,10 @@ export default class Header extends ImmutablePureComponent {
this.props.onSubscriptionToggle(this.props.account);
}
handleNotifyToggle = () => {
this.props.onNotifyToggle(this.props.account);
}
handleMute = () => {
this.props.onMute(this.props.account);
}
@@ -145,6 +149,7 @@ export default class Header extends ImmutablePureComponent {
onChat={this.handleChat}
onReblogToggle={this.handleReblogToggle}
onSubscriptionToggle={this.handleSubscriptionToggle}
onNotifyToggle={this.handleNotifyToggle}
onReport={this.handleReport}
onMute={this.handleMute}
onBlockDomain={this.handleBlockDomain}

12
app/soapbox/features/account_timeline/containers/header_container.js
View File

@@ -116,9 +116,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onReblogToggle(account) {
if (account.getIn(['relationship', 'showing_reblogs'])) {
dispatch(followAccount(account.get('id'), false));
dispatch(followAccount(account.get('id'), { reblogs: false }));
} else {
dispatch(followAccount(account.get('id'), true));
dispatch(followAccount(account.get('id'), { reblogs: true }));
}
},
@@ -130,6 +130,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
},
onNotifyToggle(account) {
if (account.getIn(['relationship', 'notifying'])) {
dispatch(followAccount(account.get('id'), { notify: false }));
} else {
dispatch(followAccount(account.get('id'), { notify: true }));
}
},
onEndorseToggle(account) {
if (account.getIn(['relationship', 'endorsed'])) {
dispatch(unpinAccount(account.get('id')));

24
app/soapbox/features/auth_login/components/registration_form.js
View File

@@ -14,6 +14,7 @@ import { accountLookup } from 'soapbox/actions/accounts';
import { register, verifyCredentials } from 'soapbox/actions/auth';
import { openModal } from 'soapbox/actions/modal';
import { getSettings } from 'soapbox/actions/settings';
import BirthdayInput from 'soapbox/components/birthday_input';
import ShowablePassword from 'soapbox/components/showable_password';
import CaptchaField from 'soapbox/features/auth_login/components/captcha';
import {
@@ -46,6 +47,7 @@ const mapStateToProps = (state, props) => ({
needsApproval: state.getIn(['instance', 'approval_required']),
supportsEmailList: getFeatures(state.get('instance')).emailList,
supportsAccountLookup: getFeatures(state.get('instance')).accountLookup,
birthdayRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_required']),
});
export default @connect(mapStateToProps)
@@ -61,6 +63,7 @@ class RegistrationForm extends ImmutablePureComponent {
supportsEmailList: PropTypes.bool,
supportsAccountLookup: PropTypes.bool,
inviteToken: PropTypes.string,
birthdayRequired: PropTypes.bool,
}
static contextTypes = {
@@ -129,6 +132,12 @@ class RegistrationForm extends ImmutablePureComponent {
this.setState({ passwordMismatch: !this.passwordsMatch() });
}
onBirthdayChange = birthday => {
this.setState({
birthday,
});
}
launchModal = () => {
const { dispatch, intl, needsConfirmation, needsApproval } = this.props;
@@ -197,6 +206,7 @@ class RegistrationForm extends ImmutablePureComponent {
onSubmit = e => {
const { dispatch, inviteToken } = this.props;
const { birthday } = this.state;
if (!this.passwordsMatch()) {
this.setState({ passwordMismatch: true });
@@ -211,6 +221,10 @@ class RegistrationForm extends ImmutablePureComponent {
if (inviteToken) {
params.set('token', inviteToken);
}
if (birthday) {
params.set('birthday', new Date(birthday.getTime() - (birthday.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
}
});
this.setState({ submissionLoading: true });
@@ -245,8 +259,8 @@ class RegistrationForm extends ImmutablePureComponent {
}
render() {
const { instance, intl, supportsEmailList } = this.props;
const { params, usernameUnavailable, passwordConfirmation, passwordMismatch } = this.state;
const { instance, intl, supportsEmailList, birthdayRequired } = this.props;
const { params, usernameUnavailable, passwordConfirmation, passwordMismatch, birthday } = this.state;
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
return (
@@ -311,6 +325,12 @@ class RegistrationForm extends ImmutablePureComponent {
error={passwordMismatch === true}
required
/>
{birthdayRequired &&
<BirthdayInput
value={birthday}
onChange={this.onBirthdayChange}
required
/>}
{instance.get('approval_required') &&
<SimpleTextarea
label={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}

88
app/soapbox/features/birthdays/account.js Normal file
View File

@@ -0,0 +1,88 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import Icon from 'soapbox/components/icon';
import Permalink from 'soapbox/components/permalink';
import { makeGetAccount } from 'soapbox/selectors';
const messages = defineMessages({
birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
});
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const mapStateToProps = (state, { accountId }) => {
const account = getAccount(state, accountId);
return {
account,
};
};
return mapStateToProps;
};
export default @connect(makeMapStateToProps)
@injectIntl
class Account extends ImmutablePureComponent {
static propTypes = {
accountId: PropTypes.string.isRequired,
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map,
};
static defaultProps = {
added: false,
};
componentDidMount() {
const { account, accountId } = this.props;
if (accountId && !account) {
this.props.fetchAccount(accountId);
}
}
render() {
const { account, intl } = this.props;
if (!account) return null;
const birthday = account.getIn(['pleroma', 'birthday']);
if (!birthday) return null;
const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' });
return (
<div className='account'>
<div className='account__wrapper'>
<Permalink className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
<div className='account__display-name'>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<DisplayName account={account} />
</div>
</Permalink>
<div
className='account__birthday'
title={intl.formatMessage(messages.birthday, {
date: formattedBirthday,
})}
>
<Icon src={require('@tabler/icons/icons/ballon.svg')} />
{formattedBirthday}
</div>
</div>
</div>
);
}
}

43
app/soapbox/features/edit_profile/index.js
View File

@@ -14,6 +14,7 @@ import { updateNotificationSettings } from 'soapbox/actions/accounts';
import { patchMe } from 'soapbox/actions/me';
import snackbar from 'soapbox/actions/snackbar';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import BirthdayInput from 'soapbox/components/birthday_input';
import Icon from 'soapbox/components/icon';
import {
SimpleForm,
@@ -50,6 +51,7 @@ const messages = defineMessages({
bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' },
displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' },
view: { id: 'snackbar.view', defaultMessage: 'View' },
birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
});
const makeMapStateToProps = () => {
@@ -59,12 +61,14 @@ const makeMapStateToProps = () => {
const me = state.get('me');
const account = getAccount(state, me);
const soapbox = getSoapboxConfig(state);
const features = getFeatures(state.get('instance'));
return {
account,
maxFields: state.getIn(['instance', 'pleroma', 'metadata', 'fields_limits', 'max_fields'], 4),
verifiedCanEditName: soapbox.get('verifiedCanEditName'),
supportsEmailList: getFeatures(state.get('instance')).emailList,
supportsEmailList: features.emailList,
supportsBirthdays: features.birthdays,
};
};
@@ -95,6 +99,8 @@ class EditProfile extends ImmutablePureComponent {
account: ImmutablePropTypes.map,
maxFields: PropTypes.number,
verifiedCanEditName: PropTypes.bool,
supportsEmailList: PropTypes.bool,
supportsBirthdays: PropTypes.bool,
};
state = {
@@ -108,6 +114,8 @@ class EditProfile extends ImmutablePureComponent {
const strangerNotifications = account.getIn(['pleroma', 'notification_settings', 'block_from_strangers']);
const acceptsEmailList = account.getIn(['pleroma', 'accepts_email_list']);
const discoverable = account.getIn(['source', 'pleroma', 'discoverable']);
const birthday = account.getIn(['pleroma', 'birthday']);
const showBirthday = account.getIn(['source', 'pleroma', 'show_birthday']);
const initialState = account.withMutations(map => {
map.merge(map.get('source'));
@@ -117,6 +125,11 @@ class EditProfile extends ImmutablePureComponent {
map.set('accepts_email_list', acceptsEmailList);
map.set('hide_network', hidesNetwork(account));
map.set('discoverable', discoverable);
map.set('show_birthday', showBirthday);
if (birthday) {
const date = new Date(birthday);
map.set('birthday', new Date(date.getTime() + (date.getTimezoneOffset() * 60000)));
}
unescapeParams(map, ['display_name', 'bio']);
});
@@ -157,6 +170,10 @@ class EditProfile extends ImmutablePureComponent {
hide_follows: state.hide_network,
hide_followers_count: state.hide_network,
hide_follows_count: state.hide_network,
birthday: state.birthday
? new Date(state.birthday.getTime() - (state.birthday.getTimezoneOffset() * 60000)).toISOString().slice(0, 10)
: undefined,
show_birthday: state.show_birthday,
}, this.getFieldParams().toJS());
}
@@ -224,6 +241,12 @@ class EditProfile extends ImmutablePureComponent {
};
}
handleBirthdayChange = birthday => {
this.setState({
birthday,
});
}
handleAddField = () => {
this.setState({
fields: this.state.fields.push(ImmutableMap({ name: '', value: '' })),
@@ -239,7 +262,7 @@ class EditProfile extends ImmutablePureComponent {
}
render() {
const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props;
const { intl, maxFields, account, verifiedCanEditName, supportsBirthdays, supportsEmailList } = this.props;
const verified = isVerified(account);
const canEditName = verifiedCanEditName || !verified;
@@ -268,6 +291,22 @@ class EditProfile extends ImmutablePureComponent {
onChange={this.handleTextChange}
rows={3}
/>
{supportsBirthdays && (
<>
<BirthdayInput
hint={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
value={this.state.birthday}
onChange={this.handleBirthdayChange}
/>
<Checkbox
label={<FormattedMessage id='edit_profile.fields.show_birthday_label' defaultMessage='Show my birthday' />}
hint={<FormattedMessage id='edit_profile.hints.show_birthday' defaultMessage='Your birthday will be visible on your profile.' />}
name='show_birthday'
checked={this.state.show_birthday}
onChange={this.handleCheckboxChange}
/>
</>
)}
<div className='fields-row'>
<div className='fields-row__column fields-row__column-6'>
<ProfilePreview account={this.makePreviewAccount()} />

15
app/soapbox/features/notifications/components/column_settings.js
View File

@@ -24,6 +24,7 @@ class ColumnSettings extends React.PureComponent {
onClear: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
supportsEmojiReacts: PropTypes.bool,
supportsBirthdays: PropTypes.bool,
};
onPushChange = (path, checked) => {
@@ -39,7 +40,7 @@ class ColumnSettings extends React.PureComponent {
}
render() {
const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts } = this.props;
const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts, supportsBirthdays } = this.props;
const filterShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show' defaultMessage='Show' />;
const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
@@ -50,6 +51,7 @@ class ColumnSettings extends React.PureComponent {
const soundSettings = [['sounds', 'follow'], ['sounds', 'favourite'], ['sounds', 'pleroma:emoji_reaction'], ['sounds', 'mention'], ['sounds', 'reblog'], ['sounds', 'poll'], ['sounds', 'move']];
const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed');
const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
const birthdaysStr = <FormattedMessage id='notifications.column_settings.birthdays.show' defaultMessage='Show birthday reminders' />;
return (
<div className='column-settings'>
@@ -84,6 +86,17 @@ class ColumnSettings extends React.PureComponent {
</div>
</div>
{supportsBirthdays &&
<div role='group' aria-labelledby='notifications-filter-bar'>
<span id='notifications-filter-bar' className='column-settings__section'>
<FormattedMessage id='notifications.column_settings.birthdays.category' defaultMessage='Birthdays' />
</span>
<div className='column-settings__row'>
<SettingToggle id='show-filter-bar' prefix='notifications' settings={settings} settingPath={['birthdays', 'show']} onChange={onChange} label={birthdaysStr} />
</div>
</div>
}
<div role='group' aria-labelledby='notifications-follow'>
<span id='notifications-follow' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>

1
app/soapbox/features/notifications/containers/column_settings_container.js
View File

@@ -24,6 +24,7 @@ const mapStateToProps = state => {
settings: getSettings(state).get('notifications'),
pushSettings: state.get('push_notifications'),
supportsEmojiReacts: features.emojiReacts,
supportsBirthdays: features.birthdays,
};
};

53
app/soapbox/features/notifications/index.js
View File

@@ -8,8 +8,10 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { getSettings } from 'soapbox/actions/settings';
import BirthdayReminders from 'soapbox/components/birthday_reminders';
import SubNavigation from 'soapbox/components/sub_navigation';
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
import { getFeatures } from 'soapbox/utils/features';
import {
expandNotifications,
@@ -45,14 +47,24 @@ const getNotifications = createSelector([
return notifications.filter(item => item !== null && allowedType === item.get('type'));
});
const mapStateToProps = state => ({
showFilterBar: getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
notifications: getNotifications(state),
isLoading: state.getIn(['notifications', 'isLoading'], true),
isUnread: state.getIn(['notifications', 'unread']) > 0,
hasMore: state.getIn(['notifications', 'hasMore']),
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
});
const mapStateToProps = state => {
const settings = getSettings(state);
const instance = state.get('instance');
const features = getFeatures(instance);
const showBirthdayReminders = settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthdays;
const birthdays = showBirthdayReminders && state.getIn(['user_lists', 'birthday_reminders', state.get('me')]);
return {
showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']),
notifications: getNotifications(state),
isLoading: state.getIn(['notifications', 'isLoading'], true),
isUnread: state.getIn(['notifications', 'unread']) > 0,
hasMore: state.getIn(['notifications', 'hasMore']),
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
showBirthdayReminders,
hasBirthdays: !!birthdays,
};
};
export default @connect(mapStateToProps)
@injectIntl
@@ -68,6 +80,8 @@ class Notifications extends React.PureComponent {
hasMore: PropTypes.bool,
dequeueNotifications: PropTypes.func,
totalQueuedNotificationsCount: PropTypes.number,
showBirthdayReminders: PropTypes.bool,
hasBirthdays: PropTypes.bool,
};
componentWillUnmount() {
@@ -104,15 +118,25 @@ class Notifications extends React.PureComponent {
}
handleMoveUp = id => {
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
const { hasBirthdays } = this.props;
let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
if (hasBirthdays) elementIndex++;
this._selectChild(elementIndex, true);
}
handleMoveDown = id => {
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
const { hasBirthdays } = this.props;
let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
if (hasBirthdays) elementIndex++;
this._selectChild(elementIndex, false);
}
handleMoveBelowBirthdays = () => {
this._selectChild(1, false);
}
_selectChild(index, align_top) {
const container = this.column.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
@@ -137,7 +161,7 @@ class Notifications extends React.PureComponent {
}
render() {
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount, showBirthdayReminders } = this.props;
const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
let scrollableContent = null;
@@ -164,6 +188,13 @@ class Notifications extends React.PureComponent {
onMoveDown={this.handleMoveDown}
/>
));
if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(
<BirthdayReminders
key='birthdays'
onMoveDown={this.handleMoveBelowBirthdays}
/>,
);
} else {
scrollableContent = null;
}

1
app/soapbox/features/preferences/index.js
View File

@@ -32,6 +32,7 @@ export const languages = {
da: 'Dansk',
de: 'Deutsch',
el: 'Ελληνικά',
'en-Shaw': '𐑖𐑱𐑝𐑾𐑯',
eo: 'Esperanto',
es: 'Español',
eu: 'Euskara',

12
app/soapbox/features/status/components/detailed_status.js
View File

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl } from 'react-intl';
import { FormattedMessage, injectIntl } from 'react-intl';
import { FormattedDate } from 'react-intl';
import { Link, NavLink } from 'react-router-dom';
@@ -164,7 +164,15 @@ class DetailedStatus extends ImmutablePureComponent {
let quote;
if (status.get('quote')) {
quote = <QuotedStatus statusId={status.get('quote')} />;
if (status.getIn(['pleroma', 'quote_visible'], true) === false) {
quote = (
<div className='quoted-status-tombstone'>
<p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
</div>
);
} else {
quote = <QuotedStatus statusId={status.get('quote')} />;
}
}
if (status.get('visibility') === 'direct') {

97
app/soapbox/features/ui/components/birthdays_modal.js Normal file
View File

@@ -0,0 +1,97 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import IconButton from 'soapbox/components/icon_button';
import LoadingIndicator from 'soapbox/components/loading_indicator';
import ScrollableList from 'soapbox/components/scrollable_list';
import Account from 'soapbox/features/birthdays/account';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
const mapStateToProps = (state) => {
const me = state.get('me');
return {
accountIds: state.getIn(['user_lists', 'birthday_reminders', me]),
};
};
export default @connect(mapStateToProps)
@injectIntl
class BirthdaysModal extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
accountIds: ImmutablePropTypes.orderedSet,
};
componentDidMount() {
this.unlistenHistory = this.context.router.history.listen((_, action) => {
if (action === 'PUSH') {
this.onClickClose(null, true);
}
});
}
componentWillUnmount() {
if (this.unlistenHistory) {
this.unlistenHistory();
}
}
onClickClose = (_, noPop) => {
this.props.onClose('BIRTHDAYS', noPop);
};
render() {
const { intl, accountIds } = this.props;
let body;
if (!accountIds) {
body = <LoadingIndicator />;
} else {
const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
body = (
<ScrollableList
scrollKey='reblogs'
emptyMessage={emptyMessage}
>
{accountIds.map(id =>
<Account key={id} accountId={id} withNote={false} />,
)}
</ScrollableList>
);
}
return (
<div className='modal-root__modal reactions-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'>
<FormattedMessage id='column.birthdays' defaultMessage='Birthdays' />
</h3>
<IconButton
className='compose-modal__close'
title={intl.formatMessage(messages.close)}
src={require('@tabler/icons/icons/x.svg')}
onClick={this.onClickClose} size={20}
/>
</div>
{body}
</div>
);
}
}

2
app/soapbox/features/ui/components/modal_root.js
View File

@@ -26,6 +26,7 @@ import {
FavouritesModal,
ReblogsModal,
MentionsModal,
BirthdaysModal,
} from '../../../features/ui/util/async-components';
import BundleContainer from '../containers/bundle_container';
@@ -57,6 +58,7 @@ const MODAL_COMPONENTS = {
'FAVOURITES': FavouritesModal,
'REACTIONS': ReactionsModal,
'MENTIONS': MentionsModal,
'BIRTHDAYS': BirthdaysModal,
};
export default class ModalRoot extends React.PureComponent {

61
app/soapbox/features/ui/components/pending_status.js
View File

@@ -1,6 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { Link, NavLink } from 'react-router-dom';
@@ -9,9 +10,10 @@ import DisplayName from 'soapbox/components/display_name';
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
import StatusContent from 'soapbox/components/status_content';
import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
import { getDomain } from 'soapbox/utils/accounts';
import PlaceholderMediaGallery from '../../placeholder/components/placeholder_media_gallery';
import { buildStatus } from '../util/pending_status_builder';
import PollPreview from './poll_preview';
@@ -29,6 +31,7 @@ const mapStateToProps = (state, props) => {
};
export default @connect(mapStateToProps)
@injectIntl
class PendingStatus extends ImmutablePureComponent {
renderMedia = () => {
@@ -40,13 +43,63 @@ class PendingStatus extends ImmutablePureComponent {
media={status.get('media_attachments')}
/>
);
} else if (shouldHaveCard(status)) {
} else if (!status.get('quote') && shouldHaveCard(status)) {
return <PlaceholderCard />;
} else {
return null;
}
}
renderReplyMentions = () => {
const { status } = this.props;
if (!status.get('in_reply_to_id')) {
return null;
}
const to = status.get('mentions', []);
if (to.size === 0) {
if (status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
return (
<div className='reply-mentions'>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}{more}'
values={{
accounts: <span className='reply-mentions__account'>@{status.getIn(['account', 'username'])}</span>,
more: false,
}}
/>
</div>
);
} else {
return (
<div className='reply-mentions'>
<FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
</div>
);
}
}
return (
<div className='reply-mentions'>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}{more}'
values={{
accounts: to.slice(0, 2).map(account => (<>
<span key={account.username} className='reply-mentions__account'>@{account.username}</span>
{' '}
</>)),
more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
}}
/>
</div>
);
}
render() {
const { status, className } = this.props;
if (!status) return null;
@@ -84,6 +137,8 @@ class PendingStatus extends ImmutablePureComponent {
</div>
</div>
{this.renderReplyMentions()}
<StatusContent
status={status}
expanded
@@ -93,6 +148,8 @@ class PendingStatus extends ImmutablePureComponent {
{this.renderMedia()}
{status.get('poll') && <PollPreview poll={status.get('poll')} />}
{status.get('quote') && <QuotedStatus statusId={status.get('quote')} />}
{/* TODO */}
{/* <PlaceholderActionBar /> */}
</div>

37
app/soapbox/features/ui/components/profile_info_panel.js
View File

@@ -80,6 +80,41 @@ class ProfileInfoPanel extends ImmutablePureComponent {
return badges;
}
getBirthday = () => {
const { account, intl } = this.props;
const birthday = account.getIn(['pleroma', 'birthday']);
if (!birthday) return null;
const formattedBirthday = intl.formatDate(birthday, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' });
const date = new Date(birthday);
const today = new Date();
const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth();
if (hasBirthday) {
return (
<div className='profile-info-panel-content__birthday' title={formattedBirthday}>
<Icon src={require('@tabler/icons/icons/ballon.svg')} />
<FormattedMessage
id='account.birthday_today' defaultMessage='Birthday is today!'
/>
</div>
);
}
return (
<div className='profile-info-panel-content__birthday'>
<Icon src={require('@tabler/icons/icons/ballon.svg')} />
<FormattedMessage
id='account.birthday' defaultMessage='Born {date}' values={{
date: formattedBirthday,
}}
/>
</div>
);
}
render() {
const { account, displayFqn, intl, identity_proofs, username } = this.props;
@@ -150,6 +185,8 @@ class ProfileInfoPanel extends ImmutablePureComponent {
/>
</div>}
{this.getBirthday()}
<ProfileStats
className='profile-info-panel-content__stats'
account={account}

17
app/soapbox/features/ui/components/subscription_button.js
View File

@@ -1,4 +1,5 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -6,6 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import {
followAccount,
subscribeAccount,
unsubscribeAccount,
} from 'soapbox/actions/accounts';
@@ -33,6 +35,13 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(subscribeAccount(account.get('id')));
}
},
onNotifyToggle(account) {
if (account.getIn(['relationship', 'notifying'])) {
dispatch(followAccount(account.get('id'), { notify: false }));
} else {
dispatch(followAccount(account.get('id'), { notify: true }));
}
},
});
export default @connect(mapStateToProps, mapDispatchToProps)
@@ -41,15 +50,17 @@ class SubscriptionButton extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map,
features: PropTypes.object.isRequired,
};
handleSubscriptionToggle = () => {
this.props.onSubscriptionToggle(this.props.account);
if (this.props.features.accountNotifies) this.props.onNotifyToggle(this.props.account);
else this.props.onSubscriptionToggle(this.props.account);
}
render() {
const { account, intl } = this.props;
const subscribing = account.getIn(['relationship', 'subscribing']);
const { account, intl, features } = this.props;
const subscribing = features.accountNotifies ? account.getIn(['relationship', 'notifying']) : account.getIn(['relationship', 'subscribing']);
const following = account.getIn(['relationship', 'following']);
const requested = account.getIn(['relationship', 'requested']);

7
app/soapbox/features/ui/components/tabs_bar.js
View File

@@ -6,6 +6,7 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import { Link, NavLink, withRouter } from 'react-router-dom';
import { getSettings } from 'soapbox/actions/settings';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import Icon from 'soapbox/components/icon';
import IconWithCounter from 'soapbox/components/icon_with_counter';
@@ -168,10 +169,14 @@ const mapStateToProps = state => {
const reportsCount = state.getIn(['admin', 'openReports']).count();
const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
const instance = state.get('instance');
const settings = getSettings(state);
// In demo mode, use the Soapbox logo
const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : getSoapboxConfig(state).get('logo');
return {
account: state.getIn(['accounts', me]),
logo: getSoapboxConfig(state).get('logo'),
logo,
features: getFeatures(instance),
notificationCount: state.getIn(['notifications', 'unread']),
chatsCount: state.getIn(['chats', 'items']).reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),

4
app/soapbox/features/ui/util/async-components.js
View File

@@ -214,6 +214,10 @@ export function MentionsModal() {
return import(/* webpackChunkName: "features/ui" */'../components/mentions_modal');
}
export function BirthdaysModal() {
return import(/* webpackChunkName: "features/ui" */'../components/birthdays_modal');
}
export function ListEditor() {
return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
}

22
app/soapbox/features/ui/util/pending_status_builder.js
View File

@@ -1,14 +1,31 @@
import { fromJS } from 'immutable';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import { normalizeStatus } from 'soapbox/actions/importer/normalizer';
import { makeGetAccount } from 'soapbox/selectors';
import { makeGetAccount, makeGetStatus } from 'soapbox/selectors';
export const buildStatus = (state, pendingStatus, idempotencyKey) => {
const getAccount = makeGetAccount();
const getStatus = makeGetStatus();
const me = state.get('me');
const account = getAccount(state, me);
let mentions;
if (pendingStatus.get('in_reply_to_id')) {
const inReplyTo = getStatus(state, { id: pendingStatus.get('in_reply_to_id') });
if (inReplyTo.getIn(['account', 'id']) === me) {
mentions = ImmutableOrderedSet([account.get('acct')]).union(pendingStatus.get('to', []));
} else {
mentions = pendingStatus.get('to', []);
}
mentions = mentions.map(mention => ({
username: mention.split('@')[0],
}));
}
const status = normalizeStatus({
account,
application: null,
@@ -24,10 +41,11 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
in_reply_to_id: pendingStatus.get('in_reply_to_id'),
language: null,
media_attachments: pendingStatus.get('media_ids').map(id => ({ id })),
mentions: [],
mentions,
muted: false,
pinned: false,
poll: pendingStatus.get('poll', null),
quote: pendingStatus.get('quote_id', null),
reblog: null,
reblogged: false,
reblogs_count: 0,