[Glitch] Fix logo button style
Port 0ffece77ab
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
lolsob-rspec
parent
c7a08708bf
commit
98b22023b9
|
@ -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);
|
||||||
|
@ -44,12 +38,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: {
|
|
||||||
padding: `0 ${this.props.size / 2.25}px`,
|
|
||||||
height: `${this.props.size}px`,
|
|
||||||
lineHeight: `${this.props.size}px`,
|
|
||||||
...this.props.style,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.props.title) attrs.title = this.props.title;
|
if (this.props.title) attrs.title = this.props.title;
|
||||||
|
|
|
@ -159,13 +159,17 @@ class Header extends ImmutablePureComponent {
|
||||||
info.push(<span className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>);
|
info.push(<span 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 className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
|
actionBtn = <Button 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} />;
|
||||||
}
|
}
|
||||||
|
@ -173,10 +177,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 = '';
|
||||||
}
|
}
|
||||||
|
|
|
@ -141,6 +141,11 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-multiple-columns &.button--with-bell {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button {
|
.icon-button {
|
||||||
|
|
|
@ -446,6 +446,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;
|
||||||
|
|
|
@ -163,6 +163,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;
|
||||||
|
|
|
@ -79,9 +79,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 {
|
||||||
|
|
Loading…
Reference in New Issue