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

Merge branch 'Fill-Pane-Buttons' into View-Modes

Browse Source
This commit is contained in:
Gazook89
2024-08-23 23:26:24 -05:00
parent 960ecae861 6bb5d04f07
commit 07c574fa42
17 changed files with 15696 additions and 15737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,12 +61,11 @@ const BrewRenderer = (props)=>{
};
const [state, setState] = useState({
viewablePageNumber : 0,
height : PAGE_HEIGHT,
isMounted : false,
visibility : 'hidden',
zoom : 100,
currentPageNumber : 1,
height : PAGE_HEIGHT,
isMounted : false,
visibility : 'hidden',
zoom : 100,
currentPageNumber : 1,
});
const mainRef = useRef(null);
@@ -90,16 +89,6 @@ const BrewRenderer = (props)=>{
}));
};
const handleScroll = (e)=>{
const target = e.target;
setState((prevState)=>({
...prevState,
viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
}));
getCurrentPage(e);
};
const getCurrentPage = (e) => {
const target = e.target;
const { scrollTop, clientHeight, scrollHeight } = target;
@@ -109,7 +98,7 @@ const BrewRenderer = (props)=>{
setState((prevState) => ({
...prevState,
currentPageNumber: currentPageNumber || 1
currentPageNumber : currentPageNumber || 1
}));
};
@@ -120,23 +109,12 @@ const BrewRenderer = (props)=>{
if(index == props.currentEditorPage) //Already rendered before this step
return false;
if(Math.abs(index - state.viewablePageNumber) <= 3)
if(Math.abs(index - state.currentPageNumber) <= 3)
return true;
return false;
};
const renderPageInfo = ()=>{
return <div className='pageInfo' ref={mainRef}>
<div>
{props.renderer}
</div>
<div>
{state.viewablePageNumber + 1} / {rawPages.length}
</div>
</div>;
};
const renderDummyPage = (index)=>{
return <div className='phb page' id={`p${index + 1}`} key={index}>
<i className='fas fa-spinner fa-spin' />
@@ -219,7 +197,7 @@ const BrewRenderer = (props)=>{
<>
{/*render dummy page while iFrame is mounting.*/}
{!state.isMounted
? <div className='brewRenderer' onScroll={handleScroll}>
? <div className='brewRenderer' onScroll={getCurrentPage}>
<div className='pages'>
{renderDummyPage(1)}
</div>
@@ -227,7 +205,7 @@ const BrewRenderer = (props)=>{
: null}
<ErrorBar errors={props.errors} />
<div className='popups'>
<div className='popups' ref={mainRef}>
<RenderWarnings />
<NotificationPopup />
</div>
@@ -242,17 +220,11 @@ const BrewRenderer = (props)=>{
onClick={()=>{emitClick();}}
>
<div className={'brewRenderer'}
onScroll={handleScroll}
onScroll={getCurrentPage}
onKeyDown={handleControlKeys}
tabIndex={-1}
style={{ height: state.height }}>
<ErrorBar errors={props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
{/* Apply CSS from Style tab and render pages from Markdown tab */}
{state.isMounted
&&
@@ -265,7 +237,6 @@ const BrewRenderer = (props)=>{
}
</div>
</Frame>
{renderPageInfo()}
</>
);
};

65
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -1,9 +1,9 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
.brewRenderer {
will-change : transform;
padding-top : 30px;
overflow-y : scroll;
padding-block : 30px;
will-change : transform;
:where(.pages) {
margin : 30px 30px;
@@ -44,68 +44,33 @@
}
&::-webkit-scrollbar {
width: 20px;
width : 20px;
&:horizontal{
height: 20px;
width:auto;
&:horizontal {
width : auto;
height : 20px;
}
&-thumb {
background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
&:horizontal{
background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
}
background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
}
&-corner {
visibility: hidden;
}
&-corner { visibility : hidden; }
}
}
.pane { position : relative; }
.pageInfo {
position : absolute;
right : 17px;
bottom : 0;
z-index : 1000;
font-size : 10px;
font-weight : 800;
color : white;
background-color : #333333;
div {
display : inline-block;
padding : 8px 10px;
&:not(:last-child) { border-right : 1px solid #666666; }
}
}
.ppr_msg {
position : absolute;
bottom : 0;
left : 0px;
z-index : 1000;
padding : 8px 10px;
font-size : 10px;
font-weight : 800;
color : white;
background-color : #333333;
}
@media print {
.toolBar {
display: none;
}
.toolBar { display : none; }
.brewRenderer {
height: 100%;
overflow-y: unset;
height : 100%;
padding-top : unset;
overflow-y : unset;
.pages {
margin: 0px;
&>.page {
box-shadow: unset;
}
margin : 0px;
& > .page { box-shadow : unset; }
}
}
}

3
client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
View File

@@ -1,9 +1,10 @@
.popups {
position : fixed;
top : @navbarHeight;
top : calc(@navbarHeight + @viewerToolsHeight);
right : 24px;
z-index : 10001;
width : 450px;
padding-top : 5px;
}
.notificationPopup {

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

@@ -1,7 +1,7 @@
require('./toolBar.less');
const React = require('react');
const { useState, useEffect } = React;
const _ = require('lodash')
const _ = require('lodash');
import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
@@ -11,7 +11,7 @@ const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageInput, setPageInput] = useState(currentPage);
const [pageNum, setPageNum] = useState(currentPage);
const [arrangement, setArrangement] = useState('single');
const modes = ['single', 'facing', 'flow'];
@@ -20,8 +20,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}, [zoomLevel]);
useEffect(()=>{
setPageInput(currentPage);
}, [currentPage]);
setPageNum(currentPage);
}, [currentPage]);;
// update display arrangement when arrangement state is changed.
useEffect(()=>{
@@ -35,17 +35,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}, [arrangement]);
const handleZoomChange = (delta)=>{
const zoomChange = _.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM);
setZoomLevel(zoomChange);
const handleZoomButton = (delta)=>{
const newZoomLevel = _.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
setZoomLevel(newZoomLevel);
};
const handlePageChange = (page)=>{
setPageInput(page);
};
const scrollToPage = (pageNumber) => {
const scrollToPage = (pageNumber)=>{
pageNumber = _.clamp(pageNumber - 1, 0, totalPages - 1);
const iframe = document.getElementById('BrewRenderer');
if(iframe && iframe.contentWindow) {
@@ -111,21 +106,21 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button
id='zoom-to-fill'
className='tool'
onClick={()=>handleZoomChange(calculateZoom('fill'))}
onClick={()=>handleZoomButton(calculateZoom('fill'))}
>
<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
</button>
<button
id='zoom-to-fit'
className='tool'
onClick={()=>handleZoomChange(calculateZoom('fit'))}
onClick={()=>handleZoomButton(calculateZoom('fit'))}
>
<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
</button>
<button
id='zoom-out'
className='tool'
onClick={()=>handleZoomChange(-20)}
onClick={()=>handleZoomButton(-20)}
disabled={zoomLevel <= MIN_ZOOM}
>
<i className='fas fa-magnifying-glass-minus' />
@@ -149,7 +144,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button
id='zoom-in'
className='tool'
onClick={()=>handleZoomChange(20)}
onClick={()=>handleZoomButton(20)}
disabled={zoomLevel >= MAX_ZOOM}
>
<i className='fas fa-magnifying-glass-plus' />
@@ -170,8 +165,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button
id='previous-page'
className='previousPage tool'
onClick={()=>scrollToPage(pageInput - 1)}
disabled={pageInput <= 1}
onClick={()=>scrollToPage(pageNum - 1)}
disabled={pageNum <= 1}
>
<i className='fas fa-arrow-left'></i>
</button>
@@ -184,13 +179,11 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
name='page'
inputMode='numeric'
pattern='[0-9]'
value={pageInput}
onChange={(e)=>{
handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
onBlur={()=>scrollToPage(pageInput)}
onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageInput) : null;}}
value={pageNum}
onChange={(e)=>{setPageNum(parseInt(e.target.value));}}
onBlur={()=>scrollToPage(pageNum)}
onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageNum) : null;}}
/>
<span id='page-count'>/ {totalPages}</span>
</div>
@@ -198,8 +191,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button
id='next-page'
className='tool'
onClick={()=>scrollToPage(pageInput + 1)}
disabled={pageInput >= totalPages}
onClick={()=>scrollToPage(pageNum + 1)}
disabled={pageNum >= totalPages}
>
<i className='fas fa-arrow-right'></i>
</button>

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

@@ -1,12 +1,12 @@
.toolBar {
position : absolute;
z-index : 1;
box-sizing : border-box;
display : flex;
flex-wrap : wrap;
gap : 8px 30px;
align-items : center;
justify-content : space-around;
box-sizing : border-box;
justify-content : center;
width : 100%;
height : auto;
padding : 2px 0;
@@ -15,17 +15,17 @@
background-color : #555555;
.group {
box-sizing : border-box;
display : flex;
gap: 0 3px;
gap : 0 3px;
align-items : center;
justify-content : center;
box-sizing : border-box;
height: 28px;
height : 28px;
}
.tool {
display: flex;
align-items: center;
display : flex;
align-items : center;
}
input {
@@ -35,20 +35,20 @@
font-family : 'Open Sans', sans-serif;
color : #000000;
background : #EEEEEE;
border : 1px solid gray;
&:focus { outline : 1px solid #d3d3d3; }
border : 1px solid gray;
&:focus { outline : 1px solid #D3D3D3; }
// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
&.range-input {
color: #D3D3D3;
accent-color: #d3d3d3;
padding: 2px 0;
padding : 2px 0;
color : #D3D3D3;
accent-color : #D3D3D3;
&::-webkit-slider-thumb, &::-moz-slider-thumb {
cursor : pointer;
width: 5px;
height: 5px;
outline: none;
&::-webkit-slider-thumb, &::-moz-slider-thumb {
width : 5px;
height : 5px;
cursor : pointer;
outline : none;
}
&:hover::after {
@@ -70,9 +70,9 @@
// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
&#page-input {
width: 4ch;
text-align: center;
margin-right: 1ch;
width : 4ch;
margin-right : 1ch;
text-align : center;
}
@@ -80,21 +80,21 @@
button {
display : flex;
align-items : center;
justify-content: center;
height : 100%;
box-sizing : content-box;
display : flex;
align-items : center;
justify-content : center;
width : auto;
min-width : 46px;
height : 100%;
padding : 0 0px;
font-weight : unset;
color : inherit;
background-color : unset;
box-sizing: content-box;
&:hover { background-color : #444444; }
&:focus { outline : 1px solid #d3d3d3; }
&:focus { outline : 1px solid #D3D3D3; }
&:disabled {
color : #777777;

1
client/homebrew/editor/editor.jsx
View File

@@ -86,7 +86,6 @@ const Editor = createClass({
handleControlKeys : function(e){
if(!(e.ctrlKey || e.metaKey)) return;
console.log(e);
const LEFTARROW_KEY = 37;
const RIGHTARROW_KEY = 39;
if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();

1
client/homebrew/navbar/navbar.less
View File

@@ -1,6 +1,7 @@
@import 'naturalcrit/styles/colors.less';
@navbarHeight : 28px;
@viewerToolsHeight : 32px;
@keyframes pinkColoring {
0% { color : pink; }