From 82fd74d101838396fc6462d15106624294b78868 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 10 Nov 2016 23:21:24 +0100
Subject: [PATCH] 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)
---
.../components/column_back_button.jsx | 2 +-
.../components/components/dropdown_menu.jsx | 2 +-
.../components/components/lightbox.jsx | 54 +++++++++++--------
.../components/components/status.jsx | 6 +--
.../components/status_action_bar.jsx | 2 +-
.../components/components/status_content.jsx | 5 +-
.../features/account/components/header.jsx | 2 +-
.../features/status/components/action_bar.jsx | 10 ++--
.../ui/containers/modal_container.jsx | 5 +-
app/assets/stylesheets/components.scss | 6 +++
package.json | 1 +
yarn.lock | 17 ++++++
12 files changed, 72 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 755378ad82..c3ed8f8d09 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 f58a36d296..450550d55a 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 fe9b7984ae..aef0bac14a 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 53b2017708..87a846294f 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 16e3935347..e80ce824f0 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 a6321d31ca..e51be3c689 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 39666bdc1d..062f4a0f2c 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 2733cea070..b1202ad8e1 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 b6c0227367..cd7d63a4a9 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 71ef7f3a8f..89397a96d6 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;
+ }
+}
diff --git a/package.json b/package.json
index dd8838c531..d5429cb074 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
"dependencies": {
"emojione": "^2.2.6",
"react-autosuggest": "^7.0.1",
+ "react-motion": "^0.4.5",
"react-responsive": "^1.1.5",
"react-router-scroll": "^0.3.2"
}
diff --git a/yarn.lock b/yarn.lock
index bf2a271ab4..7357873021 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,6 +3431,10 @@ pbkdf2@^3.0.3:
dependencies:
create-hmac "^1.1.2"
+performance-now@^0.2.0, performance-now@~0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
pinkie-promise@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -3779,6 +3783,12 @@ querystring@^0.2.0, querystring@0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+raf@^3.1.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.0.tgz#93845eeffc773f8129039f677f80a36044eee2c3"
+ dependencies:
+ performance-now "~0.2.0"
+
randomatic@^1.1.3:
version "1.1.5"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
@@ -3887,6 +3897,13 @@ react-modal@^1.2.0, react-modal@^1.2.1:
exenv "1.2.0"
lodash.assign "^3.2.0"
+react-motion:
+ version "0.4.5"
+ resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.4.5.tgz#ecc42f692fec9b2de4c92f85e26375071f779b76"
+ dependencies:
+ performance-now "^0.2.0"
+ raf "^3.1.0"
+
react-notification@^6.1.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/react-notification/-/react-notification-6.2.1.tgz#deeccf15c0899badc24adaa704a1e78583762438"
--
GitLab