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

"refactored ToolBar component to use a single state object, and updated styles in toolBar.less"

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-08-15 20:05:23 +02:00
parent 9dde4aa94e
commit f0765b5aaa
3 changed files with 62 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -284,11 +284,6 @@ const BrewRenderer = (props)=>{
<RenderWarnings />
<NotificationPopup />
</div>
<link href={`/themes/${rendererPath}/Blank/style.css`} type='text/css' rel='stylesheet'/>
{baseThemePath &&
<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>
}
<link href={`/themes/${rendererPath}/${themePath}/style.css`} type='text/css' rel='stylesheet'/>
{makeZoom()}
{/* Apply CSS from Style tab and render pages from Markdown tab */}

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

@@ -1,33 +1,26 @@
require('./toolBar.less');
const React = require('react');
const { useState, useRef, useEffect } = React;
const _ = require('lodash');
const { useState, useEffect } = React;
const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
const [state, setState] = useState({
currentPage: currentPage,
totalPages: totalPages,
zoomLevel: 100,
pageNumberInput: currentPage,
zoomInput: 100,
});
const [pageNumberInput, setPageNumberInput] = useState(
state.currentPage
);
const [zoomInput, setZoomInput] = useState(state.zoomLevel);
useEffect(() => {
console.log(`Zoom to: ${state.zoomLevel}`);
updateZoom(state.zoomLevel);
setZoomInput(state.zoomLevel);
}, [state.zoomLevel]);
// Update currentPage whenever page prop changes
useEffect(() => {
setState((prevState) => ({
...prevState,
currentPage: currentPage,
pageNumberInput: currentPage,
}));
setPageNumberInput(currentPage);
}, [currentPage]);
const setZoomLevel = (direction) => {
@@ -35,7 +28,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
if (direction === 'in') {
zoomLevel += 10;
} else {
zoomLevel = zoomLevel - 10;
zoomLevel -= 10;
}
setState((prevState) => ({
@@ -47,17 +40,16 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
const handleInputChange = (value, type) => {
const newValue = parseInt(value, 10);
// Check the type of input (zoom or page)
if (type === 'zoom') {
// Check if zoom level is within the allowed range
if (newValue >= 10 && newValue <= 300) {
setZoomInput(newValue);
}
} else if (type === 'page') {
// Check if page number is within the allowed range
if (newValue >= 1 && newValue <= totalPages) {
setPageNumberInput(newValue);
}
if (type === 'zoom' && newValue >= 10 && newValue <= 300) {
setState((prevState) => ({
...prevState,
zoomInput: newValue,
}));
} else if (type === 'page' && newValue >= 1 && newValue <= totalPages) {
setState((prevState) => ({
...prevState,
pageNumberInput: newValue,
}));
}
};
@@ -74,34 +66,31 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
<div className="tool">
<input
type="number"
className='slider'
type="range"
name="zoom"
min={10}
max={300}
value={zoomInput}
value={state.zoomInput}
onChange={(e) => handleInputChange(e.target.value, 'zoom')}
onBlur={(e) => {
const newZoomLevel = parseInt(
e.target.value,
10
);
onMouseUp={(e) => {
const newZoomLevel = parseInt(e.target.value, 10);
if (newZoomLevel !== state.zoomLevel) {
setState((prevState) => ({
...prevState,
zoomLevel: newZoomLevel,
zoomInput: newZoomLevel,
}));
updateZoom(newZoomLevel);
}
}}
onKeyPress={(e) => {
if (e.key === 'Enter') {
e.target.blur();
}
}}
/>
<span>%</span>
</div>
<div className="tool">
<button
onClick={() => setZoomLevel('out')}
disabled={state.zoomLevel <= 20}
disabled={state.zoomLevel <= 10}
>
Zoom Out
</button>
@@ -126,11 +115,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
min={1}
max={state.totalPages}
id="pageInput"
value={pageNumberInput}
value={state.pageNumberInput}
onChange={(e) => handleInputChange(e.target.value, 'page')}
onBlur={(e) => {
parseInt(pageNumberInput) === state.currentPage ||
onPageChange(parseInt(pageNumberInput) - 1);
parseInt(state.pageNumberInput) === state.currentPage ||
onPageChange(parseInt(state.pageNumberInput) - 1);
}}
onKeyPress={(e) => {
if (e.key === 'Enter') {
@@ -143,7 +132,9 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
<button
className="nextPage"
onClick={() => {
console.log(`page is ${state.currentPage} and i move to ${state.currentPage}`);
console.log(
`page is ${state.currentPage} and i move to ${state.currentPage}`
);
onPageChange(state.currentPage);
}}
disabled={state.currentPage >= state.totalPages}

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

@@ -19,6 +19,7 @@
border-bottom : 1px solid #666666;
input {
position: relative;
height : 1.5em;
padding : 2px 5px;
font-family : 'Open Sans', sans-serif;
@@ -28,6 +29,35 @@
text-transform : uppercase;
background : #EEEEEE;
border-radius : 7px;
&.slider {
appearance: none;
width: 100%;
height: 5px;
background: #d3d3d3;
outline: none;
isolation: isolate;
&::-webkit-slider-thumb {
appearance: none;
width: 7px;
height: 15px;
background-color: rgb(39, 174, 96);
cursor: pointer;
}
&::before {
content: '';
position: absolute;
top: 50%;
left: 33.33%;
transform: translate(-50%, -50%);
width: 7px;
height: 15px;
background-color: #d3d3d3;
z-index: -1;
}
}
}
.tool {