diff options
author | Starfall <us@starfall.systems> | 2022-06-06 14:06:41 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2022-06-06 14:06:41 -0500 |
commit | 6e1ebaca0d241d3e9047382e47d7b7136bc4d404 (patch) | |
tree | 4257f127bd9f10897182914602b31b1ecef401f7 /app/javascript/flavours/glitch/components | |
parent | bd872c93333b90f85d90bc60f5690537bee15ee2 (diff) | |
parent | 3d841eba69b340aac4f012fb388f9e9761ec2ba5 (diff) |
Merge remote-tracking branch 'glitch/main'
Diffstat (limited to 'app/javascript/flavours/glitch/components')
5 files changed, 76 insertions, 77 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 21f0e3a6f..8a5fda676 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -67,7 +67,6 @@ class Status extends ImmutablePureComponent { containerId: PropTypes.string, id: PropTypes.string, status: ImmutablePropTypes.map, - otherAccounts: ImmutablePropTypes.list, account: ImmutablePropTypes.map, onReply: PropTypes.func, onFavourite: PropTypes.func, @@ -100,6 +99,7 @@ class Status extends ImmutablePureComponent { scrollKey: PropTypes.string, deployPictureInPicture: PropTypes.func, usingPiP: PropTypes.bool, + settings: ImmutablePropTypes.map.isRequired, }; state = { @@ -491,7 +491,6 @@ class Status extends ImmutablePureComponent { intl, status, account, - otherAccounts, settings, collapsed, muted, @@ -744,7 +743,6 @@ class Status extends ImmutablePureComponent { friend={account} collapsed={isCollapsed} parseClick={parseClick} - otherAccounts={otherAccounts} /> ) : null} </span> @@ -754,7 +752,7 @@ class Status extends ImmutablePureComponent { collapsible={settings.getIn(['collapsed', 'enabled'])} collapsed={isCollapsed} setCollapsed={setCollapsed} - directMessage={!!otherAccounts} + settings={settings.get('status_icons')} /> </header> <StatusContent @@ -774,7 +772,6 @@ class Status extends ImmutablePureComponent { status={status} account={status.get('account')} showReplyCount={settings.get('show_reply_count')} - directMessage={!!otherAccounts} onFilter={this.handleFilterClick} /> ) : null} diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js index 68d93cd67..0a5c5b69d 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.js +++ b/app/javascript/flavours/glitch/components/status_action_bar.js @@ -67,7 +67,6 @@ class StatusActionBar extends ImmutablePureComponent { onFilter: PropTypes.func, withDismiss: PropTypes.bool, showReplyCount: PropTypes.bool, - directMessage: PropTypes.bool, scrollKey: PropTypes.string, intl: PropTypes.object.isRequired, }; @@ -197,7 +196,7 @@ class StatusActionBar extends ImmutablePureComponent { } render () { - const { status, intl, withDismiss, showReplyCount, directMessage, scrollKey } = this.props; + const { status, intl, withDismiss, showReplyCount, scrollKey } = this.props; const anonymousAccess = !me; const mutingConversation = status.get('muted'); @@ -311,25 +310,24 @@ class StatusActionBar extends ImmutablePureComponent { return ( <div className='status__action-bar'> {replyButton} - {!directMessage && [ - <IconButton key='reblog-button' className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} onClick={this.handleReblogClick} />, - <IconButton key='favourite-button' className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />, - shareButton, - <IconButton key='bookmark-button' className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />, - filterButton, - <div key='dropdown-button' className='status__action-bar-dropdown'> - <DropdownMenuContainer - scrollKey={scrollKey} - disabled={anonymousAccess} - status={status} - items={menu} - icon='ellipsis-h' - size={18} - direction='right' - ariaLabel={intl.formatMessage(messages.more)} - /> - </div>, - ]} + <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} onClick={this.handleReblogClick} /> + <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> + {shareButton} + <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /> + {filterButton} + + <div className='status__action-bar-dropdown'> + <DropdownMenuContainer + scrollKey={scrollKey} + disabled={anonymousAccess} + status={status} + items={menu} + icon='ellipsis-h' + size={18} + direction='right' + ariaLabel={intl.formatMessage(messages.more)} + /> + </div> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'> <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>} diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 1d32b35e5..6a027f8d2 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -267,6 +267,7 @@ export default class StatusContent extends React.PureComponent { const content = { __html: status.get('contentHtml') }; const spoilerContent = { __html: status.get('spoilerHtml') }; + const lang = status.get('language'); const classNames = classnames('status__content', { 'status__content--with-action': parseClick && !disabled, 'status__content--with-spoiler': status.get('spoiler_text').length > 0, @@ -327,7 +328,7 @@ export default class StatusContent extends React.PureComponent { <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} > - <span dangerouslySetInnerHTML={spoilerContent} className='translate' /> + <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={lang} /> {' '} <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> {toggleText} @@ -345,6 +346,7 @@ export default class StatusContent extends React.PureComponent { className='status__content__text translate' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} + lang={lang} /> {media} </div> @@ -367,6 +369,7 @@ export default class StatusContent extends React.PureComponent { tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} + lang={lang} /> {media} </div> @@ -385,6 +388,7 @@ export default class StatusContent extends React.PureComponent { tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} + lang={lang} /> {media} </div> diff --git a/app/javascript/flavours/glitch/components/status_header.js b/app/javascript/flavours/glitch/components/status_header.js index cc476139b..990dea536 100644 --- a/app/javascript/flavours/glitch/components/status_header.js +++ b/app/javascript/flavours/glitch/components/status_header.js @@ -15,7 +15,6 @@ export default class StatusHeader extends React.PureComponent { status: ImmutablePropTypes.map.isRequired, friend: ImmutablePropTypes.map, parseClick: PropTypes.func.isRequired, - otherAccounts: ImmutablePropTypes.list, }; // Handles clicks on account name/image @@ -34,57 +33,39 @@ export default class StatusHeader extends React.PureComponent { const { status, friend, - otherAccounts, } = this.props; const account = status.get('account'); let statusAvatar; - if (otherAccounts && otherAccounts.size > 0) { - statusAvatar = <AvatarComposite accounts={otherAccounts} size={48} onAccountClick={this.handleClick} />; - } else if (friend === undefined || friend === null) { + if (friend === undefined || friend === null) { statusAvatar = <Avatar account={account} size={48} />; } else { statusAvatar = <AvatarOverlay account={account} friend={friend} />; } - if (!otherAccounts) { - return ( - <div className='status__info__account'> - <a - href={account.get('url')} - target='_blank' - className='status__avatar' - onClick={this.handleAccountClick} - rel='noopener noreferrer' - > - {statusAvatar} - </a> - <a - href={account.get('url')} - target='_blank' - className='status__display-name' - onClick={this.handleAccountClick} - rel='noopener noreferrer' - > - <DisplayName account={account} others={otherAccounts} /> - </a> - </div> - ); - } else { - // This is a DM conversation - return ( - <div className='status__info__account'> - <span className='status__avatar'> - {statusAvatar} - </span> - - <span className='status__display-name'> - <DisplayName account={account} others={otherAccounts} onAccountClick={this.handleClick} /> - </span> - </div> - ); - } + return ( + <div className='status__info__account'> + <a + href={account.get('url')} + target='_blank' + className='status__avatar' + onClick={this.handleAccountClick} + rel='noopener noreferrer' + > + {statusAvatar} + </a> + <a + href={account.get('url')} + target='_blank' + className='status__display-name' + onClick={this.handleAccountClick} + rel='noopener noreferrer' + > + <DisplayName account={account} /> + </a> + </div> + ); } } diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js index e66947f4a..2226aaef2 100644 --- a/app/javascript/flavours/glitch/components/status_icons.js +++ b/app/javascript/flavours/glitch/components/status_icons.js @@ -8,6 +8,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import IconButton from './icon_button'; import VisibilityIcon from './status_visibility_icon'; import Icon from 'flavours/glitch/components/icon'; +import { languages } from 'flavours/glitch/util/initial_state'; // Messages for use with internationalization stuff. const messages = defineMessages({ @@ -22,6 +23,23 @@ const messages = defineMessages({ localOnly: { id: 'status.local_only', defaultMessage: 'Only visible from your instance' }, }); +const LanguageIcon = ({ language }) => { + if (!languages) return null; + + const lang = languages.find((lang) => lang[0] === language); + if (!lang) return null; + + return ( + <span className='text-icon' title={`${lang[2]} (${lang[1]})`} aria-hidden='true'> + {lang[0].toUpperCase()} + </span> + ); +}; + +LanguageIcon.propTypes = { + language: PropTypes.string.isRequired, +}; + export default @injectIntl class StatusIcons extends React.PureComponent { @@ -30,9 +48,9 @@ class StatusIcons extends React.PureComponent { mediaIcons: PropTypes.arrayOf(PropTypes.string), collapsible: PropTypes.bool, collapsed: PropTypes.bool, - directMessage: PropTypes.bool, setCollapsed: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + settings: ImmutablePropTypes.map.isRequired, }; // Handles clicks on collapsed button @@ -81,13 +99,14 @@ class StatusIcons extends React.PureComponent { mediaIcons, collapsible, collapsed, - directMessage, + settings, intl, } = this.props; return ( <div className='status__info__icons'> - {status.get('in_reply_to_id', null) !== null ? ( + {settings.get('language') && status.get('language') && <LanguageIcon language={status.get('language')} />} + {settings.get('reply') && status.get('in_reply_to_id', null) !== null ? ( <Icon className='status__reply-icon' fixedWidth @@ -96,16 +115,16 @@ class StatusIcons extends React.PureComponent { title={intl.formatMessage(messages.inReplyTo)} /> ) : null} - {status.get('local_only') && + {settings.get('local_only') && status.get('local_only') && <Icon fixedWidth id='home' aria-hidden='true' title={intl.formatMessage(messages.localOnly)} />} - { !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon)) } - {!directMessage && <VisibilityIcon visibility={status.get('visibility')} />} - {collapsible ? ( + {settings.get('media') && !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon))} + {settings.get('visibility') && <VisibilityIcon visibility={status.get('visibility')} />} + {collapsible && ( <IconButton className='status__collapse-button' animate @@ -118,7 +137,7 @@ class StatusIcons extends React.PureComponent { icon='angle-double-up' onClick={this.handleCollapsedClick} /> - ) : null} + )} </div> ); } |