diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index 47f2715c78..76c561c916 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/app/javascript/mastodon/components/avatar.js
@@ -25,9 +25,15 @@ class Avatar extends React.PureComponent {
}
render () {
- const { src, size, staticSrc, animate } = this.props;
+ const { src, size, staticSrc, animate, inline } = this.props;
const { hovering } = this.state;
+ let className = 'account__avatar';
+
+ if (inline) {
+ className = className + ' account__avatar-inline';
+ }
+
const style = {
...this.props.style,
width: `${size}px`,
@@ -43,7 +49,7 @@ class Avatar extends React.PureComponent {
return (
+ );
+ }
+}
+
+AvatarOverlay.propTypes = {
+ staticSrc: PropTypes.string.isRequired,
+ overlaySrc: PropTypes.string.isRequired,
+};
+
+export default AvatarOverlay;
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 39ed6dd4fd..4c4fb7e75d 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -2,6 +2,7 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Avatar from './avatar';
+import AvatarOverlay from './avatar_overlay';
import RelativeTimestamp from './relative_timestamp';
import DisplayName from './display_name';
import MediaGallery from './media_gallery';
@@ -36,7 +37,8 @@ class Status extends ImmutablePureComponent {
render () {
let media = '';
- const { status, ...other } = this.props;
+ let statusAvatar;
+ const { status, account, ...other } = this.props;
if (status === null) {
return ;
@@ -58,7 +60,7 @@ class Status extends ImmutablePureComponent {
}} />
-
+
);
}
@@ -73,6 +75,12 @@ class Status extends ImmutablePureComponent {
}
}
+ if (account === undefined || account === null) {
+ statusAvatar = ;
+ }else{
+ statusAvatar = ;
+ }
+
return (
@@ -82,7 +90,7 @@ class Status extends ImmutablePureComponent {
@@ -106,6 +114,7 @@ Status.contextTypes = {
Status.propTypes = {
status: ImmutablePropTypes.map,
+ account: ImmutablePropTypes.map,
wrapped: PropTypes.bool,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js
index f54a65747f..7b11fea24c 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.js
+++ b/app/javascript/mastodon/features/notifications/components/notification.js
@@ -2,6 +2,7 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusContainer from '../../../containers/status_container';
import AccountContainer from '../../../containers/account_container';
+import Avatar from '../../../components/avatar';
import { FormattedMessage } from 'react-intl';
import Permalink from '../../../components/permalink';
import emojify from '../../../emoji';
@@ -37,11 +38,10 @@ class Notification extends ImmutablePureComponent {
-
-
+
);
}
@@ -53,11 +53,10 @@ class Notification extends ImmutablePureComponent {
-
-
+
);
}
diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss
new file mode 100644
index 0000000000..67d768a6c6
--- /dev/null
+++ b/app/javascript/styles/_mixins.scss
@@ -0,0 +1,12 @@
+@mixin avatar-radius() {
+ border-radius: 4px;
+ background: transparent no-repeat;
+ background-position: 50%;
+ background-clip: padding-box;
+}
+
+@mixin avatar-size($size:48px) {
+ width: $size;
+ height: $size;
+ background-size: $size $size;
+}
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 5895dd81ff..f418ba6993 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -1,3 +1,4 @@
+@import 'mixins';
@import 'variables';
@import 'fonts/roboto';
@import 'fonts/roboto-mono';
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index f9cf6a171d..5233899313 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -673,11 +673,33 @@ a.status__content__spoiler-link {
}
.account__avatar {
- border-radius: 4px;
- background: transparent no-repeat;
- background-position: 50%;
- background-clip: padding-box;
+ @include avatar-radius();
position: relative;
+
+ &-inline {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 5px;
+ }
+}
+
+.account__avatar-overlay {
+ @include avatar-size(48px);
+
+ &-base {
+ @include avatar-radius();
+ @include avatar-size(36px);
+ }
+
+ &-overlay {
+ @include avatar-radius();
+ @include avatar-size(24px);
+
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ }
}
.account__relationship {