saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 06:09:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'V2' into dynamicIcons_Test

Browse Source
This commit is contained in:
Anthony Stirling 2025-08-25 15:48:16 +01:00 committed by GitHub
commit 77e922f439
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/shared/QuickAccessBar.tsx
View File

@ -52,18 +52,19 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
handleReaderToggle(); handleReaderToggle();
} }
}, },
{ // TODO: Add sign
id: 'sign', //{
name: t("quickAccess.sign", "Sign"), // id: 'sign',
icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />, // name: t("quickAccess.sign", "Sign"),
size: 'lg', // icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
isRound: false, // size: 'lg',
type: 'navigation', // isRound: false,
onClick: () => { // type: 'navigation',
setActiveButton('sign'); // onClick: () => {
handleToolSelect('sign'); // setActiveButton('sign');
} // handleToolSelect('sign');
}, // }
//},
{ {
id: 'automate', id: 'automate',
name: t("quickAccess.automate", "Automate"), name: t("quickAccess.automate", "Automate"),
@ -85,15 +86,16 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
type: 'modal', type: 'modal',
onClick: handleFilesButtonClick onClick: handleFilesButtonClick
}, },
{ //TODO: Activity
id: 'activity', //{
name: t("quickAccess.activity", "Activity"), // id: 'activity',
icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />, // name: t("quickAccess.activity", "Activity"),
isRound: true, // icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
size: 'lg', // isRound: true,
type: 'navigation', // size: 'lg',
onClick: () => setActiveButton('activity') // type: 'navigation',
}, // onClick: () => setActiveButton('activity')
//},
{ {
id: 'config', id: 'config',
name: t("quickAccess.config", "Config"), name: t("quickAccess.config", "Config"),

30
frontend/src/components/tools/ToolPicker.tsx
View File

@ -25,19 +25,39 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
const quickAccessRef = useRef<HTMLDivElement>(null); const quickAccessRef = useRef<HTMLDivElement>(null);
const allToolsRef = useRef<HTMLDivElement>(null); const allToolsRef = useRef<HTMLDivElement>(null);
// On resize adjust headers height to offset height // Keep header heights in sync with any dynamic size changes
useLayoutEffect(() => { useLayoutEffect(() => {
const update = () => { const update = () => {
if (quickHeaderRef.current) { if (quickHeaderRef.current) {
setQuickHeaderHeight(quickHeaderRef.current.offsetHeight); setQuickHeaderHeight(quickHeaderRef.current.offsetHeight || 0);
} }
if (allHeaderRef.current) { if (allHeaderRef.current) {
setAllHeaderHeight(allHeaderRef.current.offsetHeight); setAllHeaderHeight(allHeaderRef.current.offsetHeight || 0);
} }
}; };
update(); update();
// Update on window resize
window.addEventListener("resize", update); window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
// Update on element resize (e.g., font load, badge count change, zoom)
const observers: ResizeObserver[] = [];
if (typeof ResizeObserver !== "undefined") {
const observe = (el: HTMLDivElement | null, cb: () => void) => {
if (!el) return;
const ro = new ResizeObserver(() => cb());
ro.observe(el);
observers.push(ro);
};
observe(quickHeaderRef.current, update);
observe(allHeaderRef.current, update);
}
return () => {
window.removeEventListener("resize", update);
observers.forEach(o => o.disconnect());
};
}, []); }, []);
const { sections: visibleSections } = useToolSections(filteredTools); const { sections: visibleSections } = useToolSections(filteredTools);
@ -152,7 +172,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
ref={allHeaderRef} ref={allHeaderRef}
style={{ style={{
position: "sticky", position: "sticky",
top: quickSection ? quickHeaderHeight - 1: 0, top: quickSection ? quickHeaderHeight -1 : 0,
zIndex: 2, zIndex: 2,
borderTop: `0.0625rem solid var(--tool-header-border)`, borderTop: `0.0625rem solid var(--tool-header-border)`,
borderBottom: `0.0625rem solid var(--tool-header-border)`, borderBottom: `0.0625rem solid var(--tool-header-border)`,