f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-27 09:22:44 +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 { useState, useEffect } = React;
const maxZoom = 300;
const minZoom = 10;
const zoomStep = 10;
const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
const [state, setState] = useState({
currentPage: currentPage,
@@ -26,21 +30,22 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
const setZoomLevel = (direction) => {
let zoomLevel = state.zoomLevel;
if (direction === 'in') {
zoomLevel += 10;
zoomLevel += zoomStep;
} else {
zoomLevel -= 10;
zoomLevel -= zoomStep;
}
setState((prevState) => ({
...prevState,
zoomLevel,
zoomLevel: zoomLevel,
zoomInput: zoomLevel,
}));
};
const handleInputChange = (value, type) => {
const newValue = parseInt(value, 10);
if (type === 'zoom' && newValue >= 10 && newValue <= 300) {
if (type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) {
setState((prevState) => ({
...prevState,
zoomInput: newValue,
@@ -57,20 +62,21 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
<div className="toolBar">
<div className="tool">
<button
onClick={() => setZoomLevel('in')}
disabled={state.zoomLevel >= 300}
onClick={() => setZoomLevel('out')}
disabled={state.zoomLevel <= minZoom}
>
Zoom In
Zoom Out
</button>
</div>
<div className="tool">
<input
className='slider'
className="slider"
type="range"
name="zoom"
min={10}
max={300}
list="zoomLevels"
min={minZoom}
max={maxZoom}
step={zoomStep}
value={state.zoomInput}
onChange={(e) => handleInputChange(e.target.value, 'zoom')}
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 className="tool">
<button
onClick={() => setZoomLevel('out')}
disabled={state.zoomLevel <= 10}
onClick={() => setZoomLevel('in')}
disabled={state.zoomLevel >= maxZoom}
>
Zoom Out
Zoom In
</button>
</div>
<div className="tool">
<button
className="previousPage"

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

@@ -19,7 +19,7 @@
border-bottom : 1px solid #666666;
input {
position: relative;
position : relative;
height : 1.5em;
padding : 2px 5px;
font-family : 'Open Sans', sans-serif;
@@ -31,32 +31,60 @@
border-radius : 7px;
&.slider {
appearance: none;
width: 100%;
height: 5px;
background: #d3d3d3;
outline: none;
isolation: isolate;
width : 100%;
height : 7px;
appearance : none;
background : #D3D3D3;
isolation : isolate;
outline : none;
&::-webkit-slider-thumb {
appearance: none;
width: 7px;
height: 15px;
background-color: rgb(39, 174, 96);
cursor: pointer;
width : 8px;
height : 15px;
appearance : none;
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 {
content: '';
position: absolute;
top: 50%;
left: 33.33%;
transform: translate(-50%, -50%);
width: 7px;
height: 15px;
background-color: #d3d3d3;
z-index: -1;
position : absolute;
top : 50%;
left : 33.33%;
z-index : -1;
width : 7px;
height : 15px;
content : '';
background-color : #D3D3D3;
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%);
}
}