Add "Edit profile" button
This commit is contained in:
parent
e338760fd3
commit
d4d56e5dc8
3 changed files with 37 additions and 19 deletions
|
@ -1,18 +1,22 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Icon from './icon';
|
||||
|
||||
export default class Button extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
text: PropTypes.node,
|
||||
onClick: PropTypes.func,
|
||||
to: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
block: PropTypes.bool,
|
||||
secondary: PropTypes.bool,
|
||||
size: PropTypes.number,
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
icon: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
|
@ -47,7 +51,7 @@ export default class Button extends React.PureComponent {
|
|||
'button--block': this.props.block,
|
||||
});
|
||||
|
||||
return (
|
||||
const btn = (
|
||||
<button
|
||||
className={className}
|
||||
disabled={this.props.disabled}
|
||||
|
@ -55,9 +59,20 @@ export default class Button extends React.PureComponent {
|
|||
ref={this.setRef}
|
||||
style={style}
|
||||
>
|
||||
{this.props.icon && <Icon id={this.props.icon} />}
|
||||
{this.props.text || this.props.children}
|
||||
</button>
|
||||
);
|
||||
|
||||
if (this.props.to) {
|
||||
return (
|
||||
<Link to={this.props.to}>
|
||||
{btn}
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return btn;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -213,6 +213,8 @@ class Header extends ImmutablePureComponent {
|
|||
} else if (account.getIn(['relationship', 'blocking'])) {
|
||||
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
|
||||
}
|
||||
} else {
|
||||
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
|
||||
}
|
||||
|
||||
return actionBtn;
|
||||
|
|
|
@ -1,23 +1,24 @@
|
|||
button,
|
||||
a.button {
|
||||
&.standard {
|
||||
&.standard {
|
||||
|
||||
// NOTE - will define the larger standard buttons here and apply class where used.
|
||||
// NOTE - will define the larger standard buttons here and apply class where used.
|
||||
|
||||
&-small {
|
||||
height: 20px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@include font-size(11);
|
||||
@include line-height(11);
|
||||
@include font-weight(bold);
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
background: $gab-small-cta-primary;
|
||||
}
|
||||
}
|
||||
&-small {
|
||||
height: 20px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@include font-size(11);
|
||||
@include line-height(11);
|
||||
@include font-weight(bold);
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
background: $gab-small-cta-primary;
|
||||
}
|
||||
}
|
||||
|
||||
i.fa {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue