tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

Source theme improvements in AdminX

Browse source 
no issues

- now the crossfade effect starts immediately after Source theme thumbnail is hovered
- fixed theme category text shifting when transitioning
- the hover effect now only applies to Source theme thumbnail
This commit is contained in:
Sodbileg Gansukh 2023-10-04 10:24:15 +08:00
parent f9478f5489
commit 58ccca378a
1 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
View file

@ -1,10 +1,9 @@
import Heading from '../../../../admin-x-ds/global/Heading';
import MarketplaceBgImage from '../../../../assets/images/footer-marketplace-bg.png';
import ModalPage from '../../../../admin-x-ds/global/modal/ModalPage';
import React from 'react';
import React, {useEffect, useState} from 'react';
import {OfficialTheme, useOfficialThemes} from '../../../providers/ServiceProvider';
import {getGhostPaths, resolveAsset} from '../../../../utils/helpers';
import {useEffect, useState} from 'react';
const sourceDemos = [
{image: 'Source.png', category: 'News'},
@ -23,10 +22,16 @@ const OfficialThemes: React.FC<{
const [isHovered, setIsHovered] = useState(false);
useEffect(() => {
const interval = setInterval(() => {
const switchSourceDemos = () => {
if (isHovered) {
setCurrentSourceDemoIndex(prevIndex => (prevIndex + 1) % sourceDemos.length);
}
};
switchSourceDemos();
const interval = setInterval(() => {
switchSourceDemos();
}, 3000);
return () => {
@ -34,6 +39,12 @@ const OfficialThemes: React.FC<{
};
}, [isHovered]);
useEffect(() => {
if (!isHovered) {
setCurrentSourceDemoIndex(0);
}
}, [isHovered]);
return (
<ModalPage heading='Themes'>
<div className='mt-[6vmin] grid grid-cols-1 gap-[6vmin] sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4'>
@ -43,7 +54,7 @@ const OfficialThemes: React.FC<{
onSelectTheme?.(theme);
}}>
{/* <img alt={theme.name} src={`${assetRoot}/${theme.image}`}/> */}
<div className='relative w-full bg-grey-100 shadow-md transition-all duration-500 hover:scale-[1.05]' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
<div className='relative w-full bg-grey-100 shadow-md transition-all duration-500 hover:scale-[1.05]' onMouseEnter={() => theme.name === 'Source' && setIsHovered(true)} onMouseLeave={() => theme.name === 'Source' && setIsHovered(false)}>
{theme.name !== 'Source' ?
<img
alt={`${theme.name} Theme`}
@ -67,7 +78,7 @@ const OfficialThemes: React.FC<{
{theme.name !== 'Source' ?
<span className='text-sm text-grey-700'>{theme.category}</span> :
sourceDemos.map((demo, index) => (
<span className={`${index === 0 ? 'relative' : 'absolute bottom-[1px]'} left-0 inline-block w-24 bg-white text-sm text-grey-700 ${index === currentSourceDemoIndex ? 'opacity-100' : 'opacity-0'}`}>{demo.category}</span>
<span className={`${index === 0 ? 'absolute' : 'absolute'} left-0 translate-y-px text-sm text-grey-700 ${index === currentSourceDemoIndex ? 'opacity-100' : 'opacity-0'}`}>{demo.category}</span>
))
}
</div>