diff options
Diffstat (limited to 'app/assets/javascripts/components/features/compose')
11 files changed, 40 insertions, 42 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx b/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx index 2d21f3437..bf6a15e5d 100644 --- a/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx +++ b/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx @@ -3,8 +3,8 @@ import DisplayName from '../../../components/display_name'; import ImmutablePropTypes from 'react-immutable-proptypes'; const AutosuggestAccount = ({ account }) => ( - <div style={{ overflow: 'hidden' }} className='autosuggest-account'> - <div style={{ float: 'left', marginRight: '5px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div> + <div className='autosuggest-account'> + <div className='autosuggest-account-icon'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div> <DisplayName account={account} /> </div> ); diff --git a/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx b/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx index 086488649..275b3d5a6 100644 --- a/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx +++ b/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx @@ -3,7 +3,7 @@ import DisplayName from '../../../components/display_name'; import ImmutablePropTypes from 'react-immutable-proptypes'; const AutosuggestStatus = ({ status }) => ( - <div style={{ overflow: 'hidden' }} className='autosuggest-status'> + <div className='autosuggest-status'> <FormattedMessage id='search.status_by' defaultMessage='Status by {name}' values={{ name: <strong>@{status.getIn(['account', 'acct'])}</strong> }} /> </div> ); diff --git a/app/assets/javascripts/components/features/compose/components/character_counter.jsx b/app/assets/javascripts/components/features/compose/components/character_counter.jsx index b1e74b4de..31d82d4d2 100644 --- a/app/assets/javascripts/components/features/compose/components/character_counter.jsx +++ b/app/assets/javascripts/components/features/compose/components/character_counter.jsx @@ -4,9 +4,9 @@ class CharacterCounter extends React.PureComponent { checkRemainingText (diff) { if (diff <= 0) { - return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>; + return <span className='character-counter character-counter--over'>{diff}</span>; } - return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>; + return <span className='character-counter'>{diff}</span>; } render () { diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index b8e8ed5ef..c5ff8a5bd 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -137,13 +137,13 @@ class ComposeForm extends React.PureComponent { } if (this.props.privacy === 'private' || this.props.privacy === 'direct') { - publishText = <span><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>; + publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>; } else { publishText = intl.formatMessage(messages.publish) + (this.props.privacy !== 'unlisted' ? '!' : ''); } return ( - <div style={{ padding: '10px' }}> + <div className='compose-form'> <Collapsable isVisible={this.props.spoiler} fullHeight={50}> <div className="spoiler-input"> <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type="text" className="spoiler-input__input" /> @@ -154,7 +154,7 @@ class ComposeForm extends React.PureComponent { <ReplyIndicatorContainer /> - <div style={{ position: 'relative' }}> + <div className='compose-form__autosuggest-wrapper'> <AutosuggestTextarea ref={this.setAutosuggestTextarea} placeholder={intl.formatMessage(messages.placeholder)} @@ -176,7 +176,7 @@ class ComposeForm extends React.PureComponent { <UploadFormContainer /> </div> - <div style={{ display: 'flex', justifyContent: 'space-between' }}> + <div className='compose-form__buttons-wrapper'> <div className='compose-form__buttons'> <UploadButtonContainer /> <PrivacyDropdownContainer /> @@ -184,9 +184,9 @@ class ComposeForm extends React.PureComponent { <SpoilerButtonContainer /> </div> - <div style={{ display: 'flex', minWidth: 0 }}> - <div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={text} /></div> - <div style={{ paddingTop: '10px', overflow: 'hidden' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} block /></div> + <div className='compose-form__publish'> + <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div> + <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} block /></div> </div> </div> </div> diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx index b8acf7ada..69042d3f7 100644 --- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx @@ -22,12 +22,20 @@ const settings = { imagePathPNG: '/emoji/' }; -const style = { +const dropdownStyle = { position: 'absolute', right: '5px', top: '5px' }; +const dropdownTriggerStyle = { + display: 'block', + fontSize: '24px', + lineHeight: '24px', + marginLeft: '2px', + width: '24px' +} + class EmojiPickerDropdown extends React.PureComponent { constructor (props, context) { @@ -84,8 +92,8 @@ class EmojiPickerDropdown extends React.PureComponent { } return ( - <Dropdown ref={this.setRef} style={style}> - <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}> + <Dropdown ref={this.setRef} style={dropdownStyle}> + <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={dropdownTriggerStyle}> <img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" /> </DropdownTrigger> diff --git a/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx b/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx index f4c45278c..f3329133d 100644 --- a/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx +++ b/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx @@ -11,11 +11,11 @@ class NavigationBar extends React.PureComponent { render () { return ( <div className='navigation-bar'> - <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} animate size={40} /></Permalink> + <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}><Avatar src={this.props.account.get('avatar')} animate size={40} /></Permalink> - <div style={{ flex: '1 1 auto', marginLeft: '8px' }}> - <strong style={{ fontWeight: '500', display: 'block' }}>{this.props.account.get('acct')}</strong> - <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a> + <div className='navigation-bar__profile'> + <strong className='navigation-bar__profile-account'>{this.props.account.get('acct')}</strong> + <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a> </div> </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 6a80cf7a2..537871bb5 100644 --- a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx @@ -14,11 +14,6 @@ const messages = defineMessages({ change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' } }); -const iconStyle = { - lineHeight: '27px', - height: null -}; - class PrivacyDropdown extends React.PureComponent { constructor (props, context) { @@ -77,7 +72,7 @@ class PrivacyDropdown extends React.PureComponent { return ( <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> - <div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></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} /></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/reply_indicator.jsx b/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx index 784f08284..442ed5a35 100644 --- a/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx +++ b/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx @@ -40,11 +40,11 @@ class ReplyIndicator extends React.PureComponent { return ( <div className='reply-indicator'> - <div style={{ overflow: 'hidden', marginBottom: '5px' }}> - <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div> + <div className='reply-indicator__header'> + <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div> - <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}> - <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div> + <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name'> + <div className='reply-indicator__display-avatar'><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div> <DisplayName account={status.get('account')} /> </a> </div> 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 64b36a4df..80e5a0545 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx @@ -6,11 +6,6 @@ const messages = defineMessages({ upload: { id: 'upload_button.label', defaultMessage: 'Add media' } }); -const iconStyle = { - lineHeight: '27px', - height: null -}; - class UploadButton extends React.PureComponent { constructor (props, context) { @@ -38,8 +33,8 @@ class UploadButton extends React.PureComponent { const { intl, resetFileKey, disabled } = this.props; return ( - <div style={this.props.style}> - <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} style={iconStyle} size={18} inverted /> + <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 /> <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 f28944ad5..a937cafb7 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx @@ -15,10 +15,10 @@ class UploadForm extends React.PureComponent { const { intl, media } = this.props; const uploads = media.map(attachment => - <div key={attachment.get('id')} style={{ margin: '5px', flex: '1 1 0' }}> + <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})`, width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}> + <div 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> } @@ -27,9 +27,9 @@ class UploadForm extends React.PureComponent { ); return ( - <div style={{ overflow: 'hidden' }}> + <div className='compose-form__upload-wrapper'> <UploadProgressContainer /> - <div style={{ display: 'flex', padding: '5px' }}>{uploads}</div> + <div className='compose-form__uploads-wrapper'>{uploads}</div> </div> ); } diff --git a/app/assets/javascripts/components/features/compose/components/upload_progress.jsx b/app/assets/javascripts/components/features/compose/components/upload_progress.jsx index a04edb97d..8f03bb76a 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_progress.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_progress.jsx @@ -13,11 +13,11 @@ class UploadProgress extends React.PureComponent { return ( <div className='upload-progress'> - <div> + <div className='upload-progress__icon'> <i className='fa fa-upload' /> </div> - <div style={{ flex: '1 1 auto' }}> + <div className='upload-progress__message'> <FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' /> <div className='upload-progress__backdrop'> |