Initial set up
This commit is contained in:
Reece
@@ -0,0 +1,128 @@
|
||||
import React from 'react';
|
||||
import { Menu, Loader, Group, Text, Checkbox, ActionIcon } from '@mantine/core';
|
||||
import EditNoteIcon from '@mui/icons-material/EditNote';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
||||
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
||||
import FitText from './FitText';
|
||||
|
||||
interface PageEditorFileDropdownProps {
|
||||
displayName: string;
|
||||
allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
|
||||
selectedFileIds: Set<string>;
|
||||
onToggleSelection: (fileId: string) => void;
|
||||
onReorder: (fromIndex: number, toIndex: number) => void;
|
||||
switchingTo?: string | null;
|
||||
viewOptionStyle: React.CSSProperties;
|
||||
}
|
||||
|
||||
export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
|
||||
displayName,
|
||||
allFiles,
|
||||
selectedFileIds,
|
||||
onToggleSelection,
|
||||
onReorder,
|
||||
switchingTo,
|
||||
viewOptionStyle,
|
||||
}) => {
|
||||
const handleCheckboxClick = (e: React.MouseEvent, fileId: string) => {
|
||||
e.stopPropagation();
|
||||
onToggleSelection(fileId);
|
||||
};
|
||||
|
||||
const handleMoveUp = (e: React.MouseEvent, index: number) => {
|
||||
e.stopPropagation();
|
||||
if (index > 0) {
|
||||
onReorder(index, index - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveDown = (e: React.MouseEvent, index: number) => {
|
||||
e.stopPropagation();
|
||||
if (index < allFiles.length - 1) {
|
||||
onReorder(index, index + 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu trigger="click" position="bottom" width="30rem">
|
||||
<Menu.Target>
|
||||
<div style={{...viewOptionStyle, cursor: 'pointer'}}>
|
||||
{switchingTo === "pageEditor" ? (
|
||||
<Loader size="xs" />
|
||||
) : (
|
||||
<EditNoteIcon fontSize="small" />
|
||||
)}
|
||||
<FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
|
||||
<KeyboardArrowDownIcon fontSize="small" />
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown style={{
|
||||
backgroundColor: 'var(--right-rail-bg)',
|
||||
border: '1px solid var(--border-subtle)',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||||
maxHeight: '50vh',
|
||||
overflowY: 'auto'
|
||||
}}>
|
||||
{allFiles.map((file, index) => {
|
||||
const itemName = file?.name || 'Untitled';
|
||||
const isSelected = selectedFileIds.has(file.fileId);
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === allFiles.length - 1;
|
||||
|
||||
return (
|
||||
<Menu.Item
|
||||
key={file.fileId}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
cursor: 'default',
|
||||
backgroundColor: isSelected ? 'var(--bg-hover)' : undefined,
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1, minWidth: 0 }}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={() => {}}
|
||||
onClick={(e) => handleCheckboxClick(e, file.fileId)}
|
||||
size="sm"
|
||||
/>
|
||||
<div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
|
||||
<FitText text={itemName} fontSize={14} minimumFontScale={0.7} />
|
||||
</div>
|
||||
{file.versionNumber && file.versionNumber > 1 && (
|
||||
<Text size="xs" c="dimmed">
|
||||
v{file.versionNumber}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
disabled={isFirst}
|
||||
onClick={(e) => handleMoveUp(e, index)}
|
||||
title="Move up"
|
||||
>
|
||||
<ArrowUpwardIcon fontSize="small" />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
disabled={isLast}
|
||||
onClick={(e) => handleMoveDown(e, index)}
|
||||
title="Move down"
|
||||
>
|
||||
<ArrowDownwardIcon fontSize="small" />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
</Group>
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
@@ -7,6 +7,8 @@ import EditNoteIcon from "@mui/icons-material/EditNote";
|
||||
import FolderIcon from "@mui/icons-material/Folder";
|
||||
import { WorkbenchType, isValidWorkbench } from '../../types/workbench';
|
||||
import { FileDropdownMenu } from './FileDropdownMenu';
|
||||
import { PageEditorFileDropdown } from './PageEditorFileDropdown';
|
||||
import { usePageEditor } from '../../contexts/PageEditorContext';
|
||||
|
||||
|
||||
const viewOptionStyle: React.CSSProperties = {
|
||||
@@ -25,7 +27,15 @@ const createViewOptions = (
|
||||
switchingTo: WorkbenchType | null,
|
||||
activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>,
|
||||
currentFileIndex: number,
|
||||
onFileSelect?: (index: number) => void
|
||||
onFileSelect?: (index: number) => void,
|
||||
pageEditorState?: {
|
||||
allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
|
||||
selectedFileIds: Set<string>;
|
||||
selectedCount: number;
|
||||
totalCount: number;
|
||||
onToggleSelection: (fileId: string) => void;
|
||||
onReorder: (fromIndex: number, toIndex: number) => void;
|
||||
}
|
||||
) => {
|
||||
const currentFile = activeFiles[currentFileIndex];
|
||||
const isInViewer = currentView === 'viewer';
|
||||
@@ -57,20 +67,39 @@ const createViewOptions = (
|
||||
value: "viewer",
|
||||
};
|
||||
|
||||
// Page Editor dropdown logic
|
||||
const isInPageEditor = currentView === 'pageEditor';
|
||||
const hasPageEditorFiles = pageEditorState && pageEditorState.totalCount > 0;
|
||||
const showPageEditorDropdown = isInPageEditor && hasPageEditorFiles;
|
||||
|
||||
let pageEditorDisplayName = 'Page Editor';
|
||||
if (isInPageEditor && pageEditorState) {
|
||||
if (pageEditorState.selectedCount === pageEditorState.totalCount) {
|
||||
pageEditorDisplayName = `${pageEditorState.selectedCount} file${pageEditorState.selectedCount !== 1 ? 's' : ''}`;
|
||||
} else {
|
||||
pageEditorDisplayName = `${pageEditorState.selectedCount}/${pageEditorState.totalCount} selected`;
|
||||
}
|
||||
}
|
||||
|
||||
const pageEditorOption = {
|
||||
label: (
|
||||
label: showPageEditorDropdown ? (
|
||||
<PageEditorFileDropdown
|
||||
displayName={pageEditorDisplayName}
|
||||
allFiles={pageEditorState!.allFiles}
|
||||
selectedFileIds={pageEditorState!.selectedFileIds}
|
||||
onToggleSelection={pageEditorState!.onToggleSelection}
|
||||
onReorder={pageEditorState!.onReorder}
|
||||
switchingTo={switchingTo}
|
||||
viewOptionStyle={viewOptionStyle}
|
||||
/>
|
||||
) : (
|
||||
<div style={viewOptionStyle}>
|
||||
{currentView === "pageEditor" ? (
|
||||
<>
|
||||
{switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
|
||||
<span>Page Editor</span>
|
||||
</>
|
||||
{switchingTo === "pageEditor" ? (
|
||||
<Loader size="xs" />
|
||||
) : (
|
||||
<>
|
||||
{switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
|
||||
<span>Page Editor</span>
|
||||
</>
|
||||
<EditNoteIcon fontSize="small" />
|
||||
)}
|
||||
<span>{pageEditorDisplayName}</span>
|
||||
</div>
|
||||
),
|
||||
value: "pageEditor",
|
||||
@@ -121,6 +150,17 @@ const TopControls = ({
|
||||
const { isRainbowMode } = useRainbowThemeContext();
|
||||
const [switchingTo, setSwitchingTo] = useState<WorkbenchType | null>(null);
|
||||
|
||||
// Get page editor state for dropdown
|
||||
const {
|
||||
selectedFileIds,
|
||||
toggleFileSelection,
|
||||
reorderFiles: pageEditorReorderFiles,
|
||||
} = usePageEditor();
|
||||
|
||||
// Convert Set to array for counting
|
||||
const selectedCount = selectedFileIds.size;
|
||||
const totalCount = activeFiles.length;
|
||||
|
||||
const handleViewChange = useCallback((view: string) => {
|
||||
if (!isValidWorkbench(view)) {
|
||||
return;
|
||||
@@ -147,7 +187,21 @@ const TopControls = ({
|
||||
<div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
|
||||
<div className="flex justify-center mt-[0.5rem]">
|
||||
<SegmentedControl
|
||||
data={createViewOptions(currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect)}
|
||||
data={createViewOptions(
|
||||
currentView,
|
||||
switchingTo,
|
||||
activeFiles,
|
||||
currentFileIndex,
|
||||
onFileSelect,
|
||||
{
|
||||
allFiles: activeFiles,
|
||||
selectedFileIds,
|
||||
selectedCount,
|
||||
totalCount,
|
||||
onToggleSelection: toggleFileSelection,
|
||||
onReorder: (fromIndex, toIndex) => pageEditorReorderFiles(fromIndex, toIndex, activeFiles.map(f => f.fileId)),
|
||||
}
|
||||
)}
|
||||
value={currentView}
|
||||
onChange={handleViewChange}
|
||||
color="blue"
|
||||
|
||||
Reference in New Issue
Block a user