From 383c0b780282e4ca2a9df2086166a576eef0f296 Mon Sep 17 00:00:00 2001 From: kawax Date: Wed, 3 May 2017 18:43:37 +0900 Subject: [PATCH] Show boosted user's avatar (#2518) * Show boosted user's avatar * add .status__avatar-boost * margin * apply to notifications too. * account__avatar-boost * Add inline prop to Avatar component * Add AvatarOverlay component * rename mixins.scss * move files for latest master * fixed for webpack --- app/javascript/mastodon/components/avatar.js | 17 ++++++++--- .../mastodon/components/avatar_overlay.js | 30 +++++++++++++++++++ app/javascript/mastodon/components/status.js | 15 ++++++++-- .../notifications/components/notification.js | 7 ++--- app/javascript/styles/_mixins.scss | 12 ++++++++ app/javascript/styles/application.scss | 1 + app/javascript/styles/components.scss | 30 ++++++++++++++++--- 7 files changed, 97 insertions(+), 15 deletions(-) create mode 100644 app/javascript/mastodon/components/avatar_overlay.js create mode 100644 app/javascript/styles/_mixins.scss 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 {
- + {statusAvatar}
@@ -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 {