Replace inline styles with CSS classes (BEM) (#2338)
* fix(classnames): Status icon style classnames Take out inline css and put into classnames for the following components: account, avatar, icon button, status action bar, notification. * fix(status): Move styles from inline to classes for statuses Move styles to classnames in components.scss for the following components: display name media gallery status status content video player * fix(classnames): Add classnames to rest of components Take out inline styles and apply them to classnames in the sass for the following components: button column back button slim column back button collapsable column dropdown menu loading indicator status list * fix(classnames): Remove all non-dynamic inline styles Components affected: autosuggested permalink action bar header character counter compose form emoji dropdown privacy dropdown reply indicator upload form account auth followers getting started column settings mutes settings reblogs status checkbox report action bar status card boost modal media modal video modal * fix(permalink): Do not lose classname * fix(tests): Add space back in display name * fix(status__wrapper): Remove duplicate css name Remove incorrect style attribute. Remove style attribute all together. Cursor defaults to "auto" when not specified as 'default'. * fix(nl): do not lose translations
This commit is contained in:
Stephen Burgess
Eugen
parent
532bec6e56
commit
cca41ea544
58 changed files with 903 additions and 608 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue