Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Improved Add/Edit Recommendations flow design (#17923)

Browse source 
refs https://github.com/TryGhost/Product/issues/3773

- Improved recommendation preview in the modal
- Added separate Back button
- Fixed Table spacing issue
This commit is contained in:
Djordje Vlaisavljevic 2023-09-01 15:17:34 +01:00 committed by GitHub
parent c6cb35074a
commit 2f5a4d801b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-settings/src/admin-x-ds/global/Table.tsx
View file

@ -34,7 +34,7 @@ const Table: React.FC<TableProps> = ({children, borderTop, hint, hintSeparator,
</tbody>
</table>
{hint &&
<div>
<div className="-mt-px">
{hintSeparator && <Separator />}
<div className="flex justify-between">
<Hint>{hint}</Hint>

12
apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModalConfirm.tsx
View file

@ -42,14 +42,24 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
okLabel = 'Added';
}
let leftButtonProps = {
label: 'Back',
icon: 'arrow-left',
size: 'sm' as const,
onClick: () => {
alert('Left button click');
}
};
return <Modal
afterClose={() => {
// Closed without saving: reset route
updateRoute('recommendations');
}}
animate={animate ?? true}
cancelLabel={'Back'}
cancelLabel={'Cancel'}
dirty={true}
leftButtonProps={leftButtonProps}
okColor='black'
okLabel={okLabel}
size='sm'

23
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
View file

@ -1,7 +1,9 @@
import Avatar from '../../../../admin-x-ds/global/Avatar';
import Form from '../../../../admin-x-ds/global/form/Form';
import Heading from '../../../../admin-x-ds/global/Heading';
import React from 'react';
import TextArea from '../../../../admin-x-ds/global/form/TextArea';
import TextField from '../../../../admin-x-ds/global/form/TextField';
import {EditOrAddRecommendation, Recommendation} from '../../../../api/recommendations';
interface Props<T extends EditOrAddRecommendation> {
@ -14,17 +16,24 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
marginBottom={false}
marginTop
>
<div className='mb-4 flex items-center gap-3 rounded-sm border border-grey-300 p-3'>
{(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
<div className={`flex grow flex-col`}>
<span className='mb-0.5 font-medium'>{formState.title}</span>
<span className='text-xs leading-snug text-grey-700'>{formState.url}</span>
</div>
<div>
<Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider text-grey-700'>Preview</Heading>
<a className='flex items-center gap-3 rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
{(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
<div className={`flex grow flex-col`}>
<span className='word-wrap mb-0.5 font-medium'>{formState.title}</span>
<span className='word-wrap text-xs leading-snug text-grey-700'>{formState.url}</span>
</div>
</a>
</div>
<TextField
title="Title"
value={formState.title ?? ''}
/>
<TextArea
clearBg={true}
rows={3}
title="Reason for recommending"
title="Reason for recommending (optional)"
value={formState.reason ?? ''}
onChange={e => updateForm(state => ({...state, reason: e.target.value}))}
/>