diff options
Diffstat (limited to 'app/assets')
5 files changed, 27 insertions, 13 deletions
diff --git a/app/assets/javascripts/components/components/column_back_button_slim.jsx b/app/assets/javascripts/components/components/column_back_button_slim.jsx index f739b3f83..719690097 100644 --- a/app/assets/javascripts/components/components/column_back_button_slim.jsx +++ b/app/assets/javascripts/components/components/column_back_button_slim.jsx @@ -15,7 +15,7 @@ class ColumnBackButtonSlim extends React.PureComponent { render () { return ( <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' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' /> </div> diff --git a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx index 537871bb5..507fe7b58 100644 --- a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx @@ -14,6 +14,11 @@ const messages = defineMessages({ change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' } }); +const iconStyle = { + height: null, + lineHeight: '27px' +} + class PrivacyDropdown extends React.PureComponent { constructor (props, context) { @@ -72,7 +77,7 @@ class PrivacyDropdown extends React.PureComponent { return ( <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'> {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' : ''}`}> diff --git a/app/assets/javascripts/components/features/compose/components/upload_button.jsx b/app/assets/javascripts/components/features/compose/components/upload_button.jsx index 80e5a0545..9b2de0332 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx @@ -6,6 +6,12 @@ const messages = defineMessages({ upload: { id: 'upload_button.label', defaultMessage: 'Add media' } }); + +const iconStyle = { + height: null, + lineHeight: '27px' +} + class UploadButton extends React.PureComponent { constructor (props, context) { @@ -30,11 +36,12 @@ class UploadButton extends React.PureComponent { } render () { + const { intl, resetFileKey, disabled } = this.props; return ( <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' }} /> </div> ); diff --git a/app/assets/javascripts/components/features/compose/components/upload_form.jsx b/app/assets/javascripts/components/features/compose/components/upload_form.jsx index a937cafb7..4aafe698e 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx @@ -18,7 +18,7 @@ class UploadForm extends React.PureComponent { <div className='compose-form__upload' key={attachment.get('id')}> <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}> {({ 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'))} /> </div> } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index ac9a264ee..228c2f8ce 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -261,6 +261,12 @@ margin: 5px; } +.compose-form__upload-thumbnail { + border-radius: 4px; + height: 100px; + width: 100%; +} + .compose-form__upload-cancel { background-size: cover; border-radius: 4px; @@ -1347,12 +1353,12 @@ a.status__content__spoiler-link { } .column-back-button { - padding: 15px; - font-size: 16px; background: lighten($color1, 4%); - flex: 0 0 auto; - cursor: pointer; color: $color4; + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + padding: 15px; z-index: 3; &:hover { @@ -2375,10 +2381,6 @@ button.icon-button.active i.fa-retweet { box-shadow: 0 -4px 4px rgba($color8, 0.1); } - .privacy-dropdown__value-icon { - line-height: 27px; - } - .privacy-dropdown__dropdown { display: block; 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 { border-radius: 100px; color: rgba(255, 255, 255, 0.8); - fontSize: 36px; + font-size: 36px; padding: 5px; position: absolute; top: 50%; |