feat(design): home page new design and functionality #135

Merged
enes merged 24 commits from issue-121 into staging 2024-08-14 08:44:09 +00:00
3 changed files with 155 additions and 141 deletions
Showing only changes of commit 15aa98e9db - Show all commits

View File

@ -30,6 +30,7 @@
border: 1px solid rgba(0, 0, 0, 0.137);
padding: 5px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
&.selected {
@ -42,13 +43,13 @@
border-color: #01aaad79;
}
}
}
}
}
.pdfImageWrapper {
position: relative;
-webkit-user-select: none;
user-select: none;
&.drawing {
@ -94,7 +95,7 @@
background-color: #fff;
border: 1px solid rgb(160, 160, 160);
border-radius: 50%;
color: #E74C3C;
color: #e74c3c;
font-size: 10px;
cursor: pointer;
}

View File

@ -127,134 +127,143 @@ export const HomePage = () => {
[navigate]
)
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
onDrop,
noClick: true
})
const [filter, setFilter] = useState<Filter>('Show all')
const [sort, setSort] = useState<Sort>('desc')
return (
<Container className={styles.container}>
<div className={styles.header}>
<div className={styles.filters}>
<Select
name={'filter-select'}
value={filter}
setValue={setFilter}
options={FILTERS.map((f) => {
return {
label: f,
value: f
}
})}
/>
<Select
name={'sort-select'}
value={sort}
setValue={setSort}
options={SORT_BY.map((s) => {
return { ...s }
})}
/>
</div>
<div className={styles.actionButtons}>
<form
className={styles.search}
onSubmit={(e) => {
e.preventDefault()
const searchInput = e.currentTarget.elements.namedItem(
'q'
) as HTMLInputElement
searchParams.set('q', searchInput.value)
setSearchParams(searchParams)
}}
>
<TextField
id="q"
name="q"
placeholder="Search"
size="small"
type="search"
defaultValue={q}
onChange={(e) => {
// Handle the case when users click native search input's clear or x
if (e.currentTarget.value === '') {
searchParams.delete('q')
setSearchParams(searchParams)
<div {...getRootProps()}>
<Container className={styles.container}>
<div className={styles.header}>
<div className={styles.filters}>
<Select
name={'filter-select'}
value={filter}
setValue={setFilter}
options={FILTERS.map((f) => {
return {
label: f,
value: f
}
}}
sx={{
width: '100%',
fontSize: '16px',
borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
'& .MuiInputBase-root': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0
},
'& .MuiInputBase-input': {
padding: '7px 14px'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
})}
/>
<Button
type="submit"
sx={{
minWidth: '44px',
padding: '11.5px 12px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
<Select
name={'sort-select'}
value={sort}
setValue={setSort}
options={SORT_BY.map((s) => {
return { ...s }
})}
/>
</div>
<div className={styles.actionButtons}>
<form
className={styles.search}
onSubmit={(e) => {
e.preventDefault()
const searchInput = e.currentTarget.elements.namedItem(
'q'
) as HTMLInputElement
searchParams.set('q', searchInput.value)
setSearchParams(searchParams)
}}
variant={'contained'}
>
<FontAwesomeIcon icon={faSearch} />
</Button>
</form>
<TextField
id="q"
name="q"
placeholder="Search"
size="small"
type="search"
defaultValue={q}
onChange={(e) => {
// Handle the case when users click native search input's clear or x
if (e.currentTarget.value === '') {
searchParams.delete('q')
setSearchParams(searchParams)
}
}}
sx={{
width: '100%',
fontSize: '16px',
borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
'& .MuiInputBase-root': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0
},
'& .MuiInputBase-input': {
padding: '7px 14px'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
/>
<Button
type="submit"
sx={{
minWidth: '44px',
padding: '11.5px 12px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}}
variant={'contained'}
aria-label="Submit Search"
>
<FontAwesomeIcon icon={faSearch} />
</Button>
</form>
</div>
</div>
</div>
<div className={styles.dropzone}>
<div {...getRootProps()}>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here ...</p>
) : (
<p>Click or drag files to upload!</p>
)}
<div
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
onClick={open}
>
<div>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here ...</p>
) : (
<p>Click or drag files to upload!</p>
)}
</div>
</div>
</div>
<div className={styles.submissions}>
{Object.keys(parsedSigits)
.filter((s) => {
const { title, signedStatus } = parsedSigits[s]
const isMatch = title?.toLowerCase().includes(q.toLowerCase())
switch (filter) {
case 'Completed':
return signedStatus === SignedStatus.Complete && isMatch
case 'In-progress':
return signedStatus === SignedStatus.Partial && isMatch
case 'Show all':
return isMatch
default:
console.error('Filter case not handled.')
}
})
.sort((a, b) => {
const x = parsedSigits[a].createdAt ?? 0
const y = parsedSigits[b].createdAt ?? 0
return sort === 'desc' ? y - x : x - y
})
.map((key) => (
<DisplaySigit
key={`sigit-${key}`}
parsedMeta={parsedSigits[key]}
meta={sigits[key]}
profiles={profiles}
setProfiles={setProfiles}
/>
))}
</div>
</Container>
<div className={styles.submissions}>
{Object.keys(parsedSigits)
.filter((s) => {
const { title, signedStatus } = parsedSigits[s]
const isMatch = title?.toLowerCase().includes(q.toLowerCase())
switch (filter) {
case 'Completed':
return signedStatus === SignedStatus.Complete && isMatch
case 'In-progress':
return signedStatus === SignedStatus.Partial && isMatch
case 'Show all':
return isMatch
default:
console.error('Filter case not handled.')
}
})
.sort((a, b) => {
const x = parsedSigits[a].createdAt ?? 0
const y = parsedSigits[b].createdAt ?? 0
return sort === 'desc' ? y - x : x - y
})
.map((key) => (
<DisplaySigit
key={`sigit-${key}`}
parsedMeta={parsedSigits[key]}
meta={sigits[key]}
profiles={profiles}
setProfiles={setProfiles}
/>
))}
</div>
</Container>
</div>
)
}

View File

@ -53,31 +53,35 @@
}
.dropzone {
position: relative;
font-size: 16px;
background-color: $overlay-background-color;
height: 250px;
transition: padding ease 0.2s;
padding: 15px;
color: rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
padding: 10px;
> div {
background: rgba(0, 0, 0, 0.15);
}
}
> div {
transition: background-color ease 0.2s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&::before {
content: '';
position: absolute;
transition:
background-color ease 0.2s,
inset ease 0.2s;
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.25);
height: 100%;
border-radius: 2px;
border: dashed 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
inset: 15px;
}
&.isDragActive,
&:hover {
&::before {
inset: 10px;
background: rgba(0, 0, 0, 0.15);
}
}
}