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

Initial UI

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-05-21 08:01:50 +02:00
parent b8b1b9660f
commit bc9ab284d8
3 changed files with 155 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@ const _ = require('lodash');
const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
const Markdown = require('naturalcrit/markdown.js');
const ErrorBar = require('./errorBar/errorBar.jsx');
const ToolBar = require('./toolBar/toolBar.jsx');
//TODO: move to the brew renderer
const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
@@ -198,6 +199,7 @@ const BrewRenderer = (props)=>{
contentDidMount={frameDidMount}
onClick={()=>{emitClick();}}
>
<ToolBar />
<div className={'brewRenderer'}
onScroll={handleScroll}
style={{ height: state.height }}>

85
client/homebrew/brewRenderer/toolBar/toolBar.jsx Normal file
View File

@@ -0,0 +1,85 @@
require('./toolBar.less');
const React = require('react');
const { useState, useRef, useEffect } = React;
const _ = require('lodash');
const ToolBar = () => {
const [state, setState] = useState({
currentPage: 1,
totalPages: 10,
zoomLevel: 100,
});
const setZoomLevel = (direction) => {
let zoomLevel = state.zoomLevel;
if (direction === 'in') {
zoomLevel += 10;
} else {
zoomLevel = zoomLevel - 10;
}
setState((prevState) => ({
...prevState,
zoomLevel,
}));
};
const scrollToPage = (direction) => {
let currentPage = state.currentPage;
if (direction === 'next') {
currentPage += 1;
} else {
currentPage = currentPage - 1;
}
setState((prevState) => ({
...prevState,
currentPage,
}));
};
return (
<div className="toolBar">
<div className="tool">
<button
onClick={() => setZoomLevel('in')}
disabled={state.zoomLevel >= 300}
>
Zoom In
</button>
</div>
<span className="currentZoom">{state.zoomLevel}%</span>
<div className="tool">
<button
onClick={() => setZoomLevel('out')}
disabled={state.zoomLevel <= 20}
>
Zoom Out
</button>
</div>
<div className="tool">
<button
className="previousPage"
onClick={() => scrollToPage('previous')}
disabled={state.currentPage <= 1}
>
<i className="fas fa-arrow-left"></i>
</button>
</div>
<span className="currentPage">{state.currentPage}</span>
<div className="tool">
<button
className="nextPage"
onClick={() => scrollToPage('next')}
disabled={state.currentPage >= 10}
>
<i className="fas fa-arrow-right"></i>
</button>
</div>
</div>
);
};
module.exports = ToolBar;

68
client/homebrew/brewRenderer/toolBar/toolBar.less Normal file
View File

@@ -0,0 +1,68 @@
.toolBar {
font-family: 'Open Sans', sans-serif;
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: #555;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
color: white;
text-align: center;
z-index: 1;
display: flex;
justify-content: center;
align-items: baseline;
column-gap: 15px;
row-gap: 5px;
flex-wrap: wrap;
span {
background: #eee;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: normal;
font-size: 16px;
color: #000;
padding: 2px 5px;
border-radius: 7px;
width: 50px;
}
.tool {
display: flex;
align-items: center;
padding: 0 8px;
color: #ccc;
height: 100%;
&:hover {
background-color: #444;
}
button {
background-color: transparent;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
color: #ccc;
padding: 0;
width: 70px;
&:focus-within {
color: white;
font-weight: 800;
height: 100%;
}
&:disabled {
color: #777;
background-color: transparent !important;
}
}
}
}