diff options
author | Takeshi Umeda <noel.yoshiba@gmail.com> | 2020-12-27 07:50:34 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-26 23:50:34 +0100 |
commit | ba748a83f2050dff27758bce67c05d37a8b7d8f3 (patch) | |
tree | f2fd80e6db595ad0681729a46bb124c40a437cc4 /app | |
parent | e89648574f20f24c3e3e8dafeefe5bcca7348ea5 (diff) |
Fix logo button style (#15428)
* Fix bell button rtl style
* Remove size and style props from button component
* Fix logo button style
* Update jest snapshot
Diffstat (limited to 'app')
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 5c04e09799f..86fbba917b7 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 eb8dd7dc8eb..85b2d78ca9e 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 c8fd85e1d92..b47ebed62e1 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 c248f681ef0..d6385f161cc 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 51d9b46b0f3..cb03013723c 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 8051e4edb5f..baacf46b9fe 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 7ae1c5a2406..b49b4c7cdd5 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 { |