Merge branch 'develop' into updating-classnames-and-adding-types-classnames-npm-packages

Author: raclim

client/i18n.js

@@ -70,7 +70,7 @@ export function languageKeyToLabel(lang) {
     it: 'Italiano',
     ja: '日本語',
     ko: '한국어',
-    'pt-BR': 'Português',
+    'pt-BR': 'Português do Brasil',
     sv: 'Svenska',
     'uk-UA': 'Українська',
     'zh-CN': '简体中文',

client/index.jsx

@@ -1,6 +1,6 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
+import { Provider, useSelector } from 'react-redux';
 import { Router } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
@@ -21,6 +21,8 @@ const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
+const DONATE_LOGO_IMAGE_URL = 'https://donorbox.org/images/white_logo.svg';
+
 if (
   window.location.href.indexOf('full') === -1 &&
   window.location.href.indexOf('embed') === -1
@@ -56,30 +58,30 @@ if (
     'background: #f1678e; color: #fff; text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 0 0 5px 5px; line-height: 24px; position: fixed; top: 50%; transform-origin: center; z-index: 9999; overflow: hidden; padding: 8px 22px 8px 18px; right: 20px; left: auto; transform: translate(50%, -50%) rotate(90deg)'
   );
   buttonScript.setAttribute('data-button-cta', 'Donate');
-  buttonScript.setAttribute(
-    'data-img-src',
-    'https://donorbox.org/images/white_logo.svg'
-  );
+  buttonScript.setAttribute('data-img-src', DONATE_LOGO_IMAGE_URL);
 
   document.body.appendChild(buttonScript);
 }
 
 const App = () => {
   const { t } = useTranslation();
-
-  setTimeout(() => {
-    const donateButton = document.getElementsByClassName(
-      'dbox-donation-button'
-    )[0];
-
-    if (donateButton) {
-      const donateLogoImage = document.createElement('img');
-      donateLogoImage.src = 'https://donorbox.org/images/white_logo.svg';
-
-      donateButton.text = t('About.Donate');
-      donateButton.prepend(donateLogoImage);
-    }
-  }, 0);
+  const language = useSelector((state) => state.preferences.language);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const donateButton = document.getElementsByClassName(
+        'dbox-donation-button'
+      )[0];
+
+      if (donateButton) {
+        const donateLogoImage = document.createElement('img');
+        donateLogoImage.src = DONATE_LOGO_IMAGE_URL;
+
+        donateButton.text = t('About.Donate');
+        donateButton.prepend(donateLogoImage);
+      }
+    }, 500);
+  }, [language]);
 
   return (
     <div>

client/modules/IDE/actions/project.js

@@ -413,7 +413,7 @@ export function deleteProject(id) {
       });
   };
 }
-export function changeVisibility(projectId, projectName, visibility) {
+export function changeVisibility(projectId, projectName, visibility, t) {
   return (dispatch, getState) => {
     const state = getState();
 
@@ -443,11 +443,25 @@ export function changeVisibility(projectId, projectName, visibility) {
               name: response.data.name
             });
 
-            dispatch(
-              setToastText(
-                `${projectName} is now ${newVisibility.toLowerCase()}`
-              )
-            );
+            let visibilityLabel;
+
+            switch (newVisibility) {
+              case 'Public':
+                visibilityLabel = t('Visibility.Public.Label');
+                break;
+              case 'Private':
+                visibilityLabel = t('Visibility.Private.Label');
+                break;
+              default:
+                visibilityLabel = newVisibility;
+            }
+
+            const visibilityToastText = t('Visibility.Changed', {
+              projectName,
+              newVisibility: visibilityLabel.toLowerCase()
+            });
+
+            dispatch(setToastText(visibilityToastText));
             dispatch(showToast(2000));
           }
         }

client/modules/IDE/components/Header/Toolbar.jsx

@@ -33,7 +33,6 @@ const Toolbar = (props) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const userIsOwner = user?.username === project.owner?.username;
-
   const showVisibilityDropdown = project?.owner && userIsOwner;
 
   const playButtonClass = classNames({
@@ -51,7 +50,7 @@ const Toolbar = (props) => {
 
   const handleVisibilityChange = useCallback(
     (sketchId, sketchName, newVisibility) => {
-      dispatch(changeVisibility(sketchId, sketchName, newVisibility));
+      dispatch(changeVisibility(sketchId, sketchName, newVisibility, t));
     },
     [changeVisibility]
   );

client/modules/IDE/components/SketchListRowBase.jsx

@@ -91,7 +91,7 @@ const SketchListRowBase = ({
 
   const handleVisibilityChange = useCallback(
     (sketchId, sketchName, newVisibility) => {
-      changeVisibility(sketchId, sketchName, newVisibility);
+      changeVisibility(sketchId, sketchName, newVisibility, t);
     },
     [changeVisibility]
   );

translations/locales/en-US/translations.json

@@ -29,8 +29,8 @@
       "Reference": "Reference",
       "About": "About",
       "ReportBug": "Report a Bug",
-      "ChatOnDiscord":"Chat On Discord",
-      "PostOnTheForum":"Post on the Forum"
+      "ChatOnDiscord": "Chat On Discord",
+      "PostOnTheForum": "Post on the Forum"
     },
     "Lang": "Language",
     "BackEditor": "Back to Editor",
@@ -690,6 +690,7 @@
     "Private": {
       "Description": "Only you can see this sketch.",
       "Label": "Private"
-    }
+    },
+    "Changed": "'{{projectName}}' is now {{newVisibility}}..."
   }
 }

translations/locales/pt-BR/translations.json

@@ -27,7 +27,10 @@
       "Title": "Ajuda",
       "KeyboardShortcuts": "Atalhos de Teclado",
       "Reference": "Referência",
-      "About": "Sobre"
+      "About": "Sobre",
+      "ReportBug": "Reportar um Erro",
+      "ChatOnDiscord": "Conversar no Discord",
+      "PostOnTheForum": "Postar no Fórum"
     },
     "BackEditor": "Voltar ao Editor",
     "WarningUnsavedChanges": "Realmente quer sair da página? Há mudanças não salvas.",
@@ -208,7 +211,7 @@
     "AutocompleteHinterOnARIA": "Geração de dicas do Autocompleter ativada",
     "AutocompleteHinterOffARIA": "Geração de dicas do Autocompleter desativada",
     "LibraryVersion": "Versão do p5.js",
-    "LibraryVersionInfo": "Há uma [nova versão 2.0](https://github.com/processing/p5.js/releases/) do p5.js disponível! Ela se tornará padrão em agosto de 2026, então aproveite este tempo para testá-la e relatar bugs. Está interessado em transitar esboços de 1.x para 2.0? Confira os [recursos de compatibilidade e transição.](https://github.com/processing/p5.js-compatibility)",
+    "LibraryVersionInfo": "Há uma [nova versão 2.0](https://github.com/processing/p5.js/releases/) do p5.js disponível! Ela se tornará padrão em agosto de 2026, então aproveite este tempo para testá-la e relatar erros. Está interessado em migrar esboços de 1.x para 2.0? Confira os [recursos de compatibilidade e migração.](https://github.com/processing/p5.js-compatibility)",
     "CustomVersionTitle": "Gerenciando suas próprias bibliotecas? Legal!",
     "CustomVersionInfo": "A versão do p5.js está atualmente sendo gerenciada no código do index.html. Isso significa que não pode ser ajustada a partir desta aba.",
     "CustomVersionReset": "Se você gostaria de usar as bibliotecas padrão, pode substituir as tags de script no index.html pelo seguinte:",
@@ -621,6 +624,7 @@
     "Private": {
       "Description": "Apenas você pode ver este esboço.",
       "Label": "Privado"
-    }
+    },
+    "Changed": "'{{projectName}}' agora é {{newVisibility}}..."
   }
 }