new release #190
@ -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={{
|
||||||
|
@ -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 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;
|
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;
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user