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

View File

@ -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 {
@ -33,6 +51,7 @@ class StatusIcons extends React.PureComponent {
directMessage: PropTypes.bool,
setCollapsed: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
settings: ImmutablePropTypes.map.isRequired,
};
// Handles clicks on collapsed button
@ -82,12 +101,14 @@ class StatusIcons extends React.PureComponent {
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 +117,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') && !directMessage && <VisibilityIcon visibility={status.get('visibility')} />}
{collapsible && (
<IconButton
className='status__collapse-button'
animate
@ -118,7 +139,7 @@ class StatusIcons extends React.PureComponent {
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
) : null}
)}
</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>
</LocalSettingsPageItem>
</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>
<h2><FormattedMessage id='settings.layout_opts' defaultMessage='Layout options' /></h2>
<LocalSettingsPageItem

View File

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

View File

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

View File

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