use button-toggle group for page title
This commit is contained in:
parent
475256e63a
commit
2ddfde1480
2 changed files with 30 additions and 27 deletions
|
@ -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",
|
||||||
|
|
|
@ -68,7 +68,35 @@ function FileListPublished(props: Props) {
|
||||||
{!!(urls && urls.length) && (
|
{!!(urls && urls.length) && (
|
||||||
<>
|
<>
|
||||||
<ClaimList
|
<ClaimList
|
||||||
header={<h1 className="section__title">{__('Uploads')}</h1>}
|
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,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
button="alt"
|
||||||
|
label={__('Uploads')}
|
||||||
|
onClick={() => setFilterBy(FILTER_UPLOADS)}
|
||||||
|
className={classnames(`button-toggle`, {
|
||||||
|
'button-toggle--active': filterBy === FILTER_UPLOADS,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
button="alt"
|
||||||
|
label={__('Reposts')}
|
||||||
|
onClick={() => setFilterBy(FILTER_REPOSTS)}
|
||||||
|
className={classnames(`button-toggle`, {
|
||||||
|
'button-toggle--active': filterBy === FILTER_REPOSTS,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
headerAltControls={
|
headerAltControls={
|
||||||
<div className="card__actions--inline">
|
<div className="card__actions--inline">
|
||||||
{fetching && <Spinner type="small" />}
|
{fetching && <Spinner type="small" />}
|
||||||
|
@ -87,32 +115,6 @@ function FileListPublished(props: Props) {
|
||||||
navigate={`/$/${PAGES.UPLOAD}`}
|
navigate={`/$/${PAGES.UPLOAD}`}
|
||||||
onClick={() => clearPublish()}
|
onClick={() => clearPublish()}
|
||||||
/>
|
/>
|
||||||
<span>
|
|
||||||
<Button
|
|
||||||
button="alt"
|
|
||||||
label={__('All')}
|
|
||||||
onClick={() => setFilterBy(FILTER_ALL)}
|
|
||||||
className={classnames(`button-toggle`, {
|
|
||||||
'button-toggle--active': filterBy === FILTER_ALL,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
button="alt"
|
|
||||||
label={__('Uploads')}
|
|
||||||
onClick={() => setFilterBy(FILTER_UPLOADS)}
|
|
||||||
className={classnames(`button-toggle`, {
|
|
||||||
'button-toggle--active': filterBy === FILTER_UPLOADS,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
button="alt"
|
|
||||||
label={__('Reposts')}
|
|
||||||
onClick={() => setFilterBy(FILTER_REPOSTS)}
|
|
||||||
className={classnames(`button-toggle`, {
|
|
||||||
'button-toggle--active': filterBy === FILTER_REPOSTS,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
persistedStorageKey="claim-list-published"
|
persistedStorageKey="claim-list-published"
|
||||||
|
|
Loading…
Add table
Reference in a new issue