}
return small ? (
- <div className='account small'>
- <div className='account__avatar-wrapper'><Avatar account={account} size={18} /></div>
- <DisplayName account={account} />
- </div>
+ <Permalink
+ className='account small'
+ href={account.get('url')}
+ to={`/accounts/${account.get('id')}`}
+ >
+ <div className='account__avatar-wrapper'>
+ <Avatar
+ account={account}
+ size={24}
+ />
+ </div>
+ <DisplayName
+ account={account}
+ inline
+ />
+ </Permalink>
) : (
<div className='account'>
<div className='account__wrapper'>
+// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
-export default class DisplayName extends React.PureComponent {
-
- static propTypes = {
- account: ImmutablePropTypes.map.isRequired,
- className: PropTypes.string,
- };
-
- render () {
- const {
- account,
- className,
- } = this.props;
- const computedClass = classNames('display-name', className);
- const displayNameHtml = { __html: account.get('display_name_html') };
-
- return (
- <span className={computedClass}>
- <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
- </span>
- );
- }
+// The component.
+export default function DisplayName ({
+ account,
+ className,
+ inline,
+}) {
+ const computedClass = classNames('display-name', { inline }, className);
+ // The result.
+ return account ? (
+ <span className={computedClass}>
+ <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
+ {inline ? ' ' : null}
+ <span className='display-name__account'>@{account.get('acct')}</span>
+ </span>
+ ) : null;
}
+
+// Props.
+DisplayName.propTypes = {
+ account: ImmutablePropTypes.map,
+ className: PropTypes.string,
+ inline: PropTypes.bool,
+};
}
render () {
- const { href, children, className, ...other } = this.props;
+ const {
+ children,
+ className,
+ href,
+ to,
+ ...other
+ } = this.props;
return (
<a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
preselectDate: state.getIn(['compose', 'preselectDate']),
privacy: state.getIn(['compose', 'privacy']),
progress: state.getIn(['compose', 'progress']),
- replyAccount: inReplyTo ? state.getIn(['accounts', state.getIn(['statuses', inReplyTo, 'account'])]) : null,
+ replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
sideArm: state.getIn(['local_settings', 'side_arm']),
handleSubmit,
handleRefTextarea,
} = this.handlers;
- const { history } = this.context;
const {
acceptContentTypes,
amUnlocked,
<ComposerReply
account={replyAccount}
content={replyContent}
- history={history}
intl={intl}
onCancel={onCancelReply}
/>
}
-// Context
-Composer.contextTypes = {
- history: PropTypes.object,
-};
-
// Props.
Composer.propTypes = {
intl: PropTypes.object.isRequired,
preselectDate: PropTypes.instanceOf(Date),
privacy: PropTypes.string,
progress: PropTypes.number,
- replyAccount: ImmutablePropTypes.map,
+ replyAccount: PropTypes.string,
replyContent: PropTypes.string,
resetFileKey: PropTypes.number,
sideArm: PropTypes.string,
// Package imports.
import PropTypes from 'prop-types';
import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages } from 'react-intl';
// Components.
-import Avatar from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+import AccountContainer from 'flavours/glitch/containers/account_container';
import IconButton from 'flavours/glitch/components/icon_button';
// Utils.
onCancel();
}
},
-
- // Handles a click on the status's account.
- handleClickAccount () {
- const {
- account,
- history,
- } = this.props;
- if (history) {
- history.push(`/accounts/${account.get('id')}`);
- }
- },
};
// The component.
// Rendering.
render () {
- const {
- handleClick,
- handleClickAccount,
- } = this.handlers;
+ const { handleClick } = this.handlers;
const {
account,
content,
title={intl.formatMessage(messages.cancel)}
/>
{account ? (
- <a
- className='account'
- href={account.get('url')}
- onClick={handleClickAccount}
- >
- <Avatar
- account={account}
- className='avatar'
- size={24}
- />
- <DisplayName
- account={account}
- className='display_name'
- />
- </a>
+ <AccountContainer
+ id={account}
+ small
+ />
) : null}
</header>
<div
}
ComposerReply.propTypes = {
- account: ImmutablePropTypes.map,
+ account: PropTypes.string,
content: PropTypes.string,
- history: PropTypes.object,
intl: PropTypes.object.isRequired,
onCancel: PropTypes.func,
};
// When blurring the textarea, suggestions are hidden.
handleBlur () {
- //this.setState({ suggestionsHidden: true });
+ this.setState({ suggestionsHidden: true });
},
// When the contents of the textarea change, we have to pull up new
const right = value.slice(selectionStart).search(/[\s\u200B]/);
const token = function () {
switch (true) {
- case left < 0 || /[@:]/.test(!value[left]):
+ case left < 0 || !/[@:]/.test(value[left]):
return null;
case right < 0:
return value.slice(left);
} = this.props;
if (onClick) {
e.preventDefault();
+ e.stopPropagation(); // Prevents following account links
onClick(index);
}
},
+
+ // This prevents the focus from changing, which would mess with
+ // our suggestion code.
+ handleMouseDown (e) {
+ e.preventDefault();
+ },
};
// The component.
// Rendering.
render () {
- const { handleClick } = this.handlers;
+ const {
+ handleMouseDown,
+ handleClick,
+ } = this.handlers;
const {
selected,
suggestion,
return (
<div
className={computedClass}
- onMouseDown={handleClick}
+ onMouseDown={handleMouseDown}
+ onClickCapture={handleClick} // Jumps in front of contents
role='button'
tabIndex='0'
>
'favourite_modal.combo': 'Możesz nacisnąć {combo}, aby pominąć to następnym razem',
-'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie',
+ 'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie',
'notification.markForDeletion': 'Oznacz do usunięcia',
'notifications.clear': 'Wyczyść wszystkie powiadomienia',
margin-bottom: 5px;
overflow: hidden;
- & > .account {
- & > .avatar {
- float: left;
- margin-right: 5px;
- }
-
- & > .display_name {
- color: $ui-base-color;
- display: block;
- padding-right: 25px;
- max-width: 100%;
- line-height: 24px;
- text-decoration: none;
- overflow: hidden;
- }
- }
+ & > .account.small { color: $ui-base-color }
& > .cancel {
float: right;
overflow: visible;
white-space: pre-wrap;
padding-top: 5px;
- }
-
- .emojione {
- width: 20px;
- height: 20px;
- margin: -5px 0 0;
- }
- p {
- margin-bottom: 20px;
+ p {
+ margin-bottom: 20px;
- &:last-child { margin-bottom: 0 }
- }
+ &:last-child { margin-bottom: 0 }
+ }
- a {
- color: lighten($ui-base-color, 20%);
- text-decoration: none;
+ a {
+ color: lighten($ui-base-color, 20%);
+ text-decoration: none;
- &:hover { text-decoration: underline }
+ &:hover { text-decoration: underline }
- &.mention {
- &:hover {
- text-decoration: none;
+ &.mention {
+ &:hover {
+ text-decoration: none;
- span { text-decoration: underline }
+ span { text-decoration: underline }
+ }
}
}
}
+
+ .emojione {
+ width: 20px;
+ height: 20px;
+ margin: -5px 0 0;
+ }
}
.composer--textarea {
padding: 10px;
font-size: 14px;
line-height: 18px;
+ overflow: hidden;
cursor: pointer;
&:hover,
height: 18px;
}
}
+
+ & > .account.small {
+ .display-name {
+ & > span { color: lighten($ui-base-color, 36%) }
+ }
+ }
}
.composer--upload_form {
.account {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
+ color: inherit;
+ text-decoration: none;
.account__display-name {
flex: 1 1 auto;
& > .account__avatar-wrapper { margin: 0 8px 0 0 }
& > .display-name {
- display: block;
- padding: 0;
- height: auto;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-
- & > strong {
- display: inline;
- font-size: inherit;
- line-height: inherit;
- }
-
- & > span {
- display: inline;
- color: lighten($ui-base-color, 36%);
- font-size: inherit;
- line-height: inherit;
-
- &::before { content: " " }
- }
+ height: 24px;
+ line-height: 24px;
}
}
}
text-decoration: underline;
}
}
+
+ &.inline {
+ padding: 0;
+ height: 18px;
+ font-size: 15px;
+ line-height: 18px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ strong {
+ display: inline;
+ height: auto;
+ font-size: inherit;
+ line-height: inherit;
+ }
+
+ span {
+ display: inline;
+ height: auto;
+ font-size: inherit;
+ line-height: inherit;
+ }
+ }
}
.status__relative-time,
cat aescling's git repositories / mastodon.git / commitdiff