fix: convert action buttons to emoji-only with tooltips and remove modal backdrops
- Remove smart translate button functionality (non-working) - Convert all action buttons to emoji + tooltip format: 📖 Read Page, 🔊 TTS Anything, 🌐 Translate, 📋 Copy Raw, 📄 Copy HTML - Add emoji-only CSS class with 18px font size for emojis - Add backdrop removal for TTS and translate modals in builtin CSS - Update button creation to use title attribute for tooltips - Reduce padding for emoji-only buttons (8px 12px vs 8px 16px)
This commit is contained in:
parent
85415e2221
commit
a5e135eca6
3 changed files with 36 additions and 105 deletions
|
|
@ -577,7 +577,8 @@ async function openUncloseaiEmbeddedModalNew() {
|
|||
|
||||
const controlActions = [
|
||||
{
|
||||
text: getUIText("readPage"),
|
||||
emoji: "📖",
|
||||
tooltip: getUIText("readPage"),
|
||||
action: async (button) => {
|
||||
// If already playing, pause
|
||||
if (readPageAudio && !readPageAudio.paused) {
|
||||
|
|
@ -684,7 +685,8 @@ async function openUncloseaiEmbeddedModalNew() {
|
|||
},
|
||||
},
|
||||
{
|
||||
text: getUIText("ttsAnything"),
|
||||
emoji: "🔊",
|
||||
tooltip: getUIText("ttsAnything"),
|
||||
action: async (btn) => {
|
||||
if (typeof window.openTTSModal === 'function') {
|
||||
window.openTTSModal();
|
||||
|
|
@ -701,7 +703,8 @@ async function openUncloseaiEmbeddedModalNew() {
|
|||
}
|
||||
},
|
||||
{
|
||||
text: getUIText("translationModal"),
|
||||
emoji: "🌐",
|
||||
tooltip: getUIText("translationModal"),
|
||||
action: async (btn) => {
|
||||
if (typeof window.openTranslateModal === 'function') {
|
||||
window.openTranslateModal();
|
||||
|
|
@ -718,104 +721,8 @@ async function openUncloseaiEmbeddedModalNew() {
|
|||
}
|
||||
},
|
||||
{
|
||||
text: getUIText("smartTranslate"),
|
||||
action: async (btn) => {
|
||||
// Create dropdown instead of opening modal
|
||||
if (
|
||||
btn.nextElementSibling?.classList.contains("translate-dropdown")
|
||||
) {
|
||||
// Toggle existing dropdown
|
||||
btn.nextElementSibling.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
// Detect page language
|
||||
btn.textContent = getUIText("detectingLanguage");
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const currentLang = await detectPageLanguage();
|
||||
btn.textContent = getUIText("smartTranslate");
|
||||
btn.disabled = false;
|
||||
|
||||
// Import supported languages
|
||||
const { SUPPORTED_LANGUAGES, translateCurrentPage } = await import(
|
||||
"./translation.js"
|
||||
);
|
||||
|
||||
// Create dropdown
|
||||
const dropdown = document.createElement("div");
|
||||
dropdown.className = "translate-dropdown";
|
||||
|
||||
// Add current language indicator
|
||||
const currentLangDiv = document.createElement("div");
|
||||
currentLangDiv.className = "translate-dropdown-current";
|
||||
const currentLangName = SUPPORTED_LANGUAGES[currentLang] || "Unknown";
|
||||
currentLangDiv.textContent = `Current: ${currentLangName} (${currentLang})`;
|
||||
dropdown.appendChild(currentLangDiv);
|
||||
|
||||
// Add translation options
|
||||
Object.entries(SUPPORTED_LANGUAGES).forEach(([code, name]) => {
|
||||
// Skip current language
|
||||
if (code === currentLang) return;
|
||||
|
||||
const option = document.createElement("div");
|
||||
option.className = "translate-dropdown-option";
|
||||
option.textContent = `${name} (${code})`;
|
||||
|
||||
// Hover effects handled by CSS
|
||||
|
||||
option.onclick = async () => {
|
||||
try {
|
||||
// Show loading
|
||||
option.textContent = `Translating to ${name}...`;
|
||||
option.classList.add("translate-dropdown-option-disabled");
|
||||
|
||||
// Translate the page
|
||||
const translatedHtml = await translateCurrentPage(code);
|
||||
|
||||
// Open in new tab
|
||||
const newWindow = window.open("", "_blank");
|
||||
newWindow.document.write(translatedHtml);
|
||||
newWindow.document.close();
|
||||
newWindow.document.title = `${document.title} (${name})`;
|
||||
|
||||
// Close dropdown
|
||||
dropdown.remove();
|
||||
} catch (error) {
|
||||
alert(`Translation failed: ${error.message}`);
|
||||
option.textContent = `${name} (${code})`;
|
||||
option.classList.remove("translate-dropdown-option-disabled");
|
||||
}
|
||||
};
|
||||
|
||||
dropdown.appendChild(option);
|
||||
});
|
||||
|
||||
// Position dropdown relative to button
|
||||
btn.style.position = "relative";
|
||||
btn.parentElement.appendChild(dropdown);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
const closeDropdown = (e) => {
|
||||
if (!dropdown.contains(e.target) && e.target !== btn) {
|
||||
dropdown.remove();
|
||||
document.removeEventListener("click", closeDropdown);
|
||||
}
|
||||
};
|
||||
setTimeout(
|
||||
() => document.addEventListener("click", closeDropdown),
|
||||
100,
|
||||
);
|
||||
} catch (error) {
|
||||
btn.textContent = getUIText("smartTranslate");
|
||||
btn.disabled = false;
|
||||
alert(getUIText("languageDetectionFailed", { error: error.message }));
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
text: getUIText("fullChatRaw"),
|
||||
emoji: "📋",
|
||||
tooltip: getUIText("fullChatRaw"),
|
||||
action: async () => {
|
||||
try {
|
||||
const { getChatHistory } = await import("./chat.js");
|
||||
|
|
@ -836,7 +743,8 @@ async function openUncloseaiEmbeddedModalNew() {
|
|||
},
|
||||
},
|
||||
{
|
||||
text: getUIText("fullChatHTML"),
|
||||
emoji: "📄",
|
||||
tooltip: getUIText("fullChatHTML"),
|
||||
action: async () => {
|
||||
try {
|
||||
const { getChatHistory } = await import("./chat.js");
|
||||
|
|
@ -875,10 +783,11 @@ async function openUncloseaiEmbeddedModalNew() {
|
|||
},
|
||||
];
|
||||
|
||||
controlActions.forEach(({ text, action }) => {
|
||||
controlActions.forEach(({ emoji, tooltip, action }) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.textContent = text;
|
||||
btn.className = "uncloseai-btn-primary";
|
||||
btn.textContent = emoji;
|
||||
btn.title = tooltip;
|
||||
btn.className = "uncloseai-btn-primary emoji-only";
|
||||
btn.onclick = () => action(btn);
|
||||
controls.appendChild(btn);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -230,6 +230,12 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
|
|||
/* TRANSLATE MODAL STYLES */
|
||||
/* =================================================================== */
|
||||
|
||||
/* Remove backdrop for translate modal */
|
||||
dialog#translate-modal::backdrop {
|
||||
backdrop-filter: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Translate modal dialog */
|
||||
dialog#translate-modal {
|
||||
width: 95vw;
|
||||
|
|
@ -473,6 +479,12 @@ dialog#translate-modal {
|
|||
/* TTS MODAL STYLES */
|
||||
/* =================================================================== */
|
||||
|
||||
/* Remove backdrop for TTS modal */
|
||||
dialog#tts-modal::backdrop {
|
||||
backdrop-filter: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* TTS modal dialog */
|
||||
dialog#tts-modal {
|
||||
width: 90vw;
|
||||
|
|
@ -695,6 +707,11 @@ dialog#tts-modal {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uncloseai-btn-primary.emoji-only {
|
||||
font-size: 18px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.uncloseai-btn-primary:hover {
|
||||
background: var(--uncloseai-button-hover, #e9ecef);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -763,6 +763,11 @@ dialog#tts-modal::backdrop {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uncloseai-btn-primary.emoji-only {
|
||||
font-size: 18px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.uncloseai-btn-primary:hover {
|
||||
background: var(--uncloseai-button-hover, #e9ecef);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue