Responsiveness and tabs #179
@ -15,6 +15,11 @@ import FileList from '../FileList'
|
|||||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||||
import { UsersDetails } from '../UsersDetails.tsx'
|
import { UsersDetails } from '../UsersDetails.tsx'
|
||||||
import { Meta } from '../../types'
|
import { Meta } from '../../types'
|
||||||
|
import {
|
||||||
|
faCircleInfo,
|
||||||
|
faFileDownload,
|
||||||
|
faPen
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
interface PdfMarkingProps {
|
interface PdfMarkingProps {
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
@ -132,6 +137,9 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
right={meta !== null && <UsersDetails meta={meta} />}
|
right={meta !== null && <UsersDetails meta={meta} />}
|
||||||
|
leftIcon={faFileDownload}
|
||||||
|
centerIcon={faPen}
|
||||||
|
rightIcon={faCircleInfo}
|
||||||
>
|
>
|
||||||
{currentUserMarks?.length > 0 && (
|
{currentUserMarks?.length > 0 && (
|
||||||
<PdfView
|
<PdfView
|
||||||
|
@ -8,22 +8,24 @@ import {
|
|||||||
|
|
||||||
import styles from './StickySideColumns.module.scss'
|
import styles from './StickySideColumns.module.scss'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import {
|
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
|
||||||
faFile,
|
|
||||||
faFileCirclePlus,
|
|
||||||
faToolbox
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { Button } from '@mui/material'
|
import { Button } from '@mui/material'
|
||||||
|
|
||||||
interface StickySideColumnsProps {
|
interface StickySideColumnsProps {
|
||||||
left?: ReactNode
|
left: ReactNode
|
||||||
right?: ReactNode
|
right: ReactNode
|
||||||
|
leftIcon: IconDefinition
|
||||||
|
centerIcon: IconDefinition
|
||||||
|
rightIcon: IconDefinition
|
||||||
}
|
}
|
||||||
|
|
||||||
const DEFAULT_TAB = 'nav-content'
|
const DEFAULT_TAB = 'nav-content'
|
||||||
export const StickySideColumns = ({
|
export const StickySideColumns = ({
|
||||||
left,
|
left,
|
||||||
right,
|
right,
|
||||||
|
leftIcon,
|
||||||
|
centerIcon,
|
||||||
|
rightIcon,
|
||||||
children
|
children
|
||||||
}: PropsWithChildren<StickySideColumnsProps>) => {
|
}: PropsWithChildren<StickySideColumnsProps>) => {
|
||||||
const [tab, setTab] = useState(DEFAULT_TAB)
|
const [tab, setTab] = useState(DEFAULT_TAB)
|
||||||
@ -114,7 +116,7 @@ export const StickySideColumns = ({
|
|||||||
className={`${isActive('nav-left') && styles.active}`}
|
className={`${isActive('nav-left') && styles.active}`}
|
||||||
aria-label="nav left"
|
aria-label="nav left"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faFileCirclePlus} />
|
<FontAwesomeIcon icon={leftIcon} />
|
||||||
</Button>
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
@ -125,7 +127,7 @@ export const StickySideColumns = ({
|
|||||||
className={`${isActive('nav-content') && styles.active}`}
|
className={`${isActive('nav-content') && styles.active}`}
|
||||||
aria-label="nav middle"
|
aria-label="nav middle"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faFile} />
|
<FontAwesomeIcon icon={centerIcon} />
|
||||||
</Button>
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
@ -136,7 +138,7 @@ export const StickySideColumns = ({
|
|||||||
className={`${isActive('nav-right') && styles.active}`}
|
className={`${isActive('nav-right') && styles.active}`}
|
||||||
aria-label="nav right"
|
aria-label="nav right"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faToolbox} />
|
<FontAwesomeIcon icon={rightIcon} />
|
||||||
</Button>
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -66,6 +66,8 @@ import {
|
|||||||
faCreditCard,
|
faCreditCard,
|
||||||
faEllipsis,
|
faEllipsis,
|
||||||
faEye,
|
faEye,
|
||||||
|
faFile,
|
||||||
|
faFileCirclePlus,
|
||||||
faGripLines,
|
faGripLines,
|
||||||
faHeading,
|
faHeading,
|
||||||
faIdCard,
|
faIdCard,
|
||||||
@ -80,6 +82,7 @@ import {
|
|||||||
faStamp,
|
faStamp,
|
||||||
faT,
|
faT,
|
||||||
faTableCellsLarge,
|
faTableCellsLarge,
|
||||||
|
faToolbox,
|
||||||
faTrash,
|
faTrash,
|
||||||
faUpload
|
faUpload
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
@ -1047,6 +1050,9 @@ export const CreatePage = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
leftIcon={faFileCirclePlus}
|
||||||
|
centerIcon={faFile}
|
||||||
|
rightIcon={faToolbox}
|
||||||
>
|
>
|
||||||
<DrawPDFFields
|
<DrawPDFFields
|
||||||
metadata={metadata}
|
metadata={metadata}
|
||||||
|
@ -53,6 +53,11 @@ import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
|
|||||||
import { FileDivider } from '../../components/FileDivider.tsx'
|
import { FileDivider } from '../../components/FileDivider.tsx'
|
||||||
import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
|
import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
|
||||||
import { useScale } from '../../hooks/useScale.tsx'
|
import { useScale } from '../../hooks/useScale.tsx'
|
||||||
|
import {
|
||||||
|
faCircleInfo,
|
||||||
|
faFile,
|
||||||
|
faFileDownload
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
files: CurrentUserFile[]
|
files: CurrentUserFile[]
|
||||||
@ -567,6 +572,9 @@ export const VerifyPage = () => {
|
|||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
right={<UsersDetails meta={meta} />}
|
right={<UsersDetails meta={meta} />}
|
||||||
|
leftIcon={faFileDownload}
|
||||||
|
centerIcon={faFile}
|
||||||
|
rightIcon={faCircleInfo}
|
||||||
>
|
>
|
||||||
<SlimPdfView
|
<SlimPdfView
|
||||||
currentFile={currentFile}
|
currentFile={currentFile}
|
||||||
|
Loading…
Reference in New Issue
Block a user