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", "Unmute": "Unmute",
"Manage notifications": "Manage notifications", "Manage notifications": "Manage notifications",
"Uploads": "Uploads", "Uploads": "Uploads",
"All uploads": "All uploads",
"Advanced settings": "Advanced settings", "Advanced settings": "Advanced settings",
"Browse": "Browse", "Browse": "Browse",
"Automatic transcoding": "Automatic transcoding", "Automatic transcoding": "Automatic transcoding",

View file

@ -68,29 +68,12 @@ function FileListPublished(props: Props) {
{!!(urls && urls.length) && ( {!!(urls && urls.length) && (
<> <>
<ClaimList <ClaimList
header={<h1 className="section__title">{__('Uploads')}</h1>} header={
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()}
/>
<span> <span>
<Button <Button
button="alt" button="alt"
label={__('All')} label={__('All')}
aria-label={__('All uploads')}
onClick={() => setFilterBy(FILTER_ALL)} onClick={() => setFilterBy(FILTER_ALL)}
className={classnames(`button-toggle`, { className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_ALL, 'button-toggle--active': filterBy === FILTER_ALL,
@ -113,6 +96,25 @@ function FileListPublished(props: Props) {
})} })}
/> />
</span> </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> </div>
} }
persistedStorageKey="claim-list-published" persistedStorageKey="claim-list-published"