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:
parent
6dd7180f05
commit
53c89ee44b
6 changed files with 90 additions and 10 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue