engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: replace button-based tabs with PicoCSS tab navigation in translate modal

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-03 22:11:20 -04:00
parent d24b6fa1bb
commit 375471e81a
1 changed files with 47 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/translate-modal.js
View file

@ -125,30 +125,50 @@ export function openTranslateModal() {
};
header.appendChild(closeButton);
// Translation mode tabs
const modeContainer = document.createElement("div");
modeContainer.style.cssText =
"display: flex; gap: 10px; margin-bottom: 20px;";
// Translation mode tabs using PicoCSS tab navigation
const tabNav = document.createElement("nav");
tabNav.style.marginBottom = "20px";
const pageTab = document.createElement("button");
pageTab.textContent = getUIText("translatePageTab");
pageTab.setAttribute("data-i18n", "translatePageTab");
pageTab.style.cssText =
"flex: 1; padding: 10px; border: 2px solid #4CAF50; border-radius: 6px; background: #4CAF50; color: white; cursor: pointer;";
const tabList = document.createElement("ul");
tabList.setAttribute("role", "tablist");
const customTab = document.createElement("button");
customTab.textContent = getUIText("customTextTab");
customTab.setAttribute("data-i18n", "customTextTab");
customTab.style.cssText =
"flex: 1; padding: 10px; border: 2px solid #4CAF50; border-radius: 6px; background: white; color: #4CAF50; cursor: pointer;";
// Page tab
const pageTabItem = document.createElement("li");
const pageTabLink = document.createElement("a");
pageTabLink.setAttribute("role", "tab");
pageTabLink.setAttribute("aria-selected", "true");
pageTabLink.setAttribute("aria-controls", "page-panel");
pageTabLink.href = "#page-panel";
pageTabLink.textContent = getUIText("translatePageTab");
pageTabLink.setAttribute("data-i18n", "translatePageTab");
pageTabItem.appendChild(pageTabLink);
modeContainer.appendChild(pageTab);
modeContainer.appendChild(customTab);
article.appendChild(modeContainer);
// Custom text tab
const customTabItem = document.createElement("li");
const customTabLink = document.createElement("a");
customTabLink.setAttribute("role", "tab");
customTabLink.setAttribute("aria-selected", "false");
customTabLink.setAttribute("aria-controls", "custom-panel");
customTabLink.href = "#custom-panel";
customTabLink.textContent = getUIText("customTextTab");
customTabLink.setAttribute("data-i18n", "customTextTab");
customTabItem.appendChild(customTabLink);
// Content areas
tabList.appendChild(pageTabItem);
tabList.appendChild(customTabItem);
tabNav.appendChild(tabList);
article.appendChild(tabNav);
// Content areas with proper IDs and attributes for tabs
const pageContent = document.createElement("div");
pageContent.id = "page-panel";
pageContent.setAttribute("role", "tabpanel");
pageContent.setAttribute("aria-labelledby", "page-tab");
const customContent = document.createElement("div");
customContent.id = "custom-panel";
customContent.setAttribute("role", "tabpanel");
customContent.setAttribute("aria-labelledby", "custom-tab");
customContent.style.display = "none";
// Page translation content
@ -245,29 +265,27 @@ export function openTranslateModal() {
article.appendChild(translateButton);
// Tab switching
// Tab switching using PicoCSS tab navigation
let isPageMode = true;
pageTab.onclick = () => {
pageTabLink.onclick = (e) => {
e.preventDefault();
if (!isPageMode) {
isPageMode = true;
pageTab.style.background = "#4CAF50";
pageTab.style.color = "white";
customTab.style.background = "white";
customTab.style.color = "#4CAF50";
pageTabLink.setAttribute("aria-selected", "true");
customTabLink.setAttribute("aria-selected", "false");
pageContent.style.display = "block";
customContent.style.display = "none";
translateButton.textContent = getUIText("translatePageButton");
}
};
customTab.onclick = () => {
customTabLink.onclick = (e) => {
e.preventDefault();
if (isPageMode) {
isPageMode = false;
customTab.style.background = "#4CAF50";
customTab.style.color = "white";
pageTab.style.background = "white";
pageTab.style.color = "#4CAF50";
customTabLink.setAttribute("aria-selected", "true");
pageTabLink.setAttribute("aria-selected", "false");
customContent.style.display = "block";
pageContent.style.display = "none";
translateButton.textContent = getUIText("translateTextButton");