f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 18:32:40 +00:00
Code Wiki Activity

"Updated ToolBar component: added zoom level limits, refactored zoom level handling, and modified CSS styles for input and slider elements."

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-08-16 15:58:00 +02:00
parent f0765b5aaa
commit 5ee4ada112
2 changed files with 80 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,10 @@ require('./toolBar.less');
const React = require('react'); const React = require('react');
const { useState, useEffect } = React; const { useState, useEffect } = React;
const maxZoom = 300;
const minZoom = 10;
const zoomStep = 10;
const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
const [state, setState] = useState({ const [state, setState] = useState({
currentPage: currentPage, currentPage: currentPage,
@@ -26,21 +30,22 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
const setZoomLevel = (direction) => { const setZoomLevel = (direction) => {
let zoomLevel = state.zoomLevel; let zoomLevel = state.zoomLevel;
if (direction === 'in') { if (direction === 'in') {
zoomLevel += 10; zoomLevel += zoomStep;
} else { } else {
zoomLevel -= 10; zoomLevel -= zoomStep;
} }
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
zoomLevel, zoomLevel: zoomLevel,
zoomInput: zoomLevel,
})); }));
}; };
const handleInputChange = (value, type) => { const handleInputChange = (value, type) => {
const newValue = parseInt(value, 10); const newValue = parseInt(value, 10);
if (type === 'zoom' && newValue >= 10 && newValue <= 300) { if (type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) {
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
zoomInput: newValue, zoomInput: newValue,
@@ -57,20 +62,21 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
<div className="toolBar"> <div className="toolBar">
<div className="tool"> <div className="tool">
<button <button
onClick={() => setZoomLevel('in')} onClick={() => setZoomLevel('out')}
disabled={state.zoomLevel >= 300} disabled={state.zoomLevel <= minZoom}
> >
Zoom In Zoom Out
</button> </button>
</div> </div>
<div className="tool"> <div className="tool">
<input <input
className='slider' className="slider"
type="range" type="range"
name="zoom" name="zoom"
min={10} list="zoomLevels"
max={300} min={minZoom}
max={maxZoom}
step={zoomStep}
value={state.zoomInput} value={state.zoomInput}
onChange={(e) => handleInputChange(e.target.value, 'zoom')} onChange={(e) => handleInputChange(e.target.value, 'zoom')}
onMouseUp={(e) => { onMouseUp={(e) => {
@@ -85,17 +91,27 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
} }
}} }}
/> />
<datalist id="zoomLevels">
{Array.from(
{
length:
Math.floor((maxZoom - minZoom) / zoomStep) + 1,
},
(_, i) => minZoom + i * zoomStep
).map((option) => (
<option key={option} value={option} />
))}
</datalist>
</div> </div>
<div className="tool"> <div className="tool">
<button <button
onClick={() => setZoomLevel('out')} onClick={() => setZoomLevel('in')}
disabled={state.zoomLevel <= 10} disabled={state.zoomLevel >= maxZoom}
> >
Zoom Out Zoom In
</button> </button>
</div> </div>
<div className="tool"> <div className="tool">
<button <button
className="previousPage" className="previousPage"

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

@@ -19,7 +19,7 @@
border-bottom : 1px solid #666666; border-bottom : 1px solid #666666;
input { input {
position: relative; position : relative;
height : 1.5em; height : 1.5em;
padding : 2px 5px; padding : 2px 5px;
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
@@ -31,32 +31,60 @@
border-radius : 7px; border-radius : 7px;
&.slider { &.slider {
appearance: none; width : 100%;
width: 100%; height : 7px;
height: 5px; appearance : none;
background: #d3d3d3; background : #D3D3D3;
outline: none; isolation : isolate;
isolation: isolate; outline : none;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
appearance: none; width : 8px;
width: 7px; height : 15px;
height: 15px; appearance : none;
background-color: rgb(39, 174, 96); cursor : pointer;
cursor: pointer; background-color : rgb(39, 174, 96);
translate : 0 -66%;
}
&::-moz-slider-thumb {
width : 8px;
height : 15px;
appearance : none;
cursor : pointer;
background-color : rgb(39, 174, 96);
} }
&::before { &::before {
content: ''; position : absolute;
position: absolute; top : 50%;
top: 50%; left : 33.33%;
left: 33.33%; z-index : -1;
transform: translate(-50%, -50%); width : 7px;
width: 7px; height : 15px;
height: 15px; content : '';
background-color: #d3d3d3; background-color : #D3D3D3;
z-index: -1; transform : translate(-50%, -50%);
} }
}
}
.tool {
&:hover .slider::after {
position : absolute;
bottom : -30px;
left : 50%;
z-index : 1;
display : grid;
place-items : center;
width : 4ch;
height : 1.2lh;
pointer-events : none;
content : attr(value);
background-color : #D3D3D3;
border : 1px solid #A1A1A1;
border-radius : 5px;
transform : translate(-50%, 50%);
} }
} }