OpenSource/mastodon
OpenSource/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-23 01:41:04 +01:00
Code Issues Projects Releases Packages Wiki Activity

Remove unnecessary translateZ(0) when doing scale() (#5473)

Browse source
This commit is contained in:
Nolan Lawson 2017-10-19 09:27:55 -07:00 committed by Eugen Rochko
parent 049381b284
commit 8392ddbf87
4 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/mastodon/features/compose/components/upload.js
View file

@ -68,7 +68,7 @@ export default class Upload extends ImmutablePureComponent {
<div className='compose-form__upload' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <div className='compose-form__upload' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}> <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) => ( {({ scale }) => (
<div className='compose-form__upload-thumbnail' style={{ transform: `translateZ(0) scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})` }}> <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})` }}>
<IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.handleUndoClick} /> <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.handleUndoClick} />
<div className={classNames('compose-form__upload-description', { active })}> <div className={classNames('compose-form__upload-description', { active })}>

2
app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
View file

@ -47,7 +47,7 @@ class SensitiveButton extends React.PureComponent {
'compose-form__sensitive-button--visible': visible, 'compose-form__sensitive-button--visible': visible,
}); });
return ( return (
<div className={className} style={{ transform: `translateZ(0) scale(${scale})` }}> <div className={className} style={{ transform: `scale(${scale})` }}>
<IconButton <IconButton
className='compose-form__sensitive-button__icon' className='compose-form__sensitive-button__icon'
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}

2
app/javascript/mastodon/features/ui/components/upload_area.js
View file

@ -40,7 +40,7 @@ export default class UploadArea extends React.PureComponent {
{({ backgroundOpacity, backgroundScale }) => {({ backgroundOpacity, backgroundScale }) =>
<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}> <div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
<div className='upload-area__drop'> <div className='upload-area__drop'>
<div className='upload-area__background' style={{ transform: `translateZ(0) scale(${backgroundScale})` }} /> <div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
<div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div> <div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
</div> </div>
</div> </div>

8
app/javascript/styles/mastodon/components.scss
View file

@ -3008,21 +3008,21 @@ button.icon-button.active i.fa-retweet {
} }
.fa-search { .fa-search {
transform: translateZ(0) rotate(90deg); transform: rotate(90deg);
&.active { &.active {
pointer-events: none; pointer-events: none;
transform: translateZ(0) rotate(0deg); transform: rotate(0deg);
} }
} }
.fa-times-circle { .fa-times-circle {
top: 11px; top: 11px;
transform: translateZ(0) rotate(0deg); transform: rotate(0deg);
cursor: pointer; cursor: pointer;
&.active { &.active {
transform: translateZ(0) rotate(90deg); transform: rotate(90deg);
} }
&:hover { &:hover {