Skip to content

Commit

Permalink
toniebox-reverse-engineeringgh-162 overworked filebrowser directory v…
Browse files Browse the repository at this point in the history 
…isualization and multiselect actions
  • Loading branch information
@henryk86
henryk86 committed Nov 12, 2024
1 parent c6f6b76 commit 745b916
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 85 deletions.
4 changes: 2 additions & 2 deletions public/translations/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@
"encodeFiles": {
"addFiles": "Dateien hinzufügen",
"cancel": "Abbrechen",
"encode": "Konvertiere",
"encode": "Konvertieren",
"encodeFiles": "Markierte Dateien in eine taf-Datei konvertieren. Nur die folgenden Dateitypen werden berücksichtigt: ",
"encoding": "Kodierung",
"encodingFailed": "Konvertierung fehlgeschlagen!",
Expand Down Expand Up @@ -243,7 +243,7 @@
"title": "Mehrfachauswahl-Aktionen"
},
"openDirectory": {
"text": "Doppelklicke auf ein Verzeichnis, um es zu öffnen. Verzeichnisse sind in eckigen Klammern gekennzeichnet und zeigen <DIR> als Größe.",
"text": "Doppelklicke auf ein Verzeichnis, um es zu öffnen. Verzeichnisse haben ein Ordner-Icon vorangestellt und zeigen <DIR> als Größe.",
"title": "Verzeichnis öffnen"
},
"openTAFViewer": {
Expand Down
2 changes: 1 addition & 1 deletion public/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
"title": "Multi-Selection Actions"
},
"openDirectory": {
"text": "Double-click on a directory to open it. Directories are marked by square brackets and show <DIR> as size.",
"text": "Double-click on a directory to open it. Directories have a folder icon in front and show <DIR> as their size.",
"title": "Open Directory"
},
"openTAFViewer": {
Expand Down
2 changes: 1 addition & 1 deletion public/translations/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
"title": "Acciones de selección múltiple"
},
"openDirectory": {
"text": "Haz doble clic en un directorio para abrirlo. Los directorios están marcados con corchetes y muestran <DIR> como tamaño.",
"text": "Haz doble clic en un directorio para abrirlo. Los directorios tienen un icono de carpeta al frente y muestran <DIR> como tamaño.",
"title": "Abrir directorio"
},
"openTAFViewer": {
Expand Down
2 changes: 1 addition & 1 deletion public/translations/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
"title": "Actions de sélection multiple"
},
"openDirectory": {
"text": "Double-cliquez sur un répertoire pour l'ouvrir. Les répertoires sont marqués par des crochets et affichent <DIR> comme taille.",
"text": "Double-cliquez sur un répertoire pour l'ouvrir. Les répertoires ont une icône de dossier devant et affichent <DIR> comme taille.",
"title": "Ouvrir le répertoire"
},
"openTAFViewer": {
Expand Down
190 changes: 122 additions & 68 deletions src/components/utils/FileBrowser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ import {
DeleteOutlined,
EditOutlined,
FolderAddOutlined,
FolderOutlined,
FormOutlined,
InboxOutlined,
NodeExpandOutlined,
PlayCircleOutlined,
QuestionCircleOutlined,
TruckOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { Key, SortOrder } from "antd/es/table/interface";
import { DefaultOptionType } from "antd/es/select";
Expand Down Expand Up @@ -1561,57 +1563,7 @@ export const FileBrowser: React.FC<{

var columns: any[] = [
{
title:
selectedRowKeys.length > 0 ? (
<div style={{ display: "flex", gap: 8, minHeight: 32 }}>
{special === "library" &&
files.filter((item) => selectedRowKeys.includes(item.name) && !item.isDir).length > 0 ? (
<Tooltip key="moveMultiple" title={t("fileBrowser.moveMultiple")}>
<Button
icon={<NodeExpandOutlined />}
onClick={() => showMoveDialog("")}
disabled={selectedRowKeys.length === 0}
/>
</Tooltip>
) : (
""
)}
<Tooltip key="deleteMultiple" title={t("fileBrowser.deleteMultiple")}>
<Button
icon={<DeleteOutlined />}
onClick={handleMultipleDelete}
disabled={selectedRowKeys.length === 0}
/>
</Tooltip>
{withinTafBoundaries(
files.filter(
(item) =>
selectedRowKeys.includes(item.name) &&
supportedAudioExtensionsForEncoding.some((ext) =>
item.name.toLowerCase().endsWith(ext)
)
).length
) && special === "library" ? (
<Tooltip
key="encodeFiles"
title={
t("fileBrowser.encodeFiles.encodeFiles") +
supportedAudioExtensionsForEncoding.join(", ")
}
>
<Button
icon={<CloudSyncOutlined />}
onClick={showFileEncodeModal}
disabled={selectedRowKeys.length === 0}
/>
</Tooltip>
) : (
""
)}
</div>
) : (
<div style={{ minHeight: 32 }}></div>
),
title: <div style={{ minHeight: 32 }}></div>,
dataIndex: ["tonieInfo", "picture"],
key: "picture",
sorter: undefined,
Expand Down Expand Up @@ -1657,13 +1609,15 @@ export const FileBrowser: React.FC<{
record && (
<div key={`name-${record.name}`}>
<div className="showSmallDevicesOnly">
<div>
<div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
{record.isDir ? "[" + record.name + "]" : record.name}{" "}
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex" }}>
{record.isDir ? <FolderOutlined style={{ marginRight: 8 }} /> : ""}
<div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
{record.isDir ? <>{record.name}</> : record.name}
</div>
</div>
{!record.isDir && record.size ? "(" + humanFileSize(record.size) + ")" : ""}
{!record.isDir && record.size ? " (" + humanFileSize(record.size) + ")" : ""}
</div>

<div>{record.tonieInfo?.model}</div>
<div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
{(record.tonieInfo?.series ? record.tonieInfo?.series : "") +
Expand All @@ -1672,15 +1626,25 @@ export const FileBrowser: React.FC<{
<div>{!record.isDir && new Date(record.date * 1000).toLocaleString()}</div>
</div>
<div className="showMediumDevicesOnly">
<div>
<div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
{record.isDir ? "[" + record.name + "]" : record.name}{" "}
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex" }}>
{record.isDir ? <FolderOutlined style={{ marginRight: 8 }} /> : ""}
<div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
{record.isDir ? <>{record.name}</> : record.name}
</div>
</div>
{!record.isDir && record.size ? "(" + humanFileSize(record.size) + ")" : ""}
{!record.isDir && record.size ? " (" + humanFileSize(record.size) + ")" : ""}
</div>
<div>{!record.isDir && new Date(record.date * 1000).toLocaleString()}</div>
</div>
<div className="showBigDevicesOnly">{record.isDir ? "[" + record.name + "]" : record.name}</div>
<div className="showBigDevicesOnly">
<div style={{ display: "flex" }}>
{record.isDir ? <FolderOutlined style={{ marginRight: 8 }} /> : ""}
<div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
{record.isDir ? <>{record.name}</> : record.name}
</div>
</div>
</div>
</div>
),
filteredValue: [filterText],
Expand Down Expand Up @@ -1994,23 +1958,113 @@ export const FileBrowser: React.FC<{
<div style={{ lineHeight: 1.5, marginRight: 16 }}>{t("tonies.currentPath")}</div>
{generateBreadcrumbs(path, handleBreadcrumbClick)}
</div>
<div style={{ display: "flex", justifyContent: "space-between", width: "100%", marginBottom: 8 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
marginBottom: 8,
minHeight: 32,
}}
>
{special === "library" ? (
<div style={{ width: "100%" }}>
<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
<Button size="small" onClick={showCreateDirectoryModal}>
{t("fileBrowser.createDirectory.createDirectory")}
<div style={{ display: "flex", flexWrap: "wrap", gap: 8, minHeight: 32 }}>
{selectedRowKeys.length > 0 ? (
<>
{special === "library" &&
files.filter((item) => selectedRowKeys.includes(item.name) && !item.isDir)
.length > 0 ? (
<Tooltip key="moveMultiple" title={t("fileBrowser.moveMultiple")}>
<Button
size="small"
icon={<NodeExpandOutlined />}
onClick={() => showMoveDialog("")}
disabled={selectedRowKeys.length === 0}
>
<div className="showBigDevicesOnly showMediumDevicesOnly">
{" "}
{t("fileBrowser.move")}
</div>
</Button>
</Tooltip>
) : (
""
)}
<Tooltip key="deleteMultiple" title={t("fileBrowser.deleteMultiple")}>
<Button
size="small"
icon={<DeleteOutlined />}
onClick={handleMultipleDelete}
disabled={selectedRowKeys.length === 0}
>
<div className="showBigDevicesOnly showMediumDevicesOnly">
{" "}
{t("fileBrowser.delete")}
</div>
</Button>
</Tooltip>
{withinTafBoundaries(
files.filter(
(item) =>
selectedRowKeys.includes(item.name) &&
supportedAudioExtensionsForEncoding.some((ext) =>
item.name.toLowerCase().endsWith(ext)
)
).length
) && special === "library" ? (
<Tooltip
key="encodeFiles"
title={
t("fileBrowser.encodeFiles.encodeFiles") +
supportedAudioExtensionsForEncoding.join(", ")
}
>
<Button
size="small"
icon={<CloudSyncOutlined />}
onClick={showFileEncodeModal}
disabled={selectedRowKeys.length === 0}
>
<div className="showBigDevicesOnly showMediumDevicesOnly">
{" "}
{t("fileBrowser.encodeFiles.encode")}
</div>
</Button>
</Tooltip>
) : (
""
)}
</>
) : (
<></>
)}
<Button icon={<FolderAddOutlined />} size="small" onClick={showCreateDirectoryModal}>
<div className="showBigDevicesOnly showMediumDevicesOnly">
{t("fileBrowser.createDirectory.createDirectory")}
</div>
</Button>
<Button size="small" onClick={showUploadFilesDragAndDropModal}>
{t("fileBrowser.upload.showUploadFilesDragNDrop")}
<Button
icon={<UploadOutlined />}
size="small"
onClick={showUploadFilesDragAndDropModal}
>
<div className="showBigDevicesOnly showMediumDevicesOnly">
{t("fileBrowser.upload.showUploadFilesDragNDrop")}
</div>
</Button>
</div>
</div>
) : (
<div></div>
)}
<div>
<Button size="small" icon={<QuestionCircleOutlined />} onClick={() => setIsHelpModalOpen(true)}>
<Button
size="small"
icon={<QuestionCircleOutlined />}
onClick={() => setIsHelpModalOpen(true)}
style={{ marginLeft: 8 }}
>
{t("fileBrowser.help.showHelp")}
</Button>
</div>
Expand Down
Loading

0 comments on commit 745b916

Please sign in to comment.