Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Updated Twitter and FB card edit mode design

Browse source 
refs https://github.com/TryGhost/Team/issues/3318
This commit is contained in:
Djordje Vlaisavljevic 2023-06-02 14:05:56 +01:00
parent bbb09523ce
commit 091b3acd61
2 changed files with 95 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
View file

@ -2,8 +2,10 @@ import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
import React, {useContext} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextArea from '../../../admin-x-ds/global/TextArea';
import TextField from '../../../admin-x-ds/global/TextField';
import useSettingGroup from '../../../hooks/useSettingGroup';
import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
import {FileService, ServicesContext} from '../../providers/ServiceProvider';
const Facebook: React.FC = () => {
@ -28,7 +30,7 @@ const Facebook: React.FC = () => {
updateSetting('og_title', e.target.value);
};
const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
updateSetting('og_description', e.target.value);
};
@ -46,30 +48,50 @@ const Facebook: React.FC = () => {
);
const inputFields = (
<SettingGroupContent>
<ImageUpload
height='200px'
id='twitter-image'
imageURL={facebookImage}
onDelete={handleImageDelete}
onUpload={handleImageUpload}
>
Upload Facebook image
</ImageUpload>
<TextField
inputRef={focusRef}
placeholder={siteTitle}
title="Facebook title"
value={facebookTitle}
onChange={handleTitleChange}
/>
<TextField
placeholder={siteDescription}
title="Facebook description"
value={facebookDescription}
onChange={handleDescriptionChange}
/>
</SettingGroupContent>
<div>
<div className="mb-4 flex items-center gap-2">
<div>
<FacebookLogo className='h-10 w-10' />
</div>
<div>
<div className="mb-1 font-semibold leading-none text-grey-900">{siteTitle}</div>
<div className="leading-none text-grey-700">2h</div>
</div>
</div>
<div>
<div className="mb-2 h-3 w-full rounded bg-grey-200"></div>
<div className="mb-4 h-3 w-3/5 rounded bg-grey-200"></div>
<SettingGroupContent className="overflow-hidden rounded-md border border-grey-300">
<ImageUpload
className="rounded-b-none border-b-0"
height='300px'
id='twitter-image'
imageURL={facebookImage}
label='Upload Facebook image'
onDelete={handleImageDelete}
onUpload={handleImageUpload}
/>
<div className="flex flex-col gap-x-6 gap-y-7 px-4 pb-7">
<TextField
clearBg={true}
inputRef={focusRef}
placeholder={siteTitle}
title="Facebook title"
value={facebookTitle}
onChange={handleTitleChange}
/>
<TextArea
clearBg={true}
placeholder={siteDescription}
rows={2}
title="Facebook description"
value={facebookDescription}
onChange={handleDescriptionChange}
/>
</div>
</SettingGroupContent>
</div>
</div>
);
return (

74
ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
View file

@ -2,9 +2,11 @@ import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
import React, {useContext} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextArea from '../../../admin-x-ds/global/TextArea';
import TextField from '../../../admin-x-ds/global/TextField';
import useSettingGroup from '../../../hooks/useSettingGroup';
import {FileService, ServicesContext} from '../../providers/ServiceProvider';
import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
const Twitter: React.FC = () => {
const {
@ -28,7 +30,7 @@ const Twitter: React.FC = () => {
updateSetting('twitter_title', e.target.value);
};
const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
updateSetting('twitter_description', e.target.value);
};
@ -50,30 +52,48 @@ const Twitter: React.FC = () => {
);
const inputFields = (
<SettingGroupContent>
<ImageUpload
height='200px'
id='twitter-image'
imageURL={twitterImage}
onDelete={handleImageDelete}
onUpload={handleImageUpload}
>
Upload twitter image
</ImageUpload>
<TextField
inputRef={focusRef}
placeholder={siteTitle}
title="Twitter title"
value={twitterTitle}
onChange={handleTitleChange}
/>
<TextField
placeholder={siteDescription}
title="Twitter description"
value={twitterDescription}
onChange={handleDescriptionChange}
/>
</SettingGroupContent>
<div className="flex gap-3">
<div className="pt-1">
<TwitterLogo className='-mb-1 h-10 w-10' />
</div>
<div className="w-full">
<div className="mb-2">
<span className="mr-1 font-semibold text-grey-900">{siteTitle}</span>
<span className="text-grey-700">&#183; 2h</span>
</div>
<div className="mb-2 h-3 w-full rounded bg-grey-200"></div>
<div className="mb-4 h-3 w-3/5 rounded bg-grey-200"></div>
<SettingGroupContent className="overflow-hidden rounded-md border border-grey-300">
<ImageUpload
className="rounded-b-none border-b-0"
height='300px'
id='twitter-image'
imageURL={twitterImage}
label='Upload Twitter image'
onDelete={handleImageDelete}
onUpload={handleImageUpload}
/>
<div className="flex flex-col gap-x-6 gap-y-7 px-4 pb-7">
<TextField
clearBg={true}
inputRef={focusRef}
placeholder={siteTitle}
title="Twitter title"
value={twitterTitle}
onChange={handleTitleChange}
/>
<TextArea
clearBg={true}
placeholder={siteDescription}
rows={2}
title="Twitter description"
value={twitterDescription}
onChange={handleDescriptionChange}
/>
</div>
</SettingGroupContent>
</div>
</div>
);
return (
@ -88,7 +108,9 @@ const Twitter: React.FC = () => {
onStateChange={handleStateChange}
>
{values}
{currentState !== 'view' ? inputFields : ''}
<div>
{currentState !== 'view' ? inputFields : ''}
</div>
</SettingGroup>
);
};