me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor visibility icon using VisibilityIcon

Browse source
This commit is contained in:
Claire 2022-05-03 11:04:09 +02:00
parent 6e8284756b
commit d748d0b94a
2 changed files with 4 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/javascript/flavours/glitch/features/ui/components/boost_modal.js
View file

@ -14,14 +14,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown'; import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown';
import classNames from 'classnames'; import classNames from 'classnames';
import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts'; import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts';
import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
const messages = defineMessages({ const messages = defineMessages({
cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' }, cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
}); });
const mapStateToProps = state => { const mapStateToProps = state => {
@ -85,15 +82,6 @@ class BoostModal extends ImmutablePureComponent {
const { status, missingMediaDescription, privacy, intl } = this.props; const { status, missingMediaDescription, privacy, intl } = this.props;
const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog; const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog;
const visibilityIconInfo = {
'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) },
};
const visibilityIcon = visibilityIconInfo[status.get('visibility')];
return ( return (
<div className='modal-root__modal boost-modal'> <div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'> <div className='boost-modal__container'>
@ -101,7 +89,7 @@ class BoostModal extends ImmutablePureComponent {
<div className='boost-modal__status-header'> <div className='boost-modal__status-header'>
<div className='boost-modal__status-time'> <div className='boost-modal__status-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span> <VisibilityIcon visibility={status.get('visibility')} />
<RelativeTimestamp timestamp={status.get('created_at')} /></a> <RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div> </div>

16
app/javascript/flavours/glitch/features/ui/components/favourite_modal.js
View file

@ -11,13 +11,10 @@ import AttachmentList from 'flavours/glitch/components/attachment_list';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames'; import classNames from 'classnames';
import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
const messages = defineMessages({ const messages = defineMessages({
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
}); });
export default @injectIntl export default @injectIntl
@ -60,15 +57,6 @@ class FavouriteModal extends ImmutablePureComponent {
render () { render () {
const { status, intl } = this.props; const { status, intl } = this.props;
const visibilityIconInfo = {
'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) },
};
const visibilityIcon = visibilityIconInfo[status.get('visibility')];
return ( return (
<div className='modal-root__modal favourite-modal'> <div className='modal-root__modal favourite-modal'>
<div className='favourite-modal__container'> <div className='favourite-modal__container'>
@ -76,7 +64,7 @@ class FavouriteModal extends ImmutablePureComponent {
<div className='favourite-modal__status-header'> <div className='favourite-modal__status-header'>
<div className='favourite-modal__status-time'> <div className='favourite-modal__status-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span> <VisibilityIcon visibility={status.get('visibility')} />
<RelativeTimestamp timestamp={status.get('created_at')} /> <RelativeTimestamp timestamp={status.get('created_at')} />
</a> </a>
</div> </div>