added inetnalization

sugarlabs · Nov 11, 2024 · 752dcf2 · 752dcf2
1 parent 672d30e
commit 752dcf2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -874,19 +874,10 @@
                     <li><a id="ar"></a></li>
                     <li><a id="he"></a></li>
                 </ul>
-
-                <div id="modal-container" style=" display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; font-family: Arial, sans-serif;" >
+                <div id="modal-container" style="display: none;z-index: 999;">
                     <ul id="newdropdown" class="dropdown-content" style="padding: 24px;">
-                      <div>
-                        <h2  style="color: #0066FF; font-size: 24px;text-align: left;  margin: 0;">New Project</h2>
-                      </div>
-                      <div id="confirmation-message" style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">Are you sure you want to create a new project?</div>
-                      <li style=" text-align: center; width:fit-content">
-                        <a id="new-project" style="display: inline-block; background-color: #2196F3; color: white;text-decoration: none; border-radius: 4px; font-weight: bold;"></a>
-                      </li>
                     </ul>
                 </div>
-
 
            <script>  
                 var elem = document.documentElement;

diff --git a/js/toolbar.js b/js/toolbar.js
@@ -967,3 +967,33 @@ class Toolbar {
         }
     };
 }
+function renderNewProjectConfirmation() {
+    const modalContainer = document.getElementById("modal-container");
+    const newDropdown = document.getElementById("newdropdown");
+    newDropdown.innerHTML = '';
+    const title = document.createElement("div");
+    title.innerHTML = `<h2 style="color: #0066FF; font-size: 24px; text-align: left; margin: 0;">${_("New Project")}</h2>`;
+    newDropdown.appendChild(title);
+    const confirmationMessage = document.createElement("div");
+    confirmationMessage.innerHTML = `<div id="confirmation-message" style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">${_("Are you sure you want to create a new project?")}</div>`;
+    newDropdown.appendChild(confirmationMessage);
+    const confirmationButtonLi = document.createElement("li");
+    confirmationButtonLi.style.textAlign = "center";
+    confirmationButtonLi.style.width = "fit-content";
+    const confirmationButton = document.createElement("a");
+    confirmationButton.id = "new-project";
+    confirmationButton.style.display = "inline-block";
+    confirmationButton.style.backgroundColor = "#2196F3";
+    confirmationButton.style.color = "white";
+    confirmationButton.style.textDecoration = "none";
+    confirmationButton.style.borderRadius = "4px";
+    confirmationButton.style.fontWeight = "bold";
+    confirmationButton.innerHTML = _("Confirm");
+    confirmationButtonLi.appendChild(confirmationButton);
+    newDropdown.appendChild(confirmationButtonLi);
+    modalContainer.style.display = "flex";
+    confirmationButton.onclick = () => {
+        modalContainer.style.display = "none";
+    };
+}
+renderNewProjectConfirmation();