Moved the action buttons to top on offers list screen (#19195)

fixes ADM-42
This commit is contained in:
Sodbileg Gansukh 2023-11-30 17:25:23 +08:00 committed by GitHub
parent ab21b8ae1d
commit d6e535d3b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,6 @@
import useFeatureFlag from '../../../../hooks/useFeatureFlag'; import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import {Button, Tab, TabView} from '@tryghost/admin-x-design-system'; import {Button, Tab, TabView} from '@tryghost/admin-x-design-system';
import {ButtonGroup, ButtonProps} from '@tryghost/admin-x-design-system';
import {Modal} from '@tryghost/admin-x-design-system'; import {Modal} from '@tryghost/admin-x-design-system';
import {NoValueLabel} from '@tryghost/admin-x-design-system'; import {NoValueLabel} from '@tryghost/admin-x-design-system';
import {SortMenu} from '@tryghost/admin-x-design-system'; import {SortMenu} from '@tryghost/admin-x-design-system';
@ -189,6 +190,24 @@ export const OffersIndexModal = () => {
</table> </table>
</div>; </div>;
const buttons: ButtonProps[] = [
{
key: 'cancel-modal',
label: 'Cancel',
onClick: () => {
modal.remove();
updateRoute('offers');
}
},
{
key: 'new-offer',
icon: 'add',
label: 'New offer',
color: 'green',
onClick: () => updateRoute('offers/new')
}
];
return <Modal return <Modal
afterClose={() => { afterClose={() => {
updateRoute('offers'); updateRoute('offers');
@ -196,16 +215,12 @@ export const OffersIndexModal = () => {
animate={false} animate={false}
backDropClick={false} backDropClick={false}
cancelLabel='' cancelLabel=''
footer={false}
header={false} header={false}
height='full' height='full'
size='lg' size='lg'
testId='offers-modal' testId='offers-modal'
width={1140} width={1140}
stickyFooter
onOk={() => {
modal.remove();
updateRoute('offers');
}}
> >
<div className='pt-6'> <div className='pt-6'>
<header> <header>
@ -219,7 +234,7 @@ export const OffersIndexModal = () => {
onTabChange={setSelectedTab} onTabChange={setSelectedTab}
/> />
</div> </div>
<Button color='green' icon='add' iconColorClass='green' label='New offer' link={true} size='sm' onClick={() => updateRoute('offers/new')} /> <ButtonGroup buttons={buttons} />
</div> </div>
<div className='mt-12 flex items-center justify-between border-b border-b-grey-300 pb-2.5'> <div className='mt-12 flex items-center justify-between border-b border-b-grey-300 pb-2.5'>
<h1 className='text-3xl'>{offersTabs.find(tab => tab.id === selectedTab)?.title} offers</h1> <h1 className='text-3xl'>{offersTabs.find(tab => tab.id === selectedTab)?.title} offers</h1>