Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix toolbar issues #3694

Closed
wants to merge 14 commits into from
Closed

Fix toolbar issues #3694

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1252fc4
change brewrenderer page height flow to rely on viewport units
5e-Cleric Aug 30, 2024
aa1a66f
accomodate toolbar in component
5e-Cleric Aug 30, 2024
d270120
remove position absolute in toolbar
5e-Cleric Aug 30, 2024
30544de
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 6, 2024
26bf75b
cleaning unused styles from toolbar
5e-Cleric Sep 6, 2024
c45d2bf
to flex
5e-Cleric Sep 6, 2024
6a9e58d
remove hardcoded value
5e-Cleric Sep 6, 2024
55d0402
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 6, 2024
08ba4d6
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 6, 2024
8edfb5f
suggested less
5e-Cleric Sep 6, 2024
3dcb1ca
testing redeployment
5e-Cleric Sep 7, 2024
ec1eb5b
Merge branch 'master' into fix-toolbar-issues
calculuschild Sep 9, 2024
92a67e5
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 16, 2024
abb315d
add page height back
5e-Cleric Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 1 addition & 17 deletions client/homebrew/brewRenderer/brewRenderer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ const { printCurrentBrew } = require('../../../shared/helpers.js');
const DOMPurify = require('dompurify');
const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };

const PAGE_HEIGHT = 1056;

const INITIAL_CONTENT = dedent`
<!DOCTYPE html><html><head>
<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
Expand Down Expand Up @@ -61,7 +59,6 @@ const BrewRenderer = (props)=>{
};

const [state, setState] = useState({
height : PAGE_HEIGHT,
isMounted : false,
visibility : 'hidden',
zoom : 100,
Expand All @@ -76,17 +73,6 @@ const BrewRenderer = (props)=>{
rawPages = props.text.split(/^\\page$/gm);
}

useEffect(()=>{ // Unmounting steps
return ()=>{window.removeEventListener('resize', updateSize);};
}, []);

const updateSize = ()=>{
setState((prevState)=>({
...prevState,
height : mainRef.current.parentNode.clientHeight,
}));
};

const getCurrentPage = (e)=>{
const { scrollTop, clientHeight, scrollHeight } = e.target;
const totalScrollableHeight = scrollHeight - clientHeight;
Expand Down Expand Up @@ -164,8 +150,6 @@ const BrewRenderer = (props)=>{

const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount"
setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
updateSize();
window.addEventListener('resize', updateSize);
renderPages(); //Make sure page is renderable before showing
setState((prevState)=>({
...prevState,
Expand Down Expand Up @@ -217,7 +201,7 @@ const BrewRenderer = (props)=>{
onScroll={getCurrentPage}
onKeyDown={handleControlKeys}
tabIndex={-1}
style={{ height: state.height }}>
style={{ height: "100vh" }}>
5e-Cleric marked this conversation as resolved.
Show resolved Hide resolved

{/* Apply CSS from Style tab and render pages from Markdown tab */}
{state.isMounted
Expand Down
14 changes: 9 additions & 5 deletions client/homebrew/brewRenderer/brewRenderer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,16 @@
.brewRenderer {
overflow-y : scroll;
will-change : transform;
padding-top : 30px;
padding-block : 15px;
:where(.pages) {
margin : 30px 0px;
& > :where(.page) {
width : 215.9mm;
height : 279.4mm;
margin-right : auto;
margin-bottom : 30px;
margin-left : auto;
margin : 15px auto;
box-shadow : 1px 4px 14px #000000;
}
}

&::-webkit-scrollbar {
width : 20px;
&:horizontal {
Expand All @@ -29,8 +27,14 @@
}
}


.pane { position : relative; }

.pane.previewPane {
display: flex;
flex-direction: column;
}

@media print {
.toolBar { display : none; }
.brewRenderer {
Expand Down
13 changes: 2 additions & 11 deletions client/homebrew/brewRenderer/toolBar/toolBar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
@import (less) './client/icons/customIcons.less';

.toolBar {
position : absolute;
z-index : 1;
box-sizing : border-box;
display : flex;
flex-wrap : wrap;
gap : 8px 30px;
Expand All @@ -12,12 +9,10 @@
width : 100%;
height : auto;
padding : 2px 0;
font-family : 'Open Sans', sans-serif;
color : #CCCCCC;
background-color : #555555;

.group {
box-sizing : border-box;
display : flex;
gap : 0 3px;
align-items : center;
Expand All @@ -34,7 +29,7 @@
position : relative;
height : 1.5em;
padding : 2px 5px;
font-family : 'Open Sans', sans-serif;
font-family : inherit;
color : #000000;
background : #EEEEEE;
border : 1px solid gray;
Expand Down Expand Up @@ -80,8 +75,6 @@

button {
box-sizing : content-box;
display : flex;
align-items : center;
justify-content : center;
width : auto;
min-width : 46px;
Expand All @@ -96,8 +89,6 @@
color : #777777;
background-color : unset !important;
}
i {
font-size:1.2em;
}
i { font-size : 1.2em; }
}
}
4 changes: 2 additions & 2 deletions shared/naturalcrit/splitPane/splitPane.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ const SplitPane = createClass({

render : function(){
return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
<Pane
<Pane className="editorPane"
Copy link
Member

@calculuschild calculuschild Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these be named more generic leftPane and rightPane, since they are now being used for /vault, not just editors?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably

width={this.state.currentDividerPos}
>
{React.cloneElement(this.props.children[0], {
Expand All @@ -151,7 +151,7 @@ const SplitPane = createClass({
})}
</Pane>
{this.renderDivider()}
<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
<Pane className="previewPane" isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
</div>;
}
});
Expand Down