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

View File

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

View File

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