diff options
Diffstat (limited to 'app/assets/javascripts/components/features')
38 files changed, 129 insertions, 280 deletions
diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx index 3aefee027..772ea3a38 100644 --- a/app/assets/javascripts/components/features/account/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx @@ -17,17 +17,6 @@ const messages = defineMessages({ disclaimer: { id: 'account.disclaimer', defaultMessage: 'This user is from another instance. This number may be larger.' } }); -const outerDropdownStyle = { - padding: '10px', - flex: '1 1 auto' -}; - -const outerLinksStyle = { - flex: '1 1 auto', - display: 'flex', - lineHeight: '18px' -}; - class ActionBar extends React.PureComponent { render () { @@ -63,11 +52,11 @@ class ActionBar extends React.PureComponent { return ( <div className='account__action-bar'> - <div style={outerDropdownStyle}> + <div className='account__action-bar-dropdown'> <DropdownMenu items={menu} icon='bars' size={24} direction="right" /> </div> - <div style={outerLinksStyle}> + <div className='account__action-bar-links'> <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}> <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span> <strong><FormattedNumber value={account.get('statuses_count')} /> {extraInfo}</strong> diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx index 3ebfb7df3..958a5206b 100644 --- a/app/assets/javascripts/components/features/account/components/header.jsx +++ b/app/assets/javascripts/components/features/account/components/header.jsx @@ -25,11 +25,11 @@ class Avatar extends React.PureComponent { constructor (props, context) { super(props, context); - + this.state = { isHovered: false }; - + this.handleMouseOver = this.handleMouseOver.bind(this); this.handleMouseOut = this.handleMouseOut.bind(this); } @@ -56,7 +56,7 @@ class Avatar extends React.PureComponent { className='account__header__avatar' target='_blank' rel='noopener' - style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden', backgroundSize: '90px 90px', backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }} + style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver} diff --git a/app/assets/javascripts/components/features/account_timeline/components/header.jsx b/app/assets/javascripts/components/features/account_timeline/components/header.jsx index fb8b8b287..fd66c13e0 100644 --- a/app/assets/javascripts/components/features/account_timeline/components/header.jsx +++ b/app/assets/javascripts/components/features/account_timeline/components/header.jsx @@ -44,7 +44,7 @@ class Header extends React.PureComponent { } return ( - <div> + <div className='account-timeline__header'> <InnerHeader account={account} me={me} 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'> diff --git a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx index a194d2b27..d35a54c12 100644 --- a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx +++ b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx @@ -12,38 +12,23 @@ const messages = defineMessages({ reject: { id: 'follow_request.reject', defaultMessage: 'Reject' } }); -const outerStyle = { - padding: '14px 10px' -}; - -const panelStyle = { - display: 'flex', - flexDirection: 'row', - padding: '10px 0' -}; - -const btnStyle = { - flex: '1 1 auto', - textAlign: 'center' -}; - const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => { const content = { __html: emojify(account.get('note')) }; return ( - <div> - <div style={outerStyle}> - <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}> - <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div> + <div className='account-authorize__wrapper'> + <div className='account-authorize'> + <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name'> + <div className='account-authorize__avatar'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div> <DisplayName account={account} /> </Permalink> - <div style={{ fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} /> + <div className='account__header__content' dangerouslySetInnerHTML={content} /> </div> - <div className='account--panel' style={panelStyle}> - <div style={btnStyle}><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div> - <div style={btnStyle}><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div> + <div className='account--panel'> + <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div> + <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div> </div> </div> ) diff --git a/app/assets/javascripts/components/features/followers/index.jsx b/app/assets/javascripts/components/features/followers/index.jsx index 3ba4c2885..2b1e3719e 100644 --- a/app/assets/javascripts/components/features/followers/index.jsx +++ b/app/assets/javascripts/components/features/followers/index.jsx @@ -68,7 +68,7 @@ class Followers extends React.PureComponent { <ScrollContainer scrollKey='followers'> <div className='scrollable' onScroll={this.handleScroll}> - <div> + <div className='followers'> <HeaderContainer accountId={this.props.params.accountId} /> {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} <LoadMore onClick={this.handleLoadMore} /> diff --git a/app/assets/javascripts/components/features/following/index.jsx b/app/assets/javascripts/components/features/following/index.jsx index 0e3c440a5..30b320917 100644 --- a/app/assets/javascripts/components/features/following/index.jsx +++ b/app/assets/javascripts/components/features/following/index.jsx @@ -68,7 +68,7 @@ class Following extends React.PureComponent { <ScrollContainer scrollKey='following'> <div className='scrollable' onScroll={this.handleScroll}> - <div> + <div className='following'> <HeaderContainer accountId={this.props.params.accountId} /> {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} <LoadMore onClick={this.handleLoadMore} /> diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx index 3fc4a683c..f9561b937 100644 --- a/app/assets/javascripts/components/features/getting_started/index.jsx +++ b/app/assets/javascripts/components/features/getting_started/index.jsx @@ -32,7 +32,7 @@ const GettingStarted = ({ intl, me }) => { return ( <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}> - <div style={{ position: 'relative' }}> + <div className='getting-started__wrapper'> <ColumnLink icon='users' hideOnMobile={true} text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' /> <ColumnLink icon='globe' hideOnMobile={true} text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' /> <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> diff --git a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx b/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx index b209a9f90..81a1a0e5b 100644 --- a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx +++ b/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx @@ -10,21 +10,6 @@ const messages = defineMessages({ settings: { id: 'home.settings', defaultMessage: 'Column settings' } }); -const outerStyle = { - padding: '15px' -}; - -const sectionStyle = { - cursor: 'default', - display: 'block', - fontWeight: '500', - marginBottom: '10px' -}; - -const rowStyle = { - -}; - class ColumnSettings extends React.PureComponent { render () { @@ -32,20 +17,20 @@ class ColumnSettings extends React.PureComponent { return ( <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={209} onCollapse={onSave}> - <div className='column-settings--outer' style={outerStyle}> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span> + <div className='column-settings__outer'> + <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show boosts' />} /> </div> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span> + <span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} /> </div> </div> diff --git a/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx b/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx index 44f8658e1..90b4aeb94 100644 --- a/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx +++ b/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx @@ -1,15 +1,6 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -const style = { - display: 'block', - fontFamily: 'inherit', - marginBottom: '10px', - padding: '7px 0', - boxSizing: 'border-box', - width: '100%' -}; - class SettingText extends React.PureComponent { constructor (props, context) { @@ -26,7 +17,6 @@ class SettingText extends React.PureComponent { return ( <input - style={style} className='setting-text' value={settings.getIn(settingKey)} onChange={this.handleChange} diff --git a/app/assets/javascripts/components/features/mutes/index.jsx b/app/assets/javascripts/components/features/mutes/index.jsx index 6bd5e6735..0310fa7f2 100644 --- a/app/assets/javascripts/components/features/mutes/index.jsx +++ b/app/assets/javascripts/components/features/mutes/index.jsx @@ -51,7 +51,7 @@ class Mutes extends React.PureComponent { <Column icon='volume-off' heading={intl.formatMessage(messages.heading)}> <ColumnBackButtonSlim /> <ScrollContainer scrollKey='mutes'> - <div className='scrollable' onScroll={this.handleScroll}> + <div className='scrollable mutes' onScroll={this.handleScroll}> {accountIds.map(id => <AccountContainer key={id} id={id} /> )} @@ -60,6 +60,7 @@ class Mutes extends React.PureComponent { </Column> ); } + } Mutes.propTypes = { diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx index 41c2e7d36..30063010c 100644 --- a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx +++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx @@ -8,21 +8,6 @@ const messages = defineMessages({ settings: { id: 'notifications.settings', defaultMessage: 'Column settings' } }); -const outerStyle = { - padding: '15px' -}; - -const sectionStyle = { - cursor: 'default', - display: 'block', - fontWeight: '500', - marginBottom: '10px' -}; - -const rowStyle = { - -}; - class ColumnSettings extends React.PureComponent { render () { @@ -34,34 +19,34 @@ class ColumnSettings extends React.PureComponent { return ( <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={616} onCollapse={onSave}> - <div className='column-settings--outer' style={outerStyle}> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span> + <div className='column-settings__outer'> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'follow']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'favourite']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'mention']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'reblog']} onChange={onChange} label={soundStr} /> diff --git a/app/assets/javascripts/components/features/notifications/components/notification.jsx b/app/assets/javascripts/components/features/notifications/components/notification.jsx index dadc6696a..34dd76bb7 100644 --- a/app/assets/javascripts/components/features/notifications/components/notification.jsx +++ b/app/assets/javascripts/components/features/notifications/components/notification.jsx @@ -6,17 +6,13 @@ import Permalink from '../../../components/permalink'; import emojify from '../../../emoji'; import escapeTextContentForBrowser from 'escape-html'; -const linkStyle = { - fontWeight: '500' -}; - class Notification extends React.PureComponent { renderFollow (account, link) { return ( <div className='notification notification-follow'> <div className='notification__message'> - <div style={{ position: 'absolute', 'left': '-26px'}}> + <div className='notification__favourite-icon-wrapper'> <i className='fa fa-fw fa-user-plus' /> </div> @@ -36,8 +32,8 @@ class Notification extends React.PureComponent { return ( <div className='notification notification-favourite'> <div className='notification__message'> - <div style={{ position: 'absolute', 'left': '-26px'}}> - <i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> + <div className='notification__favourite-icon-wrapper'> + <i className='fa fa-fw fa-star star-icon'/> </div> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> @@ -52,7 +48,7 @@ class Notification extends React.PureComponent { return ( <div className='notification notification-reblog'> <div className='notification__message'> - <div style={{ position: 'absolute', 'left': '-26px'}}> + <div className='notification__favourite-icon-wrapper'> <i className='fa fa-fw fa-retweet' /> </div> @@ -69,7 +65,7 @@ class Notification extends React.PureComponent { const account = notification.get('account'); const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username'); const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; - const link = <Permalink className='notification__display-name' style={linkStyle} href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />; + const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />; switch(notification.get('type')) { case 'follow': diff --git a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx index 1c3957651..e9bca5928 100644 --- a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx +++ b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx @@ -2,23 +2,10 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Toggle from 'react-toggle'; -const labelStyle = { - display: 'block', - lineHeight: '24px', - verticalAlign: 'middle' -}; - -const labelSpanStyle = { - display: 'inline-block', - verticalAlign: 'middle', - marginBottom: '14px', - marginLeft: '8px' -}; - const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' }) => ( - <label htmlFor={htmlFor} style={labelStyle}> + <label htmlFor={htmlFor} className='setting-toggle__label'> <Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} /> - <span className='setting-toggle' style={labelSpanStyle}>{label}</span> + <span className='setting-toggle'>{label}</span> </label> ); diff --git a/app/assets/javascripts/components/features/reblogs/index.jsx b/app/assets/javascripts/components/features/reblogs/index.jsx index e4826b078..5e5671422 100644 --- a/app/assets/javascripts/components/features/reblogs/index.jsx +++ b/app/assets/javascripts/components/features/reblogs/index.jsx @@ -40,7 +40,7 @@ class Reblogs extends React.PureComponent { <ColumnBackButton /> <ScrollContainer scrollKey='reblogs'> - <div className='scrollable'> + <div className='scrollable reblogs'> {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} </div> </ScrollContainer> diff --git a/app/assets/javascripts/components/features/report/components/status_check_box.jsx b/app/assets/javascripts/components/features/report/components/status_check_box.jsx index 4268e5f3d..bc866616a 100644 --- a/app/assets/javascripts/components/features/report/components/status_check_box.jsx +++ b/app/assets/javascripts/components/features/report/components/status_check_box.jsx @@ -14,14 +14,13 @@ class StatusCheckBox extends React.PureComponent { } return ( - <div className='status-check-box' style={{ display: 'flex' }}> + <div className='status-check-box'> <div className='status__content' - style={{ flex: '1 1 auto', padding: '10px' }} dangerouslySetInnerHTML={content} /> - <div style={{ flex: '0 0 auto', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> + <div className='status-check-box-toggle'> <Toggle checked={checked} onChange={onToggle} disabled={disabled} /> </div> </div> diff --git a/app/assets/javascripts/components/features/report/index.jsx b/app/assets/javascripts/components/features/report/index.jsx index 7b9b202a8..6e3cfcb2a 100644 --- a/app/assets/javascripts/components/features/report/index.jsx +++ b/app/assets/javascripts/components/features/report/index.jsx @@ -34,10 +34,6 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -const textareaStyle = { - marginBottom: '10px' -}; - class Report extends React.PureComponent { constructor (props, context) { @@ -86,30 +82,29 @@ class Report extends React.PureComponent { <Column heading={intl.formatMessage(messages.heading)} icon='flag'> <ColumnBackButtonSlim /> - <div className='report scrollable' style={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', boxSizing: 'border-box' }}> - <div className='report__target' style={{ flex: '0 0 auto', padding: '10px' }}> + <div className='report scrollable'> + <div className='report__target'> <FormattedMessage id='report.target' defaultMessage='Reporting' /> <strong>{account.get('acct')}</strong> </div> - <div style={{ flex: '1 1 auto' }} className='scrollable'> + <div className='scrollable report__statuses'> <div> {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)} </div> </div> - <div style={{ flex: '0 0 100px', padding: '10px' }}> + <div className='report__textarea-wrapper'> <textarea className='report__textarea' placeholder={intl.formatMessage(messages.placeholder)} value={comment} onChange={this.handleCommentChange} - style={textareaStyle} disabled={isSubmitting} /> - <div style={{ marginTop: '10px', overflow: 'hidden' }}> - <div style={{ float: 'right' }}><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div> + <div className='report__submit'> + <div className='report__submit-button'><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div> </div> </div> </div> diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx index 4bd3352d8..130c3b92d 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -69,10 +69,10 @@ class ActionBar extends React.PureComponent { return ( <div className='detailed-status__action-bar'> - <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div> - <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton disabled={status.get('visibility') === 'direct' || status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> - <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> - <div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div> + <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div> + <div className='detailed-status__button'><IconButton disabled={status.get('visibility') === 'direct' || status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> + <div className='detailed-status__button'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> + <div className='detailed-status__button'><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div> </div> ); } diff --git a/app/assets/javascripts/components/features/status/components/card.jsx b/app/assets/javascripts/components/features/status/components/card.jsx index 8feb3b350..1b5722b6a 100644 --- a/app/assets/javascripts/components/features/status/components/card.jsx +++ b/app/assets/javascripts/components/features/status/components/card.jsx @@ -1,20 +1,5 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; -const contentStyle = { - flex: '1 1 auto', - padding: '8px', - paddingLeft: '14px', - overflow: 'hidden' -}; - -const imageStyle = { - display: 'block', - width: '100%', - height: 'auto', - margin: '0', - borderRadius: '4px 0 0 4px' -}; - const hostStyle = { display: 'block', marginTop: '5px', @@ -41,7 +26,7 @@ class Card extends React.PureComponent { if (card.get('image')) { image = ( <div className='status-card__image'> - <img src={card.get('image')} alt={card.get('title')} style={imageStyle} /> + <img src={card.get('image')} alt={card.get('title')} className='status-card__image-image' /> </div> ); } @@ -50,7 +35,7 @@ class Card extends React.PureComponent { <a href={card.get('url')} className='status-card' target='_blank' rel='noopener'> {image} - <div className='status-card__content' style={contentStyle}> + <div className='status-card__content'> <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong> <p className='status-card__description'>{card.get('description').substring(0, 50)}</p> <span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span> diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx index 566eb3974..c2fa1a325 100644 --- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx +++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx @@ -45,13 +45,13 @@ class DetailedStatus extends React.PureComponent { } if (status.get('application')) { - applicationLink = <span> 路 <a className='detailed-status__application' style={{ color: 'inherit' }} href={status.getIn(['application', 'website'])} target='_blank' rel='nooopener'>{status.getIn(['application', 'name'])}</a></span>; + applicationLink = <span> 路 <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='nooopener'>{status.getIn(['application', 'name'])}</a></span>; } return ( - <div style={{ padding: '14px 10px' }} className='detailed-status'> - <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}> - <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div> + <div className='detailed-status'> + <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'> + <div className='.detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div> <DisplayName account={status.get('account')} /> </a> @@ -60,7 +60,19 @@ class DetailedStatus extends React.PureComponent { {media} <div className='detailed-status__meta'> - <a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a>{applicationLink} 路 <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> 路 <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link> + <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'> + <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> + </a>{applicationLink} 路 <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'> + <i className='fa fa-retweet' /> + <span className='detailed-status__reblogs'> + <FormattedNumber value={status.get('reblogs_count')} /> + </span> + </Link> 路 <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'> + <i className='fa fa-star' /> + <span className='detailed-status__favorites'> + <FormattedNumber value={status.get('favourites_count')} /> + </span> + </Link> </div> </div> ); diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index ba7c8d3ed..60f5415d6 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -151,7 +151,7 @@ class Status extends React.PureComponent { <ColumnBackButton /> <ScrollContainer scrollKey='thread'> - <div className='scrollable'> + <div className='scrollable detailed-status__wrapper'> {ancestors} <DetailedStatus status={status} autoPlayGif={autoPlayGif} me={me} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} /> diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx index e33239be7..3bd82ceee 100644 --- a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx @@ -40,13 +40,13 @@ class BoostModal extends React.PureComponent { <div className='modal-root__modal boost-modal'> <div className='boost-modal__container'> <div className='status light'> - <div style={{ fontSize: '15px' }}> - <div style={{ float: 'right', fontSize: '14px' }}> + <div className='boost-modal__status-header'> + <div className='boost-modal__status-time'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> </div> - <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}> - <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}> + <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'> + <div className='status__avatar'> <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /> </div> diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx index c4e6b4afa..7ccd72e0b 100644 --- a/app/assets/javascripts/components/features/ui/components/column_header.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx @@ -17,7 +17,7 @@ class ColumnHeader extends React.PureComponent { let icon = ''; if (this.props.icon) { - icon = <i className={`fa fa-fw fa-${this.props.icon}`} style={{ display: 'inline-block', marginRight: '5px' }} />; + icon = <i className={`fa fa-fw fa-${this.props.icon} column-header__icon`} />; } return ( diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx index 32fd329d4..77a9b3bd8 100644 --- a/app/assets/javascripts/components/features/ui/components/column_link.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx @@ -1,29 +1,18 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router'; -const outerStyle = { - padding: '15px', - fontSize: '16px', - textDecoration: 'none' -}; - -const iconStyle = { - display: 'inline-block', - marginRight: '5px' -}; - const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => { if (href) { return ( <a href={href} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}> - <i className={`fa fa-fw fa-${icon}`} style={iconStyle} /> + <i className={`fa fa-fw fa-${icon} column-link__icon`} /> {text} </a> ); } else { return ( - <Link to={to} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}> - <i className={`fa fa-fw fa-${icon}`} style={iconStyle} /> + <Link to={to} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}> + <i className={`fa fa-fw fa-${icon} column-link__icon`} /> {text} </Link> ); diff --git a/app/assets/javascripts/components/features/ui/components/columns_area.jsx b/app/assets/javascripts/components/features/ui/components/columns_area.jsx index 06f6427ab..360a759ae 100644 --- a/app/assets/javascripts/components/features/ui/components/columns_area.jsx +++ b/app/assets/javascripts/components/features/ui/components/columns_area.jsx @@ -1,16 +1,10 @@ import PropTypes from 'prop-types'; -const style = { - display: 'flex', - flex: '1 1 auto', - overflowX: 'auto' -}; - class ColumnsArea extends React.PureComponent { render () { return ( - <div className='columns-area' style={style}> + <div className='columns-area'> {this.props.children} </div> ); diff --git a/app/assets/javascripts/components/features/ui/components/media_modal.jsx b/app/assets/javascripts/components/features/ui/components/media_modal.jsx index 8ed6afa6c..02a577500 100644 --- a/app/assets/javascripts/components/features/ui/components/media_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/media_modal.jsx @@ -10,40 +10,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' } }); -const leftNavStyle = { - position: 'absolute', - background: 'rgba(0, 0, 0, 0.5)', - padding: '30px 15px', - cursor: 'pointer', - fontSize: '24px', - top: '0', - left: '-61px', - boxSizing: 'border-box', - height: '100%', - display: 'flex', - alignItems: 'center' -}; - -const rightNavStyle = { - position: 'absolute', - background: 'rgba(0, 0, 0, 0.5)', - padding: '30px 15px', - cursor: 'pointer', - fontSize: '24px', - top: '0', - right: '-61px', - boxSizing: 'border-box', - height: '100%', - display: 'flex', - alignItems: 'center' -}; - -const closeStyle = { - position: 'absolute', - top: '4px', - right: '4px' -}; - class MediaModal extends React.PureComponent { constructor (props, context) { @@ -99,8 +65,8 @@ class MediaModal extends React.PureComponent { leftNav = rightNav = content = ''; if (media.size > 1) { - leftNav = <div role='button' tabIndex='0' style={leftNavStyle} className='modal-container__nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>; - rightNav = <div role='button' tabIndex='0' style={rightNavStyle} className='modal-container__nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>; + leftNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>; + rightNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--right' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>; } if (attachment.get('type') === 'image') { @@ -113,8 +79,8 @@ class MediaModal extends React.PureComponent { <div className='modal-root__modal media-modal'> {leftNav} - <div> - <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} /> + <div className='media-modal__content'> + <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> {content} </div> diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx index 7b84ef3c8..f9e173222 100644 --- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx +++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx @@ -65,7 +65,7 @@ class ModalRoot extends React.PureComponent { return ( <div key={key}> - <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity, transform: `translateZ(0px)` }} onClick={onClose} /> + <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} /> <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}> <SpecificComponent {...props} onClose={onClose} /> </div> diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx index adbab0494..d98b42882 100644 --- a/app/assets/javascripts/components/features/ui/components/video_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx @@ -9,13 +9,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' } }); -const closeStyle = { - position: 'absolute', - zIndex: '100', - top: '4px', - right: '4px' -}; - class VideoModal extends React.PureComponent { render () { @@ -26,7 +19,7 @@ class VideoModal extends React.PureComponent { return ( <div className='modal-root__modal media-modal'> <div> - <div style={closeStyle}><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div> + <div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div> <ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} /> </div> </div> |