diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js
index ad1c3a5341..4c65aaefac 100644
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/app/javascript/flavours/glitch/components/display_name.js
@@ -1,28 +1,30 @@
+// 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 (
-
- @{this.props.account.get('acct')}
-
- );
- }
+// The component.
+export default function DisplayName ({
+ account,
+ className,
+ inline,
+}) {
+ const computedClass = classNames('display-name', { inline }, className);
+ // The result.
+ return account ? (
+
+
+ {inline ? ' ' : null}
+ @{account.get('acct')}
+
+ ) : null;
}
+
+// Props.
+DisplayName.propTypes = {
+ account: ImmutablePropTypes.map,
+ className: PropTypes.string,
+ inline: PropTypes.bool,
+};
diff --git a/app/javascript/flavours/glitch/components/permalink.js b/app/javascript/flavours/glitch/components/permalink.js
index d726d37a20..d6556b584d 100644
--- a/app/javascript/flavours/glitch/components/permalink.js
+++ b/app/javascript/flavours/glitch/components/permalink.js
@@ -22,7 +22,13 @@ export default class Permalink extends React.PureComponent {
}
render () {
- const { href, children, className, ...other } = this.props;
+ const {
+ children,
+ className,
+ href,
+ to,
+ ...other
+ } = this.props;
return (
diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js
index 4c9d4b1972..3582dedfe0 100644
--- a/app/javascript/flavours/glitch/features/composer/index.js
+++ b/app/javascript/flavours/glitch/features/composer/index.js
@@ -59,7 +59,7 @@ function mapStateToProps (state) {
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']),
@@ -265,7 +265,6 @@ class Composer extends React.Component {
handleSubmit,
handleRefTextarea,
} = this.handlers;
- const { history } = this.context;
const {
acceptContentTypes,
amUnlocked,
@@ -317,7 +316,6 @@ class Composer extends React.Component {
@@ -384,11 +382,6 @@ class Composer extends React.Component {
}
-// Context
-Composer.contextTypes = {
- history: PropTypes.object,
-};
-
// Props.
Composer.propTypes = {
intl: PropTypes.object.isRequired,
@@ -405,7 +398,7 @@ Composer.propTypes = {
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,
diff --git a/app/javascript/flavours/glitch/features/composer/reply/index.js b/app/javascript/flavours/glitch/features/composer/reply/index.js
index 568705affa..0b8ceddeea 100644
--- a/app/javascript/flavours/glitch/features/composer/reply/index.js
+++ b/app/javascript/flavours/glitch/features/composer/reply/index.js
@@ -1,12 +1,10 @@
// 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.
@@ -31,17 +29,6 @@ const handlers = {
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.
@@ -55,10 +42,7 @@ export default class ComposerReply extends React.PureComponent {
// Rendering.
render () {
- const {
- handleClick,
- handleClickAccount,
- } = this.handlers;
+ const { handleClick } = this.handlers;
const {
account,
content,
@@ -76,21 +60,10 @@ export default class ComposerReply extends React.PureComponent {
title={intl.formatMessage(messages.cancel)}
/>
{account ? (
-
-
-
-
+
) : null}
diff --git a/app/javascript/flavours/glitch/locales/pl.js b/app/javascript/flavours/glitch/locales/pl.js
index c131845b9e..e38385715e 100644
--- a/app/javascript/flavours/glitch/locales/pl.js
+++ b/app/javascript/flavours/glitch/locales/pl.js
@@ -36,7 +36,7 @@ const messages = {
'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',
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 46df79906f..ab5fa4712f 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -52,22 +52,7 @@
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;
@@ -87,6 +72,27 @@
overflow: visible;
white-space: pre-wrap;
padding-top: 5px;
+
+ p {
+ margin-bottom: 20px;
+
+ &:last-child { margin-bottom: 0 }
+ }
+
+ a {
+ color: lighten($ui-base-color, 20%);
+ text-decoration: none;
+
+ &:hover { text-decoration: underline }
+
+ &.mention {
+ &:hover {
+ text-decoration: none;
+
+ span { text-decoration: underline }
+ }
+ }
+ }
}
.emojione {
@@ -94,27 +100,6 @@
height: 20px;
margin: -5px 0 0;
}
-
- p {
- margin-bottom: 20px;
-
- &:last-child { margin-bottom: 0 }
- }
-
- a {
- color: lighten($ui-base-color, 20%);
- text-decoration: none;
-
- &:hover { text-decoration: underline }
-
- &.mention {
- &:hover {
- text-decoration: none;
-
- span { text-decoration: underline }
- }
- }
- }
}
.composer--textarea {
@@ -175,6 +160,7 @@
padding: 10px;
font-size: 14px;
line-height: 18px;
+ overflow: hidden;
cursor: pointer;
&:hover,
@@ -191,6 +177,12 @@
height: 18px;
}
}
+
+ & > .account.small {
+ .display-name {
+ & > span { color: lighten($ui-base-color, 36%) }
+ }
+ }
}
.composer--upload_form {
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index ab1359108f..1cda5343bf 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -745,6 +745,8 @@
.account {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
+ color: inherit;
+ text-decoration: none;
.account__display-name {
flex: 1 1 auto;
@@ -762,27 +764,8 @@
& > .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;
}
}
}
@@ -1243,6 +1226,30 @@
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,