Improvements to image icon appearance on SHOW MORE
This commit is contained in:
parent
99889ea57d
commit
cc4cba8afd
2 changed files with 15 additions and 6 deletions
|
@ -141,7 +141,7 @@ export default class StatusContent extends React.PureComponent {
|
||||||
</Permalink>
|
</Permalink>
|
||||||
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
|
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
|
||||||
|
|
||||||
const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
|
const toggleText = hidden ? [<FormattedMessage id='status.show_more' defaultMessage='Show more' key='0' />, mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`} aria-hidden='true' key='1' /> : null] : [<FormattedMessage id='status.show_less' defaultMessage='Show less' key='0' />];
|
||||||
|
|
||||||
if (hidden) {
|
if (hidden) {
|
||||||
mentionsPlaceholder = <div>{mentionLinks}</div>;
|
mentionsPlaceholder = <div>{mentionLinks}</div>;
|
||||||
|
@ -153,7 +153,7 @@ export default class StatusContent extends React.PureComponent {
|
||||||
<span dangerouslySetInnerHTML={spoilerContent} />
|
<span dangerouslySetInnerHTML={spoilerContent} />
|
||||||
{' '}
|
{' '}
|
||||||
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
||||||
{toggleText} {mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null}
|
{toggleText}
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
|
@ -499,6 +499,15 @@
|
||||||
background: lighten($ui-base-color, 33%);
|
background: lighten($ui-base-color, 33%);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status__content__spoiler-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 0 5px;
|
||||||
|
border-left: 1px solid currentColor;
|
||||||
|
padding: 0 0 0 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
vertical-align: -2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__prepend-icon-wrapper {
|
.status__prepend-icon-wrapper {
|
||||||
|
|
Loading…
Reference in a new issue