new release #190

Merged
b merged 68 commits from staging into main 2024-09-06 18:59:34 +00:00
3 changed files with 43 additions and 34 deletions
Showing only changes of commit 5c8cbc1956 - Show all commits

View File

@ -132,109 +132,109 @@ export const CreatePage = () => {
const [toolbox] = useState<DrawTool[]>([ const [toolbox] = useState<DrawTool[]>([
{ {
identifier: MarkType.TEXT, identifier: MarkType.TEXT,
icon: <FontAwesomeIcon icon={faT} />, icon: faT,
label: 'Text', label: 'Text',
active: true active: true
}, },
{ {
identifier: MarkType.SIGNATURE, identifier: MarkType.SIGNATURE,
icon: <FontAwesomeIcon icon={faSignature} />, icon: faSignature,
label: 'Signature', label: 'Signature',
active: false active: false
}, },
{ {
identifier: MarkType.JOBTITLE, identifier: MarkType.JOBTITLE,
icon: <FontAwesomeIcon icon={faBriefcase} />, icon: faBriefcase,
label: 'Job Title', label: 'Job Title',
active: false active: false
}, },
{ {
identifier: MarkType.FULLNAME, identifier: MarkType.FULLNAME,
icon: <FontAwesomeIcon icon={faIdCard} />, icon: faIdCard,
label: 'Full Name', label: 'Full Name',
active: false active: false
}, },
{ {
identifier: MarkType.INITIALS, identifier: MarkType.INITIALS,
icon: <FontAwesomeIcon icon={faHeading} />, icon: faHeading,
label: 'Initials', label: 'Initials',
active: false active: false
}, },
{ {
identifier: MarkType.DATETIME, identifier: MarkType.DATETIME,
icon: <FontAwesomeIcon icon={faClock} />, icon: faClock,
label: 'Date Time', label: 'Date Time',
active: false active: false
}, },
{ {
identifier: MarkType.DATE, identifier: MarkType.DATE,
icon: <FontAwesomeIcon icon={faCalendarDays} />, icon: faCalendarDays,
label: 'Date', label: 'Date',
active: false active: false
}, },
{ {
identifier: MarkType.NUMBER, identifier: MarkType.NUMBER,
icon: <FontAwesomeIcon icon={fa1} />, icon: fa1,
label: 'Number', label: 'Number',
active: false active: false
}, },
{ {
identifier: MarkType.IMAGES, identifier: MarkType.IMAGES,
icon: <FontAwesomeIcon icon={faImage} />, icon: faImage,
label: 'Images', label: 'Images',
active: false active: false
}, },
{ {
identifier: MarkType.CHECKBOX, identifier: MarkType.CHECKBOX,
icon: <FontAwesomeIcon icon={faSquareCheck} />, icon: faSquareCheck,
label: 'Checkbox', label: 'Checkbox',
active: false active: false
}, },
{ {
identifier: MarkType.MULTIPLE, identifier: MarkType.MULTIPLE,
icon: <FontAwesomeIcon icon={faCheckDouble} />, icon: faCheckDouble,
label: 'Multiple', label: 'Multiple',
active: false active: false
}, },
{ {
identifier: MarkType.FILE, identifier: MarkType.FILE,
icon: <FontAwesomeIcon icon={faPaperclip} />, icon: faPaperclip,
label: 'File', label: 'File',
active: false active: false
}, },
{ {
identifier: MarkType.RADIO, identifier: MarkType.RADIO,
icon: <FontAwesomeIcon icon={faCircleDot} />, icon: faCircleDot,
label: 'Radio', label: 'Radio',
active: false active: false
}, },
{ {
identifier: MarkType.SELECT, identifier: MarkType.SELECT,
icon: <FontAwesomeIcon icon={faSquareCaretDown} />, icon: faSquareCaretDown,
label: 'Select', label: 'Select',
active: false active: false
}, },
{ {
identifier: MarkType.CELLS, identifier: MarkType.CELLS,
icon: <FontAwesomeIcon icon={faTableCellsLarge} />, icon: faTableCellsLarge,
label: 'Cells', label: 'Cells',
active: false active: false
}, },
{ {
identifier: MarkType.STAMP, identifier: MarkType.STAMP,
icon: <FontAwesomeIcon icon={faStamp} />, icon: faStamp,
label: 'Stamp', label: 'Stamp',
active: false active: false
}, },
{ {
identifier: MarkType.PAYMENT, identifier: MarkType.PAYMENT,
icon: <FontAwesomeIcon icon={faCreditCard} />, icon: faCreditCard,
label: 'Payment', label: 'Payment',
active: false active: false
}, },
{ {
identifier: MarkType.PHONE, identifier: MarkType.PHONE,
icon: <FontAwesomeIcon icon={faPhone} />, icon: faPhone,
label: 'Phone', label: 'Phone',
active: false active: false
} }
@ -1020,20 +1020,16 @@ export const CreatePage = () => {
return ( return (
<div <div
key={index} key={index}
onClick={ {...(drawTool.active && {
drawTool.active onClick: () => handleToolSelect(drawTool)
? () => { })}
handleToolSelect(drawTool)
}
: () => null
}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''} className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
`} `}
> >
{drawTool.icon} <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
{drawTool.label} {drawTool.label}
{drawTool.active ? ( {drawTool.active ? (
<FontAwesomeIcon icon={faEllipsis} /> <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
) : ( ) : (
<span <span
style={{ style={{

View File

@ -4,6 +4,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
container-type: inline-size;
} }
.orderedFilesList { .orderedFilesList {
@ -130,26 +132,36 @@
.toolbox { .toolbox {
display: grid; display: grid;
grid-template-columns: 1fr;
@container (min-width: 204px) {
grid-template-columns: 1fr 1fr;
}
@container (min-width: 309px) {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
}
gap: 15px; gap: 15px;
max-height: 450px; max-height: 450px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
container-type: inline-size;
} }
.toolItem { .toolItem {
width: 90px;
height: 90px;
transition: ease 0.2s; transition: ease 0.2s;
display: inline-flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
border-radius: 4px; border-radius: 4px;
padding: 10px 5px 5px 5px; padding: 10px 5px 5px 5px;
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
@ -162,7 +174,7 @@
color: white; color: white;
} }
&:not(.selected) { &:not(.selected, .comingSoon) {
&:hover { &:hover {
background: $primary-light; background: $primary-light;
color: white; color: white;

View File

@ -1,3 +1,4 @@
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { MarkRect } from './mark' import { MarkRect } from './mark'
export interface MouseState { export interface MouseState {
@ -27,7 +28,7 @@ export interface DrawnField extends MarkRect {
export interface DrawTool { export interface DrawTool {
identifier: MarkType identifier: MarkType
label: string label: string
icon: JSX.Element icon: IconDefinition
defaultValue?: string defaultValue?: string
selected?: boolean selected?: boolean
active?: boolean active?: boolean