mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-12 08:54:00 +02:00
59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
const React = require('react');
|
|
const { connect } = require('react-redux');
|
|
const { themeStyle } = require('../theme.js');
|
|
|
|
class ToolbarButton extends React.Component {
|
|
|
|
render() {
|
|
//const style = this.props.style;
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
const style = {
|
|
height: theme.toolbarHeight,
|
|
minWidth: theme.toolbarHeight,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
paddingLeft: theme.headerButtonHPadding,
|
|
paddingRight: theme.headerButtonHPadding,
|
|
color: theme.color,
|
|
textDecoration: 'none',
|
|
fontFamily: theme.fontFamily,
|
|
fontSize: theme.fontSize,
|
|
boxSizing: 'border-box',
|
|
cursor: 'default',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
let icon = null;
|
|
if (this.props.iconName) {
|
|
const iconStyle = {
|
|
fontSize: Math.round(theme.fontSize * 1.4),
|
|
color: theme.color
|
|
};
|
|
if (this.props.title) iconStyle.marginRight = 5;
|
|
icon = <i style={iconStyle} className={"fa " + this.props.iconName}></i>
|
|
}
|
|
|
|
const isEnabled = (!('enabled' in this.props) || this.props.enabled === true);
|
|
let classes = ['button'];
|
|
if (!isEnabled) classes.push('disabled');
|
|
|
|
const finalStyle = Object.assign({}, style, {
|
|
opacity: isEnabled ? 1 : 0.4,
|
|
});
|
|
|
|
return (
|
|
<a
|
|
className={classes.join(' ')}
|
|
style={finalStyle}
|
|
href="#"
|
|
onClick={() => { if (isEnabled && this.props.onClick) this.props.onClick() }}
|
|
>
|
|
{icon}{this.props.title ? this.props.title : ''}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
module.exports = ToolbarButton; |