Display logo if set

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-12 19:30:35 +02:00
parent d5737bd6de
commit 25defe0691
5 changed files with 17 additions and 4 deletions

View file

@ -6,11 +6,12 @@ import { useStatContext } from 'pl-fe/contexts/stat-context';
import Search from 'pl-fe/features/search/components/search'; import Search from 'pl-fe/features/search/components/search';
import ComposeButton from 'pl-fe/features/ui/components/compose-button'; import ComposeButton from 'pl-fe/features/ui/components/compose-button';
import ProfileDropdown from 'pl-fe/features/ui/components/profile-dropdown'; import ProfileDropdown from 'pl-fe/features/ui/components/profile-dropdown';
import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance, useRegistrationStatus } from 'pl-fe/hooks'; import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance, useRegistrationStatus, useLogo } from 'pl-fe/hooks';
import Account from './account'; import Account from './account';
import DropdownMenu, { Menu } from './dropdown-menu'; import DropdownMenu, { Menu } from './dropdown-menu';
import SidebarNavigationLink from './sidebar-navigation-link'; import SidebarNavigationLink from './sidebar-navigation-link';
import SiteLogo from './site-logo';
const messages = defineMessages({ const messages = defineMessages({
followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
@ -35,6 +36,7 @@ const SidebarNavigation = () => {
const { isDeveloper } = useSettings(); const { isDeveloper } = useSettings();
const { account } = useOwnAccount(); const { account } = useOwnAccount();
const { isOpen } = useRegistrationStatus(); const { isOpen } = useRegistrationStatus();
const logoSrc = useLogo();
const notificationCount = useAppSelector((state) => state.notifications.unread); const notificationCount = useAppSelector((state) => state.notifications.unread);
const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count()); const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
@ -139,6 +141,9 @@ const SidebarNavigation = () => {
return ( return (
<Stack space={4}> <Stack space={4}>
{logoSrc && (
<SiteLogo className='h-12 w-auto cursor-pointer' />
)}
{account && ( {account && (
<Stack space={4}> <Stack space={4}>

View file

@ -80,7 +80,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
{logoSrc && ( {logoSrc && (
<div className='flex shrink-0 justify-center'> <div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'> <a href='/' className='inline-flex'>
<SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' /> <SiteLogo className='h-12 w-auto cursor-pointer' />
</a> </a>
</div> </div>
)} )}

View file

@ -1,8 +1,13 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useLogo } from 'pl-fe/hooks'; import { useLogo } from 'pl-fe/hooks';
const messages = defineMessages({
logo: { id: 'generic.logo', defaultMessage: 'Logo' },
});
interface ISiteLogo extends React.ComponentProps<'img'> { interface ISiteLogo extends React.ComponentProps<'img'> {
/** Extra class names for the <img> element. */ /** Extra class names for the <img> element. */
className?: string; className?: string;
@ -12,6 +17,7 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
/** Display the most appropriate site logo based on the theme and configuration. */ /** Display the most appropriate site logo based on the theme and configuration. */
const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => { const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
const intl = useIntl();
const logoSrc = useLogo(); const logoSrc = useLogo();
if (!logoSrc) return null; if (!logoSrc) return null;
@ -19,6 +25,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
return ( return (
// eslint-disable-next-line jsx-a11y/alt-text // eslint-disable-next-line jsx-a11y/alt-text
<img <img
alt={intl.formatMessage(messages.logo)}
className={clsx('object-contain', className)} className={clsx('object-contain', className)}
src={logoSrc} src={logoSrc}
{...rest} {...rest}

View file

@ -25,7 +25,7 @@ const DevelopersChallenge = () => {
}; };
const handleSubmit = () => { const handleSubmit = () => {
if (answer === 'boxsoap') { if (answer === 'fe-pl') {
dispatch(changeSettingImmediate(['isDeveloper'], true)); dispatch(changeSettingImmediate(['isDeveloper'], true));
toast.success(intl.formatMessage(messages.success)); toast.success(intl.formatMessage(messages.success));
} else { } else {
@ -34,7 +34,7 @@ const DevelopersChallenge = () => {
}; };
const challenge = `function plFe() { const challenge = `function plFe() {
return 'soap|box'.split('|').reverse().join(''); return 'pl-fe'.split('-').reverse().join('-');
}`; }`;
return ( return (

View file

@ -816,6 +816,7 @@
"gdpr.learn_more": "Learn more", "gdpr.learn_more": "Learn more",
"gdpr.message": "{siteTitle} uses session cookies, which are essential to the website's functioning.", "gdpr.message": "{siteTitle} uses session cookies, which are essential to the website's functioning.",
"gdpr.title": "{siteTitle} uses cookies", "gdpr.title": "{siteTitle} uses cookies",
"generic.logo": "Logo",
"generic.saved": "Saved", "generic.saved": "Saved",
"getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).", "getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).",
"group.cancel_request": "Cancel request", "group.cancel_request": "Cancel request",