saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-22 19:46:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make top controls always visible, but only allow page editor outside of tools

Browse Source
This commit is contained in:
James Brunton 2025-09-18 15:51:15 +01:00
parent edeed49e0b
commit d8ff2c0aa8
2 changed files with 92 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
frontend/src/components/shared/TopControls.tsx
View File

@ -19,57 +19,65 @@ const viewOptionStyle = {
// Build view options showing text always // Build view options showing text always
const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null) => [ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null, isToolSelected: boolean) => {
{ const options = [
label: ( {
<div style={viewOptionStyle as React.CSSProperties}> label: (
{switchingTo === "viewer" ? ( <div style={viewOptionStyle as React.CSSProperties}>
<Loader size="xs" /> {switchingTo === "viewer" ? (
) : ( <Loader size="xs" />
<VisibilityIcon fontSize="small" /> ) : (
)} <VisibilityIcon fontSize="small" />
<span>Viewer</span> )}
</div> <span>Viewer</span>
), </div>
value: "viewer", ),
}, value: "viewer",
{ },
label: ( {
<div style={viewOptionStyle as React.CSSProperties}> label: (
{currentView === "pageEditor" ? ( <div style={viewOptionStyle as React.CSSProperties}>
<> {currentView === "fileEditor" ? (
{switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />} <>
<span>Page Editor</span> {switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />}
</> <span>Active Files</span>
) : ( </>
<> ) : (
{switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />} <>
<span>Page Editor</span> {switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />}
</> <span>Active Files</span>
)} </>
</div> )}
), </div>
value: "pageEditor", ),
}, value: "fileEditor",
{ },
label: ( ];
<div style={viewOptionStyle as React.CSSProperties}>
{currentView === "fileEditor" ? ( // Only add Page Editor option when not in a tool
<> if (!isToolSelected) {
{switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />} options.splice(1, 0, {
<span>Active Files</span> label: (
</> <div style={viewOptionStyle as React.CSSProperties}>
) : ( {currentView === "pageEditor" ? (
<> <>
{switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />} {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
<span>Active Files</span> <span>Page Editor</span>
</> </>
)} ) : (
</div> <>
), {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
value: "fileEditor", <span>Page Editor</span>
}, </>
]; )}
</div>
),
value: "pageEditor",
});
}
return options;
};
interface TopControlsProps { interface TopControlsProps {
currentView: WorkbenchType; currentView: WorkbenchType;
@ -91,7 +99,7 @@ const TopControls = ({
if (!isValidWorkbench(view)) { if (!isValidWorkbench(view)) {
return; return;
} }
const workbench = view; const workbench = view;
// Show immediate feedback // Show immediate feedback
@ -111,39 +119,37 @@ const TopControls = ({
return ( return (
<div className="absolute left-0 w-full top-0 z-[100] pointer-events-none"> <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
{!isToolSelected && ( <div className="flex justify-center mt-[0.5rem]">
<div className="flex justify-center mt-[0.5rem]"> <SegmentedControl
<SegmentedControl data={createViewOptions(currentView, switchingTo, isToolSelected)}
data={createViewOptions(currentView, switchingTo)} value={currentView}
value={currentView} onChange={handleViewChange}
onChange={handleViewChange} color="blue"
color="blue" fullWidth
fullWidth className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''} style={{
style={{ transition: 'all 0.2s ease',
transition: 'all 0.2s ease', opacity: switchingTo ? 0.8 : 1,
opacity: switchingTo ? 0.8 : 1, pointerEvents: 'auto'
pointerEvents: 'auto' }}
}} styles={{
styles={{ root: {
root: { borderRadius: 9999,
borderRadius: 9999, maxHeight: '2.6rem',
maxHeight: '2.6rem', },
}, control: {
control: { borderRadius: 9999,
borderRadius: 9999, },
}, indicator: {
indicator: { borderRadius: 9999,
borderRadius: 9999, maxHeight: '2rem',
maxHeight: '2rem', },
}, label: {
label: { paddingTop: '0rem',
paddingTop: '0rem', }
} }}
}} />
/> </div>
</div>
)}
</div> </div>
); );
}; };

2
frontend/src/types/workbench.ts
View File

@ -9,4 +9,4 @@ export const getDefaultWorkbench = (): WorkbenchType => 'fileEditor';
// Type guard using the same source of truth // Type guard using the same source of truth
export const isValidWorkbench = (value: string): value is WorkbenchType => { export const isValidWorkbench = (value: string): value is WorkbenchType => {
return WORKBENCH_TYPES.includes(value as WorkbenchType); return WORKBENCH_TYPES.includes(value as WorkbenchType);
}; };