jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added a title to the add tags confirm dialog and fixed the scrolling and button positions. see #183

Browse source
This commit is contained in:
Mic 2024-12-15 22:58:00 +01:00
parent 4a16c734cb
commit a938167f20
2 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_locales/en/messages.json
View file

@ -826,5 +826,9 @@
"addtags_excl_list_infoline2": { "addtags_excl_list_infoline2": {
"message": "Add a word per line, or separated by a comma.", "message": "Add a word per line, or separated by a comma.",
"description": "" "description": ""
},
"addtags_dialog_title": {
"message": "Add tags to the email",
"description": ""
} }
} }

37
js/mzta-compose-script.js
View file

@ -170,12 +170,14 @@ switch (message.command) {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = ` style.textContent = `
.mzta_dialog { .mzta_dialog {
display: flex;
flex-direction: column;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
width: 300px; width: 300px;
max-width: 90%; max-width: 90%;
max-height: 90%; max-height: 90%;
padding: 1em; padding: 0.5em;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: var(--dialog-bg-color, #fff); background-color: var(--dialog-bg-color, #fff);
@ -192,6 +194,8 @@ switch (message.command) {
padding: 0; padding: 0;
overflow-y: auto; overflow-y: auto;
max-height: 80vh; max-height: 80vh;
flex: 1;
margin-bottom: 20px;
} }
.mzta_dialog_btn { .mzta_dialog_btn {
@ -199,9 +203,14 @@ switch (message.command) {
border: none; border: none;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
padding: 8px 12px; padding: 4px 6px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
flex-shrink: 0;
}
.mzta_dialog_btn_margin{
margin-right: 5px;
} }
.mzta_dialog_btn:hover { .mzta_dialog_btn:hover {
@ -214,16 +223,23 @@ switch (message.command) {
} }
.div_btns{ .div_btns{
width: 100%; width: 90%;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
margin-top: 20px; position: fixed;
bottom: 4px;
} }
.tag_excluded{ .tag_excluded{
text-decoration: line-through; text-decoration: line-through;
} }
h2.addtags{
margin:0;
font-size: 1.2em;
text-align: center;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--dialog-bg-color: #2e2e2e; --dialog-bg-color: #2e2e2e;
@ -238,6 +254,11 @@ switch (message.command) {
const tags_dialog = document.createElement('dialog'); const tags_dialog = document.createElement('dialog');
tags_dialog.className = 'mzta_dialog'; tags_dialog.className = 'mzta_dialog';
const title = document.createElement('h2');
title.className = 'addtags';
title.textContent = browser.i18n.getMessage("addtags_dialog_title");
tags_dialog.appendChild(title);
// Create the content // Create the content
const content = document.createElement('div'); const content = document.createElement('div');
content.className = 'mzta_dialog_content'; content.className = 'mzta_dialog_content';
@ -291,13 +312,12 @@ switch (message.command) {
// Add a div for buttons // Add a div for buttons
const buttonsDiv = document.createElement('div'); const buttonsDiv = document.createElement('div');
buttonsDiv.className = 'div_btns'; buttonsDiv.className = 'div_btns';
form.appendChild(buttonsDiv);
// Add the close button // Add the close button
const closeButton = document.createElement('button'); const closeButton = document.createElement('button');
closeButton.type = 'button'; closeButton.type = 'button';
closeButton.textContent = 'Close'; closeButton.textContent = 'Close';
closeButton.className = 'mzta_dialog_btn'; closeButton.className = 'mzta_dialog_btn mzta_dialog_btn_margin';
closeButton.addEventListener('click', closeDialog); closeButton.addEventListener('click', closeDialog);
buttonsDiv.appendChild(closeButton); buttonsDiv.appendChild(closeButton);
@ -315,6 +335,7 @@ switch (message.command) {
content.appendChild(form); content.appendChild(form);
tags_dialog.appendChild(content); tags_dialog.appendChild(content);
tags_dialog.appendChild(buttonsDiv);
document.body.appendChild(tags_dialog); document.body.appendChild(tags_dialog);
function closeDialog() { function closeDialog() {