diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2016-11-10 23:21:24 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2016-11-10 23:21:24 +0100 |
commit | 82fd74d101838396fc6462d15106624294b78868 (patch) | |
tree | 5bf5e71ada5c377090c6a7104b25b37067f1155d /app | |
parent | 0320ea4b85adab1d5a84613df42120aebe224fab (diff) |
Fix modals sizing and add animation to it, fix #140 by only making the text of
status clickable (this also fixes multiple dropdown being openable at the same time)
Diffstat (limited to 'app')
10 files changed, 54 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({ diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 71ef7f3a8..89397a96d 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -350,3 +350,9 @@ flex: 1 1 auto; -webkit-overflow-scrolling: touch; } + +.column-back-button { + &:hover { + text-decoration: underline; + } +} |