Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Replaced tab component in themes (AdminX)

Browse source 
refs. https://github.com/TryGhost/Team/issues/3432
This commit is contained in:
Peter Zimon 2023-06-13 12:48:33 +02:00
parent 1071d4437c
commit 6023bddafc
2 changed files with 16 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
View file

@ -128,11 +128,6 @@ const DesignModal: React.FC = () => {
title: id === 'site-wide' ? 'Site wide' : (id === 'homepage' ? 'Homepage' : 'Post') title: id === 'site-wide' ? 'Site wide' : (id === 'homepage' ? 'Homepage' : 'Post')
})); }));
// const urlOptions: SelectOption[] = [
// {value: getHomepageUrl(siteData!), label: 'Homepage'},
// latestPost && {value: latestPost.url, label: 'Post'}
// ].filter((option): option is SelectOption => Boolean(option));
let previewTabs: Tab[] = []; let previewTabs: Tab[] = [];
if (latestPost) { if (latestPost) {
previewTabs = [ previewTabs = [

39
ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx
View file

@ -6,10 +6,11 @@ import Modal from '../../../admin-x-ds/global/Modal';
import NewThemePreview from './theme/ThemePreview'; import NewThemePreview from './theme/ThemePreview';
import NiceModal, {useModal} from '@ebay/nice-modal-react'; import NiceModal, {useModal} from '@ebay/nice-modal-react';
import OfficialThemes from './theme/OfficialThemes'; import OfficialThemes from './theme/OfficialThemes';
import TabView from '../../../admin-x-ds/global/TabView';
import {useState} from 'react'; import {useState} from 'react';
const ChangeThemeModal = NiceModal.create(() => { const ChangeThemeModal = NiceModal.create(() => {
const [currentTab, setCurrentTab] = useState<'official-themes' | 'advanced'>('official-themes'); const [currentTab, setCurrentTab] = useState('official');
const [selectedTheme, setSelectedTheme] = useState(''); const [selectedTheme, setSelectedTheme] = useState('');
const modal = useModal(); const modal = useModal();
@ -20,14 +21,14 @@ const ChangeThemeModal = NiceModal.create(() => {
let content; let content;
switch (currentTab) { switch (currentTab) {
case 'official-themes': case 'official':
if (selectedTheme) { if (selectedTheme) {
content = <NewThemePreview selectedTheme={selectedTheme} />; content = <NewThemePreview selectedTheme={selectedTheme} />;
} else { } else {
content = <OfficialThemes onSelectTheme={onSelectTheme} />; content = <OfficialThemes onSelectTheme={onSelectTheme} />;
} }
break; break;
case 'advanced': case 'installed':
content = <AdvancedThemeSettings />; content = <AdvancedThemeSettings />;
break; break;
} }
@ -41,7 +42,7 @@ const ChangeThemeModal = NiceModal.create(() => {
className={`text-sm`} className={`text-sm`}
type="button" type="button"
onClick={() => { onClick={() => {
setCurrentTab('official-themes'); setCurrentTab('official');
setSelectedTheme(''); setSelectedTheme('');
}}> }}>
Official themes Official themes
@ -62,25 +63,17 @@ const ChangeThemeModal = NiceModal.create(() => {
} else { } else {
toolBar = toolBar =
<div className='sticky top-0 flex justify-between gap-3 bg-white p-5 px-7'> <div className='sticky top-0 flex justify-between gap-3 bg-white p-5 px-7'>
<div className='flex gap-8'> <TabView
<button border={false}
className={`text-sm ${currentTab === 'official-themes' && 'font-bold'}`} tabs={[
type="button" {id: 'official', title: 'Official themes'},
onClick={() => { {id: 'installed', title: 'Installed'}
setCurrentTab('official-themes'); ]}
setSelectedTheme(''); onTabChange={(id: string) => {
}}> setCurrentTab(id);
Official themes }}
</button> />
<button
className={`text-sm ${currentTab === 'advanced' && 'font-bold'}`}
type="button"
onClick={() => {
setCurrentTab('advanced');
}}>
Installed
</button>
</div>
<div className='flex items-center gap-3'> <div className='flex items-center gap-3'>
<FileUpload id='theme-uplaod' onUpload={(file: File) => { <FileUpload id='theme-uplaod' onUpload={(file: File) => {
alert(file.name); alert(file.name);