mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Props, Value } from '../ToggleEditorsButton';
|
|
const { buildStyle } = require('@joplinapp/lib/theme');
|
|
|
|
export default function styles(props:Props) {
|
|
return buildStyle(['ToggleEditorsButton', props.value], props.themeId, (theme: any) => {
|
|
const iconSize = 15;
|
|
const mdIconWidth = iconSize * 1.25;
|
|
const buttonHeight = theme.toolbarHeight - 7;
|
|
const mdIconPadding = Math.round((buttonHeight - iconSize) / 2) + 3;
|
|
|
|
const innerButton:any = {
|
|
borderStyle: 'solid',
|
|
borderColor: theme.color3,
|
|
borderWidth: 1,
|
|
borderRadius: 0,
|
|
width: mdIconWidth + mdIconPadding * 2,
|
|
height: buttonHeight,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
const output:any = {
|
|
button: {
|
|
border: 'none',
|
|
padding: 0,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
background: 'none',
|
|
},
|
|
leftInnerButton: {
|
|
...innerButton,
|
|
borderTopLeftRadius: 4,
|
|
borderBottomLeftRadius: 4,
|
|
},
|
|
rightInnerButton: {
|
|
...innerButton,
|
|
borderTopRightRadius: 4,
|
|
borderBottomRightRadius: 4,
|
|
},
|
|
leftIcon: {
|
|
fontSize: iconSize,
|
|
position: 'relative',
|
|
top: 2,
|
|
color: theme.color3,
|
|
},
|
|
rightIcon: {
|
|
fontSize: iconSize - 1,
|
|
borderLeft: 'none',
|
|
position: 'relative',
|
|
top: 2,
|
|
color: theme.color3,
|
|
},
|
|
};
|
|
|
|
if (props.value === Value.Markdown) {
|
|
output.leftInnerButton.backgroundColor = theme.color3;
|
|
output.leftIcon.color = theme.backgroundColor3;
|
|
output.rightInnerButton.opacity = 0.5;
|
|
} else if (props.value === Value.RichText) {
|
|
output.rightInnerButton.backgroundColor = theme.color3;
|
|
output.rightIcon.color = theme.backgroundColor3;
|
|
output.leftInnerButton.opacity = 0.5;
|
|
}
|
|
|
|
return output;
|
|
});
|
|
}
|