hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-10 23:22:33 +01:00
parent bb1f560d62
commit 6e22ae593a
3 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Checkbox.tsx
View File

@ -2,7 +2,7 @@ import { useState } from "react";
const Checkbox = (
{
id,
label,
label,
checked,
changeEvent,
...props
@ -19,9 +19,10 @@ const Checkbox = (
return (
<div className="checkbox-wrapper">
<label>
<label htmlFor={id}>{label}</label>
<input
id={id}
name={id}
type="checkbox"
checked={isChecked}
onChange=
@ -34,8 +35,6 @@ const Checkbox = (
}
{...props}
/>
<span>{label}</span>
</label>
</div>
);
};

15
src/components/Qr.css
View File

@ -57,7 +57,6 @@ img
flex-direction: row-reverse;
}
.spinBtn
{
display: flex;
@ -71,6 +70,7 @@ img
border-style: solid;
border-width: 1px;
}
.blockRepeat
{
display: flex;
@ -93,7 +93,7 @@ img
.list-container
{
margin-top:40px;
margin-top: 10px;
}
.list-item
@ -110,6 +110,17 @@ img
margin-bottom: 20px;
}
input
{
width: 50px;
}
label
{
margin-right: 10px;
margin-left: 15px;
}
@media print
{
.qrSettings

76
src/components/Qr.tsx
View File

@ -35,28 +35,28 @@ export default function Qr()
const dragItem = React.useRef<any>(null);
const dragOverItem = React.useRef<any>(null);
const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{
event.preventDefault();
if(fontSize < 200)
{
setFontSize(fontSize + 1);
}
// const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// {
// event.preventDefault();
// if(fontSize < 200)
// {
// setFontSize(fontSize + 1);
// }
console.log("\nincrementFontSize " + fontSize);
return;
});
// console.log("\nincrementFontSize " + fontSize);
// return;
// });
const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{
event.preventDefault();
if(fontSize > 1)
{
setFontSize(fontSize -1);
}
console.log("\ndecrementFontSize " + fontSize);
return;
});
// const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// {
// event.preventDefault();
// if(fontSize > 1)
// {
// setFontSize(fontSize -1);
// }
// console.log("\ndecrementFontSize " + fontSize);
// return;
// });
function setBitField(val: number, checked: boolean, bit: number) : number
{
@ -210,11 +210,17 @@ export default function Qr()
}
const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
{
setWidth(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
}
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => {
setHeight(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{
setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
}
const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) =>
{
setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
}
if(user && dog.success === undefined)
@ -247,22 +253,24 @@ export default function Qr()
<div className='qrSettings'>
<div>
<div>Anhänger</div>
<div>Breite [cm]</div>
<input type='number' id='width' name='width' onChange={onChangeWidth} value={width}/>
<div>Höhe [cm]</div>
<input type='number' id='height' name='height'onChange={onChangeHeight} value={height}/>
<label htmlFor='width'>Breite [mm] </label>
<input type='number' id='width' name='width'
min="1" max="100"
onChange={onChangeWidth} value={width*10}/>
<label htmlFor='height'>Höhe [mm] </label>
<input type='number' id='height' name='height'
min="1" max="100"
onChange={onChangeHeight} value={height*10}/>
</div>
<div>
<div>Schriftgröße</div>
<div className='spinBtn'>
<button onClick={decrementFontSize}>-</button>
<div>{fontSize}</div>
<button onClick={incrementFontSize}>+</button>
</div>
<label htmlFor='fontSize'>Schriftgröße </label>
<input type='number' id='fontSize' name='fontSize'
min="1" max="200"
onChange={onChangeFontSize} value={fontSize} />
</div>
<div>
<div>Sichtbare Elemente</div>
<Checkbox
<Checkbox
id='name'
label={'Name'}
checked={(visibleItem & 0b100) > 0}