From 4b794e134d427dbc716606324adb9a885a74abec Mon Sep 17 00:00:00 2001 From: Maciek Baron Date: Tue, 25 Sep 2018 04:08:55 +0100 Subject: [PATCH] Add bot icon to bot avatars and migrate to newer version of Font Awesome (#8484) * Migrate to newer version of Font Awesome * Add bot icon to bot avatars --- app/javascript/mastodon/common.js | 3 ++- .../__snapshots__/avatar-test.js.snap | 12 ++++++++-- .../components/__tests__/avatar-test.js | 1 + app/javascript/mastodon/components/avatar.js | 5 +++- .../mastodon/components/bot_icon.js | 23 +++++++++++++++++++ .../features/account/components/header.js | 2 ++ .../styles/mastodon/components.scss | 20 +++++++++++++++- package.json | 2 +- yarn.lock | 8 +++---- 9 files changed, 66 insertions(+), 10 deletions(-) create mode 100644 app/javascript/mastodon/components/bot_icon.js diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js index 2b10b8c30ae..fdd3431ab0c 100644 --- a/app/javascript/mastodon/common.js +++ b/app/javascript/mastodon/common.js @@ -1,7 +1,8 @@ import Rails from 'rails-ujs'; export function start() { - require('font-awesome/css/font-awesome.css'); + require('@fortawesome/fontawesome-free/css/fontawesome.css'); + require('@fortawesome/fontawesome-free/css/solid.css'); require.context('../images/', true); Rails.start(); diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap index 76ab3374ae8..f6f6bfbf469 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap @@ -13,7 +13,11 @@ exports[` Autoplay renders a animated avatar 1`] = ` "width": "100px", } } -/> +> + + `; exports[` Still renders a still avatar 1`] = ` @@ -29,5 +33,9 @@ exports[` Still renders a still avatar 1`] = ` "width": "100px", } } -/> +> + + `; diff --git a/app/javascript/mastodon/components/__tests__/avatar-test.js b/app/javascript/mastodon/components/__tests__/avatar-test.js index dd3f7b7d210..cc99d3a5352 100644 --- a/app/javascript/mastodon/components/__tests__/avatar-test.js +++ b/app/javascript/mastodon/components/__tests__/avatar-test.js @@ -10,6 +10,7 @@ describe('', () => { display_name: 'Alice', avatar: '/animated/alice.gif', avatar_static: '/static/alice.jpg', + bot: true, }); const size = 100; diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index 570505833fc..e46f1ed760e 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import BotIcon from './bot_icon'; import { autoPlayGif } from '../initial_state'; export default class Avatar extends React.PureComponent { @@ -65,7 +66,9 @@ export default class Avatar extends React.PureComponent { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style} - /> + > + + ); } diff --git a/app/javascript/mastodon/components/bot_icon.js b/app/javascript/mastodon/components/bot_icon.js new file mode 100644 index 00000000000..f4bd702822e --- /dev/null +++ b/app/javascript/mastodon/components/bot_icon.js @@ -0,0 +1,23 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +export default class BotIcon extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + }; + + render () { + const { account } = this.props; + + if (account.get('bot')) { + return ( + + ); + } + + return ''; + } + +} diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 11ae589053f..e498ba5ccc4 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import IconButton from '../../../components/icon_button'; +import BotIcon from '../../../components/bot_icon'; import Motion from '../../ui/util/optional_motion'; import spring from 'react-motion/lib/spring'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -67,6 +68,7 @@ class Avatar extends ImmutablePureComponent { onBlur={this.handleMouseOut} > {account.get('acct')} + )} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 3fb924aa42b..b3f3347dfda 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1110,6 +1110,12 @@ vertical-align: middle; margin-right: 5px; } + + .bot-icon { + position: absolute; + bottom: -.333em; + left: -.333em; + } } a .account__avatar { @@ -1327,10 +1333,22 @@ a .account__avatar { .account__header__avatar { background-size: 90px 90px; display: block; + font-size: 1.5em; height: 90px; margin: 0 auto 10px; - overflow: hidden; + position: relative; width: 90px; + + .bot-icon { + color: $dark-text-color; + position: absolute; + bottom: 0; + left: 0; + + .light & { + color: $inverted-text-color; + } + } } .account-authorize { diff --git a/package.json b/package.json index 8320a76fb8c..155bb7e0b0a 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.0.0", + "@fortawesome/fontawesome-free": "^5.2.0", "array-includes": "^3.0.3", "autoprefixer": "^8.6.5", "axios": "~0.16.2", @@ -58,7 +59,6 @@ "exif-js": "^2.3.0", "express": "^4.16.2", "file-loader": "^2.0.0", - "font-awesome": "^4.7.0", "glob": "^7.1.1", "history": "^4.7.2", "http-link-header": "^0.8.0", diff --git a/yarn.lock b/yarn.lock index d2063ddeaf0..adac9aa0602 100644 --- a/yarn.lock +++ b/yarn.lock @@ -647,6 +647,10 @@ version "1.0.0" resolved "https://registry.yarnpkg.com/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz#32c3cdb2f7af3cd8f0dca357b592e7271f3831b5" +"@fortawesome/fontawesome-free@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.2.0.tgz#50cd9856774351c56c0b1b0db4efe122d7913e58" + "@types/node@*": version "10.9.4" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.9.4.tgz#0f4cb2dc7c1de6096055357f70179043c33e9897" @@ -3279,10 +3283,6 @@ follow-redirects@^1.0.0, follow-redirects@^1.2.3: dependencies: debug "=3.1.0" -font-awesome@^4.7.0: - version "4.7.0" - resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" - for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"