fix(style): Fix regressions introduced by #2338 (#2345)

Put Column Slim Back Button classnames in order so it is positioned right and top. Add icon button style back to privacy dropdown and upload buttons so they are positioned correctly and do not wiggle. Remove abstracted style from CSS. Add missed class for the upload form thumbnail. Add the missed styles for upload form thumnail. Alphabetize styles for column-back-button. Fix fontSize typo for media-spoiler-video-play-icon.
This commit is contained in:
Stephen Burgess 2017-04-23 07:18:58 -05:00 committed by Eugen
parent 1cf9e14a41
commit 663f090c45
5 changed files with 27 additions and 13 deletions

View file

@ -15,7 +15,7 @@ class ColumnBackButtonSlim extends React.PureComponent {
render () { render () {
return ( return (
<div className='column-back-button--slim'> <div className='column-back-button--slim'>
<div className='column-back-button--slim-button' role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'> <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div> </div>

View file

@ -14,6 +14,11 @@ const messages = defineMessages({
change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' } change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' }
}); });
const iconStyle = {
height: null,
lineHeight: '27px'
}
class PrivacyDropdown extends React.PureComponent { class PrivacyDropdown extends React.PureComponent {
constructor (props, context) { constructor (props, context) {
@ -72,7 +77,7 @@ class PrivacyDropdown extends React.PureComponent {
return ( return (
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
<div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} /></div> <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle}/></div>
<div className='privacy-dropdown__dropdown'> <div className='privacy-dropdown__dropdown'>
{options.map(item => {options.map(item =>
<div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> <div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>

View file

@ -6,6 +6,12 @@ const messages = defineMessages({
upload: { id: 'upload_button.label', defaultMessage: 'Add media' } upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
}); });
const iconStyle = {
height: null,
lineHeight: '27px'
}
class UploadButton extends React.PureComponent { class UploadButton extends React.PureComponent {
constructor (props, context) { constructor (props, context) {
@ -30,11 +36,12 @@ class UploadButton extends React.PureComponent {
} }
render () { render () {
const { intl, resetFileKey, disabled } = this.props; const { intl, resetFileKey, disabled } = this.props;
return ( return (
<div className='compose-form__upload-button'> <div className='compose-form__upload-button'>
<IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted /> <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle}/>
<input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} /> <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
</div> </div>
); );

View file

@ -18,7 +18,7 @@ class UploadForm extends React.PureComponent {
<div className='compose-form__upload' key={attachment.get('id')}> <div className='compose-form__upload' key={attachment.get('id')}>
<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 style={{ transform: `translateZ(0) scale(${scale})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}> <div className='compose-form__upload-thumbnail' style={{ transform: `translateZ(0) scale(${scale})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}>
<IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} /> <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
</div> </div>
} }

View file

@ -261,6 +261,12 @@
margin: 5px; margin: 5px;
} }
.compose-form__upload-thumbnail {
border-radius: 4px;
height: 100px;
width: 100%;
}
.compose-form__upload-cancel { .compose-form__upload-cancel {
background-size: cover; background-size: cover;
border-radius: 4px; border-radius: 4px;
@ -1347,12 +1353,12 @@ a.status__content__spoiler-link {
} }
.column-back-button { .column-back-button {
padding: 15px;
font-size: 16px;
background: lighten($color1, 4%); background: lighten($color1, 4%);
flex: 0 0 auto;
cursor: pointer;
color: $color4; color: $color4;
cursor: pointer;
flex: 0 0 auto;
font-size: 16px;
padding: 15px;
z-index: 3; z-index: 3;
&:hover { &:hover {
@ -2375,10 +2381,6 @@ button.icon-button.active i.fa-retweet {
box-shadow: 0 -4px 4px rgba($color8, 0.1); box-shadow: 0 -4px 4px rgba($color8, 0.1);
} }
.privacy-dropdown__value-icon {
line-height: 27px;
}
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
display: block; display: block;
box-shadow: 2px 4px 6px rgba($color8, 0.1); box-shadow: 2px 4px 6px rgba($color8, 0.1);
@ -3061,7 +3063,7 @@ button.icon-button.active i.fa-retweet {
.media-spoiler-video-play-icon { .media-spoiler-video-play-icon {
border-radius: 100px; border-radius: 100px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
fontSize: 36px; font-size: 36px;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
top: 50%; top: 50%;