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

refactor to func comp and using dialog

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-10-20 22:07:33 +02:00
parent c723f820f7
commit cac87b14c7
2 changed files with 115 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
client/homebrew/brewRenderer/errorBar/errorBar.jsx
View File

@@ -1,75 +1,87 @@
require('./errorBar.less');
const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
const _ = require('lodash');
const ErrorBar = createClass({
displayName : 'ErrorBar',
getDefaultProps : function() {
return {
errors : []
};
},
hasOpenError : false,
hasCloseError : false,
hasMatchError : false,
renderErrors : function(){
this.hasOpenError = false;
this.hasCloseError = false;
this.hasMatchError = false;
import Dialog from '../../../components/dialog.jsx';
const errors = _.map(this.props.errors, (err, idx)=>{
if(err.id == 'OPEN') this.hasOpenError = true;
if(err.id == 'CLOSE') this.hasCloseError = true;
if(err.id == 'MISMATCH') this.hasMatchError = true;
return <li key={idx}>
Line {err.line} : {err.text}, '{err.type}' tag
</li>;
});
const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
return <ul>{errors}</ul>;
},
const ErrorBar = ( props ) => {
let hasOpenError = false;
let hasCloseError = false;
let hasMatchError = false;
renderProtip : function(){
const msg = [];
if(this.hasOpenError){
msg.push(<div>
An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
</div>);
}
const renderErrors = () => {
hasOpenError = false;
hasCloseError = false;
hasMatchError = false;
if(this.hasCloseError){
msg.push(<div>
An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
</div>);
}
const errors = _.map(props.errors, (err, idx) => {
if (err.id === 'OPEN') hasOpenError = true;
if (err.id === 'CLOSE') hasCloseError = true;
if (err.id === 'MISMATCH') hasMatchError = true;
if(this.hasMatchError){
msg.push(<div>
A type mismatch means you closed a tag, but the last open tag was a different type.
</div>);
}
return <div className='protips'>
<h4>Protips!</h4>
{msg}
</div>;
},
return (
<li key={idx}>
Line {err.line} : {err.text}, '{err.type}' tag
</li>
);
});
render : function(){
if(!this.props.errors.length) return null;
return <ul>{errors}</ul>;
};
return <div className='errorBar'>
<i className='fas fa-exclamation-triangle' />
<h3> There are HTML errors in your markup</h3>
<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
{this.renderErrors()}
<hr />
{this.renderProtip()}
</div>;
}
});
const renderProtip = () => {
const msg = [];
if (hasOpenError) {
msg.push(
<div key="openError">
An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
</div>
);
}
if (hasCloseError) {
msg.push(
<div key="closeError">
An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
</div>
);
}
if (hasMatchError) {
msg.push(
<div key="matchError">
A type mismatch means you closed a tag, but the last open tag was a different type.
</div>
);
}
return (
<div className="protips">
<h4>Protips!</h4>
{msg}
</div>
);
};
if (!props.errors.length) return null;
return (
<Dialog className="errorBar" closeText={DISMISS_BUTTON} >
<div className="content">
<i className="fas fa-exclamation-triangle" />
<h3> There are HTML errors in your markup</h3>
<small>
If these aren't fixed your brew will not render properly when you print it to PDF or share it
</small>
{renderErrors()}
</div>
<hr />
{renderProtip()}
</Dialog>
);
};
module.exports = ErrorBar;

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

@@ -1,60 +1,72 @@
.errorBar{
.errorBar {
position : absolute;
z-index : 10000;
box-sizing : border-box;
z-index : 1000;
width : 100%;
margin-right : 13px;
padding : 20px;
padding-bottom : 10px;
padding-left : 100px;
background-color : @red;
color : white;
i{
position : absolute;
left : 30px;
opacity : 0.8;
font-size : 3em;
background-color : @red;
border : unset;
.content {
> i {
float : left;
margin-right : 10px;
margin-bottom : 20px;
font-size : 3em;
opacity : 0.8;
}
h3 {
font-size : 1.1em;
font-weight : 800;
}
}
h3{
font-size : 1.1em;
font-weight : 800;
}
ul{
ul {
margin-top : 15px;
font-size : 0.8em;
list-style-position : inside;
list-style-type : disc;
li{
line-height : 1.6em;
}
li { line-height : 1.6em; }
}
hr{
hr {
box-sizing : border-box;
width : 100%;
height : 2px;
width : 150%;
margin-top : 25px;
margin-bottom : 15px;
margin-left : -100px;
background-color : darken(@red, 8%);
border : none;
}
small{
font-size: 0.6em;
opacity: 0.7;
small {
font-size : 0.6em;
opacity : 0.7;
}
.protips{
margin-left : -80px;
.protips {
font-size : 0.6em;
&>div{
& > div {
margin-bottom : 10px;
line-height : 1.2em;
}
h4{
opacity : 0.8;
h4 {
font-weight : 800;
line-height : 1.5em;
text-transform : uppercase;
opacity : 0.8;
}
}
button.dismiss {
position : absolute;
top : 30px;
right : 30px;
height : max-content;
padding : unset;
font-size : 40px;
cursor : pointer;
background-color : transparent;
opacity : 0.6;
&:hover { opacity : 1; }
}
}