diff options
Diffstat (limited to 'app/assets/javascripts/components')
9 files changed, 48 insertions, 40 deletions
diff --git a/app/assets/javascripts/components/components/column_back_button.jsx b/app/assets/javascripts/components/components/column_back_button.jsx index 755378ad8..c3ed8f8d0 100644 --- a/app/assets/javascripts/components/components/column_back_button.jsx +++ b/app/assets/javascripts/components/components/column_back_button.jsx @@ -28,7 +28,7 @@ const ColumnBackButton = React.createClass({ render () { return ( - <div onClick={this.handleClick} style={outerStyle}> + <div onClick={this.handleClick} style={outerStyle} className='column-back-button'> <i className='fa fa-fw fa-chevron-left' style={iconStyle} /> Back </div> diff --git a/app/assets/javascripts/components/components/dropdown_menu.jsx b/app/assets/javascripts/components/components/dropdown_menu.jsx index f58a36d29..450550d55 100644 --- a/app/assets/javascripts/components/components/dropdown_menu.jsx +++ b/app/assets/javascripts/components/components/dropdown_menu.jsx @@ -7,7 +7,7 @@ const DropdownMenu = ({ icon, items, size }) => { <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} /> </DropdownTrigger> - <DropdownContent style={{ lineHeight: '18px' }}> + <DropdownContent style={{ lineHeight: '18px', textAlign: 'left' }}> <ul> {items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => { if (typeof action === 'function') { diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx index fe9b7984a..aef0bac14 100644 --- a/app/assets/javascripts/components/components/lightbox.jsx +++ b/app/assets/javascripts/components/components/lightbox.jsx @@ -1,4 +1,6 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; +import { Motion, spring } from 'react-motion'; const overlayStyle = { position: 'fixed', @@ -6,19 +8,17 @@ const overlayStyle = { left: '0', width: '100%', height: '100%', - justifyContent: 'center', - alignContent: 'center', background: 'rgba(0, 0, 0, 0.5)', display: 'flex', + justifyContent: 'center', + alignContent: 'center', + flexDirection: 'row', zIndex: '9999' }; const dialogStyle = { color: '#282c37', - background: '#d9e1e8', - borderRadius: '4px', - boxShadow: '0 0 15px rgba(0, 0, 0, 0.4)', - padding: '10px', + boxShadow: '0 0 30px rgba(0, 0, 0, 0.8)', margin: 'auto', position: 'relative' }; @@ -29,25 +29,33 @@ const closeStyle = { right: '4px' }; -const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) => { - if (!isVisible) { - return <div />; - } +const Lightbox = React.createClass({ + + propTypes: { + isVisible: React.PropTypes.bool, + onOverlayClicked: React.PropTypes.func, + onCloseClicked: React.PropTypes.func + }, - return ( - <div className='lightbox' style={overlayStyle} onClick={onOverlayClicked}> - <div style={dialogStyle}> - <IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} /> - {children} + mixins: [PureRenderMixin], + + render () { + const { isVisible, onOverlayClicked, onCloseClicked, children } = this.props; + + return ( + <div className='lightbox' style={{...overlayStyle, display: isVisible ? 'flex' : 'none'}} onClick={onOverlayClicked}> + <Motion defaultStyle={{ y: -200 }} style={{ y: spring(isVisible ? 0 : -200) }}> + {({ y }) => + <div style={{...dialogStyle, transform: `translateY(${y}px)`}}> + <IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} /> + {children} + </div> + } + </Motion> </div> - </div> - ); -}; + ); + } -Lightbox.propTypes = { - isVisible: React.PropTypes.bool, - onOverlayClicked: React.PropTypes.func, - onCloseClicked: React.PropTypes.func -}; +}); export default Lightbox; diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 53b201770..87a846294 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -58,7 +58,7 @@ const Status = React.createClass({ } return ( - <div style={{ cursor: 'pointer' }} onClick={this.handleClick}> + <div style={{ cursor: 'default' }}> <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}> <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div> <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name'><strong style={{ color: '#616b86'}}>{displayName}</strong></a> reblogged @@ -78,7 +78,7 @@ const Status = React.createClass({ } return ( - <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }} onClick={this.handleClick}> + <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'default' }}> <div style={{ fontSize: '15px' }}> <div style={{ float: 'right', fontSize: '14px' }}> <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }} target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} now={now} /></a> @@ -93,7 +93,7 @@ const Status = React.createClass({ </a> </div> - <StatusContent status={status} /> + <StatusContent status={status} onClick={this.handleClick} /> {media} diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx index 16e393534..e80ce824f 100644 --- a/app/assets/javascripts/components/components/status_action_bar.jsx +++ b/app/assets/javascripts/components/components/status_action_bar.jsx @@ -51,7 +51,7 @@ const StatusActionBar = React.createClass({ <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div> <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> - <div onClick={e => e.stopPropagation()} style={{ width: '18px', height: '18px', float: 'left' }}> + <div style={{ width: '18px', height: '18px', float: 'left' }}> <DropdownMenu items={menu} icon='ellipsis-h' size={18} /> </div> </div> diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index a6321d31c..e51be3c68 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -13,7 +13,8 @@ const StatusContent = React.createClass({ }, propTypes: { - status: ImmutablePropTypes.map.isRequired + status: ImmutablePropTypes.map.isRequired, + onClick: React.PropTypes.func }, mixins: [PureRenderMixin], @@ -61,7 +62,7 @@ const StatusContent = React.createClass({ render () { const content = { __html: emojione.unicodeToImage(this.props.status.get('content')) }; - return <div className='status__content' dangerouslySetInnerHTML={content} />; + return <div className='status__content' style={{ cursor: 'pointer' }} dangerouslySetInnerHTML={content} onClick={this.props.onClick} />; }, }); diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx index 39666bdc1..062f4a0f2 100644 --- a/app/assets/javascripts/components/features/account/components/header.jsx +++ b/app/assets/javascripts/components/features/account/components/header.jsx @@ -28,7 +28,7 @@ const Header = React.createClass({ return ( <div style={{ flex: '0 0 auto', background: '#2f3441', textAlign: 'center', backgroundImage: `url(${account.get('header')})`, backgroundSize: 'cover', position: 'relative' }}> - <div style={{ background: 'rgba(47, 52, 65, 0.8)', padding: '20px 10px' }}> + <div style={{ background: 'rgba(47, 52, 65, 0.9)', padding: '20px 10px' }}> <a href={account.get('url')} target='_blank' rel='noopener' style={{ display: 'block', color: 'inherit', textDecoration: 'none' }}> <div style={{ width: '90px', margin: '0 auto', marginBottom: '10px' }}> <img src={account.get('avatar')} alt='' style={{ display: 'block', width: '90px', height: '90px', borderRadius: '90px' }} /> 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 2733cea07..b1202ad8e 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -18,23 +18,23 @@ const ActionBar = React.createClass({ mixins: [PureRenderMixin], handleReplyClick () { - this.props.onReply(status); + this.props.onReply(this.props.status); }, handleReblogClick () { - this.props.onReblog(status); + this.props.onReblog(this.props.status); }, handleFavouriteClick () { - this.props.onFavourite(status); + this.props.onFavourite(this.props.status); }, handleDeleteClick () { - this.props.onDelete(status); + this.props.onDelete(this.props.status); }, handleMentionClick () { - this.props.onMention(status.get('account')); + this.props.onMention(this.props.status.get('account')); }, render () { diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx index b6c022736..cd7d63a4a 100644 --- a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx +++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx @@ -19,9 +19,8 @@ const mapDispatchToProps = dispatch => ({ const imageStyle = { display: 'block', - maxWidth: '100%', - height: 'auto', - margin: '0 auto' + maxWidth: '80vw', + maxHeight: '80vh' }; const Modal = React.createClass({ |