feat(create-page): new create page design #153
@ -535,12 +535,17 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
<div className={styles.view}>
|
<div className={styles.view}>
|
||||||
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<div key={pdfFile.file.name + pdfFileIndex}>
|
<>
|
||||||
<div className={styles.fileWrapper}>
|
<div
|
||||||
|
key={pdfFile.file.name}
|
||||||
|
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
|
||||||
|
id={`file-${pdfFile.file.name}`}
|
||||||
|
>
|
||||||
{getPdfPages(pdfFile, pdfFileIndex)}
|
{getPdfPages(pdfFile, pdfFileIndex)}
|
||||||
</div>
|
</div>
|
||||||
{pdfFileIndex < pdfFiles.length - 1 && (
|
{pdfFileIndex < pdfFiles.length - 1 && (
|
||||||
<Divider
|
<Divider
|
||||||
|
key={pdfFile.file.name + `-divider`}
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: 'rgba(0,0,0,0.15)'
|
color: 'rgba(0,0,0,0.15)'
|
||||||
@ -549,7 +554,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
File Separator
|
File Separator
|
||||||
</Divider>
|
</Divider>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import '../../styles/sizes.scss';
|
||||||
|
|
||||||
.pdfFieldItem {
|
.pdfFieldItem {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -135,6 +137,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
position: relative;
|
||||||
|
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
|
@ -10,6 +10,9 @@
|
|||||||
|
|
||||||
.sidesWrap {
|
.sidesWrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
// HACK: Stop grid column from growing
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sides {
|
.sides {
|
||||||
|
@ -1,26 +1,18 @@
|
|||||||
import { Clear, DragHandle } from '@mui/icons-material'
|
import { DragHandle } from '@mui/icons-material'
|
||||||
import {
|
import {
|
||||||
Box,
|
|
||||||
Button,
|
Button,
|
||||||
FormControl,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
InputLabel,
|
ListItem,
|
||||||
|
ListItemIcon,
|
||||||
|
ListItemText,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Select,
|
Select,
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableContainer,
|
|
||||||
TableHead,
|
|
||||||
TableRow,
|
|
||||||
TextField,
|
TextField,
|
||||||
Tooltip,
|
Tooltip
|
||||||
Typography
|
|
||||||
} from '@mui/material'
|
} 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'
|
||||||
import { MuiFileInput } from 'mui-file-input'
|
|
||||||
import { Event, kinds } from 'nostr-tools'
|
import { Event, kinds } from 'nostr-tools'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import { DndProvider, useDrag, useDrop } from 'react-dnd'
|
import { DndProvider, useDrag, useDrop } from 'react-dnd'
|
||||||
@ -64,6 +56,14 @@ import { PdfFile } from '../../types/drawing'
|
|||||||
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
||||||
import { Mark } from '../../types/mark.ts'
|
import { Mark } from '../../types/mark.ts'
|
||||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import {
|
||||||
|
faEye,
|
||||||
|
faPen,
|
||||||
|
faPlus,
|
||||||
|
faTrash,
|
||||||
|
faUpload
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
export const CreatePage = () => {
|
export const CreatePage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
@ -76,7 +76,14 @@ export const CreatePage = () => {
|
|||||||
const [authUrl, setAuthUrl] = useState<string>()
|
const [authUrl, setAuthUrl] = useState<string>()
|
||||||
|
|
||||||
const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`)
|
const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`)
|
||||||
|
|
||||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([])
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([])
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||||
|
const handleUploadButtonClick = () => {
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const [userInput, setUserInput] = useState('')
|
const [userInput, setUserInput] = useState('')
|
||||||
const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
|
const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
|
||||||
@ -268,19 +275,22 @@ export const CreatePage = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSelectFiles = (files: File[]) => {
|
const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setSelectedFiles((prev) => {
|
if (event.target.files) {
|
||||||
const prevFileNames = prev.map((file) => file.name)
|
setSelectedFiles(Array.from(event.target.files))
|
||||||
|
}
|
||||||
const newFiles = files.filter(
|
|
||||||
(file) => !prevFileNames.includes(file.name)
|
|
||||||
)
|
|
||||||
|
|
||||||
return [...prev, ...newFiles]
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemoveFile = (fileToRemove: File) => {
|
const handleFileClick = (name: string) => {
|
||||||
|
document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemoveFile = (
|
||||||
|
event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
|
||||||
|
fileToRemove: File
|
||||||
|
) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
|
||||||
setSelectedFiles((prevFiles) =>
|
setSelectedFiles((prevFiles) =>
|
||||||
prevFiles.filter((file) => file.name !== fileToRemove.name)
|
prevFiles.filter((file) => file.name !== fileToRemove.name)
|
||||||
)
|
)
|
||||||
@ -705,71 +715,134 @@ export const CreatePage = () => {
|
|||||||
<StickySideColumns
|
<StickySideColumns
|
||||||
left={
|
left={
|
||||||
<div className={styles.flexWrap}>
|
<div className={styles.flexWrap}>
|
||||||
|
<div className={styles.inputWrapper}>
|
||||||
<TextField
|
<TextField
|
||||||
label="Title"
|
placeholder="Title"
|
||||||
|
size="small"
|
||||||
|
type="text"
|
||||||
value={title}
|
value={title}
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
variant="outlined"
|
sx={{
|
||||||
|
width: '100%',
|
||||||
|
fontSize: '16px',
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
padding: '7px 14px'
|
||||||
|
},
|
||||||
|
'& .MuiOutlinedInput-notchedOutline': {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<ul className={styles.paperGroup}>
|
</div>
|
||||||
|
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
||||||
{selectedFiles.length > 0 &&
|
{selectedFiles.length > 0 &&
|
||||||
selectedFiles.map((file, index) => (
|
selectedFiles.map((file, index) => (
|
||||||
<li key={index}>
|
<Button
|
||||||
<Typography component="label">{file.name}</Typography>
|
key={index}
|
||||||
<IconButton onClick={() => handleRemoveFile(file)}>
|
className={styles.file}
|
||||||
<Clear style={{ color: 'red' }} />{' '}
|
onClick={() => handleFileClick('file-' + file.name)}
|
||||||
</IconButton>
|
>
|
||||||
</li>
|
<>
|
||||||
|
<span>{file.name}</span>
|
||||||
|
<Button
|
||||||
|
variant="text"
|
||||||
|
onClick={(event) => handleRemoveFile(event, file)}
|
||||||
|
sx={{
|
||||||
|
minWidth: '44px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
</Button>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ol>
|
||||||
<MuiFileInput
|
<Button variant="contained" onClick={handleUploadButtonClick}>
|
||||||
fullWidth
|
<FontAwesomeIcon icon={faUpload} />
|
||||||
multiple
|
Upload new files
|
||||||
placeholder="Choose Files"
|
<input
|
||||||
value={selectedFiles}
|
ref={fileInputRef}
|
||||||
onChange={(value) => handleSelectFiles(value)}
|
hidden={true}
|
||||||
|
multiple={true}
|
||||||
|
type="file"
|
||||||
|
onChange={handleSelectFiles}
|
||||||
/>
|
/>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
right={
|
right={
|
||||||
<div className={styles.flexWrap}>
|
<div className={styles.flexWrap}>
|
||||||
<Typography component="label" variant="h6">
|
<div className={styles.inputWrapper}>
|
||||||
Add Counterparts
|
|
||||||
</Typography>
|
|
||||||
<Box className={styles.paperGroup}>
|
|
||||||
<TextField
|
<TextField
|
||||||
label="nip05 / npub"
|
placeholder="User (nip05 / npub)"
|
||||||
value={userInput}
|
value={userInput}
|
||||||
onChange={(e) => setUserInput(e.target.value)}
|
onChange={(e) => setUserInput(e.target.value)}
|
||||||
helperText={error}
|
helperText={error}
|
||||||
error={!!error}
|
error={!!error}
|
||||||
|
fullWidth
|
||||||
|
sx={{
|
||||||
|
fontSize: '16px',
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
padding: '7px 14px'
|
||||||
|
},
|
||||||
|
'& .MuiOutlinedInput-notchedOutline': {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<FormControl fullWidth>
|
|
||||||
<InputLabel id="select-role-label">Role</InputLabel>
|
|
||||||
<Select
|
<Select
|
||||||
labelId="select-role-label"
|
aria-label="role"
|
||||||
id="demo-simple-select"
|
|
||||||
value={userRole}
|
value={userRole}
|
||||||
label="Role"
|
variant="filled"
|
||||||
|
// Hide arrow for dropdown
|
||||||
|
IconComponent={() => null}
|
||||||
|
renderValue={(value) => (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={value === UserRole.signer ? faPen : faEye}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
onChange={(e) => setUserRole(e.target.value as UserRole)}
|
onChange={(e) => setUserRole(e.target.value as UserRole)}
|
||||||
|
sx={{
|
||||||
|
fontSize: '16px',
|
||||||
|
minWidth: '44px',
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
padding: '7px 14px!important',
|
||||||
|
textOverflow: 'unset!important'
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<MenuItem value={UserRole.signer}>
|
<MenuItem value={UserRole.signer}>
|
||||||
{UserRole.signer}
|
<ListItem>
|
||||||
|
<ListItemIcon>
|
||||||
|
<FontAwesomeIcon icon={faPen} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>{UserRole.signer}</ListItemText>
|
||||||
|
</ListItem>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem value={UserRole.viewer}>
|
<MenuItem value={UserRole.viewer}>
|
||||||
{UserRole.viewer}
|
<ListItem>
|
||||||
|
<ListItemIcon>
|
||||||
|
<FontAwesomeIcon icon={faEye} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>{UserRole.viewer}</ListItemText>
|
||||||
|
</ListItem>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
disabled={!userInput}
|
disabled={!userInput}
|
||||||
onClick={handleAddUser}
|
onClick={handleAddUser}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
|
aria-label="Add"
|
||||||
|
sx={{
|
||||||
|
minWidth: '44px',
|
||||||
|
padding: '11.5px 12px',
|
||||||
|
borderTopLeftRadius: 0,
|
||||||
|
borderBottomLeftRadius: 0
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Add
|
<FontAwesomeIcon icon={faPlus} />
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</div>
|
||||||
|
|
||||||
<div className={styles.paperGroup}>
|
<div className={styles.paperGroup}>
|
||||||
<DisplayUser
|
<DisplayUser
|
||||||
@ -779,12 +852,12 @@ export const CreatePage = () => {
|
|||||||
handleRemoveUser={handleRemoveUser}
|
handleRemoveUser={handleRemoveUser}
|
||||||
moveSigner={moveSigner}
|
moveSigner={moveSigner}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Button onClick={handleCreate} variant="contained">
|
<Button onClick={handleCreate} variant="contained">
|
||||||
Create
|
Publish
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<DrawPDFFields
|
<DrawPDFFields
|
||||||
@ -815,16 +888,7 @@ const DisplayUser = ({
|
|||||||
moveSigner
|
moveSigner
|
||||||
}: DisplayUsersProps) => {
|
}: DisplayUsersProps) => {
|
||||||
return (
|
return (
|
||||||
<TableContainer>
|
<>
|
||||||
<Table>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell className={styles.tableHeaderCell}>User</TableCell>
|
|
||||||
<TableCell className={styles.tableHeaderCell}>Role</TableCell>
|
|
||||||
<TableCell>Action</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
<DndProvider backend={HTML5Backend}>
|
<DndProvider backend={HTML5Backend}>
|
||||||
{users
|
{users
|
||||||
.filter((user) => user.role === UserRole.signer)
|
.filter((user) => user.role === UserRole.signer)
|
||||||
@ -845,8 +909,8 @@ const DisplayUser = ({
|
|||||||
.map((user, index) => {
|
.map((user, index) => {
|
||||||
const userMeta = metadata[user.pubkey]
|
const userMeta = metadata[user.pubkey]
|
||||||
return (
|
return (
|
||||||
<TableRow key={index}>
|
<div className={styles.user} key={index}>
|
||||||
<TableCell className={styles.tableCell}>
|
<div className={styles.avatar}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
pubkey={user.pubkey}
|
pubkey={user.pubkey}
|
||||||
name={
|
name={
|
||||||
@ -856,39 +920,44 @@ const DisplayUser = ({
|
|||||||
}
|
}
|
||||||
image={userMeta?.picture}
|
image={userMeta?.picture}
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
</div>
|
||||||
<TableCell className={styles.tableCell}>
|
|
||||||
<Select
|
<Select
|
||||||
fullWidth
|
aria-label="role"
|
||||||
value={user.role}
|
value={user.role}
|
||||||
|
variant="outlined"
|
||||||
|
IconComponent={() => null}
|
||||||
|
renderValue={(value) => (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={value === UserRole.signer ? faPen : faEye}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleUserRoleChange(
|
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
|
||||||
e.target.value as UserRole,
|
|
||||||
user.pubkey
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
sx={{
|
||||||
|
fontSize: '16px',
|
||||||
|
minWidth: '44px',
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
padding: '7px 14px!important',
|
||||||
|
textOverflow: 'unset!important'
|
||||||
|
},
|
||||||
|
'& .MuiOutlinedInput-notchedOutline': {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<MenuItem value={UserRole.signer}>
|
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
||||||
{UserRole.signer}
|
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
||||||
</MenuItem>
|
|
||||||
<MenuItem value={UserRole.viewer}>
|
|
||||||
{UserRole.viewer}
|
|
||||||
</MenuItem>
|
|
||||||
</Select>
|
</Select>
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Tooltip title="Remove User" arrow>
|
<Tooltip title="Remove User" arrow>
|
||||||
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
||||||
<Clear style={{ color: 'red' }} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TableCell>
|
</div>
|
||||||
</TableRow>
|
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</TableBody>
|
</>
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -992,16 +1061,14 @@ const SignerRow = ({
|
|||||||
drag(drop(ref))
|
drag(drop(ref))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableRow
|
<div
|
||||||
sx={{ cursor: 'move', opacity }}
|
className={styles.user}
|
||||||
|
style={{ cursor: 'move', opacity }}
|
||||||
data-handler-id={handlerId}
|
data-handler-id={handlerId}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
|
||||||
<TableCell
|
|
||||||
className={styles.tableCell}
|
|
||||||
sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
|
|
||||||
>
|
>
|
||||||
<DragHandle />
|
<DragHandle />
|
||||||
|
<div className={styles.avatar}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
pubkey={user.pubkey}
|
pubkey={user.pubkey}
|
||||||
name={
|
name={
|
||||||
@ -1011,26 +1078,38 @@ const SignerRow = ({
|
|||||||
}
|
}
|
||||||
image={userMeta?.picture}
|
image={userMeta?.picture}
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
</div>
|
||||||
<TableCell className={styles.tableCell}>
|
|
||||||
<Select
|
<Select
|
||||||
fullWidth
|
aria-label="role"
|
||||||
value={user.role}
|
value={user.role}
|
||||||
|
variant="outlined"
|
||||||
|
IconComponent={() => null}
|
||||||
|
renderValue={(value) => (
|
||||||
|
<FontAwesomeIcon 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={{
|
||||||
|
fontSize: '16px',
|
||||||
|
minWidth: '44px',
|
||||||
|
'& .MuiInputBase-input': {
|
||||||
|
padding: '7px 14px!important',
|
||||||
|
textOverflow: 'unset!important'
|
||||||
|
},
|
||||||
|
'& .MuiOutlinedInput-notchedOutline': {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
||||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Tooltip title="Remove User" arrow>
|
<Tooltip title="Remove User" arrow>
|
||||||
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
||||||
<Clear style={{ color: 'red' }} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TableCell>
|
</div>
|
||||||
</TableRow>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,60 @@
|
|||||||
gap: 15px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.orderedFilesList {
|
||||||
|
counter-reset: item;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
transition: ease 0.4s;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 7px 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
min-height: 45px;
|
||||||
|
cursor: pointer;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: counter(item) ' ';
|
||||||
|
counter-increment: item;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
:nth-child(1) {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: $primary-main;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active,
|
||||||
|
&:focus-within {
|
||||||
|
background: $primary-main;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.paperGroup {
|
.paperGroup {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: white;
|
background: white;
|
||||||
@ -13,28 +67,49 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
|
// Automatic scrolling if paper-group gets large enough
|
||||||
|
// used for files on the left and users on the right
|
||||||
|
max-height: 350px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subHeader {
|
.inputWrapper {
|
||||||
border-bottom: 0.5px solid;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
|
||||||
.tableHeaderCell {
|
height: 34px;
|
||||||
border-right: 1px solid rgba(224, 224, 224, 1);
|
overflow: hidden;
|
||||||
}
|
border-radius: 4px;
|
||||||
|
outline: solid 1px #dddddd;
|
||||||
|
background: white;
|
||||||
|
|
||||||
.tableCell {
|
width: 100%;
|
||||||
border-right: 1px solid rgba(224, 224, 224, 1);
|
|
||||||
height: 56px;
|
&:focus-within {
|
||||||
|
outline-color: $primary-main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.user {
|
.user {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
.name {
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: start;
|
||||||
cursor: pointer;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 34px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user