monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements to image icon appearance on SHOW MORE

This commit is contained in:
kibigo! 2017-06-29 01:43:15 -07:00
parent 99889ea57d
commit cc4cba8afd
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/status_content.js
View File

@ -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>

17
app/javascript/styles/components.scss
View File

@ -495,10 +495,19 @@
cursor: pointer; cursor: pointer;
vertical-align: bottom; vertical-align: bottom;
&:hover { &:hover {
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 {