mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||
|
|
import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
|
||
|
|
|
||
|
|
const ZoomGroup = styled.div<{ size: number }>`
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-flow: row;
|
||
|
|
color: var(--grey);
|
||
|
|
cursor: initial;
|
||
|
|
font-size: ${props => props.size}rem;
|
||
|
|
padding: 0.2rem 0.4rem;
|
||
|
|
user-select: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
&:hover {
|
||
|
|
background: #7676764d;
|
||
|
|
}
|
||
|
|
svg:hover {
|
||
|
|
color: var(--secondary);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export interface ZoomControlsProps {
|
||
|
|
zoom: number;
|
||
|
|
onChange: (zoom: number)=> void;
|
||
|
|
size?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ZoomControls(props: ZoomControlsProps) {
|
||
|
|
|
||
|
|
const zoomIn = () => {
|
||
|
|
props.onChange(Math.min(props.zoom + 0.25, 2));
|
||
|
|
};
|
||
|
|
|
||
|
|
const zoomOut = () => {
|
||
|
|
props.onChange(Math.max(props.zoom - 0.25, 0.5));
|
||
|
|
};
|
||
|
|
|
||
|
|
return (<ZoomGroup size={props.size || 0.8}>
|
||
|
|
<FontAwesomeIcon icon={faMinus} title="Zoom Out" style={{ paddingRight: '0.2rem', cursor: 'pointer' }} onClick={zoomOut} />
|
||
|
|
<span style={{ color: 'grey' }} >{props.zoom * 100}%</span>
|
||
|
|
<FontAwesomeIcon icon={faPlus} title="Zoom In" style={{ paddingLeft: '0.2rem', cursor: 'pointer' }} onClick={zoomIn} />
|
||
|
|
</ZoomGroup>);
|
||
|
|
}
|