forked from cybrespace/mastodon
		
	Make all account links into permalinks (open public except on left click)
This commit is contained in:
		
							parent
							
								
									470f629b06
								
							
						
					
					
						commit
						8cfcc52876
					
				
					 4 changed files with 37 additions and 9 deletions
				
			
		| 
						 | 
					@ -2,7 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 | 
				
			||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
 | 
					import ImmutablePropTypes from 'react-immutable-proptypes';
 | 
				
			||||||
import Avatar from './avatar';
 | 
					import Avatar from './avatar';
 | 
				
			||||||
import DisplayName from './display_name';
 | 
					import DisplayName from './display_name';
 | 
				
			||||||
import { Link } from 'react-router';
 | 
					import Permalink from './permalink';
 | 
				
			||||||
import IconButton from './icon_button';
 | 
					import IconButton from './icon_button';
 | 
				
			||||||
import { defineMessages, injectIntl } from 'react-intl';
 | 
					import { defineMessages, injectIntl } from 'react-intl';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -78,10 +78,10 @@ const Account = React.createClass({
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <div style={outerStyle}>
 | 
					      <div style={outerStyle}>
 | 
				
			||||||
        <div style={{ display: 'flex' }}>
 | 
					        <div style={{ display: 'flex' }}>
 | 
				
			||||||
          <Link key={account.get('id')} style={itemStyle} className='account__display-name' to={`/accounts/${account.get('id')}`}>
 | 
					          <Permalink key={account.get('id')} style={itemStyle} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
 | 
				
			||||||
            <div style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
 | 
					            <div style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
 | 
				
			||||||
            <DisplayName account={account} />
 | 
					            <DisplayName account={account} />
 | 
				
			||||||
          </Link>
 | 
					          </Permalink>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          <div style={buttonsStyle}>
 | 
					          <div style={buttonsStyle}>
 | 
				
			||||||
            {buttons}
 | 
					            {buttons}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
							
								
								
									
										27
									
								
								app/assets/javascripts/components/components/permalink.jsx
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								app/assets/javascripts/components/components/permalink.jsx
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
					@ -0,0 +1,27 @@
 | 
				
			||||||
 | 
					const Permalink = React.createClass({
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  contextTypes: {
 | 
				
			||||||
 | 
					    router: React.PropTypes.object
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  propTypes: {
 | 
				
			||||||
 | 
					    href: React.PropTypes.string.isRequired,
 | 
				
			||||||
 | 
					    to: React.PropTypes.string.isRequired
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  handleClick (e) {
 | 
				
			||||||
 | 
					    if (e.button === 0) {
 | 
				
			||||||
 | 
					      e.preventDefault();
 | 
				
			||||||
 | 
					      this.context.router.push(this.props.to);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  render () {
 | 
				
			||||||
 | 
					    const { href, children, ...other } = this.props;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    return <a href={href} onClick={this.handleClick} {...other}>{children}</a>;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default Permalink;
 | 
				
			||||||
| 
						 | 
					@ -3,8 +3,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 | 
				
			||||||
import Avatar from '../../../components/avatar';
 | 
					import Avatar from '../../../components/avatar';
 | 
				
			||||||
import IconButton from '../../../components/icon_button';
 | 
					import IconButton from '../../../components/icon_button';
 | 
				
			||||||
import DisplayName from '../../../components/display_name';
 | 
					import DisplayName from '../../../components/display_name';
 | 
				
			||||||
import { Link } from 'react-router';
 | 
					import Permalink from '../../../components/permalink';
 | 
				
			||||||
import { FormattedMessage } from 'react-intl';
 | 
					import { FormattedMessage } from 'react-intl';
 | 
				
			||||||
 | 
					import { Link } from 'react-router';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const NavigationBar = React.createClass({
 | 
					const NavigationBar = React.createClass({
 | 
				
			||||||
  propTypes: {
 | 
					  propTypes: {
 | 
				
			||||||
| 
						 | 
					@ -16,7 +17,7 @@ const NavigationBar = React.createClass({
 | 
				
			||||||
  render () {
 | 
					  render () {
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <div style={{ padding: '10px', display: 'flex', cursor: 'default' }}>
 | 
					      <div style={{ padding: '10px', display: 'flex', cursor: 'default' }}>
 | 
				
			||||||
        <Link to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} size={40} /></Link>
 | 
					        <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} size={40} /></Permalink>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
 | 
					        <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
 | 
				
			||||||
          <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong>
 | 
					          <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 | 
				
			||||||
import StatusContainer from '../../../containers/status_container';
 | 
					import StatusContainer from '../../../containers/status_container';
 | 
				
			||||||
import AccountContainer from '../../../containers/account_container';
 | 
					import AccountContainer from '../../../containers/account_container';
 | 
				
			||||||
import { FormattedMessage } from 'react-intl';
 | 
					import { FormattedMessage } from 'react-intl';
 | 
				
			||||||
import { Link } from 'react-router';
 | 
					import Permalink from '../../../components/permalink';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const messageStyle = {
 | 
					const messageStyle = {
 | 
				
			||||||
  marginLeft: '68px',
 | 
					  marginLeft: '68px',
 | 
				
			||||||
| 
						 | 
					@ -83,7 +83,7 @@ const Notification = React.createClass({
 | 
				
			||||||
    const { notification } = this.props;
 | 
					    const { notification } = this.props;
 | 
				
			||||||
    const account          = notification.get('account');
 | 
					    const account          = notification.get('account');
 | 
				
			||||||
    const displayName      = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
 | 
					    const displayName      = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
 | 
				
			||||||
    const link             = <Link className='notification__display-name' style={linkStyle} to={`/accounts/${account.get('id')}`}>{displayName}</Link>;
 | 
					    const link             = <Permalink className='notification__display-name' style={linkStyle} href={account.get('url')} to={`/accounts/${account.get('id')}`}>{displayName}</Permalink>;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    switch(notification.get('type')) {
 | 
					    switch(notification.get('type')) {
 | 
				
			||||||
      case 'follow':
 | 
					      case 'follow':
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue