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
This commit is contained in:
Takeshi Umeda 2020-12-27 07:50:34 +09:00 committed by GitHub
parent e89648574f
commit ba748a83f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 28 additions and 71 deletions

View File

@ -4,13 +4,6 @@ exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] =
<button <button
className="button button-secondary" className="button button-secondary"
onClick={[Function]} onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
/> />
`; `;
@ -18,13 +11,6 @@ exports[`<Button /> renders a button element 1`] = `
<button <button
className="button" className="button"
onClick={[Function]} 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" className="button"
disabled={true} disabled={true}
onClick={[Function]} 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 <button
className="button button--block" className="button button--block"
onClick={[Function]} onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
/> />
`; `;
@ -61,13 +33,6 @@ exports[`<Button /> renders the children 1`] = `
<button <button
className="button" className="button"
onClick={[Function]} onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
> >
<p> <p>
children children
@ -79,13 +44,6 @@ exports[`<Button /> renders the given text 1`] = `
<button <button
className="button" className="button"
onClick={[Function]} onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
> >
foo foo
</button> </button>
@ -95,13 +53,6 @@ exports[`<Button /> renders the props.text instead of children 1`] = `
<button <button
className="button" className="button"
onClick={[Function]} onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
> >
foo foo
</button> </button>

View File

@ -10,17 +10,11 @@ export default class Button extends React.PureComponent {
disabled: PropTypes.bool, disabled: PropTypes.bool,
block: PropTypes.bool, block: PropTypes.bool,
secondary: PropTypes.bool, secondary: PropTypes.bool,
size: PropTypes.number,
className: PropTypes.string, className: PropTypes.string,
title: PropTypes.string, title: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node, children: PropTypes.node,
}; };
static defaultProps = {
size: 36,
};
handleClick = (e) => { handleClick = (e) => {
if (!this.props.disabled) { if (!this.props.disabled) {
this.props.onClick(e); this.props.onClick(e);
@ -36,13 +30,6 @@ export default class Button extends React.PureComponent {
} }
render () { 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, { const className = classNames('button', this.props.className, {
'button-secondary': this.props.secondary, 'button-secondary': this.props.secondary,
'button--block': this.props.block, 'button--block': this.props.block,
@ -54,7 +41,6 @@ export default class Button extends React.PureComponent {
disabled={this.props.disabled} disabled={this.props.disabled}
onClick={this.handleClick} onClick={this.handleClick}
ref={this.setRef} ref={this.setRef}
style={style}
title={this.props.title} title={this.props.title}
> >
{this.props.text || this.props.children} {this.props.text || this.props.children}

View File

@ -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>); 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 (me !== account.get('id')) {
if (!account.get('relationship')) { // Wait until the relationship is loaded if (!account.get('relationship')) { // Wait until the relationship is loaded
actionBtn = ''; actionBtn = '';
} else if (account.getIn(['relationship', 'requested'])) { } 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'])) { } 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'])) { } else if (account.getIn(['relationship', 'blocking'])) {
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />; 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} />; 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'])) { if (account.get('moved') && !account.getIn(['relationship', 'following'])) {
actionBtn = ''; actionBtn = '';
} }

View File

@ -154,6 +154,11 @@
display: block; display: block;
width: 100%; width: 100%;
} }
.layout-multiple-columns &.button--with-bell {
font-size: 12px;
padding: 0 8px;
}
} }
.column__wrapper { .column__wrapper {

View File

@ -444,6 +444,11 @@
} }
} }
.logo-button {
line-height: 36px;
padding: 3px 15px;
}
&__image { &__image {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
overflow: hidden; overflow: hidden;

View File

@ -170,6 +170,11 @@ body.rtl {
right: 42px; right: 42px;
} }
.account__header__tabs__buttons > .icon-button {
margin-right: 0;
margin-left: 8px;
}
.account__avatar-overlay-overlay { .account__avatar-overlay-overlay {
right: auto; right: auto;
left: 0; left: 0;

View File

@ -83,9 +83,14 @@
background: $ui-highlight-color; background: $ui-highlight-color;
color: $primary-text-color; color: $primary-text-color;
text-transform: none; text-transform: none;
line-height: 36px; line-height: 16px;
height: auto; 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; border: 0;
svg { svg {