use button-toggle group for page title

This commit is contained in:
Sean Yesmunt 2021-03-16 11:45:14 -04:00
parent 475256e63a
commit 2ddfde1480
2 changed files with 30 additions and 27 deletions

View file

@ -1261,6 +1261,7 @@
"Unmute": "Unmute",
"Manage notifications": "Manage notifications",
"Uploads": "Uploads",
"All uploads": "All uploads",
"Advanced settings": "Advanced settings",
"Browse": "Browse",
"Automatic transcoding": "Automatic transcoding",

View file

@ -68,29 +68,12 @@ function FileListPublished(props: Props) {
{!!(urls && urls.length) && (
<>
<ClaimList
header={<h1 className="section__title">{__('Uploads')}</h1>}
headerAltControls={
<div className="card__actions--inline">
{fetching && <Spinner type="small" />}
{!fetching && (
<Button
button="alt"
label={__('Refresh')}
icon={ICONS.REFRESH}
onClick={() => fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','))}
/>
)}
<Button
icon={ICONS.PUBLISH}
button="secondary"
label={__('Upload')}
navigate={`/$/${PAGES.UPLOAD}`}
onClick={() => clearPublish()}
/>
header={
<span>
<Button
button="alt"
label={__('All')}
aria-label={__('All uploads')}
onClick={() => setFilterBy(FILTER_ALL)}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_ALL,
@ -113,6 +96,25 @@ function FileListPublished(props: Props) {
})}
/>
</span>
}
headerAltControls={
<div className="card__actions--inline">
{fetching && <Spinner type="small" />}
{!fetching && (
<Button
button="alt"
label={__('Refresh')}
icon={ICONS.REFRESH}
onClick={() => fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','))}
/>
)}
<Button
icon={ICONS.PUBLISH}
button="secondary"
label={__('Upload')}
navigate={`/$/${PAGES.UPLOAD}`}
onClick={() => clearPublish()}
/>
</div>
}
persistedStorageKey="claim-list-published"