refactor(create-page): users design update
This commit is contained in:
parent
b4d121b503
commit
98b9c6e535
@ -17,11 +17,10 @@
|
||||
|
||||
ul {
|
||||
list-style-type: none; /* Removes bullet points */
|
||||
margin: 0; /* Removes default margin */
|
||||
padding: 0; /* Removes default padding */
|
||||
margin: 0; /* Removes default margin */
|
||||
padding: 0; /* Removes default padding */
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -44,7 +43,7 @@ ul {
|
||||
}
|
||||
|
||||
.files::-webkit-scrollbar-track {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.files::-webkit-scrollbar-thumb {
|
||||
@ -64,12 +63,12 @@ ul {
|
||||
background: #ffffff;
|
||||
padding: 5px 10px;
|
||||
align-items: center;
|
||||
color: rgba(0,0,0,0.5);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
min-height: 45px;
|
||||
|
||||
&.active {
|
||||
background: #4c82a3;
|
||||
@ -88,6 +87,7 @@ ul {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
}
|
||||
|
||||
.fileNumber {
|
||||
@ -97,4 +97,4 @@ ul {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,4 +10,8 @@
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { DragHandle } from '@mui/icons-material'
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
ListItem,
|
||||
FormHelperText,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
MenuItem,
|
||||
@ -60,6 +58,7 @@ import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import {
|
||||
faEye,
|
||||
faGripLines,
|
||||
faPen,
|
||||
faPlus,
|
||||
faTrash,
|
||||
@ -89,6 +88,12 @@ export const CreatePage = () => {
|
||||
}
|
||||
|
||||
const [userInput, setUserInput] = useState('')
|
||||
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
||||
event.preventDefault()
|
||||
handleAddUser()
|
||||
}
|
||||
}
|
||||
const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
|
||||
const [error, setError] = useState<string>()
|
||||
|
||||
@ -783,7 +788,7 @@ export const CreatePage = () => {
|
||||
placeholder="User (nip05 / npub)"
|
||||
value={userInput}
|
||||
onChange={(e) => setUserInput(e.target.value)}
|
||||
helperText={error}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
error={!!error}
|
||||
fullWidth
|
||||
sx={{
|
||||
@ -804,6 +809,7 @@ export const CreatePage = () => {
|
||||
IconComponent={() => null}
|
||||
renderValue={(value) => (
|
||||
<FontAwesomeIcon
|
||||
color="var(--primary-main)"
|
||||
icon={value === UserRole.signer ? faPen : faEye}
|
||||
/>
|
||||
)}
|
||||
@ -818,20 +824,16 @@ export const CreatePage = () => {
|
||||
}}
|
||||
>
|
||||
<MenuItem value={UserRole.signer}>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<FontAwesomeIcon icon={faPen} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{UserRole.signer}</ListItemText>
|
||||
</ListItem>
|
||||
<ListItemIcon>
|
||||
<FontAwesomeIcon icon={faPen} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{UserRole.signer}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem value={UserRole.viewer}>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{UserRole.viewer}</ListItemText>
|
||||
</ListItem>
|
||||
<MenuItem value={UserRole.viewer} sx={{}}>
|
||||
<ListItemIcon>
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{UserRole.viewer}</ListItemText>
|
||||
</MenuItem>
|
||||
</Select>
|
||||
<Button
|
||||
@ -863,6 +865,10 @@ export const CreatePage = () => {
|
||||
<Button onClick={handleCreate} variant="contained">
|
||||
Publish
|
||||
</Button>
|
||||
|
||||
{!!error && (
|
||||
<FormHelperText error={!!error}>{error}</FormHelperText>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@ -934,6 +940,8 @@ const DisplayUser = ({
|
||||
IconComponent={() => null}
|
||||
renderValue={(value) => (
|
||||
<FontAwesomeIcon
|
||||
fontSize={'14px'}
|
||||
color="var(--primary-main)"
|
||||
icon={value === UserRole.signer ? faPen : faEye}
|
||||
/>
|
||||
)}
|
||||
@ -942,9 +950,12 @@ const DisplayUser = ({
|
||||
}
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
minWidth: '44px',
|
||||
minWidth: '34px',
|
||||
maxWidth: '34px',
|
||||
minHeight: '34px',
|
||||
maxHeight: '34px',
|
||||
'& .MuiInputBase-input': {
|
||||
padding: '7px 14px!important',
|
||||
padding: '10px !important',
|
||||
textOverflow: 'unset!important'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
@ -956,9 +967,20 @@ const DisplayUser = ({
|
||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
||||
</Select>
|
||||
<Tooltip title="Remove User" arrow>
|
||||
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</IconButton>
|
||||
<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>
|
||||
)
|
||||
@ -1073,7 +1095,7 @@ const SignerRow = ({
|
||||
data-handler-id={handlerId}
|
||||
ref={ref}
|
||||
>
|
||||
<DragHandle />
|
||||
<FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
|
||||
<div className={styles.avatar}>
|
||||
<UserAvatar
|
||||
pubkey={user.pubkey}
|
||||
@ -1091,16 +1113,23 @@ const SignerRow = ({
|
||||
variant="outlined"
|
||||
IconComponent={() => null}
|
||||
renderValue={(value) => (
|
||||
<FontAwesomeIcon icon={value === UserRole.signer ? faPen : faEye} />
|
||||
<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: '44px',
|
||||
minWidth: '34px',
|
||||
maxWidth: '34px',
|
||||
minHeight: '34px',
|
||||
maxHeight: '34px',
|
||||
'& .MuiInputBase-input': {
|
||||
padding: '7px 14px!important',
|
||||
padding: '10px !important',
|
||||
textOverflow: 'unset!important'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
@ -1112,9 +1141,20 @@ const SignerRow = ({
|
||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
||||
</Select>
|
||||
<Tooltip title="Remove User" arrow>
|
||||
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</IconButton>
|
||||
<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>
|
||||
)
|
||||
|
||||
@ -104,9 +104,16 @@
|
||||
|
||||
.avatar {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 34px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
// Override the default avatar size
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user