diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js index d340e83c8..f471307b9 100644 --- a/app/javascript/glitch/components/notification/follow.js +++ b/app/javascript/glitch/components/notification/follow.js @@ -1,38 +1,12 @@ -/* +// `` +// ====================== -`` -====================== +// * * * * * * * // -This component renders a follow notification. +// Imports +// ------- -__Props:__ - - - __`id` (`PropTypes.number.isRequired`) :__ - This is the id of the notification. - - - __`onDeleteNotification` (`PropTypes.func.isRequired`) :__ - The function to call when a notification should be - dismissed/deleted. - - - __`account` (`PropTypes.object.isRequired`) :__ - The account associated with the follow notification, ie the account - which followed the user. - - - __`intl` (`PropTypes.object.isRequired`) :__ - Our internationalization object, inserted by `@injectIntl`. - -*/ - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -/* - -Imports: --------- - -*/ - -// Package imports // +// Package imports. import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; @@ -40,22 +14,18 @@ import { FormattedMessage } from 'react-intl'; import escapeTextContentForBrowser from 'escape-html'; import ImmutablePureComponent from 'react-immutable-pure-component'; -// Mastodon imports // +// Mastodon imports. import emojify from '../../../mastodon/emoji'; import Permalink from '../../../mastodon/components/permalink'; import AccountContainer from '../../../mastodon/containers/account_container'; -// Our imports // +// Our imports. import NotificationOverlayContainer from '../notification/overlay/container'; -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +// * * * * * * * // -/* - -Implementation: ---------------- - -*/ +// Implementation +// -------------- export default class NotificationFollow extends ImmutablePureComponent { @@ -65,24 +35,10 @@ export default class NotificationFollow extends ImmutablePureComponent { notification : ImmutablePropTypes.map.isRequired, }; -/* - -### `render()` - -This actually renders the component. - -*/ - render () { const { account, notification } = this.props; -/* - -`link` is a container for the account's `displayName`, which links to -the account timeline using a ``. - -*/ - + // Links to the display name. const displayName = account.get('display_name') || account.get('username'); const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; const link = ( @@ -95,12 +51,7 @@ the account timeline using a ``. /> ); -/* - -We can now render our component. - -*/ - + // Renders. return (
diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js index bdb868e4d..f741950b1 100644 --- a/app/javascript/glitch/components/status/header.js +++ b/app/javascript/glitch/components/status/header.js @@ -9,41 +9,30 @@ component for better documentation and maintainance by */ - /* * * * */ +// * * * * * * * // -/* +// Imports +// ------- -Imports: --------- - -*/ - -// Package imports // +// Package imports. import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl } from 'react-intl'; -// Mastodon imports // +// Mastodon imports. import Avatar from '../../../mastodon/components/avatar'; import AvatarOverlay from '../../../mastodon/components/avatar_overlay'; import DisplayName from '../../../mastodon/components/display_name'; import IconButton from '../../../mastodon/components/icon_button'; import VisibilityIcon from './visibility_icon'; - /* * * * */ +// * * * * * * * // -/* - -Inital setup: -------------- - -The `messages` constant is used to define any messages that we need -from inside props. In our case, these are the `collapse` and -`uncollapse` messages used with our collapse/uncollapse buttons. - -*/ +// Initial setup +// ------------- +// Messages for use with internationalization stuff. const messages = defineMessages({ collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, @@ -53,43 +42,10 @@ const messages = defineMessages({ direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, }); - /* * * * */ +// * * * * * * * // -/* - -The `` component: -------------------------------- - -The `` component wraps together the header information -(avatar, display name) and upper buttons and icons (collapsing, media -icons) into a single `
` element. - -### Props - - - __`account`, `friend` (`ImmutablePropTypes.map`) :__ - These give the accounts associated with the status. `account` is - the author of the post; `friend` will have their avatar appear - in the overlay if provided. - - - __`mediaIcon` (`PropTypes.string`) :__ - If a mediaIcon should be placed in the header, this string - specifies it. - - - __`collapsible`, `collapsed` (`PropTypes.bool`) :__ - These props tell whether a post can be, and is, collapsed. - - - __`parseClick` (`PropTypes.func`) :__ - This function will be called when the user clicks inside the header - information. - - - __`setExpansion` (`PropTypes.func`) :__ - This function is used to set the expansion state of the post. - - - __`intl` (`PropTypes.object`) :__ - This is our internationalization object, provided by - `injectIntl()`. - -*/ +// The component +// ------------- @injectIntl export default class StatusHeader extends React.PureComponent { @@ -105,18 +61,7 @@ export default class StatusHeader extends React.PureComponent { intl: PropTypes.object.isRequired, }; -/* - -### Implementation - -#### `handleCollapsedClick()`. - -`handleCollapsedClick()` is just a simple callback for our collapsing -button. It calls `setExpansion` to set the collapsed state of the -status. - -*/ - + // Handles clicks on collapsed button handleCollapsedClick = (e) => { const { collapsed, setExpansion } = this.props; if (e.button === 0) { @@ -125,29 +70,13 @@ status. } } -/* - -#### `handleAccountClick()`. - -`handleAccountClick()` handles any clicks on the header info. It calls -`parseClick()` with our `account` as the anticipatory `destination`. - -*/ - + // Handles clicks on account name/image handleAccountClick = (e) => { const { status, parseClick } = this.props; parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`); } -/* - -#### `render()`. - -`render()` actually puts our element on the screen. `` -has a very straightforward rendering process. - -*/ - + // Rendering. render () { const { status, @@ -162,16 +91,28 @@ has a very straightforward rendering process. return (
- { - -/* - -We have to include the status icons before the header content because -it is rendered as a float. - -*/ - - } + + { + friend ? ( + + ) : ( + + ) + } + + + +
{mediaIcon ? ( ) : null}
- { - -/* - -This begins our header content. It is all wrapped inside of a link -which gets handled by `handleAccountClick`. We use an `` -if we have a `friend` and a normal `` if we don't. - -*/ - - } - -
{ - friend ? ( - - ) : ( - - ) - }
- -
); diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index 8c5b5e0b9..ca4b14b82 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -73,8 +73,23 @@ export default class IconButton extends React.PureComponent { classes.push(this.props.className); } + const flipDeg = this.props.flip ? -180 : -360; + const rotateDeg = this.props.active ? flipDeg : 0; + + const motionDefaultStyle = { + rotate: rotateDeg, + }; + + const springOpts = { + stiffness: this.props.flip ? 60 : 120, + damping: 7, + }; + const motionStyle = { + rotate: this.props.animate ? spring(rotateDeg, springOpts) : 0, + }; + return ( - + {({ rotate }) =>