TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 05:50:35 +03:00
Code Issues Projects Releases Wiki Activity

AdminX installed theme list updates (#17221)

Browse Source 
refs. https://github.com/TryGhost/Product/issues/3349

The installed themes were not sorted and the active theme was not the
first one which made it hard to discover in the list.
This commit is contained in:
Peter Zimon 2023-07-06 13:21:48 +02:00 committed by GitHub
parent a5b62707ef
commit c9f2271665
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 4 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/ListItem.tsx
View File

@ -29,7 +29,7 @@ const ListItem: React.FC<ListItemProps> = ({id, title, detail, action, hideActio
const listItemClasses = clsx( const listItemClasses = clsx(
'group flex items-center justify-between', 'group flex items-center justify-between',
bgOnHover && 'hover:bg-gradient-to-r hover:from-white hover:to-grey-50', bgOnHover && 'hover:bg-gradient-to-r hover:from-white hover:to-grey-50',
separator ? 'border-b border-grey-100 last-of-type:border-none hover:border-grey-200' : 'border-b border-transparent hover:border-grey-200', separator ? 'border-y border-grey-100 last-of-type:border-t hover:border-grey-200' : 'border-y border-transparent hover:border-grey-200 first-of-type:hover:border-t-transparent',
className className
); );

13
apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx
View File

@ -35,7 +35,7 @@ function getThemeLabel(theme: Theme): React.ReactNode {
if (isActiveTheme(theme)) { if (isActiveTheme(theme)) {
label = label =
<span className='font-bold'> <span className="font-bold">
{label} &mdash; <span className='text-green'> Active</span> {label} &mdash; <span className='text-green'> Active</span>
</span>; </span>;
} }
@ -152,6 +152,17 @@ const ThemeList:React.FC<ThemeSettingProps> = ({
themes, themes,
setThemes setThemes
}) => { }) => {
themes.sort((a, b) => {
if (a.active && !b.active) {
return -1; // a comes before b
} else if (!a.active && b.active) {
return 1; // b comes before a
} else {
// Both have the same active status, sort alphabetically
return a.name.localeCompare(b.name);
}
});
return ( return (
<List pageTitle='Installed themes'> <List pageTitle='Installed themes'>
{themes.map((theme) => { {themes.map((theme) => {

2
apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
View File

@ -15,7 +15,7 @@ const OfficialThemes: React.FC<{
return ( return (
<div className='h-[calc(100vh-74px-40px)] overflow-y-auto overflow-x-hidden p-[8vmin] pt-5'> <div className='h-[calc(100vh-74px-40px)] overflow-y-auto overflow-x-hidden p-[8vmin] pt-5'>
<Heading>Themes</Heading> <Heading>Themes</Heading>
<div className='mt-[6vmin] grid grid-cols-1 gap-[6vmin] sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'> <div className='mt-[6vmin] grid grid-cols-1 gap-[6vmin] sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4'>
{officialThemes.map((theme) => { {officialThemes.map((theme) => {
return ( return (
<button key={theme.name} className='flex cursor-pointer flex-col gap-3 text-left' type='button' onClick={() => { <button key={theme.name} className='flex cursor-pointer flex-col gap-3 text-left' type='button' onClick={() => {

2
apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx
View File

@ -105,7 +105,7 @@ const ThemeInstalledModal: React.FC<{
showToast({ showToast({
type: 'success', type: 'success',
message: `${updatedTheme.name} is now your active theme.` message: <div><span className='capitalize'>{updatedTheme.name}</span> is now your active theme.</div>
}); });
} }
onActivate?.(); onActivate?.();