gh-162 overworked filebrowser directory visualization and multiselect…

… actions
toniebox-reverse-engineering · Nov 12, 2024 · 745b916 · 745b916
1 parent c6f6b76
commit 745b916
Showing 9 changed files with 158 additions and 85 deletions.
diff --git a/public/translations/de.json b/public/translations/de.json
@@ -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!",
@@ -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": {

diff --git a/public/translations/en.json b/public/translations/en.json
@@ -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": {

diff --git a/public/translations/es.json b/public/translations/es.json
@@ -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": {

diff --git a/public/translations/fr.json b/public/translations/fr.json
@@ -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": {

diff --git a/src/components/utils/FileBrowser.tsx b/src/components/utils/FileBrowser.tsx
@@ -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";
@@ -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,
@@ -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 : "") +
@@ -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],
@@ -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>

diff --git a/src/components/utils/SelectFileFileBrowser.tsx b/src/components/utils/SelectFileFileBrowser.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Table, Tooltip, Input, Breadcrumb, InputRef, theme, Empty } from "antd";
 import { Key } from "antd/es/table/interface";
 import { SortOrder } from "antd/es/table/interface";
-import { CloseOutlined, PlayCircleOutlined } from "@ant-design/icons";
+import { CloseOutlined, FolderOutlined, PlayCircleOutlined } from "@ant-design/icons";
 
 import { Record } from "../../types/fileBrowserTypes";
 
@@ -325,26 +325,36 @@ export const SelectFileFileBrowser: React.FC<{
                 record && (
                     <div key={`name-${record.name}`}>
                         <div className="showSmallDevicesOnly">
-                            <div>
+                            <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>
+                                <div>{record.tonieInfo?.model}</div>
                                 <div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
-                                    {record.isDir ? "[" + record.name + "]" : record.name}{" "}
+                                    {(record.tonieInfo?.series ? record.tonieInfo?.series : "") +
+                                        (record.tonieInfo?.episode ? " - " + record.tonieInfo?.episode : "")}
                                 </div>
                             </div>
-
-                            <div>{record.tonieInfo?.model}</div>
-                            <div style={{ wordBreak: record.isDir ? "normal" : "break-word" }}>
-                                {(record.tonieInfo?.series ? record.tonieInfo?.series : "") +
-                                    (record.tonieInfo?.episode ? " - " + record.tonieInfo?.episode : "")}
-                            </div>
                         </div>
                         <div className="showMediumDevicesOnly">
-                            <div>
+                            <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 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}{" "}
+                                    {record.isDir ? <>{record.name}</> : record.name}
                                 </div>
                             </div>
                         </div>
-                        <div className="showBigDevicesOnly">{record.isDir ? "[" + record.name + "]" : record.name}</div>
                     </div>
                 ),
             filteredValue: [filterText],

diff --git a/src/pages/tonies/ContentPage.tsx b/src/pages/tonies/ContentPage.tsx
@@ -40,7 +40,10 @@ export const ContentPage = () => {
                             justifyContent: "space-between",
                             alignContent: "center",
                             flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: 8,
                             alignItems: "center",
+                            marginBottom: 8,
                         }}
                     >
                         <h1>{t("tonies.content.title")}</h1>

diff --git a/src/pages/tonies/SystemSoundsPage.tsx b/src/pages/tonies/SystemSoundsPage.tsx
@@ -91,7 +91,10 @@ export const SystemSoundsPage = () => {
                             justifyContent: "space-between",
                             alignContent: "center",
                             flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: 8,
                             alignItems: "center",
+                            marginBottom: 8,
                         }}
                     >
                         <h1>{t("tonies.system-sounds.title")}</h1>

diff --git a/src/pages/tonies/ToniesPage.tsx b/src/pages/tonies/ToniesPage.tsx
@@ -127,7 +127,10 @@ export const ToniesPage = () => {
                             justifyContent: "space-between",
                             alignContent: "center",
                             flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: 8,
                             alignItems: "center",
+                            marginBottom: 8,
                         }}
                     >
                         <h1 style={{ width: "200px" }}>{t("tonies.title")}</h1>