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

5
src/types/drawing.ts
View File

@ -31,7 +31,10 @@ export interface DrawTool {
icon: IconDefinition icon: IconDefinition
defaultValue?: string defaultValue?: string
selected?: boolean 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 { 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 { Meta, SignedEventContent } from '../types'
import { Event } from 'nostr-tools' import { Event } from 'nostr-tools'
import { EMPTY } from './const.ts' import { EMPTY } from './const.ts'
import { MarkType } from '../types/drawing.ts' import { DrawTool, MarkType } from '../types/drawing.ts'
import { import {
faT, faT,
faSignature, faSignature,
faBriefcase, faBriefcase,
faIdCard, faIdCard,
faClock, faClock,
fa1 fa1,
faCalendarDays,
faCheckDouble,
faCircleDot,
faCreditCard,
faHeading,
faImage,
faPaperclip,
faPhone,
faSquareCaretDown,
faSquareCheck,
faStamp,
faTableCellsLarge
} from '@fortawesome/free-solid-svg-icons' } 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)) return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
} }
export const DEFAULT_TOOLBOX = [ export const DEFAULT_TOOLBOX: DrawTool[] = [
{ {
identifier: MarkType.FULLNAME, identifier: MarkType.FULLNAME,
icon: faIdCard, icon: faIdCard,
label: 'Full Name', label: 'Full Name',
active: false isComingSoon: true
}, },
{ {
identifier: MarkType.JOBTITLE, identifier: MarkType.JOBTITLE,
icon: faBriefcase, icon: faBriefcase,
label: 'Job Title', label: 'Job Title',
active: false isComingSoon: true
}, },
{ {
identifier: MarkType.SIGNATURE, identifier: MarkType.SIGNATURE,
icon: faSignature, icon: faSignature,
label: 'Signature', label: 'Signature',
active: false isComingSoon: true
}, },
{ {
identifier: MarkType.DATETIME, identifier: MarkType.DATETIME,
icon: faClock, icon: faClock,
label: 'Date Time', 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, identifier: MarkType.TEXT,
icon: faT, icon: faT,
label: 'Text', label: 'Text'
active: true
}, },
{ {
identifier: MarkType.NUMBER, identifier: MarkType.NUMBER,
icon: fa1, icon: fa1,
label: 'Number', 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) => { export const getToolboxLabelByMarkType = (markType: MarkType) => {