Add: #56 投稿のブーストボタンをクリックしたらポップアップメニューが出るオプション (#696)

* Add: #56 投稿のブーストボタンをクリックしたらポップアップメニューが出るオプション * ブースト時に確認ダイアログを表示する設定との兼ね合いでメニュー項目を削除
2024-04-05 12:32:47 +09:00 · 2024-04-05 12:32:47 +09:00 · 69ba7a70d5
commit 69ba7a70d5
parent a2dbc4a818
14 changed files with 127 additions and 36 deletions
--- a/app/javascript/mastodon/components/dropdown_menu.jsx
+++ b/app/javascript/mastodon/components/dropdown_menu.jsx
@ -170,6 +170,7 @@ class Dropdown extends PureComponent {
    title: PropTypes.string,
    disabled: PropTypes.bool,
    scrollable: PropTypes.bool,
+    active: PropTypes.bool,
    status: ImmutablePropTypes.map,
    isUserTouching: PropTypes.func,
    onOpen: PropTypes.func.isRequired,
@ -284,6 +285,7 @@ class Dropdown extends PureComponent {
      children,
      renderItem,
      renderHeader,
+      active,
    } = this.props;

    const open = this.state.id === openDropdownId;
@ -299,7 +301,7 @@ class Dropdown extends PureComponent {
        icon={!open ? icon : 'close'}
        iconComponent={iconComponent}
        title={title}
-        active={open}
+        active={open || active}
        disabled={disabled}
        size={size}
        onClick={this.handleClick}
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@ -29,7 +29,7 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';

 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
-import { enableEmojiReaction , bookmarkCategoryNeeded, simpleTimelineMenu, me, isHideItem } from '../initial_state';
+import { enableEmojiReaction , bookmarkCategoryNeeded, simpleTimelineMenu, me, isHideItem, boostMenu, boostModal } from '../initial_state';

 import { IconButton } from './icon_button';

@ -48,6 +48,7 @@ const messages = defineMessages({
  more: { id: 'status.more', defaultMessage: 'More' },
  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
  reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
+  reblog_with_detail: { id: 'status.reblog_with_detail', defaultMessage: 'Boost with visibility' },
  cancelReblog: { id: 'status.cancel_reblog', defaultMessage: 'Unboost' },
  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
@ -345,16 +346,16 @@ class StatusActionBar extends ImmutablePureComponent {
        menu.push(null);
      }

-      if (status.get('visibility_ex') !== 'limited') {
-        menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancelReblog : messages.reblog), action: this.handleReblogForceModalClick });
-      }
+      if (!boostMenu) {
+        menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancelReblog : messages.reblog), action: this.handleReblogForceModalClick, tag: 'reblog' });

-      if (publicStatus) {
-        if (allowQuote) {
-          menu.push({ text: intl.formatMessage(messages.quote), action: this.handleQuote });
+        if (publicStatus) {
+          if (allowQuote) {
+            menu.push({ text: intl.formatMessage(messages.quote), action: this.handleQuote, tag: 'reblog' });
+          }
+
+          menu.push({ text: intl.formatMessage(messages.reference), action: this.handleReference, tag: 'reblog' });
        }
-
-        menu.push({ text: intl.formatMessage(messages.reference), action: this.handleReference });
      }

      menu.push({ text: intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark), action: this.handleBookmarkClickOriginal });
@ -428,6 +429,24 @@ class StatusActionBar extends ImmutablePureComponent {
      }
    }

+    let reblogMenu = [];
+
+    if (boostMenu) {
+      reblogMenu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancelReblog : messages.reblog), action: this.handleReblogClick });
+
+      if (!status.get('reblogged') && !boostModal) {
+        reblogMenu.push({ text: intl.formatMessage(messages.reblog_with_detail), action: this.handleReblogForceModalClick });
+      }
+  
+      if (publicStatus) {
+        if (allowQuote) {
+          reblogMenu.push({ text: intl.formatMessage(messages.quote), action: this.handleQuote });
+        }
+  
+        reblogMenu.push({ text: intl.formatMessage(messages.reference), action: this.handleReference });
+      }
+    }
+
    let replyIcon;
    let replyIconComponent;
    let replyTitle;
@ -458,6 +477,8 @@ class StatusActionBar extends ImmutablePureComponent {
    } else {
      reblogTitle = intl.formatMessage(messages.cannot_reblog);
      reblogIconComponent = RepeatDisabledIcon;
+      menu = menu.filter((item) => !item?.tag || item.tag !== 'reblog');
+      reblogMenu = [];
    }

    const filterButton = this.props.onFilter && (
@ -484,7 +505,22 @@ class StatusActionBar extends ImmutablePureComponent {
    return (
      <div className='status__action-bar'>
        <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
-        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        {reblogMenu.length === 0 ? (
+          <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        ) : (
+          <DropdownMenuContainer
+            className={classNames('status__action-bar__button', { reblogPrivate })}
+            scrollKey={scrollKey}
+            status={status}
+            items={reblogMenu}
+            icon='retweet'
+            iconComponent={reblogIconComponent}
+            direction='right'
+            title={reblogTitle}
+            active={status.get('reblogged')}
+            disabled={!publicStatus && !reblogPrivate}
+          />
+        )}
        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} 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' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
        {emojiPickerDropdown}
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@ -28,7 +28,7 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';

 import { IconButton } from '../../../components/icon_button';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
-import { enableEmojiReaction , bookmarkCategoryNeeded, me, isHideItem } from '../../../initial_state';
+import { enableEmojiReaction , bookmarkCategoryNeeded, me, isHideItem, boostMenu, boostModal } from '../../../initial_state';
 import EmojiPickerDropdown from '../../compose/containers/emoji_picker_dropdown_container';

 const messages = defineMessages({
@ -40,6 +40,7 @@ const messages = defineMessages({
  mentions: { id: 'status.mentions', defaultMessage: 'Mentioned users' },
  reply: { id: 'status.reply', defaultMessage: 'Reply' },
  reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
+  reblog_with_detail: { id: 'status.reblog_with_detail', defaultMessage: 'Boost with visibility' },
  cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
@ -272,17 +273,18 @@ class ActionBar extends PureComponent {
    if (signedIn) {
      menu.push(null);

-      if (status.get('visibility_ex') !== 'limited') {
-        menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog : messages.reblog), action: this.handleReblogForceModalClick });
-      }
+      if (!boostMenu) {
+        menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog : messages.reblog), action: this.handleReblogForceModalClick, tag: 'reblog' });

-      if (publicStatus) {
-        if (allowQuote) {
-          menu.push({ text: intl.formatMessage(messages.quote), action: this.handleQuote });
+        if (publicStatus) {
+          if (allowQuote) {
+            menu.push({ text: intl.formatMessage(messages.quote), action: this.handleQuote, tag: 'reblog' });
+          }
+  
+          menu.push({ text: intl.formatMessage(messages.reference), action: this.handleReference, tag: 'reblog' });
        }
-
-        menu.push({ text: intl.formatMessage(messages.reference), action: this.handleReference });
      }
+
      menu.push({ text: intl.formatMessage(messages.bookmark_category), action: this.handleBookmarkCategoryAdderClick });

      if (writtenByMe) {
@ -344,6 +346,24 @@ class ActionBar extends PureComponent {
      }
    }

+    let reblogMenu = [];
+
+    if (boostMenu) {
+      reblogMenu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog : messages.reblog), action: this.handleReblogClick });
+
+      if (!status.get('reblogged') && !boostModal) {
+        reblogMenu.push({ text: intl.formatMessage(messages.reblog_with_detail), action: this.handleReblogForceModalClick });
+      }
+  
+      if (publicStatus) {
+        if (allowQuote) {
+          reblogMenu.push({ text: intl.formatMessage(messages.quote), action: this.handleQuote });
+        }
+  
+        reblogMenu.push({ text: intl.formatMessage(messages.reference), action: this.handleReference });
+      }
+    }
+
    let replyIcon;
    let replyIconComponent;

@ -371,6 +391,8 @@ class ActionBar extends PureComponent {
    } else {
      reblogTitle = intl.formatMessage(messages.cannot_reblog);
      reblogIconComponent = RepeatDisabledIcon;
+      menu = menu.filter((item) => !item?.tag || item.tag !== 'reblog');
+      reblogMenu = [];
    }

    const emojiReactionAvailableServer = !isHideItem('emoji_reaction_unavailable_server') || account.get('emoji_reaction_available_server');
@ -393,7 +415,23 @@ 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} iconComponent={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? ReplyIcon : replyIconComponent}  onClick={this.handleReplyClick} /></div>
-        <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} /></div>
+        {reblogMenu.length === 0 ? (
+          <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} /></div>
+        ) : (
+          <div className='detailed-status__button'>
+            <DropdownMenuContainer
+              className={classNames({ reblogPrivate })}
+              icon='retweet'
+              iconComponent={reblogIconComponent}
+              status={status}
+              items={reblogMenu}
+              direction='left'
+              title={reblogTitle}
+              active={status.get('reblogged')}
+              disabled={!publicStatus && !reblogPrivate}
+            />
+          </div>
+        )}
        <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} 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' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} /></div>
        {emojiPickerDropdown}
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@ -56,7 +56,8 @@
 * @property {string} repository
 * @property {boolean} search_enabled
 * @property {boolean} trends_enabled
- * @property {string} simple_timeline_menu
+ * @property {boolean} simple_timeline_menu
+ * @property {boolean} boost_menu
 * @property {boolean} single_user_mode
 * @property {string} source_url
 * @property {string} streaming_api_base_url
@ -145,6 +146,7 @@ export const searchEnabled = getMeta('search_enabled');
 export const trendsEnabled = getMeta('trends_enabled');
 export const showTrends = getMeta('show_trends');
 export const simpleTimelineMenu = getMeta('simple_timeline_menu');
+export const boostMenu = getMeta('boost_menu');
 export const singleUserMode = getMeta('single_user_mode');
 export const source_url = getMeta('source_url');
 export const timelinePreview = getMeta('timeline_preview');
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@ -892,6 +892,7 @@
  "status.read_more": "Read more",
  "status.reblog": "Boost",
  "status.reblog_private": "Boost with original visibility",
+  "status.reblog_with_detail": "Boost with visibility",
  "status.reblogged_by": "{name} boosted",
  "status.reblogs": "{count, plural, one {boost} other {boosts}}",
  "status.reblogs.empty": "No one has boosted this post yet. When someone does, they will show up here.",
--- a/app/javascript/mastodon/locales/ja.json
+++ b/app/javascript/mastodon/locales/ja.json
@ -832,6 +832,7 @@
  "status.block": "@{name}さんをブロック",
  "status.bookmark": "ブックマーク",
  "status.bookmark_category": "ブックマーク分類を指定",
+  "status.cancel_reblog": "ブースト解除",
  "status.cancel_reblog_private": "ブースト解除",
  "status.cannot_reblog": "この投稿はブーストできません",
  "status.copy": "投稿へのリンクをコピー",
@ -875,6 +876,7 @@
  "status.read_more": "もっと見る",
  "status.reblog": "ブースト",
  "status.reblog_private": "ブースト",
+  "status.reblog_with_detail": "公開範囲を指定してブースト",
  "status.reblogged_by": "{name}さんがブースト",
  "status.reblogs.empty": "まだ誰もブーストしていません。ブーストされるとここに表示されます。",
  "status.redraft": "削除して下書きに戻す",