From 53c89ee44b9d5cb22553d8e602777084d146749a Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 27 May 2022 16:34:29 +0200 Subject: [PATCH] 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 --- .../flavours/glitch/components/status.js | 2 + .../glitch/components/status_icons.js | 33 +++++++++++--- .../features/local_settings/page/index.js | 44 +++++++++++++++++++ .../glitch/reducers/local_settings.js | 7 +++ .../glitch/styles/components/index.scss | 11 +++-- .../glitch/styles/components/status.scss | 3 +- 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 21f0e3a6f1..2201cb3822 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')} /> { + if (!languages) return null; + + const lang = languages.find((lang) => lang[0] === language); + if (!lang) return null; + + return ( + + ); +}; + +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 (
- {status.get('in_reply_to_id', null) !== null ? ( + {settings.get('language') && status.get('language') && } + {settings.get('reply') && status.get('in_reply_to_id', null) !== null ? ( ) : null} - {status.get('local_only') && + {settings.get('local_only') && status.get('local_only') &&
); } 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 4b86a8f6f1..2490b6e2db 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 { + +
+

+ + + + + + + + + + + + + + + +

state.mergeDeep(localSettings); diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 373280fc43..f015d898ed 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 1534ba9139..cc424f941c 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; }