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

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

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