sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

Counterparts section design update, touch dnd support, marks scrolling #182

Merged
enes merged 9 commits from 174-add-users-updates into staging 2024-09-06 10:22:56 +00:00
Conversation 0 Commits 9 Files Changed 8 +86 -158
1 changed files with 86 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fa7f0e2fc0 - Show all commits

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

@ -1,13 +1,4 @@
import { import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
Button,
FormHelperText,
ListItemIcon,
ListItemText,
MenuItem,
Select,
TextField,
Tooltip
} from '@mui/material'
import type { Identifier, XYCoord } from 'dnd-core' import type { Identifier, XYCoord } from 'dnd-core'
import saveAs from 'file-saver' import saveAs from 'file-saver'
import JSZip from 'jszip' import JSZip from 'jszip'
@ -932,9 +923,18 @@ export const CreatePage = () => {
} }
right={ right={
<div className={styles.flexWrap}> <div className={styles.flexWrap}>
<div className={`${styles.paperGroup} ${styles.users}`}>
<DisplayUser
metadata={metadata}
users={users}
handleUserRoleChange={handleUserRoleChange}
handleRemoveUser={handleRemoveUser}
moveSigner={moveSigner}
/>
</div>
<div className={styles.inputWrapper}> <div className={styles.inputWrapper}>
<TextField <TextField
placeholder="Add user" placeholder="Add counterpart"
value={userInput} value={userInput}
onChange={(e) => setUserInput(e.target.value)} onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleInputKeyDown} onKeyDown={handleInputKeyDown}
@ -950,42 +950,26 @@ export const CreatePage = () => {
} }
}} }}
/> />
<Select <Button
name="add-user-role" onClick={() =>
aria-label="role" setUserRole(
value={userRole} userRole === UserRole.signer
variant="filled" ? UserRole.viewer
// Hide arrow for dropdown : UserRole.signer
IconComponent={() => null} )
renderValue={(value) => (
<FontAwesomeIcon
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) => setUserRole(e.target.value as UserRole)}
sx={{
fontSize: '16px',
minWidth: '44px',
'& .MuiInputBase-input': {
padding: '7px 14px!important',
textOverflow: 'unset!important'
} }
variant="contained"
aria-label="Toggle User Role"
sx={{
minWidth: '44px',
padding: '11.5px 12px',
borderRadius: 0
}} }}
> >
<MenuItem value={UserRole.signer}> <FontAwesomeIcon
<ListItemIcon> icon={userRole === UserRole.signer ? faPen : faEye}
<FontAwesomeIcon icon={faPen} /> />
</ListItemIcon> </Button>
<ListItemText>{UserRole.signer}</ListItemText>
</MenuItem>
<MenuItem value={UserRole.viewer} sx={{}}>
<ListItemIcon>
<FontAwesomeIcon icon={faEye} />
</ListItemIcon>
<ListItemText>{UserRole.viewer}</ListItemText>
</MenuItem>
</Select>
<Button <Button
disabled={!userInput} disabled={!userInput}
onClick={handleAddUser} onClick={handleAddUser}
@ -1001,17 +985,6 @@ export const CreatePage = () => {
<FontAwesomeIcon icon={faPlus} /> <FontAwesomeIcon icon={faPlus} />
</Button> </Button>
</div> </div>
<div className={`${styles.paperGroup} ${styles.users}`}>
<DisplayUser
metadata={metadata}
users={users}
handleUserRoleChange={handleUserRoleChange}
handleRemoveUser={handleRemoveUser}
moveSigner={moveSigner}
/>
</div>
<Button onClick={handleCreate} variant="contained"> <Button onClick={handleCreate} variant="contained">
Publish Publish
</Button> </Button>
@ -1088,8 +1061,8 @@ const DisplayUser = ({
{users {users
.filter((user) => user.role === UserRole.signer) .filter((user) => user.role === UserRole.signer)
.map((user, index) => ( .map((user, index) => (
<SignerRow <SignerCounterpart
key={`signer-${index}`} key={`signer-${user.pubkey}`}
userMeta={metadata[user.pubkey]} userMeta={metadata[user.pubkey]}
user={user} user={user}
index={index} index={index}
@ -1101,72 +1074,16 @@ const DisplayUser = ({
</DndProvider> </DndProvider>
{users {users
.filter((user) => user.role === UserRole.viewer) .filter((user) => user.role === UserRole.viewer)
.map((user, index) => { .map((user) => {
const userMeta = metadata[user.pubkey]
return ( return (
<div className={styles.user} key={index}> <div className={styles.user} key={`viewer-${user.pubkey}`}>
<div className={styles.avatar}> <Counterpart
<UserAvatar userMeta={metadata[user.pubkey]}
pubkey={user.pubkey} user={user}
name={ handleUserRoleChange={handleUserRoleChange}
userMeta?.display_name || handleRemoveUser={handleRemoveUser}
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/> />
</div> </div>
<Select
name={`change-user-role-${user.pubkey}`}
aria-label="role"
value={user.role}
variant="outlined"
IconComponent={() => null}
renderValue={(value) => (
<FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) =>
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
}
sx={{
fontSize: '16px',
minWidth: '34px',
maxWidth: '34px',
minHeight: '34px',
maxHeight: '34px',
'& .MuiInputBase-input': {
padding: '10px !important',
textOverflow: 'unset!important'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
>
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</Select>
<Tooltip title="Remove User" arrow>
<Button
onClick={() => handleRemoveUser(user.pubkey)}
sx={{
minWidth: '34px',
height: '34px',
padding: 0,
color: 'rgba(0, 0, 0, 0.35)',
'&:hover': {
color: 'white'
}
}}
>
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Button>
</Tooltip>
</div>
) )
})} })}
</> </>
@ -1179,23 +1096,26 @@ interface DragItem {
type: string type: string
} }
type SignerRowProps = { type CounterpartProps = {
userMeta: ProfileMetadata userMeta: ProfileMetadata
user: User user: User
index: number
moveSigner: (dragIndex: number, hoverIndex: number) => void
handleUserRoleChange: (role: UserRole, pubkey: string) => void handleUserRoleChange: (role: UserRole, pubkey: string) => void
handleRemoveUser: (pubkey: string) => void handleRemoveUser: (pubkey: string) => void
} }
const SignerRow = ({ type SignerCounterpartProps = CounterpartProps & {
index: number
moveSigner: (dragIndex: number, hoverIndex: number) => void
}
const SignerCounterpart = ({
userMeta, userMeta,
user, user,
index, index,
moveSigner, moveSigner,
handleUserRoleChange, handleUserRoleChange,
handleRemoveUser handleRemoveUser
}: SignerRowProps) => { }: SignerCounterpartProps) => {
const ref = useRef<HTMLTableRowElement>(null) const ref = useRef<HTMLTableRowElement>(null)
const [{ handlerId }, drop] = useDrop< const [{ handlerId }, drop] = useDrop<
@ -1280,6 +1200,24 @@ const SignerRow = ({
ref={ref} ref={ref}
> >
<FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} /> <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
<Counterpart
user={user}
userMeta={userMeta}
handleRemoveUser={handleRemoveUser}
handleUserRoleChange={handleUserRoleChange}
/>
</div>
)
}
const Counterpart = ({
userMeta,
user,
handleUserRoleChange,
handleRemoveUser
}: CounterpartProps) => {
return (
<>
<div className={styles.avatar}> <div className={styles.avatar}>
<UserAvatar <UserAvatar
pubkey={user.pubkey} pubkey={user.pubkey}
@ -1291,41 +1229,31 @@ const SignerRow = ({
image={userMeta?.picture} image={userMeta?.picture}
/> />
</div> </div>
<Select <Tooltip title="Toggle User Role" arrow disableInteractive>
name={`change-user-role-${user.pubkey}`} <Button
aria-label="role" onClick={() =>
value={user.role} handleUserRoleChange(
variant="outlined" user.role === UserRole.signer ? UserRole.viewer : UserRole.signer,
IconComponent={() => null} user.pubkey
renderValue={(value) => ( )
<FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) =>
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
} }
sx={{ sx={{
fontSize: '16px',
minWidth: '34px', minWidth: '34px',
maxWidth: '34px', height: '34px',
minHeight: '34px', padding: 0,
maxHeight: '34px', color: 'var(--primary-main)',
'& .MuiInputBase-input': { '&:hover': {
padding: '10px !important', color: 'white'
textOverflow: 'unset!important'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
} }
}} }}
> >
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem> <FontAwesomeIcon
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> fontSize={'14px'}
</Select> icon={user.role === UserRole.signer ? faPen : faEye}
<Tooltip title="Remove User" arrow> />
</Button>
</Tooltip>
<Tooltip title="Remove User" arrow disableInteractive>
<Button <Button
onClick={() => handleRemoveUser(user.pubkey)} onClick={() => handleRemoveUser(user.pubkey)}
sx={{ sx={{
@ -1341,6 +1269,6 @@ const SignerRow = ({
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} /> <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Button> </Button>
</Tooltip> </Tooltip>
</div> </>
) )
} }