Fix translation and design of base64dialog

This commit is contained in:
schlagmichdoch 2023-09-18 21:29:29 +02:00
parent dbe3381e7d
commit 6c07dc3678
6 changed files with 32 additions and 46 deletions

View file

@ -406,7 +406,9 @@
<x-paper shadow="2">
<button class="button center" id="base64-paste-btn" title="Paste"></button>
<div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
<button class="button center" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
<div class="row-reverse center button-row">
<button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
</div>
</x-paper>
</x-background>
</x-dialog>

View file

@ -1871,11 +1871,11 @@ class Base64ZipDialog extends Dialog {
if (base64Text) {
this.show();
if (base64Text === "paste") {
if (base64Text === 'paste') {
// ?base64text=paste
// base64 encoded string is ready to be pasted from clipboard
this.preparePasting(Localization.getTranslation("dialogs.base64-text"));
} else if (base64Text === "hash") {
this.preparePasting('text');
} else if (base64Text === 'hash') {
// ?base64text=hash#BASE64ENCODED
// base64 encoded string is url hash which is never sent to server and faster (recommended)
this.processBase64Text(base64Hash)
@ -1910,7 +1910,7 @@ class Base64ZipDialog extends Dialog {
});
} else {
// ?base64zip=paste || ?base64zip=true
this.preparePasting(Localization.getTranslation("dialogs.base64-files"));
this.preparePasting('files');
}
}
}
@ -1921,14 +1921,18 @@ class Base64ZipDialog extends Dialog {
}
preparePasting(type) {
const translateType = type === 'text'
? Localization.getTranslation("dialogs.base64-text")
: Localization.getTranslation("dialogs.base64-files");
if (navigator.clipboard.readText) {
this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-tap-to-paste", {type: type});
this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-tap-to-paste", null, {type: translateType});
this._clickCallback = _ => this.processClipboard(type);
this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
} else {
console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
this.$pasteBtn.setAttribute('hidden', '');
this.$fallbackTextarea.setAttribute('placeholder', Localization.getTranslation("dialogs.base64-paste-to-send", {type: type}));
this.$fallbackTextarea.setAttribute('placeholder', Localization.getTranslation("dialogs.base64-paste-to-send", null, {type: translateType}));
this.$fallbackTextarea.removeAttribute('hidden');
this._inputCallback = _ => this.processInput(type);
this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
@ -1962,7 +1966,7 @@ class Base64ZipDialog extends Dialog {
if (!base64 || !this.isValidBase64(base64)) return;
this._setPasteBtnToProcessing();
try {
if (type === "text") {
if (type === 'text') {
await this.processBase64Text(base64);
} else {
await this.processBase64Zip(base64);

View file

@ -1051,12 +1051,11 @@ x-dialog .dialog-subheader {
width: 100%;
height: 40vh;
border: solid 12px #438cff;
text-align: center;
border-radius: 8px;
}
#base64-paste-dialog .textarea {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
@ -1068,21 +1067,9 @@ x-dialog .dialog-subheader {
color: var(--primary-color);
font-weight: 700;
text-transform: uppercase;
content: attr(placeholder);
white-space: pre-wrap;
}
#base64-paste-dialog button {
margin: auto;
border-radius: 8px;
}
#base64-paste-dialog button[close] {
margin-top: 20px;
}
#base64-paste-dialog button[close]:before {
border-radius: 8px;
}
/* Button */

View file

@ -411,7 +411,9 @@
<x-paper shadow="2">
<button class="button center" id="base64-paste-btn" title="Paste"></button>
<div class="textarea" placeholder="Paste here to send files" title="CMD/⌘ + V" contenteditable hidden></div>
<button class="button center" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
<div class="row-reverse center button-row">
<button class="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close>Close</button>
</div>
</x-paper>
</x-background>
</x-dialog>

View file

@ -1873,11 +1873,11 @@ class Base64ZipDialog extends Dialog {
if (base64Text) {
this.show();
if (base64Text === "paste") {
if (base64Text === 'paste') {
// ?base64text=paste
// base64 encoded string is ready to be pasted from clipboard
this.preparePasting(Localization.getTranslation("dialogs.base64-text"));
} else if (base64Text === "hash") {
this.preparePasting('text');
} else if (base64Text === 'hash') {
// ?base64text=hash#BASE64ENCODED
// base64 encoded string is url hash which is never sent to server and faster (recommended)
this.processBase64Text(base64Hash)
@ -1912,7 +1912,7 @@ class Base64ZipDialog extends Dialog {
});
} else {
// ?base64zip=paste || ?base64zip=true
this.preparePasting(Localization.getTranslation("dialogs.base64-files"));
this.preparePasting('files');
}
}
}
@ -1923,14 +1923,18 @@ class Base64ZipDialog extends Dialog {
}
preparePasting(type) {
const translateType = type === 'text'
? Localization.getTranslation("dialogs.base64-text")
: Localization.getTranslation("dialogs.base64-files");
if (navigator.clipboard.readText) {
this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-tap-to-paste", {type: type});
this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-tap-to-paste", null, {type: translateType});
this._clickCallback = _ => this.processClipboard(type);
this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
} else {
console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
this.$pasteBtn.setAttribute('hidden', '');
this.$fallbackTextarea.setAttribute('placeholder', Localization.getTranslation("dialogs.base64-paste-to-send", {type: type}));
this.$fallbackTextarea.setAttribute('placeholder', Localization.getTranslation("dialogs.base64-paste-to-send", null, {type: translateType}));
this.$fallbackTextarea.removeAttribute('hidden');
this._inputCallback = _ => this.processInput(type);
this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
@ -1964,7 +1968,7 @@ class Base64ZipDialog extends Dialog {
if (!base64 || !this.isValidBase64(base64)) return;
this._setPasteBtnToProcessing();
try {
if (type === "text") {
if (type === 'text') {
await this.processBase64Text(base64);
} else {
await this.processBase64Zip(base64);

View file

@ -1081,12 +1081,11 @@ x-dialog .dialog-subheader {
width: 100%;
height: 40vh;
border: solid 12px #438cff;
text-align: center;
border-radius: 8px;
}
#base64-paste-dialog .textarea {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
@ -1098,21 +1097,9 @@ x-dialog .dialog-subheader {
color: var(--primary-color);
font-weight: 700;
text-transform: uppercase;
content: attr(placeholder);
white-space: pre-wrap;
}
#base64-paste-dialog button {
margin: auto;
border-radius: 8px;
}
#base64-paste-dialog button[close] {
margin-top: 20px;
}
#base64-paste-dialog button[close]:before {
border-radius: 8px;
}
/* Button */