diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
6 files changed, 90 insertions, 10 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 21f0e3a6f..2201cb382 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -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 diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js index e66947f4a..b701c4eeb 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 { @@ -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> ); } diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 4b86a8f6f..2490b6e2d 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -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 diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index a16c337fc..d4cdc124f 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -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); diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 373280fc4..f015d898e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -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; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 1534ba913..cc424f941 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -488,7 +488,8 @@ .status__media-icon, .status__visibility-icon, - .status__reply-icon { + .status__reply-icon, + .text-icon { padding-left: 2px; padding-right: 2px; } |