From 5b1f641fd2f35d62e7b73cf2408cb4d203c87816 Mon Sep 17 00:00:00 2001 From: noellabo Date: Sun, 19 Jul 2020 12:12:09 +0900 Subject: [PATCH] Fix subscribe WebUI --- app/javascript/mastodon/actions/accounts.js | 1 - app/javascript/mastodon/components/account.js | 28 ++++- .../mastodon/containers/account_container.js | 1 - .../mastodon/containers/status_container.js | 1 - .../features/account/components/header.js | 30 ++++- .../directory/components/account_card.js | 14 ++- .../components/account_card.js | 102 +++++++++++++--- .../group_timeline/components/group_detail.js | 110 +++++++++++++++--- .../features/list_adder/components/account.js | 1 - .../styles/mastodon/components.scss | 2 +- 10 files changed, 240 insertions(+), 50 deletions(-) diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js index eebc8304d..ce2a68976 100644 --- a/app/javascript/mastodon/actions/accounts.js +++ b/app/javascript/mastodon/actions/accounts.js @@ -1,6 +1,5 @@ import api, { getLinks } from '../api'; import { importFetchedAccount, importFetchedAccounts } from './importer'; -import { Map as ImmutableMap } from 'immutable'; export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST'; export const ACCOUNT_FETCH_SUCCESS = 'ACCOUNT_FETCH_SUCCESS'; diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 723b12a52..6133a013b 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -9,7 +9,6 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { me, show_followed_by, follow_button_to_list_adder } from '../initial_state'; import RelativeTimestamp from './relative_timestamp'; -import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -129,12 +128,33 @@ class Account extends ImmutablePureComponent { } else { let following_buttons, subscribing_buttons; if (!account.get('moved') || subscribing ) { - subscribing_buttons = ; + subscribing_buttons = ( + + ); } if (!account.get('moved') || following) { - following_buttons = ; + following_buttons = ( + + ); } - buttons = {subscribing_buttons}{following_buttons} + buttons = {subscribing_buttons}{following_buttons}; } } diff --git a/app/javascript/mastodon/containers/account_container.js b/app/javascript/mastodon/containers/account_container.js index 1df63a045..aaff461bc 100644 --- a/app/javascript/mastodon/containers/account_container.js +++ b/app/javascript/mastodon/containers/account_container.js @@ -16,7 +16,6 @@ import { import { openModal } from '../actions/modal'; import { initMuteModal } from '../actions/mutes'; import { unfollowModal, unsubscribeModal } from '../initial_state'; -import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js index ba7d90f7e..8090aeeaf 100644 --- a/app/javascript/mastodon/containers/status_container.js +++ b/app/javascript/mastodon/containers/status_container.js @@ -50,7 +50,6 @@ import { deployPictureInPicture } from '../actions/picture_in_picture'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { boostModal, deleteModal, unfollowModal, unsubscribeModal } from '../initial_state'; import { showAlertForError } from '../actions/alerts'; -import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 96709284e..5368d2a1b 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; @@ -14,7 +14,6 @@ import ShortNumber from 'mastodon/components/short_number'; import { NavLink } from 'react-router-dom'; import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container'; import AccountNoteContainer from '../containers/account_note_container'; -import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, @@ -297,12 +296,33 @@ class Header extends ImmutablePureComponent { if(me !== account.get('id') && !blockd_by) { let following_buttons, subscribing_buttons; if(!account.get('moved') || subscribing) { - subscribing_buttons = ; + subscribing_buttons = ( + + ); } if(!account.get('moved') || following) { - following_buttons = ; + following_buttons = ( + + ); } - buttons = {subscribing_buttons}{following_buttons} + buttons = {subscribing_buttons}{following_buttons}; } return ( diff --git a/app/javascript/mastodon/features/directory/components/account_card.js b/app/javascript/mastodon/features/directory/components/account_card.js index f7be95684..d9b606f07 100644 --- a/app/javascript/mastodon/features/directory/components/account_card.js +++ b/app/javascript/mastodon/features/directory/components/account_card.js @@ -10,7 +10,14 @@ import Permalink from 'mastodon/components/permalink'; import RelativeTimestamp from 'mastodon/components/relative_timestamp'; import IconButton from 'mastodon/components/icon_button'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; -import { autoPlayGif, me, unfollowModal, unsubscribeModal, show_followed_by } from 'mastodon/initial_state'; +import { + autoPlayGif, + me, + unfollowModal, + unsubscribeModal, + show_followed_by, + follow_button_to_list_adder, +} from 'mastodon/initial_state'; import ShortNumber from 'mastodon/components/short_number'; import { followAccount, @@ -19,11 +26,10 @@ import { unsubscribeAccount, blockAccount, unblockAccount, - unmuteAccount + unmuteAccount, } from 'mastodon/actions/accounts'; import { openModal } from 'mastodon/actions/modal'; import { initMuteModal } from 'mastodon/actions/mutes'; -import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -262,7 +268,7 @@ class AccountCard extends ImmutablePureComponent { /> ); } - buttons = {subscribing_buttons}{following_buttons} + buttons = {subscribing_buttons}{following_buttons}; } } diff --git a/app/javascript/mastodon/features/group_directory/components/account_card.js b/app/javascript/mastodon/features/group_directory/components/account_card.js index e8a62a950..e41e15208 100644 --- a/app/javascript/mastodon/features/group_directory/components/account_card.js +++ b/app/javascript/mastodon/features/group_directory/components/account_card.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; @@ -10,11 +10,20 @@ import Permalink from 'mastodon/components/permalink'; import RelativeTimestamp from 'mastodon/components/relative_timestamp'; import IconButton from 'mastodon/components/icon_button'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; -import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state'; +import { + autoPlayGif, + me, + unfollowModal, + unsubscribeModal, + show_followed_by, + follow_button_to_list_adder, +} from 'mastodon/initial_state'; import ShortNumber from 'mastodon/components/short_number'; import { followAccount, unfollowAccount, + subscribeAccount, + unsubscribeAccount, blockAccount, unblockAccount, unmuteAccount, @@ -25,6 +34,8 @@ import { initMuteModal } from 'mastodon/actions/mutes'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, + unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe' }, + subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, @@ -32,6 +43,10 @@ const messages = defineMessages({ id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow', }, + unsubscribeConfirm: { + id: 'confirmations.unsubscribe.confirm', + defaultMessage: 'Unsubscribe' + }, }); const makeMapStateToProps = () => { @@ -72,6 +87,28 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, + onSubscribe(account) { + if (account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0) { + if (unsubscribeModal) { + dispatch(openModal('CONFIRM', { + message: @{account.get('acct')} }} />, + confirm: intl.formatMessage(messages.unsubscribeConfirm), + onConfirm: () => dispatch(unsubscribeAccount(account.get('id'))), + })); + } else { + dispatch(unsubscribeAccount(account.get('id'))); + } + } else { + dispatch(subscribeAccount(account.get('id'))); + } + }, + + onAddToList(account){ + dispatch(openModal('LIST_ADDER', { + accountId: account.get('id'), + })); + }, + onBlock(account) { if (account.getIn(['relationship', 'blocking'])) { dispatch(unblockAccount(account.get('id'))); @@ -98,6 +135,8 @@ class AccountCard extends ImmutablePureComponent { account: ImmutablePropTypes.map.isRequired, intl: PropTypes.object.isRequired, onFollow: PropTypes.func.isRequired, + onSubscribe: PropTypes.func.isRequired, + onAddToList: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired, }; @@ -139,8 +178,20 @@ class AccountCard extends ImmutablePureComponent { target.src = target.getAttribute('data-static'); }; - handleFollow = () => { - this.props.onFollow(this.props.account); + handleFollow = (e) => { + if ((e && e.shiftKey) || !follow_button_to_list_adder) { + this.props.onFollow(this.props.account); + } else { + this.props.onAddToList(this.props.account); + } + }; + + handleSubscribe = (e) => { + if ((e && e.shiftKey) || !follow_button_to_list_adder) { + this.props.onSubscribe(this.props.account); + } else { + this.props.onAddToList(this.props.account); + } }; handleBlock = () => { @@ -165,6 +216,10 @@ class AccountCard extends ImmutablePureComponent { account.get('relationship', null) !== null ) { const following = account.getIn(['relationship', 'following']); + const delivery = account.getIn(['relationship', 'delivery_following']); + const followed_by = account.getIn(['relationship', 'followed_by']) && show_followed_by; + const subscribing = account.getIn(['relationship', 'subscribing'], new Map).size > 0; + const subscribing_home = account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0; const requested = account.getIn(['relationship', 'requested']); const blocking = account.getIn(['relationship', 'blocking']); const muting = account.getIn(['relationship', 'muting']); @@ -200,16 +255,35 @@ class AccountCard extends ImmutablePureComponent { /> ); } else if (!account.get('moved') || following) { - buttons = ( - - ); + let following_buttons, subscribing_buttons; + if(!account.get('moved') || subscribing) { + subscribing_buttons = ( + + ); + } + if(!account.get('moved') || following) { + following_buttons = ( + + ); + } + buttons = {subscribing_buttons}{following_buttons}; } } diff --git a/app/javascript/mastodon/features/group_timeline/components/group_detail.js b/app/javascript/mastodon/features/group_timeline/components/group_detail.js index 9f43d47e4..b5a969b13 100644 --- a/app/javascript/mastodon/features/group_timeline/components/group_detail.js +++ b/app/javascript/mastodon/features/group_timeline/components/group_detail.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; @@ -9,11 +9,20 @@ import Avatar from 'mastodon/components/avatar'; import DisplayName from 'mastodon/components/display_name'; import IconButton from 'mastodon/components/icon_button'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; -import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state'; +import { + autoPlayGif, + me, + unfollowModal, + unsubscribeModal, + show_followed_by, + follow_button_to_list_adder, +} from 'mastodon/initial_state'; import ShortNumber from 'mastodon/components/short_number'; import { followAccount, unfollowAccount, + subscribeAccount, + unsubscribeAccount, blockAccount, unblockAccount, unmuteAccount, @@ -24,6 +33,8 @@ import { initMuteModal } from 'mastodon/actions/mutes'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, + unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe' }, + subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, @@ -31,6 +42,10 @@ const messages = defineMessages({ id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow', }, + unsubscribeConfirm: { + id: 'confirmations.unsubscribe.confirm', + defaultMessage: 'Unsubscribe' + }, }); const makeMapStateToProps = () => { @@ -71,6 +86,28 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, + onSubscribe(account) { + if (account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0) { + if (unsubscribeModal) { + dispatch(openModal('CONFIRM', { + message: @{account.get('acct')} }} />, + confirm: intl.formatMessage(messages.unsubscribeConfirm), + onConfirm: () => dispatch(unsubscribeAccount(account.get('id'))), + })); + } else { + dispatch(unsubscribeAccount(account.get('id'))); + } + } else { + dispatch(subscribeAccount(account.get('id'))); + } + }, + + onAddToList(account){ + dispatch(openModal('LIST_ADDER', { + accountId: account.get('id'), + })); + }, + onBlock(account) { if (account.getIn(['relationship', 'blocking'])) { dispatch(unblockAccount(account.get('id'))); @@ -97,6 +134,8 @@ class GroupDetail extends ImmutablePureComponent { account: ImmutablePropTypes.map.isRequired, intl: PropTypes.object.isRequired, onFollow: PropTypes.func.isRequired, + onSubscribe: PropTypes.func.isRequired, + onAddToList: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired, }; @@ -138,8 +177,20 @@ class GroupDetail extends ImmutablePureComponent { target.src = target.getAttribute('data-static'); }; - handleFollow = () => { - this.props.onFollow(this.props.account); + handleFollow = (e) => { + if ((e && e.shiftKey) || !follow_button_to_list_adder) { + this.props.onFollow(this.props.account); + } else { + this.props.onAddToList(this.props.account); + } + }; + + handleSubscribe = (e) => { + if ((e && e.shiftKey) || !follow_button_to_list_adder) { + this.props.onSubscribe(this.props.account); + } else { + this.props.onAddToList(this.props.account); + } }; handleBlock = () => { @@ -163,10 +214,14 @@ class GroupDetail extends ImmutablePureComponent { account.get('id') !== me && account.get('relationship', null) !== null ) { - const following = account.getIn(['relationship', 'following']); - const requested = account.getIn(['relationship', 'requested']); - const blocking = account.getIn(['relationship', 'blocking']); - const muting = account.getIn(['relationship', 'muting']); + const following = account.getIn(['relationship', 'following']); + const delivery = account.getIn(['relationship', 'delivery_following']); + const followed_by = account.getIn(['relationship', 'followed_by']) && show_followed_by; + const subscribing = account.getIn(['relationship', 'subscribing'], new Map).size > 0; + const subscribing_home = account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0; + const requested = account.getIn(['relationship', 'requested']); + const blocking = account.getIn(['relationship', 'blocking']); + const muting = account.getIn(['relationship', 'muting']); if (requested) { buttons = ( @@ -199,16 +254,35 @@ class GroupDetail extends ImmutablePureComponent { /> ); } else if (!account.get('moved') || following) { - buttons = ( - - ); + let following_buttons, subscribing_buttons; + if(!account.get('moved') || subscribing) { + subscribing_buttons = ( + + ); + } + if(!account.get('moved') || following) { + following_buttons = ( + + ); + } + buttons = {subscribing_buttons}{following_buttons}; } } diff --git a/app/javascript/mastodon/features/list_adder/components/account.js b/app/javascript/mastodon/features/list_adder/components/account.js index 22f340371..344b1df0a 100644 --- a/app/javascript/mastodon/features/list_adder/components/account.js +++ b/app/javascript/mastodon/features/list_adder/components/account.js @@ -10,7 +10,6 @@ import { unfollowAccount, followAccount } from '../../../actions/accounts'; import { me, show_followed_by, unfollowModal } from '../../../initial_state'; import { openModal } from '../../../actions/modal'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 3a228432b..83736e339 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6165,7 +6165,7 @@ a.status-card.compact:hover { } &__relationship { - width: 23px; + width: 46px; min-height: 1px; flex: 0 0 auto; }