1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-12 08:54:00 +02:00
joplin/ElectronClient/app/gui/Header.min.js
2017-11-13 14:44:22 +00:00

102 lines
2.5 KiB
JavaScript

const React = require('react');
const { connect } = require('react-redux');
const { reg } = require('lib/registry.js');
const { themeStyle } = require('../theme.js');
const { _ } = require('lib/locale.js');
class HeaderComponent extends React.Component {
back_click() {
this.props.dispatch({ type: 'NAV_BACK' });
}
makeButton(key, style, options) {
let icon = null;
if (options.iconName) {
const iconStyle = {
fontSize: Math.round(style.fontSize * 1.4),
color: style.color
};
if (options.title) iconStyle.marginRight = 5;
icon = React.createElement('i', { style: iconStyle, className: "fa " + options.iconName });
}
const isEnabled = !('enabled' in options) || options.enabled;
let classes = ['button'];
if (!isEnabled) classes.push('disabled');
const finalStyle = Object.assign({}, style, {
opacity: isEnabled ? 1 : 0.4
});
return React.createElement(
'a',
{
className: classes.join(' '),
style: finalStyle,
key: key,
href: '#',
onClick: () => {
if (isEnabled) options.onClick();
}
},
icon,
options.title ? options.title : ''
);
}
render() {
const style = this.props.style;
const theme = themeStyle(this.props.theme);
const showBackButton = this.props.showBackButton === undefined || this.props.showBackButton === true;
style.height = theme.headerHeight;
style.display = 'flex';
style.flexDirection = 'row';
style.borderBottom = '1px solid ' + theme.dividerColor;
style.boxSizing = 'border-box';
const buttons = [];
const buttonStyle = {
height: theme.headerHeight,
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'
};
if (showBackButton) {
buttons.push(this.makeButton('back', buttonStyle, { title: _('Back'), onClick: () => this.back_click(), iconName: 'fa-chevron-left ' }));
}
if (this.props.buttons) {
for (let i = 0; i < this.props.buttons.length; i++) {
const o = this.props.buttons[i];
buttons.push(this.makeButton('btn_' + i + '_' + o.title, buttonStyle, o));
}
}
return React.createElement(
'div',
{ className: 'header', style: style },
buttons
);
}
}
const mapStateToProps = state => {
return { theme: state.settings.theme };
};
const Header = connect(mapStateToProps)(HeaderComponent);
module.exports = { Header };