f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-25 01:02:47 +00:00
Code Wiki Activity

Add 2 custom zoom related icons

Browse Source 
New icons for Zoom to Fit, and Fit Width buttons.  Used SVGR online tool to create react components and then combined them.

If doing in future, be sure to set currentColor on `fill` property in the SVG itself.  Make the SVGs as closed curves only (don't rely on stroke).  set only a width property, not height.
This commit is contained in:
Gazook89
2024-08-22 23:21:48 -05:00
parent 977b871967
commit 0dc9e9ecdb
2 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -3,6 +3,8 @@ const React = require('react');
const { useState, useEffect } = React;
const _ = require('lodash')
import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
const MAX_ZOOM = 300;
const MIN_ZOOM = 10;
@@ -92,14 +94,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
className='tool'
onClick={()=>handleZoomChange(calculateZoom('fill'))}
>
toFill
<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
</button>
<button
id='zoom-to-fit'
className='tool'
onClick={()=>handleZoomChange(calculateZoom('fit'))}
>
toFit
<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
</button>
<button
id='zoom-out'

46
client/icons/icon-components/zoomIcons.jsx Normal file
View File

@@ -0,0 +1,46 @@
import * as React from 'react';
const FitAll = ({ title, titleId, ...props })=>(
<svg
xmlns='http://www.w3.org/2000/svg'
xmlSpace='preserve'
style={{
fillRule : 'evenodd',
clipRule : 'evenodd',
strokeLinejoin : 'round',
strokeMiterlimit : 2,
}}
viewBox='0 0 100 100'
width='1em'
fill='currentColor'
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d='M45.46 54.54h-14.4v6.304a2.87 2.87 0 0 1-4.9 2.034L15.333 52.033a2.88 2.88 0 0 1 0-4.067l10.825-10.844a2.868 2.868 0 0 1 3.13-.623 2.877 2.877 0 0 1 1.771 2.657v6.303h14.4v-14.4h-6.304a2.867 2.867 0 0 1-2.033-4.9l10.844-10.825a2.88 2.88 0 0 1 4.066 0l10.845 10.825a2.867 2.867 0 0 1 .623 3.129 2.875 2.875 0 0 1-2.657 1.772H54.54v14.4h14.398v-6.304c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.13.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.878a2.87 2.87 0 0 1-4.9-2.034V54.54h-14.4v14.4h6.304c1.163 0 2.211.7 2.657 1.772a2.866 2.866 0 0 1-.623 3.128L52.033 84.665a2.879 2.879 0 0 1-4.066 0L37.123 73.84a2.866 2.866 0 0 1-.624-3.128 2.877 2.877 0 0 1 2.657-1.773l6.304.001v-14.4Z' />
<path d='M100 8.043v83.913A8.048 8.048 0 0 1 91.956 100H8.043A8.047 8.047 0 0 1 0 91.956V8.043A8.047 8.047 0 0 1 8.043 0h83.913A8.047 8.047 0 0 1 100 8.043Zm-6.371 0c0-.923-.75-1.672-1.673-1.672H8.043c-.923 0-1.672.749-1.672 1.672v83.913c0 .923.749 1.673 1.672 1.673h83.913c.924 0 1.673-.75 1.673-1.673V8.043Z' />
</svg>
);
const FitWidth = ({ title, titleId, ...props })=>(
<svg
xmlns='http://www.w3.org/2000/svg'
xmlSpace='preserve'
style={{
fillRule : 'evenodd',
clipRule : 'evenodd',
strokeLinejoin : 'round',
strokeMiterlimit : 2,
}}
viewBox='0 0 100 100'
width='1em'
fill='currentColor'
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d='M31.06 54.54v6.304a2.87 2.87 0 0 1-4.9 2.034L15.332 52.032a2.88 2.88 0 0 1 0-4.067L26.16 37.122a2.868 2.868 0 0 1 3.129-.623 2.877 2.877 0 0 1 1.772 2.657v6.303h37.879v-6.303c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.129.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.877a2.87 2.87 0 0 1-4.901-2.033V54.54h-37.88ZM9.282 6.248v87.503a4.178 4.178 0 0 1-4.176 4.177H4.85A4.178 4.178 0 0 1 .674 93.75V6.248A4.177 4.177 0 0 1 4.85 2.072h.256a4.177 4.177 0 0 1 4.176 4.176ZM99.326 6.248v87.503a4.178 4.178 0 0 1-4.177 4.177h-.255a4.178 4.178 0 0 1-4.176-4.177V6.248a4.177 4.177 0 0 1 4.176-4.176h.255a4.177 4.177 0 0 1 4.177 4.176Z' />
</svg>
);
export { FitWidth, FitAll };