From 1caa5ff39e95f01eb74ee71b76eaa6c0fd7309fd Mon Sep 17 00:00:00 2001 From: Eugen Rochko <eugen@zeonfederated.com> Date: Wed, 24 May 2023 11:04:43 +0200 Subject: [PATCH] Change share action from being in action bar to being in dropdown in web UI (#25105) Co-authored-by: Claire <claire.github-309c@sitedethib.com> --- .../mastodon/components/status_action_bar.jsx | 11 ++++------- .../features/account/components/header.jsx | 1 - .../features/status/components/action_bar.jsx | 14 ++++++-------- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx index 83c5ef0e4..936a66080 100644 --- a/app/javascript/mastodon/components/status_action_bar.jsx +++ b/app/javascript/mastodon/components/status_action_bar.jsx @@ -114,7 +114,6 @@ class StatusActionBar extends ImmutablePureComponent { handleShareClick = () => { navigator.share({ - text: this.props.status.get('search_index'), url: this.props.status.get('url'), }).catch((e) => { if (e.name !== 'AbortError') console.error(e); @@ -256,6 +255,10 @@ class StatusActionBar extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy }); + if (publicStatus && 'share' in navigator) { + menu.push({ text: intl.formatMessage(messages.share), action: this.handleShareClick }); + } + if (publicStatus) { menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed }); } @@ -352,10 +355,6 @@ class StatusActionBar extends ImmutablePureComponent { reblogTitle = intl.formatMessage(messages.cannot_reblog); } - const shareButton = ('share' in navigator) && publicStatus && ( - <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} /> - ); - const filterButton = this.props.onFilter && ( <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} /> ); @@ -367,8 +366,6 @@ class StatusActionBar extends ImmutablePureComponent { <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} /> <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /> - {shareButton} - {filterButton} <div className='status__action-bar__dropdown'> diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index 6ebb29ab2..e9e5934f4 100644 --- a/app/javascript/mastodon/features/account/components/header.jsx +++ b/app/javascript/mastodon/features/account/components/header.jsx @@ -165,7 +165,6 @@ class Header extends ImmutablePureComponent { const { account } = this.props; navigator.share({ - text: `${titleFromAccount(account)}\n${account.get('note_plain')}`, url: account.get('url'), }).catch((e) => { if (e.name !== 'AbortError') console.error(e); diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx index bc5aed442..bd565c72c 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.jsx +++ b/app/javascript/mastodon/features/status/components/action_bar.jsx @@ -169,7 +169,6 @@ class ActionBar extends PureComponent { handleShare = () => { navigator.share({ - text: this.props.status.get('search_index'), url: this.props.status.get('url'), }); }; @@ -202,6 +201,11 @@ class ActionBar extends PureComponent { } menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy }); + + if ('share' in navigator) { + menu.push({ text: intl.formatMessage(messages.share), action: this.handleShare }); + } + menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed }); menu.push(null); } @@ -260,10 +264,6 @@ class ActionBar extends PureComponent { } } - const shareButton = ('share' in navigator) && publicStatus && ( - <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div> - ); - let replyIcon; if (status.get('in_reply_to_id', null) === null) { replyIcon = 'reply'; @@ -287,12 +287,10 @@ class ActionBar extends PureComponent { 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 className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div> + <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div> <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div> <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div> - {shareButton} - <div className='detailed-status__action-bar-dropdown'> <DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} /> </div>