sigit/sigit.io
6
2
Fork 0
Code Issues 41 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

fix: #201, #145, #205 and additional fixes #206

Open
enes wants to merge 13 commits from 201-toolbox-update into staging
pull from: 201-toolbox-update
merge into: sigit:staging
Conversation 0 Commits 13 Files Changed 10 +126 -105
3 changed files with 126 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f81f2b0523 - Show all commits

51
src/pages/create/index.tsx
View File

@ -108,7 +108,6 @@ export const CreatePage = () => {
const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
const [selectedTool, setSelectedTool] = useState<DrawTool>()
const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)
/**
* Changes the drawing tool
@ -833,28 +832,36 @@ export const CreatePage = () => {
</div>
<div className={`${styles.paperGroup} ${styles.toolbox}`}>
{toolbox.map((drawTool: DrawTool, index: number) => {
return (
<div
key={index}
{...(drawTool.active && {
onClick: () => handleToolSelect(drawTool)
})}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
{DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
(drawTool: DrawTool, index: number) => {
return (
<div
key={index}
{...(!drawTool.isComingSoon && {
onClick: () => handleToolSelect(drawTool)
})}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
`}
>
<FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
{drawTool.label}
{drawTool.active ? (
<FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
) : (
<span className={styles.comingSoonPlaceholder}>
Coming soon
</span>
)}
</div>
)
})}
>
<FontAwesomeIcon
fontSize={'15px'}
icon={drawTool.icon}
/>
{drawTool.label}
{!drawTool.isComingSoon ? (
<FontAwesomeIcon
fontSize={'15px'}
icon={faEllipsis}
/>
) : (
<span className={styles.comingSoonPlaceholder}>
Coming soon
</span>
)}
</div>
)
}
)}
</div>
<Button onClick={handleCreate} variant="contained">

5
src/types/drawing.ts
View File

@ -31,7 +31,10 @@ export interface DrawTool {
icon: IconDefinition
defaultValue?: string
selected?: boolean
active?: boolean
/** show or hide the toolbox item */
isHidden?: boolean
/** show or hide "coming soon" message on the toolbox item */
isComingSoon?: boolean
}
export enum MarkType {

175
src/utils/mark.ts
View File

@ -3,14 +3,26 @@ import { hexToNpub } from './nostr.ts'
import { Meta, SignedEventContent } from '../types'
import { Event } from 'nostr-tools'
import { EMPTY } from './const.ts'
import { MarkType } from '../types/drawing.ts'
import { DrawTool, MarkType } from '../types/drawing.ts'
import {
faT,
faSignature,
faBriefcase,
faIdCard,
faClock,
fa1
fa1,
faCalendarDays,
faCheckDouble,
faCircleDot,
faCreditCard,
faHeading,
faImage,
faPaperclip,
faPhone,
faSquareCaretDown,
faSquareCheck,
faStamp,
faTableCellsLarge
} from '@fortawesome/free-solid-svg-icons'
/**
@ -140,115 +152,114 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
}
export const DEFAULT_TOOLBOX = [
export const DEFAULT_TOOLBOX: DrawTool[] = [
{
identifier: MarkType.FULLNAME,
icon: faIdCard,
label: 'Full Name',
active: false
isComingSoon: true
},
{
identifier: MarkType.JOBTITLE,
icon: faBriefcase,
label: 'Job Title',
active: false
isComingSoon: true
},
{
identifier: MarkType.SIGNATURE,
icon: faSignature,
label: 'Signature',
active: false
isComingSoon: true
},
{
identifier: MarkType.DATETIME,
icon: faClock,
label: 'Date Time',
active: false
isComingSoon: true
},
{
eugene commented 2024-09-18 09:47:04 +00:00
Outdated
Review
Copy Link

Can we rely on the active flag rather than commenting out?

Can we rely on the `active` flag rather than commenting out?
enes commented 2024-09-18 09:54:12 +00:00
Outdated
Review
Copy Link

The active flag is for coming soon currently, and instead of adding a new flag to differentiate between coming soon and visually hidden, I opted to comment out.

The active flag is for `coming soon` currently, and instead of adding a new flag to differentiate between coming soon and visually hidden, I opted to comment out.
eugene commented 2024-09-19 10:32:09 +00:00
Outdated
Review
Copy Link

Can you please add a comment to capture the difference in the codebase?

Can you please add a comment to capture the difference in the codebase?
enes commented 2024-09-19 11:18:05 +00:00
Outdated
Review
Copy Link

Okay, made it clearer with new property names, isHidden and isComingSoon so there is no confusion as with active (also removed comments and used isHidden instead).

Okay, made it clearer with new property names, `isHidden` and `isComingSoon` so there is no confusion as with `active` (also removed comments and used `isHidden` instead).
identifier: MarkType.TEXT,
icon: faT,
label: 'Text',
active: true
label: 'Text'
},
{
identifier: MarkType.NUMBER,
icon: fa1,
label: 'Number',
active: false
isComingSoon: true
},
{
identifier: MarkType.INITIALS,
icon: faHeading,
label: 'Initials',
isHidden: true
},
{
identifier: MarkType.DATE,
icon: faCalendarDays,
label: 'Date',
isHidden: true
},
{
identifier: MarkType.IMAGES,
icon: faImage,
label: 'Images',
isHidden: true
},
{
identifier: MarkType.CHECKBOX,
icon: faSquareCheck,
label: 'Checkbox',
isHidden: true
},
{
identifier: MarkType.MULTIPLE,
icon: faCheckDouble,
label: 'Multiple',
isHidden: true
},
{
identifier: MarkType.FILE,
icon: faPaperclip,
label: 'File',
isHidden: true
},
{
identifier: MarkType.RADIO,
icon: faCircleDot,
label: 'Radio',
isHidden: true
},
{
identifier: MarkType.SELECT,
icon: faSquareCaretDown,
label: 'Select',
isHidden: true
},
{
identifier: MarkType.CELLS,
icon: faTableCellsLarge,
label: 'Cells',
isHidden: true
},
{
identifier: MarkType.STAMP,
icon: faStamp,
label: 'Stamp',
isHidden: true
},
{
identifier: MarkType.PAYMENT,
icon: faCreditCard,
label: 'Payment',
isHidden: true
},
{
identifier: MarkType.PHONE,
icon: faPhone,
label: 'Phone',
isHidden: true
}
// {
// identifier: MarkType.INITIALS,
// icon: faHeading,
// label: 'Initials',
// active: false
// },
// {
// identifier: MarkType.DATE,
// icon: faCalendarDays,
// label: 'Date',
// active: false
// },
// {
// identifier: MarkType.IMAGES,
// icon: faImage,
// label: 'Images',
// active: false
// },
// {
// identifier: MarkType.CHECKBOX,
// icon: faSquareCheck,
// label: 'Checkbox',
// active: false
// },
// {
// identifier: MarkType.MULTIPLE,
// icon: faCheckDouble,
// label: 'Multiple',
// active: false
// },
// {
// identifier: MarkType.FILE,
// icon: faPaperclip,
// label: 'File',
// active: false
// },
// {
// identifier: MarkType.RADIO,
// icon: faCircleDot,
// label: 'Radio',
// active: false
// },
// {
// identifier: MarkType.SELECT,
// icon: faSquareCaretDown,
// label: 'Select',
// active: false
// },
// {
// identifier: MarkType.CELLS,
// icon: faTableCellsLarge,
// label: 'Cells',
// active: false
// },
// {
// identifier: MarkType.STAMP,
// icon: faStamp,
// label: 'Stamp',
// active: false
// },
// {
// identifier: MarkType.PAYMENT,
// icon: faCreditCard,
// label: 'Payment',
// active: false
// },
// {
// identifier: MarkType.PHONE,
// icon: faPhone,
// label: 'Phone',
// active: false
// }
]
export const getToolboxLabelByMarkType = (markType: MarkType) => {