Merge branch '386-fr-create-a-translation-architecture'

Author: RafaelGB

devops/generateTranslations.py

@@ -13,11 +13,17 @@ import {
 } from "components/Columns";
 import { createDatabase } from "components/index/Database";
 import { DbFolderException } from "errors/AbstractException";
-import { DatabaseCore, InputType, StyleClasses } from "helpers/Constants";
+import {
+  DatabaseCore,
+  DB_ICONS,
+  InputType,
+  StyleClasses,
+} from "helpers/Constants";
 import { createEmitter, Emitter } from "helpers/Emitter";
 import obtainInitialType from "helpers/InitialType";
 import { adapterTFilesToRows, isDatabaseNote } from "helpers/VaultManagement";
 import { getParentWindow } from "helpers/WindowElement";
+import { t } from "lang/helpers";
 import DBFolderPlugin from "main";
 
 import {
@@ -109,7 +115,7 @@ export class DatabaseView extends TextFileView implements HoverParent {
     menu
       .addItem((item) => {
         item
-          .setTitle("Open as markdown")
+          .setTitle(t("menu_pane_open_as_md_action"))
           .setIcon("document")
           .onClick(() => {
             this.plugin.databaseFileModes[
@@ -120,8 +126,8 @@ export class DatabaseView extends TextFileView implements HoverParent {
       })
       .addItem((item) => {
         item
-          .setTitle("Open database settings")
-          .setIcon("gear")
+          .setTitle(t("menu_pane_open_db_settings_action"))
+          .setIcon(DB_ICONS.NAME)
           .onClick(() => {
             new SettingsModal(
               this,

src/DatabaseView.tsx

@@ -177,7 +177,7 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
               labelState={labelState}
               setLabelState={setLabelState}
             />,
-            activeDocument.getElementById(`${view.file.path}-popper`)
+            activeDocument.body
           )
         : null}
     </>

src/components/DefaultHeader.tsx

@@ -20,6 +20,7 @@ import DataviewFilters from "components/reducers/DataviewFilters";
 import { MenuButtonStyle } from "components/styles/NavBarStyles";
 import { SettingsModal } from "Settings";
 import CsvReader from "./navbar/CsvReader";
+import { t } from "lang/helpers";
 
 export function NavBar(navBarProps: NavBarProps) {
   const { table } = navBarProps;
@@ -75,7 +76,7 @@ export function NavBar(navBarProps: NavBarProps) {
             size="large"
             edge="start"
             color="inherit"
-            aria-label="Open table options"
+            aria-label={t("toolbar_menu_aria_label")}
             sx={{ mr: 2 }}
             id="long-button"
             aria-controls={open ? "long-menu" : undefined}
@@ -105,11 +106,11 @@ export function NavBar(navBarProps: NavBarProps) {
           >
             <MenuItem onClick={handleSettingsClick} disableRipple>
               <SettingsIcon {...MenuButtonStyle} />
-              Settings
+              {t("menu_pane_open_db_settings_action")}
             </MenuItem>
             <MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
               <InsertDriveFileIcon {...MenuButtonStyle} />
-              Open as Markdown
+              {t("menu_pane_open_as_md_action")}
             </MenuItem>
             <MenuItem disableRipple>
               {/* CSV buttton download */}

src/components/NavBar.tsx

@@ -11,10 +11,6 @@ export function Database(tableProps: TableDataType) {
   return (
     <React.StrictMode>
       <Table {...tableProps} tableStore={tableStore} />
-      <div
-        id={`${tableProps.view.file.path}-popper`}
-        key={`${tableProps.view.file.path}-popper-key`}
-      ></div>
     </React.StrictMode>
   );
 }

src/components/index/Database.tsx

@@ -3,6 +3,7 @@ import FileUploadIcon from "@mui/icons-material/FileUpload";
 import React, { ChangeEventHandler, MouseEventHandler, useRef } from "react";
 import { MenuButtonStyle } from "components/styles/NavBarStyles";
 import { NavBarProps } from "cdm/MenuBarModel";
+import { t } from "lang/helpers";
 
 export default function CsvReader(navBarProps: NavBarProps) {
   const { table } = navBarProps;
@@ -30,7 +31,7 @@ export default function CsvReader(navBarProps: NavBarProps) {
   return (
     <MenuItem disableRipple onClick={handleFileUpload}>
       <FileUploadIcon {...MenuButtonStyle} />
-      Upload CSV
+      {t("toolbar_menu_import_csv")}
       {/* Hidden input element to trigger file upload */}
       <input
         ref={inputRef}

src/components/navbar/CsvReader.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import { CSVLink } from "react-csv";
 import DownloadIcon from "@mui/icons-material/Download";
 import { MenuButtonStyle } from "components/styles/NavBarStyles";
+import { t } from "lang/helpers";
 
 const CsvWriter = (CsvButtonProps: CsvButtonProps) => {
   const { columns, rows, name } = CsvButtonProps;
@@ -36,7 +37,7 @@ const CsvWriter = (CsvButtonProps: CsvButtonProps) => {
         target="_blank"
       >
         <DownloadIcon {...MenuButtonStyle} />
-        Download CSV
+        {t("toolbar_menu_export_csv")}
       </CSVLink>
     </>
   );

src/components/navbar/CsvWriter.tsx

@@ -43,8 +43,9 @@ const CalendarPortal = (calendarProps: CellComponentProps) => {
   }
 
   const CalendarContainer = (containerProps: any) => {
-    const el = activeDocument.getElementById(`${view.file.path}-popper`);
-    return <Portal container={el}>{containerProps.children}</Portal>;
+    return (
+      <Portal container={activeDocument.body}>{containerProps.children}</Portal>
+    );
   };
   return showDatePicker ? (
     <DatePicker

src/components/portals/CalendarPortal.tsx

@@ -42,8 +42,9 @@ const CalendarTimePortal = (calendarTimeProps: CellComponentProps) => {
   }
 
   const CalendarContainer = (containerProps: any) => {
-    const el = activeDocument.getElementById(`${view.file.path}-popper`);
-    return <Portal container={el}>{containerProps.children}</Portal>;
+    return (
+      <Portal container={activeDocument.body}>{containerProps.children}</Portal>
+    );
   };
 
   return showDatePicker &&

src/components/portals/CalendarTimePortal.tsx

@@ -18,6 +18,7 @@ import ReactDOM from "react-dom";
 import { usePopper } from "react-popper";
 import { Notice } from "obsidian";
 import MenuUpIcon from "components/img/MenuUpIcon";
+import { t } from "lang/helpers";
 
 const DataviewFiltersPortal = (props: DataviewFiltersProps) => {
   const { table } = props;
@@ -150,7 +151,7 @@ const DataviewFiltersPortal = (props: DataviewFiltersProps) => {
                 value={key}
                 key={`MenuItem-OperatorSelector-${value[0]}-${selectorProps.index}`}
               >
-                {value[1]}
+                {t(value[1] as any)}
               </MenuItem>
             );
           })}
@@ -297,10 +298,7 @@ const DataviewFiltersPortal = (props: DataviewFiltersProps) => {
       </Button>
 
       {domReady
-        ? ReactDOM.createPortal(
-            currentFilters(),
-            activeDocument.getElementById(`${view.file.path}-popper`)
-          )
+        ? ReactDOM.createPortal(currentFilters(), activeDocument.body)
         : null}
     </>
   );