Add language indicator icon and local settings for status icons (#1788)

* Add language indicator

* Add local settings for status icons

* Switch to text icon for language
This commit is contained in:
Claire 2022-05-27 16:34:29 +02:00 committed by GitHub
parent 6dd7180f05
commit 53c89ee44b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 10 deletions

View file

@ -100,6 +100,7 @@ class Status extends ImmutablePureComponent {
scrollKey: PropTypes.string, scrollKey: PropTypes.string,
deployPictureInPicture: PropTypes.func, deployPictureInPicture: PropTypes.func,
usingPiP: PropTypes.bool, usingPiP: PropTypes.bool,
settings: ImmutablePropTypes.map.isRequired,
}; };
state = { state = {
@ -755,6 +756,7 @@ class Status extends ImmutablePureComponent {
collapsed={isCollapsed} collapsed={isCollapsed}
setCollapsed={setCollapsed} setCollapsed={setCollapsed}
directMessage={!!otherAccounts} directMessage={!!otherAccounts}
settings={settings.get('status_icons')}
/> />
</header> </header>
<StatusContent <StatusContent

View file

@ -8,6 +8,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import IconButton from './icon_button'; import IconButton from './icon_button';
import VisibilityIcon from './status_visibility_icon'; import VisibilityIcon from './status_visibility_icon';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import { languages } from 'flavours/glitch/util/initial_state';
// Messages for use with internationalization stuff. // Messages for use with internationalization stuff.
const messages = defineMessages({ const messages = defineMessages({
@ -22,6 +23,23 @@ const messages = defineMessages({
localOnly: { id: 'status.local_only', defaultMessage: 'Only visible from your instance' }, 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 export default @injectIntl
class StatusIcons extends React.PureComponent { class StatusIcons extends React.PureComponent {
@ -33,6 +51,7 @@ class StatusIcons extends React.PureComponent {
directMessage: PropTypes.bool, directMessage: PropTypes.bool,
setCollapsed: PropTypes.func.isRequired, setCollapsed: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
settings: ImmutablePropTypes.map.isRequired,
}; };
// Handles clicks on collapsed button // Handles clicks on collapsed button
@ -82,12 +101,14 @@ class StatusIcons extends React.PureComponent {
collapsible, collapsible,
collapsed, collapsed,
directMessage, directMessage,
settings,
intl, intl,
} = this.props; } = this.props;
return ( return (
<div className='status__info__icons'> <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 <Icon
className='status__reply-icon' className='status__reply-icon'
fixedWidth fixedWidth
@ -96,16 +117,16 @@ class StatusIcons extends React.PureComponent {
title={intl.formatMessage(messages.inReplyTo)} title={intl.formatMessage(messages.inReplyTo)}
/> />
) : null} ) : null}
{status.get('local_only') && {settings.get('local_only') && status.get('local_only') &&
<Icon <Icon
fixedWidth fixedWidth
id='home' id='home'
aria-hidden='true' aria-hidden='true'
title={intl.formatMessage(messages.localOnly)} title={intl.formatMessage(messages.localOnly)}
/>} />}
{ !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon)) } {settings.get('media') && !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon))}
{!directMessage && <VisibilityIcon visibility={status.get('visibility')} />} {settings.get('visibility') && !directMessage && <VisibilityIcon visibility={status.get('visibility')} />}
{collapsible ? ( {collapsible && (
<IconButton <IconButton
className='status__collapse-button' className='status__collapse-button'
animate animate
@ -118,7 +139,7 @@ class StatusIcons extends React.PureComponent {
icon='angle-double-up' icon='angle-double-up'
onClick={this.handleCollapsedClick} onClick={this.handleCollapsedClick}
/> />
) : null} )}
</div> </div>
); );
} }

View file

@ -117,6 +117,50 @@ class LocalSettingsPage extends React.PureComponent {
<span className='hint'><FormattedMessage id='settings.notifications.favicon_badge.hint' defaultMessage="Add a badge for unread notifications to the favicon" /></span> <span className='hint'><FormattedMessage id='settings.notifications.favicon_badge.hint' defaultMessage="Add a badge for unread notifications to the favicon" /></span>
</LocalSettingsPageItem> </LocalSettingsPageItem>
</section> </section>
<section>
<h2><FormattedMessage id='settings.status_icons' defaultMessage='Toot icons' /></h2>
<LocalSettingsPageItem
settings={settings}
item={['status_icons', 'language']}
id='mastodon-settings--status-icons-language'
onChange={onChange}
>
<FormattedMessage id='settings.status_icons_language' defaultMessage='Language indicator' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['status_icons', 'reply']}
id='mastodon-settings--status-icons-reply'
onChange={onChange}
>
<FormattedMessage id='settings.status_icons_reply' defaultMessage='Reply indicator' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['status_icons', 'local_only']}
id='mastodon-settings--status-icons-local_only'
onChange={onChange}
>
<FormattedMessage id='settings.status_icons_local_only' defaultMessage='Local-only indicator' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['status_icons', 'media']}
id='mastodon-settings--status-icons-media'
onChange={onChange}
>
<FormattedMessage id='settings.status_icons_media' defaultMessage='Media and poll indicators' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['status_icons', 'visibility']}
id='mastodon-settings--status-icons-visibility'
onChange={onChange}
>
<FormattedMessage id='settings.status_icons_visibility' defaultMessage='Toot privacy indicator' />
</LocalSettingsPageItem>
</section>
<section> <section>
<h2><FormattedMessage id='settings.layout_opts' defaultMessage='Layout options' /></h2> <h2><FormattedMessage id='settings.layout_opts' defaultMessage='Layout options' /></h2>
<LocalSettingsPageItem <LocalSettingsPageItem

View file

@ -54,6 +54,13 @@ const initialState = ImmutableMap({
favicon_badge : false, favicon_badge : false,
tab_badge : true, tab_badge : true,
}), }),
status_icons : ImmutableMap({
language: true,
reply: true,
local_only: true,
media: true,
visibility: true,
}),
}); });
const hydrate = (state, localSettings) => state.mergeDeep(localSettings); const hydrate = (state, localSettings) => state.mergeDeep(localSettings);

View file

@ -239,16 +239,21 @@
} }
} }
.text-icon,
.text-icon-button { .text-icon-button {
color: $lighter-text-color; color: $lighter-text-color;
font-weight: 600;
font-size: 11px;
line-height: 27px;
cursor: default;
}
.text-icon-button {
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-weight: 600;
font-size: 11px;
padding: 0 3px; padding: 0 3px;
line-height: 27px;
outline: 0; outline: 0;
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;

View file

@ -488,7 +488,8 @@
.status__media-icon, .status__media-icon,
.status__visibility-icon, .status__visibility-icon,
.status__reply-icon { .status__reply-icon,
.text-icon {
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }