refactor(create-page): users design update

This commit is contained in:
enes 2024-08-19 17:12:43 +02:00
parent c3d79a23bf
commit ae8b8d10d5
4 changed files with 88 additions and 37 deletions

View File

@ -17,11 +17,10 @@
ul { ul {
list-style-type: none; /* Removes bullet points */ list-style-type: none; /* Removes bullet points */
margin: 0; /* Removes default margin */ margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */ padding: 0; /* Removes default padding */
} }
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -44,7 +43,7 @@ ul {
} }
.files::-webkit-scrollbar-track { .files::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15); background-color: rgba(0, 0, 0, 0.15);
} }
.files::-webkit-scrollbar-thumb { .files::-webkit-scrollbar-thumb {
@ -64,12 +63,12 @@ ul {
background: #ffffff; background: #ffffff;
padding: 5px 10px; padding: 5px 10px;
align-items: center; align-items: center;
color: rgba(0,0,0,0.5); color: rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
min-height: 45px;
&.active { &.active {
background: #4c82a3; background: #4c82a3;
@ -88,6 +87,7 @@ ul {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
line-clamp: 1;
} }
.fileNumber { .fileNumber {

View File

@ -10,4 +10,8 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: var(--text-color); color: var(--text-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }

View File

@ -1,8 +1,6 @@
import { DragHandle } from '@mui/icons-material'
import { import {
Button, Button,
IconButton, FormHelperText,
ListItem,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
MenuItem, MenuItem,
@ -60,6 +58,7 @@ import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { import {
faEye, faEye,
faGripLines,
faPen, faPen,
faPlus, faPlus,
faTrash, faTrash,
@ -89,6 +88,12 @@ export const CreatePage = () => {
} }
const [userInput, setUserInput] = useState('') 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 [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
const [error, setError] = useState<string>() const [error, setError] = useState<string>()
@ -783,7 +788,7 @@ export const CreatePage = () => {
placeholder="User (nip05 / npub)" placeholder="User (nip05 / npub)"
value={userInput} value={userInput}
onChange={(e) => setUserInput(e.target.value)} onChange={(e) => setUserInput(e.target.value)}
helperText={error} onKeyDown={handleInputKeyDown}
error={!!error} error={!!error}
fullWidth fullWidth
sx={{ sx={{
@ -804,6 +809,7 @@ export const CreatePage = () => {
IconComponent={() => null} IconComponent={() => null}
renderValue={(value) => ( renderValue={(value) => (
<FontAwesomeIcon <FontAwesomeIcon
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye} icon={value === UserRole.signer ? faPen : faEye}
/> />
)} )}
@ -818,20 +824,16 @@ export const CreatePage = () => {
}} }}
> >
<MenuItem value={UserRole.signer}> <MenuItem value={UserRole.signer}>
<ListItem> <ListItemIcon>
<ListItemIcon> <FontAwesomeIcon icon={faPen} />
<FontAwesomeIcon icon={faPen} /> </ListItemIcon>
</ListItemIcon> <ListItemText>{UserRole.signer}</ListItemText>
<ListItemText>{UserRole.signer}</ListItemText>
</ListItem>
</MenuItem> </MenuItem>
<MenuItem value={UserRole.viewer}> <MenuItem value={UserRole.viewer} sx={{}}>
<ListItem> <ListItemIcon>
<ListItemIcon> <FontAwesomeIcon icon={faEye} />
<FontAwesomeIcon icon={faEye} /> </ListItemIcon>
</ListItemIcon> <ListItemText>{UserRole.viewer}</ListItemText>
<ListItemText>{UserRole.viewer}</ListItemText>
</ListItem>
</MenuItem> </MenuItem>
</Select> </Select>
<Button <Button
@ -863,6 +865,10 @@ export const CreatePage = () => {
<Button onClick={handleCreate} variant="contained"> <Button onClick={handleCreate} variant="contained">
Publish Publish
</Button> </Button>
{!!error && (
<FormHelperText error={!!error}>{error}</FormHelperText>
)}
</div> </div>
} }
> >
@ -934,6 +940,8 @@ const DisplayUser = ({
IconComponent={() => null} IconComponent={() => null}
renderValue={(value) => ( renderValue={(value) => (
<FontAwesomeIcon <FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye} icon={value === UserRole.signer ? faPen : faEye}
/> />
)} )}
@ -942,9 +950,12 @@ const DisplayUser = ({
} }
sx={{ sx={{
fontSize: '16px', fontSize: '16px',
minWidth: '44px', minWidth: '34px',
maxWidth: '34px',
minHeight: '34px',
maxHeight: '34px',
'& .MuiInputBase-input': { '& .MuiInputBase-input': {
padding: '7px 14px!important', padding: '10px !important',
textOverflow: 'unset!important' textOverflow: 'unset!important'
}, },
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
@ -956,9 +967,20 @@ const DisplayUser = ({
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</Select> </Select>
<Tooltip title="Remove User" arrow> <Tooltip title="Remove User" arrow>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}> <Button
<FontAwesomeIcon icon={faTrash} /> onClick={() => handleRemoveUser(user.pubkey)}
</IconButton> sx={{
minWidth: '34px',
height: '34px',
padding: 0,
color: 'rgba(0, 0, 0, 0.35)',
'&:hover': {
color: 'white'
}
}}
>
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Button>
</Tooltip> </Tooltip>
</div> </div>
) )
@ -1073,7 +1095,7 @@ const SignerRow = ({
data-handler-id={handlerId} data-handler-id={handlerId}
ref={ref} ref={ref}
> >
<DragHandle /> <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
<div className={styles.avatar}> <div className={styles.avatar}>
<UserAvatar <UserAvatar
pubkey={user.pubkey} pubkey={user.pubkey}
@ -1091,16 +1113,23 @@ const SignerRow = ({
variant="outlined" variant="outlined"
IconComponent={() => null} IconComponent={() => null}
renderValue={(value) => ( renderValue={(value) => (
<FontAwesomeIcon icon={value === UserRole.signer ? faPen : faEye} /> <FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)} )}
onChange={(e) => onChange={(e) =>
handleUserRoleChange(e.target.value as UserRole, user.pubkey) handleUserRoleChange(e.target.value as UserRole, user.pubkey)
} }
sx={{ sx={{
fontSize: '16px', fontSize: '16px',
minWidth: '44px', minWidth: '34px',
maxWidth: '34px',
minHeight: '34px',
maxHeight: '34px',
'& .MuiInputBase-input': { '& .MuiInputBase-input': {
padding: '7px 14px!important', padding: '10px !important',
textOverflow: 'unset!important' textOverflow: 'unset!important'
}, },
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
@ -1112,9 +1141,20 @@ const SignerRow = ({
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</Select> </Select>
<Tooltip title="Remove User" arrow> <Tooltip title="Remove User" arrow>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}> <Button
<FontAwesomeIcon icon={faTrash} /> onClick={() => handleRemoveUser(user.pubkey)}
</IconButton> sx={{
minWidth: '34px',
height: '34px',
padding: 0,
color: 'rgba(0, 0, 0, 0.35)',
'&:hover': {
color: 'white'
}
}}
>
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Button>
</Tooltip> </Tooltip>
</div> </div>
) )

View File

@ -104,9 +104,16 @@
.avatar { .avatar {
flex-grow: 1; flex-grow: 1;
min-width: 0;
&:first-child { &:first-child {
margin-left: 34px; margin-left: 24px;
}
img {
// Override the default avatar size
width: 30px;
height: 30px;
} }
} }