diff options
Diffstat (limited to 'app/assets')
58 files changed, 902 insertions, 607 deletions
diff --git a/app/assets/javascripts/components/components/account.jsx b/app/assets/javascripts/components/components/account.jsx index 18197380e..57c631d29 100644 --- a/app/assets/javascripts/components/components/account.jsx +++ b/app/assets/javascripts/components/components/account.jsx @@ -14,11 +14,6 @@ const messages = defineMessages({ unmute: { id: 'account.unmute', defaultMessage: 'Unmute' } }); -const buttonsStyle = { - padding: '10px', - height: '18px' -}; - class Account extends React.PureComponent { constructor (props, context) { @@ -68,13 +63,13 @@ class Account extends React.PureComponent { return ( <div className='account'> - <div style={{ display: 'flex' }}> + <div className='account__wrapper'> <Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}> - <div style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div> + <div className='account__avatar-wrapper'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div> <DisplayName account={account} /> </Permalink> - <div style={buttonsStyle}> + <div className='account__relationship'> {buttons} </div> </div> diff --git a/app/assets/javascripts/components/components/autosuggest_textarea.jsx b/app/assets/javascripts/components/components/autosuggest_textarea.jsx index 90eb5b6a1..d548eeeca 100644 --- a/app/assets/javascripts/components/components/autosuggest_textarea.jsx +++ b/app/assets/javascripts/components/components/autosuggest_textarea.jsx @@ -150,8 +150,7 @@ class AutosuggestTextarea extends React.Component { render () { const { value, suggestions, disabled, placeholder, onKeyUp } = this.props; const { suggestionsHidden, selectedSuggestion } = this.state; - const className = 'autosuggest-textarea__textarea'; - const style = { direction: 'ltr' }; + const style = { direction: 'ltr' }; if (isRtl(value)) { style.direction = 'rtl'; @@ -161,7 +160,7 @@ class AutosuggestTextarea extends React.Component { <div className='autosuggest-textarea'> <textarea ref={this.setTextarea} - className={className} + className='autosuggest-textarea__textarea' disabled={disabled} placeholder={placeholder} autoFocus={true} diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx index 54f96b3a7..d1a00ac39 100644 --- a/app/assets/javascripts/components/components/avatar.jsx +++ b/app/assets/javascripts/components/components/avatar.jsx @@ -38,7 +38,7 @@ class Avatar extends React.PureComponent { return ( <div - className='avatar' + className='account__avatar' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style} diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx index 8d0e49aee..00d80b1fd 100644 --- a/app/assets/javascripts/components/components/button.jsx +++ b/app/assets/javascripts/components/components/button.jsx @@ -15,25 +15,11 @@ class Button extends React.PureComponent { render () { const style = { - fontFamily: 'inherit', display: this.props.block ? 'block' : 'inline-block', width: this.props.block ? '100%' : 'auto', - position: 'relative', - boxSizing: 'border-box', - textAlign: 'center', - border: '10px none', - fontSize: '14px', - fontWeight: '500', - letterSpacing: '0', padding: `0 ${this.props.size / 2.25}px`, height: `${this.props.size}px`, - cursor: 'pointer', - lineHeight: `${this.props.size}px`, - borderRadius: '4px', - textDecoration: 'none', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden' + lineHeight: `${this.props.size}px` }; return ( diff --git a/app/assets/javascripts/components/components/column_back_button.jsx b/app/assets/javascripts/components/components/column_back_button.jsx index d891b6829..70110f0aa 100644 --- a/app/assets/javascripts/components/components/column_back_button.jsx +++ b/app/assets/javascripts/components/components/column_back_button.jsx @@ -1,11 +1,6 @@ import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; -const iconStyle = { - display: 'inline-block', - marginRight: '5px' -}; - class ColumnBackButton extends React.PureComponent { constructor (props, context) { @@ -21,7 +16,7 @@ class ColumnBackButton extends React.PureComponent { render () { return ( <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'> - <i className='fa fa-fw fa-chevron-left' style={iconStyle} /> + <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/components/column_back_button_slim.jsx b/app/assets/javascripts/components/components/column_back_button_slim.jsx index 0c753436b..f739b3f83 100644 --- a/app/assets/javascripts/components/components/column_back_button_slim.jsx +++ b/app/assets/javascripts/components/components/column_back_button_slim.jsx @@ -1,21 +1,6 @@ import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; -const outerStyle = { - position: 'absolute', - right: '0', - top: '-48px', - padding: '15px', - fontSize: '16px', - flex: '0 0 auto', - cursor: 'pointer' -}; - -const iconStyle = { - display: 'inline-block', - marginRight: '5px' -}; - class ColumnBackButtonSlim extends React.PureComponent { constructor (props, context) { @@ -29,15 +14,14 @@ class ColumnBackButtonSlim extends React.PureComponent { render () { return ( - <div style={{ position: 'relative' }}> - <div role='button' tabIndex='0' style={outerStyle} onClick={this.handleClick} className='column-back-button'> - <i className='fa fa-fw fa-chevron-left' style={iconStyle} /> + <div className='column-back-button--slim'> + <div className='column-back-button--slim-button' role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'> + <i className='fa fa-fw fa-chevron-left column-back-button__icon' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' /> </div> </div> ); } - } ColumnBackButtonSlim.contextTypes = { diff --git a/app/assets/javascripts/components/components/column_collapsable.jsx b/app/assets/javascripts/components/components/column_collapsable.jsx index 62b645783..2cb440862 100644 --- a/app/assets/javascripts/components/components/column_collapsable.jsx +++ b/app/assets/javascripts/components/components/column_collapsable.jsx @@ -1,16 +1,6 @@ import { Motion, spring } from 'react-motion'; import PropTypes from 'prop-types'; -const iconStyle = { - fontSize: '16px', - padding: '15px', - position: 'absolute', - right: '0', - top: '-48px', - cursor: 'pointer', - zIndex: '3' -}; - class ColumnCollapsable extends React.PureComponent { constructor (props, context) { @@ -38,8 +28,8 @@ class ColumnCollapsable extends React.PureComponent { const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable'; return ( - <div style={{ position: 'relative' }}> - <div role='button' tabIndex='0' title={`${title}`} style={{...iconStyle }} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}> + <div className='column-collapsable'> + <div role='button' tabIndex='0' title={`${title}`} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}> <i className={`fa fa-${icon}`} /> </div> diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx index 9a6e7a9a5..d7257e092 100644 --- a/app/assets/javascripts/components/components/display_name.jsx +++ b/app/assets/javascripts/components/components/display_name.jsx @@ -9,8 +9,8 @@ class DisplayName extends React.PureComponent { const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; return ( - <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} className='display-name'> - <strong style={{ fontWeight: '500' }} dangerouslySetInnerHTML={displayNameHTML} /> <span style={{ fontSize: '14px' }}>@{this.props.account.get('acct')}</span> + <span className='display-name'> + <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHTML} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span> </span> ); } diff --git a/app/assets/javascripts/components/components/dropdown_menu.jsx b/app/assets/javascripts/components/components/dropdown_menu.jsx index 2b0929e05..fc05fcd2a 100644 --- a/app/assets/javascripts/components/components/dropdown_menu.jsx +++ b/app/assets/javascripts/components/components/dropdown_menu.jsx @@ -28,14 +28,14 @@ class DropdownMenu extends React.PureComponent { renderItem (item, i) { if (item === null) { - return <li key={i} className='dropdown__sep' />; + return <li key={ 'sep' + i } className='dropdown__sep' />; } const { text, action, href = '#' } = item; return ( - <li key={i}> - <a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)}> + <li className='dropdown__content-list-item' key={ text + i }> + <a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)} className='dropdown__content-list-link'> {text} </a> </li> @@ -49,11 +49,11 @@ class DropdownMenu extends React.PureComponent { return ( <Dropdown ref={this.setRef}> <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}> - <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} /> + <i className={ `fa fa-fw fa-${icon} dropdown__icon` } /> </DropdownTrigger> - <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}> - <ul> + <DropdownContent className={directionClass}> + <ul className='dropdown__content-list'> {items.map(this.renderItem)} </ul> </DropdownContent> diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index e2059fc4f..67c6513fd 100644 --- a/app/assets/javascripts/components/components/icon_button.jsx +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -47,6 +47,10 @@ class IconButton extends React.PureComponent { classes.push('overlayed'); } + if (this.props.className) { + classes.push(this.props.className) + } + return ( <Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}> {({ rotate }) => @@ -66,6 +70,7 @@ class IconButton extends React.PureComponent { } IconButton.propTypes = { + className: PropTypes.string, title: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, onClick: PropTypes.func, diff --git a/app/assets/javascripts/components/components/loading_indicator.jsx b/app/assets/javascripts/components/components/loading_indicator.jsx index 913a4bf99..61e0a0f15 100644 --- a/app/assets/javascripts/components/components/loading_indicator.jsx +++ b/app/assets/javascripts/components/components/loading_indicator.jsx @@ -1,14 +1,7 @@ import { FormattedMessage } from 'react-intl'; -const style = { - textAlign: 'center', - fontSize: '16px', - fontWeight: '500', - paddingTop: '120px' -}; - const LoadingIndicator = () => ( - <div className='loading-indicator' style={style}> + <div className='loading-indicator'> <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' /> </div> ); diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx index ebc6e709d..6101c2eef 100644 --- a/app/assets/javascripts/components/components/media_gallery.jsx +++ b/app/assets/javascripts/components/components/media_gallery.jsx @@ -8,72 +8,7 @@ const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' } }); -const outerStyle = { - marginTop: '8px', - overflow: 'hidden', - width: '100%', - boxSizing: 'border-box', - position: 'relative' -}; - -const spoilerStyle = { - textAlign: 'center', - height: '100%', - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column' -}; - -const spoilerSpanStyle = { - display: 'block', - fontSize: '14px', -}; - -const spoilerSubSpanStyle = { - display: 'block', - fontSize: '11px', - fontWeight: '500' -}; - -const spoilerButtonStyle = { - position: 'absolute', - top: '4px', - left: '4px', - zIndex: '100' -}; - -const itemStyle = { - boxSizing: 'border-box', - position: 'relative', - float: 'left', - border: 'none', - display: 'block' -}; - -const thumbStyle = { - display: 'block', - width: '100%', - height: '100%', - textDecoration: 'none', - backgroundSize: 'cover', - cursor: 'zoom-in' -}; - -const gifvThumbStyle = { - position: 'relative', - zIndex: '1', - width: '100%', - height: '100%', - objectFit: 'cover', - top: '50%', - transform: 'translateY(-50%)', - cursor: 'zoom-in' -}; - class Item extends React.PureComponent { - constructor (props, context) { super(props, context); this.handleClick = this.handleClick.bind(this); @@ -147,24 +82,26 @@ class Item extends React.PureComponent { if (attachment.get('type') === 'image') { thumbnail = ( <a - href={attachment.get('remote_url') ? attachment.get('remote_url') : attachment.get('url')} + className='media-gallery__item-thumbnail' + href={attachment.get('remote_url') || attachment.get('url')} onClick={this.handleClick} target='_blank' - style={{ background: `url(${attachment.get('preview_url')}) no-repeat center`, ...thumbStyle }} + style={{ background: `url(${attachment.get('preview_url')}) no-repeat center`}} /> ); } else if (attachment.get('type') === 'gifv') { const autoPlay = !isIOS() && this.props.autoPlayGif; thumbnail = ( - <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }} className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}> + <div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}> <video + className='media-gallery__item-gifv-thumbnail' + role='application' src={attachment.get('url')} onClick={this.handleClick} autoPlay={autoPlay} loop={true} muted={true} - style={gifvThumbStyle} /> <span className='media-gallery__gifv__label'>GIF</span> @@ -173,7 +110,7 @@ class Item extends React.PureComponent { } return ( - <div key={attachment.get('id')} style={{ ...itemStyle, left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> + <div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> {thumbnail} </div> ); @@ -223,9 +160,9 @@ class MediaGallery extends React.PureComponent { } children = ( - <div role='button' tabIndex='0' style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}> - <span style={spoilerSpanStyle}>{warning}</span> - <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> + <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}> + <span className='media-spoiler__warning'>{warning}</span> + <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> </div> ); } else { @@ -234,8 +171,8 @@ class MediaGallery extends React.PureComponent { } return ( - <div style={{ ...outerStyle, height: `${this.props.height}px` }}> - <div style={{ ...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block' }}> + <div className='media-gallery' style={{ height: `${this.props.height}px` }}> + <div className='spoiler-button' style={{ display: !this.state.visible ? 'none' : 'block' }}> <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} /> </div> diff --git a/app/assets/javascripts/components/components/permalink.jsx b/app/assets/javascripts/components/components/permalink.jsx index 0ad477db7..ccbe4944f 100644 --- a/app/assets/javascripts/components/components/permalink.jsx +++ b/app/assets/javascripts/components/components/permalink.jsx @@ -15,9 +15,9 @@ class Permalink extends React.Component { } render () { - const { href, children, ...other } = this.props; + const { href, children, className, ...other } = this.props; - return <a href={href} onClick={this.handleClick} {...other}>{children}</a>; + return <a href={href} onClick={this.handleClick} {...other} className={'permalink ' + className}>{children}</a>; } } @@ -27,6 +27,7 @@ Permalink.contextTypes = { }; Permalink.propTypes = { + className: PropTypes.string, href: PropTypes.string.isRequired, to: PropTypes.string.isRequired, children: PropTypes.node diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index c57ee5c89..823c7b537 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -50,9 +50,9 @@ class Status extends React.PureComponent { const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; return ( - <div style={{ cursor: 'default' }}> + <div className='status__wrapper'> <div className='status__prepend'> - <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet' /></div> + <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> <FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} /> </div> @@ -73,13 +73,13 @@ class Status extends React.PureComponent { return ( <div className={this.props.muted ? 'status muted' : 'status'}> - <div style={{ fontSize: '15px' }}> - <div style={{ float: 'right', fontSize: '14px' }}> + <div className='status__info'> + <div className='status__info-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.bind(this, status.getIn(['account', 'id']))} 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.bind(this, status.getIn(['account', 'id']))} 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/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx index b452cb8cf..7b9d7a376 100644 --- a/app/assets/javascripts/components/components/status_action_bar.jsx +++ b/app/assets/javascripts/components/components/status_action_bar.jsx @@ -100,12 +100,12 @@ class StatusActionBar extends React.PureComponent { } return ( - <div style={{ marginTop: '10px', overflow: 'hidden' }}> - <div style={{ float: 'left', marginRight: '18px'}}><IconButton title={reply_title} icon={reply_icon} onClick={this.handleReplyClick} /></div> - <div style={{ float: 'left', marginRight: '18px'}}><IconButton disabled={status.get('visibility') === 'private' || status.get('visibility') === 'direct'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> - <div style={{ float: 'left', marginRight: '18px'}}><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> + <div className='status__action-bar'> + <div className='status__action-bar-button-wrapper'><IconButton title={reply_title} icon={reply_icon} onClick={this.handleReplyClick} /></div> + <div className='status__action-bar-button-wrapper'><IconButton disabled={status.get('visibility') === 'private' || status.get('visibility') === 'direct'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> + <div className='status__action-bar-button-wrapper'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} className='star-icon' /></div> - <div style={{ width: '18px', height: '18px', float: 'left' }}> + <div className='status__action-bar-dropdown'> <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" /> </div> </div> diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 08370b189..714c00951 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -112,7 +112,7 @@ class StatusContent extends React.PureComponent { } return ( - <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> + <div className='status__content' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <p style={{ marginBottom: hidden && status.get('mentions').size === 0 ? '0px' : '' }} > <span dangerouslySetInnerHTML={spoilerContent} /> <a tabIndex='0' className='status__content__spoiler-link' role='button' onClick={this.handleSpoilerClick}>{toggleText}</a> </p> @@ -126,7 +126,7 @@ class StatusContent extends React.PureComponent { return ( <div className='status__content' - style={{ cursor: 'pointer', ...directionStyle }} + style={{ ...directionStyle }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} dangerouslySetInnerHTML={content} @@ -135,7 +135,7 @@ class StatusContent extends React.PureComponent { } else { return ( <div - className='status__content' + className='status__content status__content--no-action' style={{ ...directionStyle }} dangerouslySetInnerHTML={content} /> diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index 7ba8bad1d..dc2a9509d 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -79,7 +79,7 @@ class StatusList extends React.PureComponent { <div className='scrollable' ref={this.setRef}> {unread} - <div> + <div className='status-list'> {prepend} {statusIds.map((statusId) => { diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index 50a69a759..09c8ed875 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -11,67 +11,6 @@ const messages = defineMessages({ expand_video: { id: 'video_player.video_error', defaultMessage: 'Video could not be played' } }); -const videoStyle = { - position: 'relative', - zIndex: '1', - width: '100%', - height: '100%', - objectFit: 'cover', - top: '50%', - transform: 'translateY(-50%)' -}; - -const muteStyle = { - position: 'absolute', - top: '4px', - right: '4px', - color: 'white', - textShadow: "0px 1px 1px black, 1px 0px 1px black", - opacity: '0.8', - zIndex: '5' -}; - -const coverStyle = { - marginTop: '8px', - textAlign: 'center', - height: '100%', - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column', - position: 'relative' -}; - -const spoilerSpanStyle = { - display: 'block', - fontSize: '14px' -}; - -const spoilerSubSpanStyle = { - display: 'block', - fontSize: '11px', - fontWeight: '500' -}; - -const spoilerButtonStyle = { - position: 'absolute', - top: '4px', - left: '4px', - color: 'white', - textShadow: "0px 1px 1px black, 1px 0px 1px black", - zIndex: '100' -}; - -const expandButtonStyle = { - position: 'absolute', - bottom: '4px', - right: '4px', - color: 'white', - textShadow: "0px 1px 1px black, 1px 0px 1px black", - zIndex: '100' -}; - class VideoPlayer extends React.PureComponent { constructor (props, context) { @@ -83,6 +22,7 @@ class VideoPlayer extends React.PureComponent { hasAudio: true, videoError: false }; + this.handleClick = this.handleClick.bind(this); this.handleVideoClick = this.handleVideoClick.bind(this); this.handleOpen = this.handleOpen.bind(this); @@ -170,13 +110,13 @@ class VideoPlayer extends React.PureComponent { const { media, intl, width, height, sensitive, autoplay } = this.props; let spoilerButton = ( - <div style={{...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block'}} > + <div className='status__video-player-spoiler' style={{ display: !this.state.visible ? 'none' : 'block' }} > <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} /> </div> ); let expandButton = ( - <div style={expandButtonStyle} > + <div className='status__video-player-expand'> <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} /> </div> ); @@ -185,7 +125,7 @@ class VideoPlayer extends React.PureComponent { if (this.state.hasAudio) { muteButton = ( - <div style={muteStyle}> + <div className='status__video-player-mute'> <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} /> </div> ); @@ -194,18 +134,18 @@ class VideoPlayer extends React.PureComponent { if (!this.state.visible) { if (sensitive) { return ( - <div role='button' tabIndex='0' style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}> + <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}> {spoilerButton} - <span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> - <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> + <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> + <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> </div> ); } else { return ( - <div role='button' tabIndex='0' style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}> + <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}> {spoilerButton} - <span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span> - <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> + <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span> + <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> </div> ); } @@ -213,27 +153,27 @@ class VideoPlayer extends React.PureComponent { if (this.state.preview && !autoplay) { return ( - <div role='button' tabIndex='0' style={{ cursor: 'pointer', position: 'relative', marginTop: '8px', width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }} onClick={this.handleOpen}> + <div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center` }} onClick={this.handleOpen}> {spoilerButton} - <div style={{ position: 'absolute', top: '50%', left: '50%', fontSize: '36px', transform: 'translate(-50%, -50%)', padding: '5px', borderRadius: '100px', color: 'rgba(255, 255, 255, 0.8)' }}><i className='fa fa-play' /></div> + <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div> </div> ); } if (this.state.videoError) { return ( - <div style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='video-error-cover' > - <span style={spoilerSpanStyle}><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span> + <div style={{ width: `${width}px`, height: `${height}px` }} className='video-error-cover' > + <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span> </div> ); } return ( - <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}> + <div className='status__video-player' style={{ width: `${width}px`, height: `${height}px` }}> {spoilerButton} {muteButton} {expandButton} - <video role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} /> + <video className='status__video-player-video' role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} onClick={this.handleVideoClick} /> </div> ); } 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> diff --git a/app/assets/javascripts/components/locales/nl.jsx b/app/assets/javascripts/components/locales/nl.jsx index 0a3d1d148..e1f9ff50c 100644 --- a/app/assets/javascripts/components/locales/nl.jsx +++ b/app/assets/javascripts/components/locales/nl.jsx @@ -122,7 +122,7 @@ const nl = { "upload_button.label": "Media toevoegen", "upload_form.undo": "Ongedaan maken", "video_player.toggle_sound": "Geluid in-/uitschakelen", - + }; export default nl; diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 425f44d95..4e7309a02 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -7,26 +7,31 @@ .button { background-color: darken($color4, 3%); - font-family: inherit; - display: inline-block; - position: relative; - box-sizing: border-box; - text-align: center; border: 10px none; + border-radius: 4px; + box-sizing: border-box; color: $color5; + cursor: pointer; + display: inline-block; + font-family: inherit; font-size: 14px; font-weight: 500; - letter-spacing: 0; - text-transform: uppercase; - padding: 0 16px; height: 36px; - cursor: pointer; + letter-spacing: 0; line-height: 36px; - border-radius: 4px; + overflow: hidden; + padding: 0 16px; + position: relative; + text-align: center; + text-transform: uppercase; text-decoration: none; + text-overflow: ellipsis; transition: all 100ms ease-in; + white-space: nowrap; - &:hover, &:active, &:focus { + &:active, + &:focus, + &:hover { background-color: lighten($color4, 7%); transition: all 200ms ease-out; } @@ -41,9 +46,20 @@ } } +.column-collapsable { + position: relative; +} + .column-icon { - color: $color3; background: lighten($color1, 4%); + color: $color3; + cursor: pointer; + font-size: 16px; + padding: 15px; + position: absolute; + right: 0; + top: -48px; + z-index: 3; &:hover { color: lighten($color3, 7%); @@ -178,18 +194,14 @@ } } -.avatar { - border-radius: 4px; - background: transparent no-repeat; - background-position: 50%; - background-clip: padding-box; - position: relative; -} - .lightbox .icon-button { color: $color1; } +.compose-form { + padding: 10px; +} + .compose-form__warning { color: $color2; margin-bottom: 15px; @@ -213,6 +225,11 @@ border-radius: 0 0 4px 0; } +.compose-form__buttons-wrapper { + display: flex; + justify-content: space-between; +} + .compose-form__buttons { padding: 10px; background: darken($color5, 8%); @@ -226,6 +243,31 @@ } } +.compose-form__upload-button-icon { + line-height: 27px; +} + +.compose-form__upload-wrapper { + overflow: hidden; +} + +.compose-form__uploads-wrapper { + display: flex; + padding: 5px; +} + +.compose-form__upload { + flex: 1 1 0; + margin: 5px; +} + +.compose-form__upload-cancel { + background-size: cover; + border-radius: 4px; + height: 100px; + width: 100px; +} + .compose-form__label { display: block; line-height: 24px; @@ -253,6 +295,20 @@ } } +.compose-form__autosuggest-wrapper { + position: relative; +} + +.compose-form__publish { + display: flex; + min-width: 0; +} + +.compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; +} + .emojione { display: inline-block; font-size: inherit; @@ -272,13 +328,43 @@ bottom: -2px; background: $color3; padding: 10px; +} - .reply-indicator__display-name { - color: $color1; - } +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; +} + +.reply-indicator__cancel { + float: right; + line-height: 24px; +} + +.reply-indicator__display-name { + color: $color1; + display: block; + max-width: 100%; + line-height: 24px; + overflow: hidden; + padding-right: 25px; + text-decoration: none; +} + +.reply-indicator__display-avatar { + float: left; + margin-right: 5px; +} + +.status__content { + cursor: pointer; +} + +.status__content--no-action { + cursor: default; } -.status__content, .reply-indicator__content { +.status__content, +.reply-indicator__content { font-size: 15px; line-height: 20px; word-wrap: break-word; @@ -347,6 +433,11 @@ a.status__content__spoiler-link { line-height: inherit; } +.status__prepend-icon-wrapper { + left: -26px; + position: absolute; +} + .status { padding: 8px 10px; padding-left: 68px; @@ -355,14 +446,6 @@ a.status__content__spoiler-link { border-bottom: 1px solid lighten($color1, 8%); cursor: default; - .status__relative-time { - color: lighten($color1, 26%); - } - - .status__display-name { - color: lighten($color1, 26%); - } - &.light { .status__relative-time { color: $color3; @@ -401,14 +484,45 @@ a.status__content__spoiler-link { } } +.status__relative-time { + color: lighten($color1, 26%); +} + +.status__display-name { + color: lighten($color1, 26%); + display: block; + max-width: 100%; + padding-right: 25px; +} + +.status__info { + font-size: 15px; +} + +.status__info-time { + float: right; + font-size: 14px; +} + .status-check-box { border-bottom: 1px solid lighten($color1, 8%); + display: flex; .status__content { background: lighten($color1, 4%); + flex: 1 1 auto; + padding: 10px; } } +.status-check-box-toggle { + align-items: center; + display: flex; + flex: 0 0 auto; + justify-content: center; + padding: 10px; +} + .status__prepend { margin-left: 68px; color: lighten($color1, 26%); @@ -422,8 +536,25 @@ a.status__content__spoiler-link { } } +.status__action-bar { + margin-top: 10px; + overflow: hidden; +} + +.status__action-bar-button-wrapper { + float: left; + margin-right: 18px; +} + +.status__action-bar-dropdown { + float: left; + height: 18px; + width: 18px; +} + .detailed-status { background: lighten($color1, 4%); + padding: 14px 10px; .status__content { font-size: 19px; @@ -452,6 +583,19 @@ a.status__content__spoiler-link { padding: 10px 0; } +.detailed-status__link { + color: inherit; + text-decoration: none; +} + +.detailed-status__favorites, +.detailed-status__reblogs { + display: inline-block; + font-weight: 500; + font-size: 12px; + margin-left: 6px; +} + .reply-indicator__content { color: $color1; font-size: 14px; @@ -475,6 +619,29 @@ a.status__content__spoiler-link { } } +.account__wrapper { + display: flex; +} + +.account__avatar-wrapper { + float: left; + margin-left: 12px; + margin-right: 12px; +} + +.account__avatar { + border-radius: 4px; + background: transparent no-repeat; + background-position: 50%; + background-clip: padding-box; + position: relative; +} + +.account__relationship { + height: 18px; + padding: 10px; +} + .account__header { flex: 0 0 auto; background: lighten($color1, 4%); @@ -501,11 +668,12 @@ a.status__content__spoiler-link { } .account__header__content { - word-wrap: break-word; - word-break: normal; + color: $color3; + font-size: 14px; font-weight: 400; overflow: hidden; - color: $color3; + word-break: normal; + word-wrap: break-word; p { margin-bottom: 20px; @@ -541,6 +709,17 @@ a.status__content__spoiler-link { display: flex; } +.account__action-bar-dropdown { + flex: 1 1 auto; + padding: 10px; +} + +.account__action-bar-links { + display: flex; + flex: 1 1 auto; + line-height: 18px; +} + .account__action-bar__tab { text-decoration: none; overflow: hidden; @@ -567,11 +746,41 @@ a.status__content__spoiler-link { } } -.status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name { +.account__header__avatar { + background-size: 90px 90px; + display: block; + height: 90px; + margin: 0 auto 10px; + overflow: hidden; + width: 90px; +} + +.account-authorize { + padding: 14px 10px; + + .detailed-status__display-name { + display: block; + margin-bottom: 15px; + overflow: hidden; + } +} + +.account-authorize__avatar { + float: left; + margin-right: 10px; +} + +.status__display-name, +.status__relative-time, +.detailed-status__display-name, +.detailed-status__datetime, +.detailed-status__application, +.account__display-name { text-decoration: none; } -.status__display-name, .account__display-name { +.status__display-name, +.account__display-name { strong { color: $color5; } @@ -583,25 +792,33 @@ a.status__content__spoiler-link { } } -.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name { - &:hover { - strong { - text-decoration: underline; - } +.status__display-name, +.reply-indicator__display-name, +.detailed-status__display-name, +.account__display-name { + &:hover strong { + text-decoration: underline; } } -.account__display-name { - strong { - display: block; - } +.account__display-name strong { + display: block; +} + +.detailed-status__application, +.detailed-status__datetime { + color: inherit; } .detailed-status__display-name { color: $color2; + display: block; line-height: 24px; + margin-bottom: 15px; + overflow: hidden; - strong, span { + strong, + span { display: block; } @@ -611,8 +828,22 @@ a.status__content__spoiler-link { } } +.detailed-status__display-avatar { + float: right; + margin-right: 10px; +} + +.status__avatar { + height: 48px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; +} + .muted { - .status__content p, .status__content a { + .status__content p, + .status__content a { color: lighten($color1, 26%); } @@ -624,7 +855,7 @@ a.status__content__spoiler-link { opacity: 0.5; } - a.status__content__spoiler-link { + .status__content__spoiler-link { background: lighten($color1, 26%); color: lighten($color1, 4%); @@ -649,8 +880,18 @@ a.status__content__spoiler-link { } } +.notification__favourite-icon-wrapper { + left: -26px; + position: absolute; +} + +.star-icon.active { + color: #ca8f04; +} + .notification__display-name { color: inherit; + font-weight: 500; text-decoration: none; &:hover { @@ -659,7 +900,24 @@ a.status__content__spoiler-link { } } -.status__relative-time, .detailed-status__datetime { +.display-name { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.display-name__html { + font-weight: 500; +} + +.display-name__account { + font-size: 14px; +} + +.status__relative-time, +.detailed-status__datetime { &:hover { text-decoration: underline; } @@ -683,6 +941,25 @@ a.status__content__spoiler-link { strong { color: $color5; } + + .permalink { + text-decoration: none; + } +} + +.navigation-bar__profile { + flex: 1 1 auto; + margin-left: 8px; +} + +.navigation-bar__profile-account { + display: block; + font-weight: 500; +} + +.navigation-bar__profile-edit { + color: inherit; + text-decoration: none; } .dropdown { @@ -702,6 +979,8 @@ a.status__content__spoiler-link { .dropdown--active .dropdown__content { display: block; + line-height: 18px; + text-align: left; z-index: 9999; &:before { @@ -769,6 +1048,10 @@ a.status__content__spoiler-link { } } +.dropdown__icon { + vertical-align: middle; +} + .static-content { padding: 10px; padding-top: 20px; @@ -788,8 +1071,11 @@ a.status__content__spoiler-link { } .columns-area { + display: flex; + flex: 1 1 auto; flex-direction: row; justify-content: flex-start; + overflow-x: auto; } @media screen and (min-width: 360px) { @@ -1074,6 +1360,25 @@ a.status__content__spoiler-link { } } +.column-back-button__icon { + display: inline-block; + margin-right: 5px; +} + +.column-back-button--slim { + position: relative; +} + +.column-back-button--slim-button { + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + padding: 15px; + position: absolute; + right: 0; + top: -48px; +} + .react-toggle { display: inline-block; position: relative; @@ -1184,6 +1489,9 @@ a.status__content__spoiler-link { background: lighten($color1, 8%); color: $color5; display: block; + font-size: 16px; + padding: 15px; + text-decoration: none; &:hover { background: lighten($color1, 11%); @@ -1196,11 +1504,18 @@ a.status__content__spoiler-link { } } -.autosuggest-textarea, .spoiler-input { +.column-link__icon { + display: inline-block; + margin-right: 5px; +} + +.autosuggest-textarea, +.spoiler-input { position: relative; } -.autosuggest-textarea__textarea, .spoiler-input__input { +.autosuggest-textarea__textarea, +.spoiler-input__input { display: block; box-sizing: border-box; width: 100%; @@ -1265,6 +1580,44 @@ a.status__content__spoiler-link { } } +.autosuggest-account { + overflow: hidden; +} + +.autosuggest-account-icon { + float: left; + margin-right: 5px; +} + +.autosuggest-status { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + strong { + font-weight: 500; + } +} + +.character-counter__wrapper { + line-height: 36px; + margin-right: 16px; + padding-top: 10px; +} + +.character-counter { + cursor: default; + font-size: 16px; +} + +.character-counter--over { + color: #ff5050; +} + +.getting-started__wrapper { + position: relative; +} + .getting-started { box-sizing: border-box; padding-bottom: 235px; @@ -1285,6 +1638,12 @@ a.status__content__spoiler-link { background: transparent; border: none; border-bottom: 2px solid $color3; + box-sizing: border-box; + display: block; + font-family: inherit; + margin-bottom: 10px; + padding: 7px 0px; + width: 100%; &:focus, &:active { color: $color5; @@ -1295,7 +1654,7 @@ a.status__content__spoiler-link { font-size: 16px; } } - + @import 'boost'; button.icon-button i.fa-retweet { @@ -1341,6 +1700,12 @@ button.icon-button.active i.fa-retweet { white-space: nowrap; } +.status-card__content { + flex: 1 1 auto; + overflow: hidden; + padding: 14px 14px 14px 8px; +} + .status-card__description { color: $color3; } @@ -1350,6 +1715,14 @@ button.icon-button.active i.fa-retweet { background: lighten($color1, 8%); } +.status-card__image-image { + border-radius: 4px 0px 0px 4px; + display: block; + height: auto; + margin: 0; + width: 100%; +} + .load-more { display: block; color: lighten($color1, 26%); @@ -1397,8 +1770,17 @@ button.icon-button.active i.fa-retweet { } } +.column-header__icon { + display: inline-block; + margin-right: 5px; +} + .loading-indicator { color: $color2; + font-size: 16px; + font-weight: 500; + padding-top: 120px; + text-align: center; } .collapsable-collapsed { @@ -1416,9 +1798,37 @@ button.icon-button.active i.fa-retweet { } } -.media-spoiler, .video-error-cover { +.media-spoiler, +.video-error-cover { + align-items: center; background: $color8; color: $color5; + cursor: pointer; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + margin-top: 8px; + position: relative; + text-align: center; + z-index: 100; +} + +.media-spoiler__warning { + display: block; + font-size: 14px; +} + +.media-spoiler__trigger { + display: block; + font-size: 11px; + font-weight: 500; +} + +.spoiler-button { + left: 4px; + position: absolute; + top: 4px; } .modal-container--preloader { @@ -1429,32 +1839,82 @@ button.icon-button.active i.fa-retweet { background: lighten($color1, 4%); border-top: 1px solid lighten($color1, 8%); border-bottom: 1px solid lighten($color1, 8%); + display: flex; + flex-direction: row; + padding: 10px 0px; +} + +.account--panel__button, +.detailed-status__button { + flex: 1 1 auto; + text-align: center; } -.column-settings--outer { +.column-settings__outer { background: lighten($color1, 8%); + padding: 15px; } -.column-settings--section { +.column-settings__section { color: $color3; + cursor: default; + display: block; + font-weight: 500; + margin-bottom: 10px; } .modal-container__nav { + align-items: center; + background: rgba(0, 0, 0, 0.5); + box-sizing: border-box; color: $color5; + cursor: pointer; + display: flex; + font-size: 24px; + height: 100%; + padding: 30px 15px; + position: absolute; + top: 0; +} + +.modal-container__nav--left { + left: -61px; +} + +.modal-container__nav--right { + right: -61px; } .account--follows-info { color: $color5; } +.setting-toggle__label { + display: block; + line-height: 24px; + vertical-align: middle; +} + .setting-toggle { color: $color3; + display: inline-block; + margin-bottom: 14px; + margin-left: 8px; + vertical-align: middle; +} + +.report.scrollable { + box-sizing: border-box; + display: flex; + flex-direction: column; + max-height: 100%; } .report__target { border-bottom: 1px solid lighten($color1, 4%); color: $color2; - padding-bottom: 10px; + flex: 0 0 auto; + padding: 10px; strong { display: block; @@ -1463,20 +1923,30 @@ button.icon-button.active i.fa-retweet { } } +.report__statuses { + flex: 1 1 auto; +} + +.report__textarea-wrapper { + flex: 0 0 100px; + padding: 10px; +} + .report__textarea { background: transparent; box-sizing: border-box; border: 0; border-bottom: 2px solid $color3; border-radius: 2px 2px 0 0; - padding: 7px 4px; - font-size: 14px; color: $color5; display: block; - width: 100%; - outline: 0; font-family: inherit; + font-size: 14px; + margin-bottom: 10px; + outline: 0; + padding: 7px 4px; resize: vertical; + width: 100%; &:active, &:focus { border-bottom-color: $color4; @@ -1484,6 +1954,15 @@ button.icon-button.active i.fa-retweet { } } +.report__submit { + margin-top: 10px; + overflow: hidden; +} + +.report__submit-button { + float: right; +} + .empty-column-indicator { color: lighten($color1, 20%); background: $color1; @@ -1708,28 +2187,18 @@ button.icon-button.active i.fa-retweet { } } -.autosuggest-status { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - } -} - .upload-area { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - visibility: hidden; + align-items: center; background: rgba($color8, 0.8); display: flex; - align-items: center; + height: 100%; justify-content: center; + left: 0; opacity: 0; + position: absolute; + top: 0; + visibility: hidden; + width: 100%; z-index: 2000; * { @@ -1789,6 +2258,10 @@ button.icon-button.active i.fa-retweet { } } +.upload-progess__message { + flex: 1 1 auto; +} + .upload-progress__backdrop { width: 100%; height: 6px; @@ -1902,6 +2375,10 @@ 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); @@ -2021,6 +2498,7 @@ button.icon-button.active i.fa-retweet { z-index: 9999; opacity: 0; background: rgba($color8, 0.7); + transform: translateZ(0px); } .modal-root__container { @@ -2057,6 +2535,13 @@ button.icon-button.active i.fa-retweet { } } +.media-modal__close { + position: absolute; + right: 4; + top: 4; + z-index: 100; +} + .onboarding-modal { background: $color2; color: $color1; @@ -2297,6 +2782,20 @@ button.icon-button.active i.fa-retweet { width: 480px; position: relative; flex-direction: column; + + .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; + } + + .status__avatar { + height: 28px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; + } } .boost-modal__container { @@ -2327,6 +2826,15 @@ button.icon-button.active i.fa-retweet { } } +.boost-modal__status-header { + font-size: 15px; +} + +.boost-modal__status-time { + float: right; + font-size: 14px; +} + .loading-bar { background-color: $color4; height: 3px; @@ -2415,3 +2923,116 @@ button.icon-button.active i.fa-retweet { } } } + +/* Media Gallery */ +.media-gallery { + box-sizing: border-box; + margin-top: 8px; + overflow: hidden; + position: relative; + width: 100%; +} + +.media-gallery__item { + border: none; + box-sizing: border-box; + display: block; + float: left; + position: relative; +} + +.media-gallery__item-thumbnail { + background-size: cover; + cursor: zoom-in; + display: block; + height: 100%; + text-decoration: none; + width: 100%; +} + +.media-gallery__gifv { + height: 100%; + overflow: hidden; + position: relative; + width: 100%; +} + +.media-gallery__item-gifv-thumbnail { + cursor: zoom-in; + height: 100%; + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; + z-index: 1; +} + +.media-gallery__item-thumbnail-label { + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + position: absolute; +} +/* End Media Gallery */ + +/* Status Video Player */ +.status__video-player { + background: #000; + box-sizing: border-box; + cursor: default; /* May not be needed */ + margin-top: 8px; + overflow: hidden; + position: relative; +} + +.status__video-player-video { + height: 100%; + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; + z-index: 1; +} + +.status__video-player-expand, +.status__video-player-mute { + color: #fff; + opacity: 0.8; + position: absolute; + right: 4px; + text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; + top: 4px; +} + +.status__video-player-spoiler { + color: #fff; + text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; +} + +.status__video-player-expand { + z-index: 100; +} + +.status__video-player-mute { + z-index: 5; +} + +.media-spoiler-video { + background-size: cover; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.media-spoiler-video-play-icon { + border-radius: 100px; + color: rgba(255, 255, 255, 0.8); + fontSize: 36px; + padding: 5px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +} +/* End Video Player */ |