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>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<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="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<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 React, { useState } from "react";
|
||||||
import { ActionIcon, Stack, Tooltip } from "@mantine/core";
|
import { ActionIcon, Stack, Tooltip, Divider } from "@mantine/core";
|
||||||
import MenuBookIcon from "@mui/icons-material/MenuBook";
|
import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
|
||||||
import AppsIcon from "@mui/icons-material/Apps";
|
import AppsIcon from "@mui/icons-material/AppsRounded";
|
||||||
import SettingsIcon from "@mui/icons-material/Settings";
|
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 { useRainbowThemeContext } from "./RainbowThemeProvider";
|
||||||
import rainbowStyles from '../../styles/rainbow.module.css';
|
import rainbowStyles from '../../styles/rainbow.module.css';
|
||||||
import AppConfigModal from './AppConfigModal';
|
import AppConfigModal from './AppConfigModal';
|
||||||
|
import './QuickAccessBar.css';
|
||||||
|
|
||||||
interface QuickAccessBarProps {
|
interface QuickAccessBarProps {
|
||||||
onToolsClick: () => void;
|
onToolsClick: () => void;
|
||||||
@ -16,6 +19,17 @@ interface QuickAccessBarProps {
|
|||||||
readerMode: boolean;
|
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 = ({
|
const QuickAccessBar = ({
|
||||||
onToolsClick,
|
onToolsClick,
|
||||||
onReaderToggle,
|
onReaderToggle,
|
||||||
@ -26,54 +40,174 @@ const QuickAccessBar = ({
|
|||||||
}: QuickAccessBarProps) => {
|
}: QuickAccessBarProps) => {
|
||||||
const { isRainbowMode } = useRainbowThemeContext();
|
const { isRainbowMode } = useRainbowThemeContext();
|
||||||
const [configModalOpen, setConfigModalOpen] = useState(false);
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`h-screen flex flex-col w-20 ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
|
className={`h-screen flex flex-col w-20 ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
|
||||||
style={{
|
style={{
|
||||||
padding: '1rem 0.5rem',
|
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">
|
<Stack gap="lg" align="center" className="flex-1">
|
||||||
{/* All Tools Button */}
|
{buttonConfigs.map((config, index) => (
|
||||||
<div className="flex flex-col items-center gap-1">
|
<React.Fragment key={config.id}>
|
||||||
<ActionIcon
|
<Tooltip label={config.tooltip} position="right">
|
||||||
size="xl"
|
<div className="flex flex-col items-center gap-1">
|
||||||
variant={leftPanelView === 'toolPicker' && !readerMode ? "filled" : "subtle"}
|
<ActionIcon
|
||||||
onClick={onToolsClick}
|
size={config.size || 'xl'}
|
||||||
>
|
variant="subtle"
|
||||||
<AppsIcon sx={{ fontSize: 28 }} />
|
onClick={config.onClick}
|
||||||
</ActionIcon>
|
style={getButtonStyle(config)}
|
||||||
<span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Tools</span>
|
className={activeButton === config.id ? 'activeIconScale' : ''}
|
||||||
</div>
|
>
|
||||||
|
<span className="iconContainer">
|
||||||
{/* Reader Mode Button */}
|
{config.icon}
|
||||||
<div className="flex flex-col items-center gap-1">
|
</span>
|
||||||
<ActionIcon
|
</ActionIcon>
|
||||||
size="xl"
|
<span className="text-xs text-center leading-tight" style={getTextStyle(config)}>
|
||||||
variant={readerMode ? "filled" : "subtle"}
|
{config.name}
|
||||||
onClick={onReaderToggle}
|
</span>
|
||||||
>
|
</div>
|
||||||
<MenuBookIcon sx={{ fontSize: 28 }} />
|
</Tooltip>
|
||||||
</ActionIcon>
|
|
||||||
<span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Read</span>
|
{/* Add divider after Automate button (index 3) */}
|
||||||
</div>
|
{index === 3 && <Divider size="sm" />}
|
||||||
|
|
||||||
{/* Spacer */}
|
{/* Add spacer before Config button (index 7) */}
|
||||||
<div className="flex-1" />
|
{index === 5 && <div className="flex-1" />}
|
||||||
|
</React.Fragment>
|
||||||
{/* 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>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<AppConfigModal
|
<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/PageEditor";
|
||||||
declare module "../components/Viewer";
|
declare module "../components/Viewer";
|
||||||
declare module "*.js";
|
declare module "*.js";
|
||||||
|
declare module '*.module.css';
|
||||||
@ -63,7 +63,7 @@ export default function HomePage() {
|
|||||||
}, [clearToolSelection]);
|
}, [clearToolSelection]);
|
||||||
|
|
||||||
const handleReaderToggle = useCallback(() => {
|
const handleReaderToggle = useCallback(() => {
|
||||||
setReaderMode(!readerMode);
|
setReaderMode(true);
|
||||||
}, [readerMode]);
|
}, [readerMode]);
|
||||||
|
|
||||||
const handleViewChange = useCallback((view: string) => {
|
const handleViewChange = useCallback((view: string) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user