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