mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-08-02 13:48:15 +02:00
V2 Navbar Styling
This commit is contained in:
EthanHealy01
parent
b8d582a1e3
commit
a53cce80b6
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,700,0,0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
||||
13
frontend/src/components/shared/QuickAccessBar.css
Normal file
13
frontend/src/components/shared/QuickAccessBar.css
Normal file
@ -0,0 +1,13 @@
|
||||
.activeIconScale {
|
||||
transform: scale(1.3);
|
||||
transition: transform 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
@ -1,11 +1,14 @@
|
||||
import React, { useState } from "react";
|
||||
import { ActionIcon, Stack, Tooltip } from "@mantine/core";
|
||||
import MenuBookIcon from "@mui/icons-material/MenuBook";
|
||||
import AppsIcon from "@mui/icons-material/Apps";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import { ActionIcon, Stack, Tooltip, Divider } from "@mantine/core";
|
||||
import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
|
||||
import AppsIcon from "@mui/icons-material/AppsRounded";
|
||||
import SettingsIcon from "@mui/icons-material/SettingsRounded";
|
||||
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesomeRounded";
|
||||
import FolderIcon from "@mui/icons-material/FolderRounded";
|
||||
import { useRainbowThemeContext } from "./RainbowThemeProvider";
|
||||
import rainbowStyles from '../../styles/rainbow.module.css';
|
||||
import AppConfigModal from './AppConfigModal';
|
||||
import './QuickAccessBar.css';
|
||||
|
||||
interface QuickAccessBarProps {
|
||||
onToolsClick: () => void;
|
||||
@ -16,6 +19,17 @@ interface QuickAccessBarProps {
|
||||
readerMode: boolean;
|
||||
}
|
||||
|
||||
interface ButtonConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: React.ReactNode;
|
||||
tooltip: string;
|
||||
color: string;
|
||||
isRound?: boolean;
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const QuickAccessBar = ({
|
||||
onToolsClick,
|
||||
onReaderToggle,
|
||||
@ -26,54 +40,174 @@ const QuickAccessBar = ({
|
||||
}: QuickAccessBarProps) => {
|
||||
const { isRainbowMode } = useRainbowThemeContext();
|
||||
const [configModalOpen, setConfigModalOpen] = useState(false);
|
||||
const [activeButton, setActiveButton] = useState<string>('tools');
|
||||
|
||||
const buttonConfigs: ButtonConfig[] = [
|
||||
{
|
||||
id: 'tools',
|
||||
name: 'All Tools',
|
||||
icon: <AppsIcon sx={{ fontSize: 20 }} />,
|
||||
tooltip: 'View all available tools',
|
||||
color: '#1E88E5',
|
||||
size: 'lg',
|
||||
onClick: () => {
|
||||
setActiveButton('tools');
|
||||
onReaderToggle();
|
||||
onToolsClick();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'read',
|
||||
name: 'Read',
|
||||
icon: <MenuBookIcon sx={{ fontSize: 20 }} />,
|
||||
tooltip: 'Read documents',
|
||||
color: '#4CAF50',
|
||||
size: 'lg',
|
||||
onClick: () => {
|
||||
setActiveButton('read');
|
||||
onReaderToggle();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'sign',
|
||||
name: 'Sign',
|
||||
icon:
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>
|
||||
signature
|
||||
</span>,
|
||||
tooltip: 'Sign your document',
|
||||
color: '#3BA99C',
|
||||
size: 'lg',
|
||||
onClick: () => setActiveButton('sign')
|
||||
},
|
||||
{
|
||||
id: 'automate',
|
||||
name: 'Automate',
|
||||
icon: <AutoAwesomeIcon sx={{ fontSize: 20 }} />,
|
||||
tooltip: 'Automate workflows',
|
||||
color: '#A576E3',
|
||||
size: 'lg',
|
||||
onClick: () => setActiveButton('automate')
|
||||
},
|
||||
{
|
||||
id: 'files',
|
||||
name: 'Files',
|
||||
icon: <FolderIcon sx={{ fontSize: 20 }} />,
|
||||
tooltip: 'Manage files',
|
||||
color: '', // the round icons are blue always, this logic lives in getButtonStyle
|
||||
isRound: true,
|
||||
size: 'lg',
|
||||
onClick: () => setActiveButton('files')
|
||||
},
|
||||
/* Access isn't going to be available yet */
|
||||
|
||||
/*
|
||||
{
|
||||
id: 'access',
|
||||
name: 'Access',
|
||||
icon: <GroupIcon sx={{ fontSize: 20 }} />,
|
||||
tooltip: 'Manage access and permissions',
|
||||
color: '#00BCD4',
|
||||
isRound: true,
|
||||
size: 'lg',
|
||||
onClick: () => setActiveButton('access')
|
||||
},
|
||||
*/
|
||||
{
|
||||
id: 'activity',
|
||||
name: 'Activity',
|
||||
icon:
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>
|
||||
vital_signs
|
||||
</span>,
|
||||
tooltip: 'View activity and analytics',
|
||||
color: '',
|
||||
isRound: true,
|
||||
size: 'lg',
|
||||
onClick: () => setActiveButton('activity')
|
||||
},
|
||||
{
|
||||
id: 'config',
|
||||
name: 'Config',
|
||||
icon: <SettingsIcon sx={{ fontSize: 16 }} />,
|
||||
tooltip: 'Configure settings',
|
||||
color: '#9CA3AF',
|
||||
size: 'lg',
|
||||
onClick: () => {
|
||||
setConfigModalOpen(true);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const getButtonStyle = (config: ButtonConfig) => {
|
||||
const isActive = activeButton === config.id;
|
||||
if (config.isRound && isActive) {
|
||||
return {
|
||||
backgroundColor: '#D3E7F7',
|
||||
color: '#0A8BFF',
|
||||
borderRadius: '50%',
|
||||
};
|
||||
}
|
||||
return {
|
||||
backgroundColor: isActive ? config.color : '#9CA3AF',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: config.isRound ? '50%' : '8px',
|
||||
};
|
||||
};
|
||||
|
||||
const getTextStyle = (config: ButtonConfig) => {
|
||||
const isActive = activeButton === config.id;
|
||||
return {
|
||||
marginTop: '12px',
|
||||
fontSize: '12px',
|
||||
color: isActive ? 'var(--text-primary)' : 'var(--color-gray-700)',
|
||||
fontWeight: isActive ? 'bold' : 'normal',
|
||||
textRendering: 'optimizeLegibility' as const,
|
||||
fontSynthesis: 'none' as const
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`h-screen flex flex-col w-20 ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
|
||||
style={{
|
||||
padding: '1rem 0.5rem',
|
||||
backgroundColor: 'var(--bg-muted)'
|
||||
backgroundColor: 'var(--bg-muted)',
|
||||
width: '80px',
|
||||
minWidth: '80px',
|
||||
maxWidth: '80px'
|
||||
}}
|
||||
>
|
||||
<Stack gap="lg" align="center" className="flex-1">
|
||||
{/* All Tools Button */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<ActionIcon
|
||||
size="xl"
|
||||
variant={leftPanelView === 'toolPicker' && !readerMode ? "filled" : "subtle"}
|
||||
onClick={onToolsClick}
|
||||
>
|
||||
<AppsIcon sx={{ fontSize: 28 }} />
|
||||
</ActionIcon>
|
||||
<span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Tools</span>
|
||||
</div>
|
||||
|
||||
{/* Reader Mode Button */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<ActionIcon
|
||||
size="xl"
|
||||
variant={readerMode ? "filled" : "subtle"}
|
||||
onClick={onReaderToggle}
|
||||
>
|
||||
<MenuBookIcon sx={{ fontSize: 28 }} />
|
||||
</ActionIcon>
|
||||
<span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Read</span>
|
||||
</div>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Config Modal Button (for testing) */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
variant="subtle"
|
||||
onClick={() => setConfigModalOpen(true)}
|
||||
>
|
||||
<SettingsIcon sx={{ fontSize: 20 }} />
|
||||
</ActionIcon>
|
||||
<span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Config</span>
|
||||
</div>
|
||||
{buttonConfigs.map((config, index) => (
|
||||
<React.Fragment key={config.id}>
|
||||
<Tooltip label={config.tooltip} position="right">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<ActionIcon
|
||||
size={config.size || 'xl'}
|
||||
variant="subtle"
|
||||
onClick={config.onClick}
|
||||
style={getButtonStyle(config)}
|
||||
className={activeButton === config.id ? 'activeIconScale' : ''}
|
||||
>
|
||||
<span className="iconContainer">
|
||||
{config.icon}
|
||||
</span>
|
||||
</ActionIcon>
|
||||
<span className="text-xs text-center leading-tight" style={getTextStyle(config)}>
|
||||
{config.name}
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{/* Add divider after Automate button (index 3) */}
|
||||
{index === 3 && <Divider size="sm" />}
|
||||
|
||||
{/* Add spacer before Config button (index 7) */}
|
||||
{index === 5 && <div className="flex-1" />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<AppConfigModal
|
||||
|
||||
1
frontend/src/global.d.ts
vendored
1
frontend/src/global.d.ts
vendored
@ -4,3 +4,4 @@ declare module "../tools/Merge";
|
||||
declare module "../components/PageEditor";
|
||||
declare module "../components/Viewer";
|
||||
declare module "*.js";
|
||||
declare module '*.module.css';
|
||||
@ -63,7 +63,7 @@ export default function HomePage() {
|
||||
}, [clearToolSelection]);
|
||||
|
||||
const handleReaderToggle = useCallback(() => {
|
||||
setReaderMode(!readerMode);
|
||||
setReaderMode(true);
|
||||
}, [readerMode]);
|
||||
|
||||
const handleViewChange = useCallback((view: string) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user