From 4b80a84977df724260ee0ef818a171bd758df17c Mon Sep 17 00:00:00 2001 From: mkljczk Date: Sun, 23 Feb 2025 18:17:56 +0100 Subject: [PATCH] pl-fe: Allow to configure instance logo alignment Signed-off-by: mkljczk --- .../src/components/sidebar-navigation.tsx | 6 +-- .../src/components/site-error-boundary.tsx | 2 +- packages/pl-fe/src/components/site-logo.tsx | 4 +- .../src/features/embedded-status/index.tsx | 2 +- .../pl-fe/src/features/pl-fe-config/index.tsx | 53 ++++++++++++++----- packages/pl-fe/src/hooks/use-logo.ts | 6 +-- packages/pl-fe/src/locales/en.json | 7 ++- .../src/normalizers/pl-fe/pl-fe-config.ts | 1 + 8 files changed, 55 insertions(+), 26 deletions(-) diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx index 072617f5b..1d96a0679 100644 --- a/packages/pl-fe/src/components/sidebar-navigation.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation.tsx @@ -9,7 +9,6 @@ import ProfileDropdown from 'pl-fe/features/ui/components/profile-dropdown'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useInstance } from 'pl-fe/hooks/use-instance'; -import { useLogo } from 'pl-fe/hooks/use-logo'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status'; import { useSettings } from 'pl-fe/hooks/use-settings'; @@ -46,7 +45,6 @@ const SidebarNavigation = React.memo(() => { const { isDeveloper } = useSettings(); const { account } = useOwnAccount(); const { isOpen } = useRegistrationStatus(); - const logoSrc = useLogo(); const notificationCount = useAppSelector((state) => state.notifications.unread); const followRequestsCount = useFollowRequestsCount().data || 0; @@ -159,9 +157,7 @@ const SidebarNavigation = React.memo(() => { return ( - {logoSrc && ( - - )} + {account && ( diff --git a/packages/pl-fe/src/components/site-error-boundary.tsx b/packages/pl-fe/src/components/site-error-boundary.tsx index cd8ab2428..4a1179f32 100644 --- a/packages/pl-fe/src/components/site-error-boundary.tsx +++ b/packages/pl-fe/src/components/site-error-boundary.tsx @@ -24,7 +24,7 @@ interface ISiteErrorBoundary { /** Application-level error boundary. Fills the whole screen. */ const SiteErrorBoundary: React.FC = ({ children }) => { const { links, sentryDsn } = usePlFeConfig(); - const logoSrc = useLogo(); + const { src: logoSrc } = useLogo(); const textarea = useRef(null); const [error, setError] = useState(); diff --git a/packages/pl-fe/src/components/site-logo.tsx b/packages/pl-fe/src/components/site-logo.tsx index 83336a3ac..461e740ad 100644 --- a/packages/pl-fe/src/components/site-logo.tsx +++ b/packages/pl-fe/src/components/site-logo.tsx @@ -18,7 +18,7 @@ interface ISiteLogo extends React.ComponentProps<'img'> { /** Display the most appropriate site logo based on the theme and configuration. */ const SiteLogo: React.FC = ({ className, theme, ...rest }) => { const intl = useIntl(); - const logoSrc = useLogo(); + const { src: logoSrc, alignment } = useLogo(); if (!logoSrc) return null; @@ -26,7 +26,7 @@ const SiteLogo: React.FC = ({ className, theme, ...rest }) => { // eslint-disable-next-line jsx-a11y/alt-text {intl.formatMessage(messages.logo)} diff --git a/packages/pl-fe/src/features/embedded-status/index.tsx b/packages/pl-fe/src/features/embedded-status/index.tsx index 5d9b24fab..42b3637f5 100644 --- a/packages/pl-fe/src/features/embedded-status/index.tsx +++ b/packages/pl-fe/src/features/embedded-status/index.tsx @@ -25,7 +25,7 @@ const EmbeddedStatus: React.FC = ({ params }) => { const history = useHistory(); const getStatus = useCallback(makeGetStatus(), []); const intl = useIntl(); - const logoSrc = useLogo(); + const { src: logoSrc } = useLogo(); const status = useAppSelector(state => getStatus(state, { id: params.statusId })); diff --git a/packages/pl-fe/src/features/pl-fe-config/index.tsx b/packages/pl-fe/src/features/pl-fe-config/index.tsx index 58806ed09..48d3dc118 100644 --- a/packages/pl-fe/src/features/pl-fe-config/index.tsx +++ b/packages/pl-fe/src/features/pl-fe-config/index.tsx @@ -15,6 +15,7 @@ import Form from 'pl-fe/components/ui/form'; import FormActions from 'pl-fe/components/ui/form-actions'; import FormGroup from 'pl-fe/components/ui/form-group'; import Input from 'pl-fe/components/ui/input'; +import Select from 'pl-fe/components/ui/select'; import Streamfield from 'pl-fe/components/ui/streamfield'; import Textarea from 'pl-fe/components/ui/textarea'; import Toggle from 'pl-fe/components/ui/toggle'; @@ -28,7 +29,6 @@ import toast from 'pl-fe/toast'; import CryptoAddressInput from './components/crypto-address-input'; import FooterLinkInput from './components/footer-link-input'; import PromoPanelInput from './components/promo-panel-input'; -import SitePreview from './components/site-preview'; const messages = defineMessages({ heading: { id: 'column.plfe_config', defaultMessage: 'Front-end configuration' }, @@ -180,17 +180,7 @@ const PlFeConfigEditor: React.FC = () => {
- - - } - hintText={ + {/* */} } /> @@ -210,6 +200,45 @@ const PlFeConfigEditor: React.FC = () => { /> + } + hintText={ + + } + hintText={} + > + + + + {(data.logo || data.logoDarkMode) && ( + + }> + + + + )} + } /> diff --git a/packages/pl-fe/src/hooks/use-logo.ts b/packages/pl-fe/src/hooks/use-logo.ts index ccb9abfd6..ed63ca24f 100644 --- a/packages/pl-fe/src/hooks/use-logo.ts +++ b/packages/pl-fe/src/hooks/use-logo.ts @@ -3,7 +3,7 @@ import { useSettings } from './use-settings'; import { useTheme } from './use-theme'; const useLogo = () => { - const { logo, logoDarkMode } = usePlFeConfig(); + const { logo, logoDarkMode, logoAlignment } = usePlFeConfig(); const { demo } = useSettings(); const darkMode = ['dark', 'black'].includes(useTheme()); @@ -13,9 +13,7 @@ const useLogo = () => { ? logoDarkMode : logo || logoDarkMode; - if (demo) return null; - - return src; + return { src: demo ? null : src, alignment: logoAlignment }; }; export { useLogo }; diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 057b1282b..046c57749 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -1198,6 +1198,10 @@ "plfe_config.fields.crypto_addresses_label": "Cryptocurrency addresses", "plfe_config.fields.edit_theme_label": "Edit theme", "plfe_config.fields.home_footer_fields_label": "Home footer items", + "plfe_config.fields.logo_alignment": "Logo alignment", + "plfe_config.fields.logo_alignment.center": "Center", + "plfe_config.fields.logo_alignment.left": "Left", + "plfe_config.fields.logo_dark_label": "Logo (dark)", "plfe_config.fields.logo_label": "Logo", "plfe_config.fields.promo_panel_fields_label": "Promo panel items", "plfe_config.fields.theme_label": "Default theme", @@ -1210,7 +1214,8 @@ "plfe_config.headings.theme": "Theme", "plfe_config.hints.crypto_addresses": "Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.", "plfe_config.hints.home_footer_fields": "You can have custom defined links displayed on the footer of your static pages", - "plfe_config.hints.logo": "SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio", + "plfe_config.hints.logo": "SVG or PNG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio", + "plfe_config.hints.logo_dark": "SVG or PNG. At most 2 MB. Will be displayed when in dark mode", "plfe_config.hints.promo_panel_fields": "You can have custom defined links displayed on the right panel of the timelines page.", "plfe_config.home_footer.meta_fields.label_placeholder": "Label", "plfe_config.home_footer.meta_fields.url_placeholder": "URL", diff --git a/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts b/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts index f8190592e..d93c6e6c4 100644 --- a/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts +++ b/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts @@ -41,6 +41,7 @@ const plFeConfigSchema = coerceObject({ appleAppId: v.fallback(v.nullable(v.string()), null), logo: v.fallback(v.string(), ''), logoDarkMode: v.fallback(v.nullable(v.string()), null), + logoAlignment: v.fallback(v.picklist(['left', 'center']), 'center'), brandColor: v.fallback(v.string(), ''), accentColor: v.fallback(v.string(), ''), colors: v.fallback(v.nullable(v.objectWithRest(