mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 11:23:10 +02:00
UI/allow logo selection (#4982)
# Description of Changes - Allow switching between logos in-app using the same section in settings --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
This commit is contained in:
EthanHealy01
@@ -1,4 +1,4 @@
|
||||
import { ReactNode } from "react";
|
||||
import { ReactNode, useEffect } from "react";
|
||||
import { RainbowThemeProvider } from "@app/components/shared/RainbowThemeProvider";
|
||||
import { FileContextProvider } from "@app/contexts/FileContext";
|
||||
import { NavigationProvider } from "@app/contexts/NavigationContext";
|
||||
@@ -21,6 +21,7 @@ import { CookieConsentProvider } from "@app/contexts/CookieConsentContext";
|
||||
import ErrorBoundary from "@app/components/shared/ErrorBoundary";
|
||||
import { useScarfTracking } from "@app/hooks/useScarfTracking";
|
||||
import { useAppInitialization } from "@app/hooks/useAppInitialization";
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
|
||||
// Component to initialize scarf tracking (must be inside AppConfigProvider)
|
||||
function ScarfTrackingInitializer() {
|
||||
@@ -34,6 +35,30 @@ function AppInitializer() {
|
||||
return null;
|
||||
}
|
||||
|
||||
function BrandingAssetManager() {
|
||||
const { favicon, logo192, manifestHref } = useLogoAssets();
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
const setLinkHref = (selector: string, href: string) => {
|
||||
const link = document.querySelector<HTMLLinkElement>(selector);
|
||||
if (link && link.getAttribute('href') !== href) {
|
||||
link.setAttribute('href', href);
|
||||
}
|
||||
};
|
||||
|
||||
setLinkHref('link[rel="icon"]', favicon);
|
||||
setLinkHref('link[rel="shortcut icon"]', favicon);
|
||||
setLinkHref('link[rel="apple-touch-icon"]', logo192);
|
||||
setLinkHref('link[rel="manifest"]', manifestHref);
|
||||
}, [favicon, logo192, manifestHref]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Avoid requirement to have props which are required in app providers anyway
|
||||
type AppConfigProviderOverrides = Omit<AppConfigProviderProps, 'children' | 'retryOptions'>;
|
||||
|
||||
@@ -62,6 +87,7 @@ export function AppProviders({ children, appConfigRetryOptions, appConfigProvide
|
||||
<ScarfTrackingInitializer />
|
||||
<FileContextProvider enableUrlSync={true} enablePersistence={true}>
|
||||
<AppInitializer />
|
||||
<BrandingAssetManager />
|
||||
<ToolRegistryProvider>
|
||||
<NavigationProvider>
|
||||
<FilesModalProvider>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import styles from '@app/components/fileEditor/FileEditor.module.css';
|
||||
import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
|
||||
import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
|
||||
@@ -25,6 +25,7 @@ const AddFileCard = ({
|
||||
const { openFilesModal } = useFilesModalContext();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const [isUploadHover, setIsUploadHover] = useState(false);
|
||||
const { wordmark } = useLogoAssets();
|
||||
const terminology = useFileActionTerminology();
|
||||
const icons = useFileActionIcons();
|
||||
|
||||
@@ -91,7 +92,7 @@ const AddFileCard = ({
|
||||
{/* Stirling PDF Branding */}
|
||||
<Group gap="xs" align="center">
|
||||
<img
|
||||
src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
|
||||
src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
|
||||
alt="Stirling PDF"
|
||||
style={{ height: '2.2rem', width: 'auto' }}
|
||||
/>
|
||||
|
||||
@@ -4,7 +4,7 @@ import HistoryIcon from '@mui/icons-material/History';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileManagerContext } from '@app/contexts/FileManagerContext';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
|
||||
import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
|
||||
|
||||
@@ -13,6 +13,7 @@ const EmptyFilesState: React.FC = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const { onLocalFileClick } = useFileManagerContext();
|
||||
const [isUploadHover, setIsUploadHover] = useState(false);
|
||||
const { wordmark } = useLogoAssets();
|
||||
const terminology = useFileActionTerminology();
|
||||
const icons = useFileActionIcons();
|
||||
|
||||
@@ -57,7 +58,7 @@ const EmptyFilesState: React.FC = () => {
|
||||
{/* Stirling PDF Logo */}
|
||||
<Group gap="xs" align="center">
|
||||
<img
|
||||
src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
|
||||
src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
|
||||
alt="Stirling PDF"
|
||||
style={{ height: '2.2rem', width: 'auto' }}
|
||||
/>
|
||||
|
||||
@@ -127,4 +127,45 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Settings section container for sticky footer support */
|
||||
.settings-section-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-section-content {
|
||||
flex: 1;
|
||||
padding-bottom: 5rem; /* Space for sticky footer */
|
||||
}
|
||||
|
||||
/* Sticky footer for save/discard buttons */
|
||||
.settings-sticky-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--modal-content-bg);
|
||||
border-top: 1px solid var(--modal-header-border);
|
||||
padding: 1rem 2rem;
|
||||
margin: 0 -2rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 10;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.settings-sticky-footer {
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0 -1rem;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
.settings-section-content {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
import React, { useMemo, useState, useEffect, useCallback } from 'react';
|
||||
import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
@@ -9,19 +9,21 @@ import '@app/components/shared/AppConfigModal.css';
|
||||
import { useIsMobile } from '@app/hooks/useIsMobile';
|
||||
import { Z_INDEX_OVER_FULLSCREEN_SURFACE, Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
|
||||
import { useLicenseAlert } from '@app/hooks/useLicenseAlert';
|
||||
import { UnsavedChangesProvider, useUnsavedChanges } from '@app/contexts/UnsavedChangesContext';
|
||||
|
||||
interface AppConfigModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
|
||||
const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
|
||||
const [active, setActive] = useState<NavKey>('general');
|
||||
const isMobile = useIsMobile();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { config } = useAppConfig();
|
||||
const licenseAlert = useLicenseAlert();
|
||||
const { confirmIfDirty } = useUnsavedChanges();
|
||||
|
||||
// Extract section from URL path (e.g., /settings/people -> people)
|
||||
const getSectionFromPath = (pathname: string): NavKey | null => {
|
||||
@@ -97,11 +99,22 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
|
||||
return null;
|
||||
}, [configNavSections, active]);
|
||||
|
||||
const handleClose = () => {
|
||||
const handleClose = useCallback(async () => {
|
||||
const canProceed = await confirmIfDirty();
|
||||
if (!canProceed) return;
|
||||
|
||||
// Navigate back to home when closing modal
|
||||
navigate('/', { replace: true });
|
||||
onClose();
|
||||
};
|
||||
}, [confirmIfDirty, navigate, onClose]);
|
||||
|
||||
const handleNavigation = useCallback(async (key: NavKey) => {
|
||||
const canProceed = await confirmIfDirty();
|
||||
if (!canProceed) return;
|
||||
|
||||
setActive(key);
|
||||
navigate(`/settings/${key}`);
|
||||
}, [confirmIfDirty, navigate]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -148,11 +161,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
|
||||
const navItemContent = (
|
||||
<div
|
||||
key={item.key}
|
||||
onClick={() => {
|
||||
// Allow navigation even when disabled - the content inside will be disabled
|
||||
setActive(item.key);
|
||||
navigate(`/settings/${item.key}`);
|
||||
}}
|
||||
onClick={() => handleNavigation(item.key)}
|
||||
className={`modal-nav-item ${isMobile ? 'mobile' : ''}`}
|
||||
style={{
|
||||
background: isActive ? colors.navItemActiveBg : 'transparent',
|
||||
@@ -226,4 +235,13 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
|
||||
);
|
||||
};
|
||||
|
||||
// Wrapper component that provides the UnsavedChangesContext
|
||||
const AppConfigModal: React.FC<AppConfigModalProps> = (props) => {
|
||||
return (
|
||||
<UnsavedChangesProvider>
|
||||
<AppConfigModalInner {...props} />
|
||||
</UnsavedChangesProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppConfigModal;
|
||||
|
||||
@@ -5,8 +5,9 @@ import LocalIcon from '@app/components/shared/LocalIcon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileHandler } from '@app/hooks/useFileHandler';
|
||||
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { useLogoPath } from '@app/hooks/useLogoPath';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import { useLogoVariant } from '@app/hooks/useLogoVariant';
|
||||
import { useFileManager } from '@app/hooks/useFileManager';
|
||||
import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
|
||||
import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
|
||||
@@ -19,6 +20,8 @@ const LandingPage = () => {
|
||||
const { openFilesModal } = useFilesModalContext();
|
||||
const [isUploadHover, setIsUploadHover] = React.useState(false);
|
||||
const logoPath = useLogoPath();
|
||||
const logoVariant = useLogoVariant();
|
||||
const { wordmark } = useLogoAssets();
|
||||
const { loadRecentFiles } = useFileManager();
|
||||
const [hasRecents, setHasRecents] = React.useState<boolean>(false);
|
||||
const terminology = useFileActionTerminology();
|
||||
@@ -87,24 +90,25 @@ const LandingPage = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={logoPath}
|
||||
alt="Stirling PDF Logo"
|
||||
{logoVariant === 'modern' && (
|
||||
<div
|
||||
style={{
|
||||
height: 'auto',
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<img
|
||||
src={logoPath}
|
||||
alt="Stirling PDF Logo"
|
||||
style={{
|
||||
height: 'auto',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
|
||||
style={{
|
||||
@@ -123,7 +127,7 @@ const LandingPage = () => {
|
||||
{/* Stirling PDF Branding */}
|
||||
<Group gap="xs" align="center">
|
||||
<img
|
||||
src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
|
||||
src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
|
||||
alt="Stirling PDF"
|
||||
style={{ height: '2.2rem', width: 'auto' }}
|
||||
/>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useTooltipPosition } from '@app/hooks/useTooltipPosition';
|
||||
import { TooltipTip } from '@app/types/tips';
|
||||
import { TooltipContent } from '@app/components/shared/tooltip/TooltipContent';
|
||||
import { useSidebarContext } from '@app/contexts/SidebarContext';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import styles from '@app/components/shared/tooltip/Tooltip.module.css';
|
||||
import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
|
||||
|
||||
@@ -58,6 +58,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
||||
}) => {
|
||||
const [internalOpen, setInternalOpen] = useState(false);
|
||||
const [isPinned, setIsPinned] = useState(false);
|
||||
const { tooltipLogo } = useLogoAssets();
|
||||
|
||||
const triggerRef = useRef<HTMLElement | null>(null);
|
||||
const tooltipRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -352,7 +353,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
||||
<div className={styles['tooltip-logo']}>
|
||||
{header.logo || (
|
||||
<img
|
||||
src={`${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg`}
|
||||
src={tooltipLogo}
|
||||
alt="Stirling PDF"
|
||||
style={{ width: '1.4rem', height: '1.4rem', display: 'block' }}
|
||||
/>
|
||||
|
||||
@@ -7,8 +7,8 @@ import FullscreenToolList from '@app/components/tools/FullscreenToolList';
|
||||
import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
|
||||
import { ToolId } from '@app/types/toolId';
|
||||
import { useFocusTrap } from '@app/hooks/useFocusTrap';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { useLogoPath } from '@app/hooks/useLogoPath';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import { Tooltip } from '@app/components/shared/Tooltip';
|
||||
import '@app/components/tools/ToolPanel.css';
|
||||
import { ToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
|
||||
@@ -54,9 +54,8 @@ const FullscreenToolSurface = ({
|
||||
|
||||
const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
|
||||
const brandIconSrc = useLogoPath();
|
||||
const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
|
||||
colorScheme === "dark" ? "White" : "Black"
|
||||
}Text.svg`;
|
||||
const { wordmark } = useLogoAssets();
|
||||
const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
|
||||
|
||||
const handleExit = () => {
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { LogoVariant } from '@app/services/preferencesService';
|
||||
|
||||
export const LOGO_FOLDER_BY_VARIANT: Record<LogoVariant, string> = {
|
||||
modern: 'modern-logo',
|
||||
classic: 'classic-logo',
|
||||
};
|
||||
|
||||
export const ensureLogoVariant = (value?: string | null): LogoVariant => {
|
||||
return value === 'classic' ? 'classic' : 'modern';
|
||||
};
|
||||
|
||||
export const getLogoFolder = (variant?: LogoVariant | null): string => {
|
||||
return LOGO_FOLDER_BY_VARIANT[ensureLogoVariant(variant)];
|
||||
};
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
||||
import { Modal, Text, Button, Group, Stack } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface UnsavedChangesContextType {
|
||||
isDirty: boolean;
|
||||
setIsDirty: (dirty: boolean) => void;
|
||||
/**
|
||||
* Call this before navigating away or closing.
|
||||
* Returns a promise that resolves to true if safe to proceed, false if blocked.
|
||||
*/
|
||||
confirmIfDirty: () => Promise<boolean>;
|
||||
/**
|
||||
* Reset dirty state (call after successful save)
|
||||
*/
|
||||
markClean: () => void;
|
||||
}
|
||||
|
||||
const UnsavedChangesContext = createContext<UnsavedChangesContextType | undefined>(undefined);
|
||||
|
||||
interface UnsavedChangesProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function UnsavedChangesProvider({ children }: UnsavedChangesProviderProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isDirty, setIsDirty] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
|
||||
|
||||
const confirmIfDirty = useCallback((): Promise<boolean> => {
|
||||
if (!isDirty) {
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setResolvePromise(() => resolve);
|
||||
setModalOpen(true);
|
||||
});
|
||||
}, [isDirty]);
|
||||
|
||||
const markClean = useCallback(() => {
|
||||
setIsDirty(false);
|
||||
}, []);
|
||||
|
||||
const handleDiscard = () => {
|
||||
setModalOpen(false);
|
||||
setIsDirty(false);
|
||||
resolvePromise?.(true);
|
||||
setResolvePromise(null);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setModalOpen(false);
|
||||
resolvePromise?.(false);
|
||||
setResolvePromise(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<UnsavedChangesContext.Provider value={{ isDirty, setIsDirty, confirmIfDirty, markClean }}>
|
||||
{children}
|
||||
<Modal
|
||||
opened={modalOpen}
|
||||
onClose={handleCancel}
|
||||
title={t('admin.settings.unsavedChanges.title', 'Unsaved Changes')}
|
||||
centered
|
||||
size="sm"
|
||||
zIndex={1500}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="sm">
|
||||
{t('admin.settings.unsavedChanges.message', 'You have unsaved changes. Do you want to discard them?')}
|
||||
</Text>
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button variant="default" onClick={handleCancel}>
|
||||
{t('admin.settings.unsavedChanges.cancel', 'Keep Editing')}
|
||||
</Button>
|
||||
<Button color="red" onClick={handleDiscard}>
|
||||
{t('admin.settings.unsavedChanges.discard', 'Discard Changes')}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</UnsavedChangesContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useUnsavedChanges(): UnsavedChangesContextType {
|
||||
const context = useContext(UnsavedChangesContext);
|
||||
if (!context) {
|
||||
throw new Error('useUnsavedChanges must be used within an UnsavedChangesProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { LOGO_FOLDER_BY_VARIANT } from '@app/constants/logo';
|
||||
import type { LogoVariant } from '@app/services/preferencesService';
|
||||
|
||||
/**
|
||||
* Tests that all required logo assets exist for each logo variant.
|
||||
* This ensures that when useLogoAssets returns paths, those files actually exist.
|
||||
*/
|
||||
describe('useLogoAssets - Logo Asset Files', () => {
|
||||
const publicDir = path.resolve(__dirname, '../../../public');
|
||||
|
||||
// All asset files that useLogoAssets references
|
||||
const requiredAssets = [
|
||||
'logo-tooltip.svg',
|
||||
'Firstpage.png',
|
||||
'favicon.ico',
|
||||
'logo192.png',
|
||||
'logo512.png',
|
||||
'StirlingPDFLogoWhiteText.svg',
|
||||
'StirlingPDFLogoBlackText.svg',
|
||||
'StirlingPDFLogoGreyText.svg',
|
||||
];
|
||||
|
||||
const logoVariants: LogoVariant[] = ['modern', 'classic'];
|
||||
|
||||
describe.each(logoVariants)('%s logo variant', (variant) => {
|
||||
const folder = LOGO_FOLDER_BY_VARIANT[variant];
|
||||
const folderPath = path.join(publicDir, folder);
|
||||
|
||||
test(`folder "${folder}" should exist`, () => {
|
||||
expect(fs.existsSync(folderPath)).toBe(true);
|
||||
});
|
||||
|
||||
test.each(requiredAssets)('should have %s', (assetName) => {
|
||||
const assetPath = path.join(folderPath, assetName);
|
||||
expect(
|
||||
fs.existsSync(assetPath),
|
||||
`Missing asset: ${folder}/${assetName}`
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('manifest files', () => {
|
||||
test('manifest.json should exist for modern variant', () => {
|
||||
const manifestPath = path.join(publicDir, 'manifest.json');
|
||||
expect(fs.existsSync(manifestPath)).toBe(true);
|
||||
});
|
||||
|
||||
test('manifest-classic.json should exist for classic variant', () => {
|
||||
const manifestPath = path.join(publicDir, 'manifest-classic.json');
|
||||
expect(fs.existsSync(manifestPath)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useMemo } from 'react';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { getLogoFolder } from '@app/constants/logo';
|
||||
import { useLogoVariant } from '@app/hooks/useLogoVariant';
|
||||
|
||||
export function useLogoAssets() {
|
||||
const logoVariant = useLogoVariant();
|
||||
|
||||
return useMemo(() => {
|
||||
const folder = getLogoFolder(logoVariant);
|
||||
const folderPath = `${BASE_PATH}/${folder}`;
|
||||
|
||||
return {
|
||||
logoVariant,
|
||||
folder,
|
||||
folderPath,
|
||||
getAssetPath: (name: string) => `${folderPath}/${name}`,
|
||||
tooltipLogo: `${folderPath}/logo-tooltip.svg`,
|
||||
firstPage: `${folderPath}/Firstpage.png`,
|
||||
favicon: `${folderPath}/favicon.ico`,
|
||||
logo192: `${folderPath}/logo192.png`,
|
||||
logo512: `${folderPath}/logo512.png`,
|
||||
wordmark: {
|
||||
white: `${folderPath}/StirlingPDFLogoWhiteText.svg`,
|
||||
black: `${folderPath}/StirlingPDFLogoBlackText.svg`,
|
||||
grey: `${folderPath}/StirlingPDFLogoGreyText.svg`,
|
||||
},
|
||||
manifestHref: logoVariant === 'classic'
|
||||
? `${BASE_PATH}/manifest-classic.json`
|
||||
: `${BASE_PATH}/manifest.json`,
|
||||
};
|
||||
}, [logoVariant]);
|
||||
}
|
||||
|
||||
@@ -1,31 +1,22 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useAppConfig } from '@app/contexts/AppConfigContext';
|
||||
import { useMantineColorScheme } from '@mantine/core';
|
||||
import { BASE_PATH } from '@app/constants/app';
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
|
||||
/**
|
||||
* Hook to get the correct logo path based on app config (logo style) and theme (light/dark)
|
||||
*
|
||||
* Logo styles:
|
||||
* - classic: branding/old/favicon.svg (classic S logo - default)
|
||||
* - modern: StirlingPDFLogoNoText{Light|Dark}.svg (minimalist modern design)
|
||||
* - classic: classic S logo stored in /classic-logo
|
||||
* - modern: minimalist logo stored in /modern-logo
|
||||
*
|
||||
* @returns The path to the appropriate logo SVG file
|
||||
*/
|
||||
export function useLogoPath(): string {
|
||||
const { config } = useAppConfig();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const { folderPath } = useLogoAssets();
|
||||
|
||||
return useMemo(() => {
|
||||
const logoStyle = config?.logoStyle || 'classic';
|
||||
|
||||
if (logoStyle === 'classic') {
|
||||
// Classic logo (old favicon) - same for both light and dark modes
|
||||
return `${BASE_PATH}/branding/old/favicon.svg`;
|
||||
}
|
||||
|
||||
// Modern logo - different for light and dark modes
|
||||
const themeSuffix = colorScheme === 'dark' ? 'Dark' : 'Light';
|
||||
return `${BASE_PATH}/branding/StirlingPDFLogoNoText${themeSuffix}.svg`;
|
||||
}, [config?.logoStyle, colorScheme]);
|
||||
return `${folderPath}/StirlingPDFLogoNoText${themeSuffix}.svg`;
|
||||
}, [colorScheme, folderPath]);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useMemo } from 'react';
|
||||
import { usePreferences } from '@app/contexts/PreferencesContext';
|
||||
import { useAppConfig } from '@app/contexts/AppConfigContext';
|
||||
import type { LogoVariant } from '@app/services/preferencesService';
|
||||
import { ensureLogoVariant } from '@app/constants/logo';
|
||||
|
||||
export function useLogoVariant(): LogoVariant {
|
||||
const { preferences } = usePreferences();
|
||||
const { config } = useAppConfig();
|
||||
|
||||
return useMemo(() => {
|
||||
// Check local storage first, then fall back to server config
|
||||
const preferenceVariant = preferences.logoVariant;
|
||||
const configVariant = config?.logoStyle;
|
||||
return ensureLogoVariant(preferenceVariant ?? configVariant);
|
||||
}, [config?.logoStyle, preferences.logoVariant]);
|
||||
}
|
||||
|
||||
@@ -4,11 +4,11 @@ import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
|
||||
import { Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useSidebarContext } from "@app/contexts/SidebarContext";
|
||||
import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
|
||||
import { BASE_PATH } from "@app/constants/app";
|
||||
import { useBaseUrl } from "@app/hooks/useBaseUrl";
|
||||
import { useIsMobile } from "@app/hooks/useIsMobile";
|
||||
import { useAppConfig } from "@app/contexts/AppConfigContext";
|
||||
import { useLogoPath } from "@app/hooks/useLogoPath";
|
||||
import { useLogoAssets } from '@app/hooks/useLogoAssets';
|
||||
import { useCookieConsentContext } from "@app/contexts/CookieConsentContext";
|
||||
import { useFileContext } from "@app/contexts/file/fileHooks";
|
||||
import { useNavigationActions } from "@app/contexts/NavigationContext";
|
||||
@@ -84,9 +84,8 @@ export default function HomePage() {
|
||||
|
||||
const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
|
||||
const brandIconSrc = useLogoPath();
|
||||
const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
|
||||
colorScheme === "dark" ? "White" : "Black"
|
||||
}Text.svg`;
|
||||
const { wordmark } = useLogoAssets();
|
||||
const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
|
||||
|
||||
const handleSelectMobileView = useCallback((view: MobileView) => {
|
||||
setActiveMobileView(view);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from '@app/constants/toolPanel';
|
||||
import { type ThemeMode, getSystemTheme } from '@app/constants/theme';
|
||||
|
||||
export type LogoVariant = 'modern' | 'classic';
|
||||
|
||||
export interface UserPreferences {
|
||||
autoUnzip: boolean;
|
||||
autoUnzipFileLimit: number;
|
||||
@@ -14,6 +16,7 @@ export interface UserPreferences {
|
||||
hasSeenCookieBanner: boolean;
|
||||
hideUnavailableTools: boolean;
|
||||
hideUnavailableConversions: boolean;
|
||||
logoVariant: LogoVariant | null;
|
||||
}
|
||||
|
||||
export const DEFAULT_PREFERENCES: UserPreferences = {
|
||||
@@ -29,6 +32,7 @@ export const DEFAULT_PREFERENCES: UserPreferences = {
|
||||
hasSeenCookieBanner: false,
|
||||
hideUnavailableTools: false,
|
||||
hideUnavailableConversions: false,
|
||||
logoVariant: null,
|
||||
};
|
||||
|
||||
const STORAGE_KEY = 'stirlingpdf_preferences';
|
||||
|
||||
Reference in New Issue
Block a user