sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 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
s commented 2024-09-05 10:03:55 +00:00
Outdated
Review
Copy Link

Convert this inline style to css class

Convert this inline style to css class
👍 1
enes commented 2024-09-05 11:25:47 +00:00
Outdated
Review
Copy Link

Updated, moved all inline styles to the module scss with some higher specificity to override default styles.

Updated, moved all inline styles to the module scss with some higher specificity to override default styles.
}} }}
> >
<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> </>
) )
} }