Adopt shared WebUI layout primitives
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
|
||||
import { ArrowUp, ChevronRight, Copy, Download, File, Folder, Home, KeyRound, Link2, ListFilter, MoveRight, Plus, RefreshCw, Search, Share2, Trash2, UploadCloud } from "lucide-react";
|
||||
import {
|
||||
import { FormGrid, ActionToolbar,
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
DocumentationHelpLink,
|
||||
@@ -2089,7 +2089,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
const syncBlocker = workingBlocker || (!activeSpace ? "Select a file space first." : "") || (!canUpload ? "File upload permission is required to import synchronized content." : "") || (activeSpaceIsConnector && connectorSpaceSelectedItem?.kind !== "file" ? "Select one remote file to synchronize." : "");
|
||||
|
||||
const toolbar =
|
||||
<div className="file-manager-toolbar" aria-label="i18n:govoplan-files.file_actions.9e1b94c5">
|
||||
<ActionToolbar className="file-manager-toolbar" aria-label="i18n:govoplan-files.file_actions.9e1b94c5">
|
||||
<Button variant="primary" onClick={() => openDialog("upload", toolbarTarget())} disabled={Boolean(uploadBlocker)} disabledReason={uploadBlocker}><UploadCloud size={16} aria-hidden="true" /> i18n:govoplan-files.upload.8bdf057f</Button>
|
||||
<Button
|
||||
onClick={() => activeSpaceIsConnector ? void syncConnectorSpaceSelection() : void openConnectorSyncDialog(toolbarTarget())}
|
||||
@@ -2115,7 +2115,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
</Button>
|
||||
}
|
||||
<DocumentationHelpLink reference={FILES_WORKFLOW_DOCUMENTATION} />
|
||||
</div>;
|
||||
</ActionToolbar>;
|
||||
|
||||
|
||||
const uploadBusyLabel = uploadPhase === "unpacking" ? "i18n:govoplan-files.unpacking_zip_archive.698095f4" : "i18n:govoplan-files.uploading_files.6536791d";
|
||||
@@ -2209,11 +2209,11 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
return (
|
||||
<div className="connector-space-panel">
|
||||
<div className="connector-browser connector-space-browser">
|
||||
<div className="connector-browser-toolbar">
|
||||
<ActionToolbar className="connector-browser-toolbar">
|
||||
<Button onClick={browseConnectorSpaceParent} disabled={connectorSpaceParentDisabled}><ArrowUp size={15} aria-hidden="true" /> i18n:govoplan-files.up.2038bdec</Button>
|
||||
<span className="connector-browser-path" title={connectorSpaceLocationLabel}>{connectorSpaceLocationLabel}</span>
|
||||
<Button onClick={() => void loadConnectorSpaceContents(activeSpace)} disabled={busy || connectorSpaceLoading}><RefreshCw size={15} aria-hidden="true" /> i18n:govoplan-files.refresh.56e3badc</Button>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
{connectorSpaceError && <p className="field-error connector-browser-error">{connectorSpaceError}</p>}
|
||||
<div className="connector-browser-list" role="list" aria-label="i18n:govoplan-files.connector_space_files.dbb0ab24">
|
||||
{connectorSpaceLoading &&
|
||||
@@ -2595,7 +2595,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
</FormField>
|
||||
}
|
||||
|
||||
<div className="archive-selection-toolbar">
|
||||
<ActionToolbar className="archive-selection-toolbar">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -2606,7 +2606,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
<span>Select all files</span>
|
||||
</label>
|
||||
<span>{selectedArchivePaths.size} of {archivePreview.file_count} selected</span>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
|
||||
<div className="archive-entry-list" role="list" aria-label="Archive contents">
|
||||
{archivePreview.entries.map((entry) => {
|
||||
@@ -2696,11 +2696,11 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
</div>
|
||||
|
||||
<div className="connector-browser">
|
||||
<div className="connector-browser-toolbar">
|
||||
<ActionToolbar className="connector-browser-toolbar">
|
||||
<Button onClick={browseConnectorParent} disabled={connectorParentDisabled}><ArrowUp size={15} aria-hidden="true" /> i18n:govoplan-files.up.2038bdec</Button>
|
||||
<span className="connector-browser-path" title={connectorLocationLabel}>{connectorLocationLabel}</span>
|
||||
<Button onClick={() => connectorProfileId && void browseConnector(connectorProfileId, connectorPath, connectorLibraryId)} disabled={busy || connectorLoading || !connectorProfileId}><RefreshCw size={15} aria-hidden="true" /> i18n:govoplan-files.refresh.56e3badc</Button>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
{connectorError && <p className="field-error connector-browser-error">{connectorError}</p>}
|
||||
<div className="connector-browser-list" role="list" aria-label="i18n:govoplan-files.connector_files.8f351f5d">
|
||||
{connectorLoading &&
|
||||
@@ -2776,11 +2776,11 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
</div>
|
||||
|
||||
<div className="connector-browser">
|
||||
<div className="connector-browser-toolbar">
|
||||
<ActionToolbar className="connector-browser-toolbar">
|
||||
<Button onClick={browseConnectorParent} disabled={connectorParentDisabled}><ArrowUp size={15} aria-hidden="true" /> i18n:govoplan-files.up.2038bdec</Button>
|
||||
<span className="connector-browser-path" title={connectorLocationLabel}>{connectorLocationLabel}</span>
|
||||
<Button onClick={() => connectorProfileId && void browseConnector(connectorProfileId, connectorPath, connectorLibraryId)} disabled={busy || connectorLoading || !connectorProfileId}><RefreshCw size={15} aria-hidden="true" /> i18n:govoplan-files.refresh.56e3badc</Button>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
{connectorError && <p className="field-error connector-browser-error">{connectorError}</p>}
|
||||
<div className="connector-browser-list" role="list" aria-label="i18n:govoplan-files.connector_folders.960cbb03">
|
||||
{connectorLoading &&
|
||||
@@ -2854,7 +2854,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
{dialog === "transfer" && transferDialogState &&
|
||||
<FileDialog title={`${transferMode === "copy" ? "i18n:govoplan-files.copy.af74f7c5" : "i18n:govoplan-files.move.76cdb950"} selection`} onClose={closeDialog}>
|
||||
<p className="muted">i18n:govoplan-files.choose_a_destination_space_and_folder_folders_ar.45158643</p>
|
||||
<div className="form-grid two">
|
||||
<FormGrid columns={2} collapseAt="standard" className="">
|
||||
<FormField label="i18n:govoplan-files.destination_space.92b63970" help="i18n:govoplan-files.select_the_space_that_will_receive_the_selected_.0a8bea8f">
|
||||
<select value={transferDialogState.targetSpaceId} onChange={(event) => setTransferDialogState((current) => current ? { ...current, targetSpaceId: event.target.value, targetFolder: "" } : current)}>
|
||||
{spaces.filter((space) => !isConnectorSpace(space)).map((space) => <option key={space.id} value={space.id}>{space.label}</option>)}
|
||||
@@ -2870,7 +2870,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
onSelect={(folderPath) => setTransferDialogState((current) => current ? { ...current, targetFolder: folderPath } : current)} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</FormGrid>
|
||||
<div className="button-row compact-actions align-end">
|
||||
<Button onClick={closeDialog} disabled={busy}>i18n:govoplan-files.cancel.77dfd213</Button>
|
||||
<Button variant="primary" onClick={() => void handleTransferDialogSubmit()} disabled={busy}>{transferMode === "copy" ? "i18n:govoplan-files.copy.af74f7c5" : "i18n:govoplan-files.move.76cdb950"}</Button>
|
||||
@@ -2893,7 +2893,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
{dialog === "rename" &&
|
||||
<FileDialog title="i18n:govoplan-files.bulk_rename_selected_items.5e79d694" onClose={closeDialog}>
|
||||
<p className="muted">i18n:govoplan-files.bulk_rename_changes_managed_display_paths_only_i.8cf34a6b</p>
|
||||
<div className="form-grid two">
|
||||
<FormGrid columns={2} collapseAt="standard" className="">
|
||||
<FormField label="i18n:govoplan-files.mode.a7b93d21" help="i18n:govoplan-files.choose_how_the_selected_names_should_be_changed.0231854f">
|
||||
<select value={renameMode} onChange={(event) => setRenameMode(event.target.value as RenameMode)}>
|
||||
<option value="prefix">i18n:govoplan-files.add_prefix.672452bc</option>
|
||||
@@ -2904,7 +2904,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
|
||||
{renameMode === "prefix" && <FormField label="i18n:govoplan-files.prefix.90eceb01"><input value={renamePrefix} onChange={(event) => setRenamePrefix(event.target.value)} /></FormField>}
|
||||
{renameMode === "suffix" && <FormField label="i18n:govoplan-files.suffix.885db975"><input value={renameSuffix} onChange={(event) => setRenameSuffix(event.target.value)} /></FormField>}
|
||||
{renameMode === "replace" && <><FormField label="i18n:govoplan-files.find.df251b06"><input value={renameFind} onChange={(event) => setRenameFind(event.target.value)} /></FormField><FormField label="i18n:govoplan-files.replacement.c385e347"><input value={renameReplacement} onChange={(event) => setRenameReplacement(event.target.value)} /></FormField></>}
|
||||
</div>
|
||||
</FormGrid>
|
||||
{selectedFolderPaths.size > 0 &&
|
||||
<ToggleSwitch label="i18n:govoplan-files.apply_recursively_to_folder_contents.c7076984" checked={renameRecursive} onChange={setRenameRecursive} disabled={busy} />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user