f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 22:52:40 +00:00
Code Wiki Activity

Change icons to mask-image

Browse Source 
Removes icons as components, uses mask-image instead.

Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio.

rename the icon files for consistency.
This commit is contained in:
Gazook89
2024-08-26 15:51:35 -05:00
parent d4d27aab6a
commit 7b767368df
6 changed files with 66 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,6 @@ 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;
@@ -87,18 +86,18 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
<div className='group'>
<button
id='zoom-to-fill'
id='fill-width'
className='tool'
onClick={()=>handleZoomButton(calculateZoom('fill'))}
>
<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
<i className='fac fit-width' />
</button>
<button
id='zoom-to-fit'
className='tool'
onClick={()=>handleZoomButton(calculateZoom('fit'))}
>
<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
<i className='fac zoom-to-fit' />
</button>
<button
id='zoom-out'

5
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -1,3 +1,5 @@
@import (less) './client/icons/customIcons.less';
.toolBar {
position : absolute;
z-index : 1;
@@ -94,5 +96,8 @@
color : #777777;
background-color : unset !important;
}
i {
font-size:1.2em;
}
}
}

50
client/icons/customIcons.less
View File

@@ -1,57 +1,69 @@
.fac {
display : inline-block;
display : inline-block;
background-color : currentColor;
mask-size : contain;
mask-repeat : no-repeat;
mask-position : center;
width : 1em;
aspect-ratio : 1;
}
.position-top-left {
content: url('../icons/position-top-left.svg');
mask-image: url('../icons/position-top-left.svg');
}
.position-top-right {
content: url('../icons/position-top-right.svg');
mask-image: url('../icons/position-top-right.svg');
}
.position-bottom-left {
content: url('../icons/position-bottom-left.svg');
mask-image: url('../icons/position-bottom-left.svg');
}
.position-bottom-right {
content: url('../icons/position-bottom-right.svg');
mask-image: url('../icons/position-bottom-right.svg');
}
.position-top {
content: url('../icons/position-top.svg');
mask-image: url('../icons/position-top.svg');
}
.position-right {
content: url('../icons/position-right.svg');
mask-image: url('../icons/position-right.svg');
}
.position-bottom {
content: url('../icons/position-bottom.svg');
mask-image: url('../icons/position-bottom.svg');
}
.position-left {
content: url('../icons/position-left.svg');
mask-image: url('../icons/position-left.svg');
}
.mask-edge {
content: url('../icons/mask-edge.svg');
mask-image: url('../icons/mask-edge.svg');
}
.mask-corner {
content: url('../icons/mask-corner.svg');
mask-image: url('../icons/mask-corner.svg');
}
.mask-center {
content: url('../icons/mask-center.svg');
mask-image: url('../icons/mask-center.svg');
}
.book-front-cover {
content: url('../icons/book-front-cover.svg');
mask-image: url('../icons/book-front-cover.svg');
}
.book-back-cover {
content: url('../icons/book-back-cover.svg');
mask-image: url('../icons/book-back-cover.svg');
}
.book-inside-cover {
content: url('../icons/book-inside-cover.svg');
mask-image: url('../icons/book-inside-cover.svg');
}
.book-part-cover {
content: url('../icons/book-part-cover.svg');
mask-image: url('../icons/book-part-cover.svg');
}
.davek {
content: url('../icons/Davek.svg');
mask-image: url('../icons/Davek.svg');
}
.rellanic {
content: url('../icons/Rellanic.svg');
mask-image: url('../icons/Rellanic.svg');
}
.iokharic {
content: url('../icons/Iokharic.svg');
mask-image: url('../icons/Iokharic.svg');
}
.zoom-to-fit {
mask-image: url('../icons/zoom-to-fit.svg');
}
.fit-width {
mask-image: url('../icons/fit-width.svg');
}

15
client/icons/fit-width.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.07509,0,0,1.07509,-3.75511,-3.75468)">
<g transform="matrix(0.843549,0,0,0.950644,8.38004,4.39672)">
<path d="M28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L28.455,52.413Z"/>
</g>
<g transform="matrix(1.46702,0,0,0.986488,-23.0335,3.50686)">
<path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
</g>
<g transform="matrix(1.46702,0,0,0.986488,60.7211,3.50686)">
<path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@@ -1,46 +0,0 @@
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 };

12
client/icons/zoom-to-fit.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
<g transform="matrix(0.841196,0,0,0.947993,8.49652,4.52391)">
<path d="M44.333,52.413L28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L44.333,43.528L44.333,29.439L37.382,29.439C36.099,29.439 34.943,28.755 34.452,27.705C33.961,26.656 34.233,25.448 35.14,24.644L47.097,14.052C48.335,12.956 50.343,12.956 51.581,14.052L63.539,24.644C64.446,25.448 64.717,26.656 64.226,27.705C63.735,28.755 62.579,29.439 61.296,29.439L54.346,29.439L54.346,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L54.346,52.413L54.346,66.502L61.296,66.502C62.579,66.502 63.735,67.187 64.226,68.236C64.717,69.286 64.446,70.494 63.539,71.297L51.581,81.889C50.343,82.986 48.335,82.986 47.097,81.889L35.14,71.297C34.233,70.494 33.961,69.286 34.452,68.236C34.943,67.187 36.099,66.502 37.382,66.502L44.333,66.503L44.333,52.413Z"/>
</g>
<g transform="matrix(1.0247,0,0,1.0247,-5.47698,-3.53855)">
<path d="M99.4,14.269L99.4,90.227C99.4,94.245 96.137,97.508 92.119,97.508L16.161,97.508C12.142,97.508 8.88,94.245 8.88,90.227L8.88,14.269C8.88,10.25 12.142,6.988 16.161,6.988L92.119,6.988C96.137,6.988 99.4,10.25 99.4,14.269ZM93.633,14.269C93.633,13.433 92.955,12.755 92.119,12.755L16.161,12.755C15.325,12.755 14.647,13.433 14.647,14.269L14.647,90.227C14.647,91.062 15.325,91.741 16.161,91.741L92.119,91.741C92.955,91.741 93.633,91.062 93.633,90.227L93.633,14.269Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB