forked from treehouse/mastodon
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 languagesignup-info-prompt
parent
6dd7180f05
commit
53c89ee44b
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -488,7 +488,8 @@
|
|||
|
||||
.status__media-icon,
|
||||
.status__visibility-icon,
|
||||
.status__reply-icon {
|
||||
.status__reply-icon,
|
||||
.text-icon {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue