tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix modals sizing and add animation to it, fix #140 by only making the text of

Browse Source 
status clickable (this also fixes multiple dropdown being openable at the same
time)
This commit is contained in:
Eugen Rochko
2016-11-10 23:21:24 +01:00
parent 0320ea4b85
commit 82fd74d101
12 changed files with 73 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/components/components/column_back_button.jsx
View File

@ -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>

2
app/assets/javascripts/components/components/dropdown_menu.jsx
View File

@ -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') {

56
app/assets/javascripts/components/components/lightbox.jsx
View File

@ -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
},
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>
);
}
return (
<div className='lightbox' style={overlayStyle} onClick={onOverlayClicked}>
<div style={dialogStyle}>
<IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
{children}
</div>
</div>
);
};
Lightbox.propTypes = {
isVisible: React.PropTypes.bool,
onOverlayClicked: React.PropTypes.func,
onCloseClicked: React.PropTypes.func
};
});
export default Lightbox;

6
app/assets/javascripts/components/components/status.jsx
View File

@ -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}

2
app/assets/javascripts/components/components/status_action_bar.jsx
View File

@ -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>

5
app/assets/javascripts/components/components/status_content.jsx
View File

@ -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} />;
},
});

2
app/assets/javascripts/components/features/account/components/header.jsx
View File

@ -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' }} />

10
app/assets/javascripts/components/features/status/components/action_bar.jsx
View File

@ -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 () {

5
app/assets/javascripts/components/features/ui/containers/modal_container.jsx
View File

@ -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({