[15, 20, 24, -4, ...COLORS.blueGrey[700], 0.1], | [15, 20, 24, -4, ...COLORS.blueGrey[700], 0.1], | ||||
[0, 8, 8, -4, ...COLORS.blueGrey[700], 0.06], | [0, 8, 8, -4, ...COLORS.blueGrey[700], 0.06], | ||||
], | ], | ||||
scrolling: [[0, 0, 8, 0, ...COLORS.blueGrey[700], 0.2]], | |||||
}, | }, | ||||
// predefined borders | // predefined borders |
className="issues-nav-bar sw-overflow-y-auto issue-filters-list" | className="issues-nav-bar sw-overflow-y-auto issue-filters-list" | ||||
style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer) | style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer) | ||||
> | > | ||||
<div className="sw-w-[300px] lg:sw-w-[390px]"> | |||||
<div className="sw-w-[300px] lg:sw-w-[390px] sw-h-full"> | |||||
<A11ySkipTarget | <A11ySkipTarget | ||||
anchor="issues_sidebar" | anchor="issues_sidebar" | ||||
label={ | label={ | ||||
/> | /> | ||||
{openIssue ? ( | {openIssue ? ( | ||||
<div> | |||||
<div className="sw-h-full"> | |||||
{warning && <div className="sw-py-4">{warning}</div>} | {warning && <div className="sw-py-4">{warning}</div>} | ||||
<SubnavigationIssuesList | <SubnavigationIssuesList |
useEffect(() => { | useEffect(() => { | ||||
if (selected && node.current) { | if (selected && node.current) { | ||||
node.current.scrollIntoView({ | node.current.scrollIntoView({ | ||||
block: 'center', | |||||
block: 'nearest', | |||||
behavior: 'smooth', | behavior: 'smooth', | ||||
}); | }); | ||||
} | } |
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||||
*/ | */ | ||||
import styled from '@emotion/styled'; | import styled from '@emotion/styled'; | ||||
import { themeBorder, themeColor } from 'design-system'; | |||||
import { themeBorder, themeColor, themeShadow } from 'design-system'; | |||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import ListFooter from '../../../components/controls/ListFooter'; | import ListFooter from '../../../components/controls/ListFooter'; | ||||
import { Issue, Paging } from '../../../types/types'; | import { Issue, Paging } from '../../../types/types'; | ||||
return ( | return ( | ||||
<StyledWrapper> | <StyledWrapper> | ||||
<SubnavigationIssuesListHeader loading={loading} paging={paging} /> | <SubnavigationIssuesListHeader loading={loading} paging={paging} /> | ||||
<StyledList> | |||||
<StyledList className="sw-overflow-auto sw-flex-auto"> | |||||
{issues.map((issue, index) => { | {issues.map((issue, index) => { | ||||
const previousIssue = index > 0 ? issues[index - 1] : undefined; | const previousIssue = index > 0 ? issues[index - 1] : undefined; | ||||
const displayComponentName = | const displayComponentName = | ||||
})} | })} | ||||
</StyledList> | </StyledList> | ||||
{paging && paging.total > 0 && ( | {paging && paging.total > 0 && ( | ||||
<ListFooter | |||||
<StyledFooter | |||||
className="sw-my-0 sw-py-4" | className="sw-my-0 sw-py-4" | ||||
count={issues.length} | count={issues.length} | ||||
loadMore={props.fetchMoreIssues} | loadMore={props.fetchMoreIssues} | ||||
const StyledWrapper = styled.div` | const StyledWrapper = styled.div` | ||||
background-color: ${themeColor('filterbar')}; | background-color: ${themeColor('filterbar')}; | ||||
height: inherit; | |||||
display: flex; | |||||
flex-direction: column; | |||||
`; | |||||
const StyledFooter = styled(ListFooter)` | |||||
box-shadow: ${themeShadow('scrolling')}; | |||||
`; | `; |
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||||
*/ | */ | ||||
import styled from '@emotion/styled'; | import styled from '@emotion/styled'; | ||||
import { Spinner, SubnavigationHeading, themeBorder } from 'design-system'; | |||||
import { Spinner, SubnavigationHeading, themeShadow } from 'design-system'; | |||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { Paging } from '../../../types/types'; | import { Paging } from '../../../types/types'; | ||||
import IssuesCounter from '../components/IssuesCounter'; | import IssuesCounter from '../components/IssuesCounter'; | ||||
const { loading, paging } = props; | const { loading, paging } = props; | ||||
return ( | return ( | ||||
<StyledHeader> | |||||
<StyledHeader className="sw-z-normal"> | |||||
<Spinner loading={loading}>{paging && <IssuesCounter total={paging.total} />}</Spinner> | <Spinner loading={loading}>{paging && <IssuesCounter total={paging.total} />}</Spinner> | ||||
</StyledHeader> | </StyledHeader> | ||||
); | ); | ||||
} | } | ||||
const StyledHeader = styled(SubnavigationHeading)` | const StyledHeader = styled(SubnavigationHeading)` | ||||
position: sticky; | |||||
top: 0; | |||||
border-bottom: ${themeBorder('default', 'filterbarBorder')}; | |||||
box-shadow: ${themeShadow('scrolling')}; | |||||
`; | `; |
ref={rootNode} | ref={rootNode} | ||||
className={classNames( | className={classNames( | ||||
'list-footer', // .list-footer is only used by Selenium tests; we should find a way to remove it. | 'list-footer', // .list-footer is only used by Selenium tests; we should find a way to remove it. | ||||
'sw-body-sm sw-mt-4 sw-flex sw-items-center sw-justify-center', | |||||
'sw-body-sm sw-flex sw-items-center sw-justify-center', | |||||
{ 'sw-opacity-50 sw-duration-500 sw-ease-in-out': !ready }, | { 'sw-opacity-50 sw-duration-500 sw-ease-in-out': !ready }, | ||||
className, | className, | ||||
)} | )} | ||||
const StyledDiv = styled.div` | const StyledDiv = styled.div` | ||||
color: ${themeColor('pageContentLight')}; | color: ${themeColor('pageContentLight')}; | ||||
margin-top: 1rem /* 16px */; | |||||
`; | `; |