diff options
7 files changed, 28 insertions, 71 deletions
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap index 5c04e0979..86fbba917 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap @@ -4,13 +4,6 @@ exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] = <button className="button button-secondary" onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } /> `; @@ -18,13 +11,6 @@ exports[`<Button /> renders a button element 1`] = ` <button className="button" onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } /> `; @@ -33,13 +19,6 @@ exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = ` className="button" disabled={true} onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } /> `; @@ -47,13 +26,6 @@ exports[`<Button /> renders class="button--block" if props.block given 1`] = ` <button className="button button--block" onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } /> `; @@ -61,13 +33,6 @@ exports[`<Button /> renders the children 1`] = ` <button className="button" onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } > <p> children @@ -79,13 +44,6 @@ exports[`<Button /> renders the given text 1`] = ` <button className="button" onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } > foo </button> @@ -95,13 +53,6 @@ exports[`<Button /> renders the props.text instead of children 1`] = ` <button className="button" onClick={[Function]} - style={ - Object { - "height": "36px", - "lineHeight": "36px", - "padding": "0 16px", - } - } > foo </button> diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index eb8dd7dc8..85b2d78ca 100644 --- a/app/javascript/mastodon/components/button.js +++ b/app/javascript/mastodon/components/button.js @@ -10,17 +10,11 @@ export default class Button extends React.PureComponent { disabled: PropTypes.bool, block: PropTypes.bool, secondary: PropTypes.bool, - size: PropTypes.number, className: PropTypes.string, title: PropTypes.string, - style: PropTypes.object, children: PropTypes.node, }; - static defaultProps = { - size: 36, - }; - handleClick = (e) => { if (!this.props.disabled) { this.props.onClick(e); @@ -36,13 +30,6 @@ export default class Button extends React.PureComponent { } render () { - const style = { - padding: `0 ${this.props.size / 2.25}px`, - height: `${this.props.size}px`, - lineHeight: `${this.props.size}px`, - ...this.props.style, - }; - const className = classNames('button', this.props.className, { 'button-secondary': this.props.secondary, 'button--block': this.props.block, @@ -54,7 +41,6 @@ export default class Button extends React.PureComponent { disabled={this.props.disabled} onClick={this.handleClick} ref={this.setRef} - style={style} title={this.props.title} > {this.props.text || this.props.children} diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index c8fd85e1d..b47ebed62 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -164,13 +164,17 @@ class Header extends ImmutablePureComponent { info.push(<span key='domain_blocked' className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>); } + if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { + bellBtn = <IconButton icon='bell-o' size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />; + } + if (me !== account.get('id')) { if (!account.get('relationship')) { // Wait until the relationship is loaded actionBtn = ''; } else if (account.getIn(['relationship', 'requested'])) { - actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />; + actionBtn = <Button className={classNames('logo-button', { 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />; } else if (!account.getIn(['relationship', 'blocking'])) { - actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} style={account.getIn(['relationship', 'following']) && { padding: '0 10px', 'min-width': '88px' }} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />; + actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />; } else if (account.getIn(['relationship', 'blocking'])) { actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />; } @@ -178,10 +182,6 @@ class Header extends ImmutablePureComponent { actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} onClick={this.openEditProfile} />; } - if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { - bellBtn = <IconButton icon='bell-o' size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />; - } - if (account.get('moved') && !account.getIn(['relationship', 'following'])) { actionBtn = ''; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c248f681e..d6385f161 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -154,6 +154,11 @@ display: block; width: 100%; } + + .layout-multiple-columns &.button--with-bell { + font-size: 12px; + padding: 0 8px; + } } .column__wrapper { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 51d9b46b0..cb0301372 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -444,6 +444,11 @@ } } + .logo-button { + line-height: 36px; + padding: 3px 15px; + } + &__image { border-radius: 4px 4px 0 0; overflow: hidden; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 8051e4edb..baacf46b9 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -170,6 +170,11 @@ body.rtl { right: 42px; } + .account__header__tabs__buttons > .icon-button { + margin-right: 0; + margin-left: 8px; + } + .account__avatar-overlay-overlay { right: auto; left: 0; diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index 7ae1c5a24..b49b4c7cd 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -83,9 +83,14 @@ background: $ui-highlight-color; color: $primary-text-color; text-transform: none; - line-height: 36px; + line-height: 16px; height: auto; - padding: 3px 15px; + min-height: 36px; + min-width: 88px; + white-space: normal; + overflow-wrap: break-word; + hyphens: auto; + padding: 0 15px; border: 0; svg { |