Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Displaying fonts in dropdown

Browse source
This commit is contained in:
Peter Zimon 2024-10-10 17:33:59 +01:00 • committed by Aileen Booker
parent 30ca22ae81
commit a4fde1f44b
5 changed files with 83 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/admin-x-design-system/src/global/form/Select.tsx
View file

@ -1,6 +1,6 @@
import clsx from 'clsx';
import React, {useId, useMemo, useEffect} from 'react';
import ReactSelect, {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, OptionProps, OptionsOrGroups, Props, components} from 'react-select';
import ReactSelect, {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MenuPlacement, OptionProps, OptionsOrGroups, Props, components} from 'react-select';
import AsyncSelect from 'react-select/async';
import {useFocusContext} from '../../providers/DesignSystemProvider';
import Heading from '../Heading';
@ -190,7 +190,13 @@ const Select: React.FC<SelectProps> = ({
control: () => customClasses.control,
placeholder: () => customClasses.placeHolder,
menu: () => customClasses.menu,
option: () => customClasses.option,
/* eslint-disable @typescript-eslint/no-explicit-any */
option: (state: any) => {
if (state.data.className) {
return clsx(customClasses.option, state.data.className);
}
return customClasses.option;
},
noOptionsMessage: () => customClasses.noOptionsMessage,
groupHeading: () => customClasses.groupHeading,
clearIndicator: () => customClasses.clearIndicator
@ -206,7 +212,8 @@ const Select: React.FC<SelectProps> = ({
unstyled: true,
onChange: onSelect,
onFocus: handleFocus,
onBlur: handleBlur
onBlur: handleBlur,
menuPlacement: 'auto' as MenuPlacement
};
const select = (

15
apps/admin-x-design-system/styles.css
View file

@ -4,6 +4,21 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import url(https://fonts.bunny.net/css?family=space-grotesk:700);
@import url(https://fonts.bunny.net/css?family=playfair-display:400);
@import url(https://fonts.bunny.net/css?family=chakra-petch:400);
@import url(https://fonts.bunny.net/css?family=noto-sans:400,700);
@import url(https://fonts.bunny.net/css?family=poppins:400,700);
@import url(https://fonts.bunny.net/css?family=fira-sans:400,700);
@import url(https://fonts.bunny.net/css?family=inter:400,700);
@import url(https://fonts.bunny.net/css?family=noto-serif:400,700);
@import url(https://fonts.bunny.net/css?family=lora:400,700);
@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,700);
@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700);
@import url(https://fonts.bunny.net/css?family=space-mono:400,700);
@import url(https://fonts.bunny.net/css?family=fira-mono:400,700);
@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700);
/* Defaults */
@layer base {
/* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */

15
apps/admin-x-design-system/tailwind.config.cjs
View file

@ -93,7 +93,20 @@ module.exports = {
sans: 'Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif',
serif: 'Georgia, serif',
mono: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
inherit: 'inherit'
inherit: 'inherit',
'space-grotesk': 'Space Grotesk',
'playfair-display': 'Playfair Display',
'chakra-petch': 'Chakra Petch',
'noto-sans': 'Noto Sans',
poppins: 'Poppins',
'fira-sans': 'Fira Sans',
'noto-serif': 'Noto Serif',
lora: 'Lora',
'ibm-plex-serif': 'IBM Plex Serif',
'eb-garamond': 'EB Garamond',
'space-mono': 'Space Mono',
'fira-mono': 'Fira Mono',
'jetbrains-mono': 'JetBrains Mono'
},
boxShadow: {
DEFAULT: '0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08)',

2
apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
View file

@ -48,7 +48,7 @@ const Sidebar: React.FC<{
return (
<div className='flex h-full flex-col justify-between'>
<div className='p-7 pt-2' data-testid="design-setting-tabs">
<div className='grow p-7 pt-2' data-testid="design-setting-tabs">
{tabs.length > 1 ?
<TabView selectedTab={selectedTab} tabs={tabs} onTabChange={handleTabChange} />
:

46
apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
View file

@ -18,7 +18,8 @@ type BodyFontOption = {
};
type HeadingFontOption = {
value: HeadingFont | typeof DEFAULT_FONT,
label: HeadingFont | typeof DEFAULT_FONT
label: HeadingFont | typeof DEFAULT_FONT,
className?: string
};
export interface GlobalSettingValues {
@ -46,10 +47,47 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
const [headingFont, setHeadingFont] = useState(values.headingFont || DEFAULT_FONT);
const [bodyFont, setBodyFont] = useState(values.bodyFont || DEFAULT_FONT);
const customHeadingFonts: HeadingFontOption[] = CUSTOM_FONTS.heading.map(x => ({label: x, value: x}));
const fontClassName = (fontName: string) => {
if (fontName === 'Space Grotesk') {
return 'font-space-grotesk';
} else if (fontName === 'Chakra Petch') {
return 'font-chakra-petch';
} else if (fontName === 'Noto Sans') {
return 'font-noto-sans';
} else if (fontName === 'Poppins') {
return 'font-poppins';
} else if (fontName === 'Fira Sans') {
return 'font-fira-sans';
} else if (fontName === 'Noto Serif') {
return 'font-noto-serif';
} else if (fontName === 'Lora') {
return 'font-lora';
} else if (fontName === 'IBM Plex Serif') {
return 'font-ibm-plex-serif';
} else if (fontName === 'EB Garamond') {
return 'font-eb-garamond';
} else if (fontName === 'Space Mono') {
return 'font-space-mono';
} else if (fontName === 'Fira Mono') {
return 'font-fira-mono';
} else if (fontName === 'JetBrains Mono') {
return 'font-jetbrains-mono';
}
return '';
};
// TODO: replace with getCustomFonts() once custom-fonts is updated and differentiates
// between heading and body fonts
const customHeadingFonts: HeadingFontOption[] = CUSTOM_FONTS.heading.map((x) => {
let className = fontClassName(x);
return {label: x, value: x, className};
});
customHeadingFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT});
const customBodyFonts: BodyFontOption[] = CUSTOM_FONTS.body.map(x => ({label: x, value: x}));
const customBodyFonts: BodyFontOption[] = CUSTOM_FONTS.body.map((x) => {
let className = fontClassName(x);
return {label: x, value: x, className};
});
customBodyFonts.unshift({label: DEFAULT_FONT, value: DEFAULT_FONT});
const selectedHeadingFont = {label: headingFont, value: headingFont};
@ -210,6 +248,8 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
/>
<Select
hint={''}
maxMenuHeight={200}
menuPosition='fixed'
options={customBodyFonts}
selectedOption={selectedBodyFont}
title={'Body font'}