mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 07:05:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix translation and design of base64dialog

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -406,7 +406,9 @@
<x-paper shadow="2"> <x-paper shadow="2">
<button class="button center" id="base64-paste-btn" title="Paste"></button> <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> <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-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>

18
public/scripts/ui.js
View file

@ -1871,11 +1871,11 @@ class Base64ZipDialog extends Dialog {
if (base64Text) { if (base64Text) {
this.show(); this.show();
if (base64Text === "paste") { if (base64Text === 'paste') {
// ?base64text=paste // ?base64text=paste
// base64 encoded string is ready to be pasted from clipboard // base64 encoded string is ready to be pasted from clipboard
this.preparePasting(Localization.getTranslation("dialogs.base64-text")); this.preparePasting('text');
} else if (base64Text === "hash") { } else if (base64Text === 'hash') {
// ?base64text=hash#BASE64ENCODED // ?base64text=hash#BASE64ENCODED
// base64 encoded string is url hash which is never sent to server and faster (recommended) // base64 encoded string is url hash which is never sent to server and faster (recommended)
this.processBase64Text(base64Hash) this.processBase64Text(base64Hash)
@ -1910,7 +1910,7 @@ class Base64ZipDialog extends Dialog {
}); });
} else { } else {
// ?base64zip=paste || ?base64zip=true // ?base64zip=paste || ?base64zip=true
this.preparePasting(Localization.getTranslation("dialogs.base64-files")); this.preparePasting('files');
} }
} }
} }
@ -1921,14 +1921,18 @@ class Base64ZipDialog extends Dialog {
} }
preparePasting(type) { preparePasting(type) {
const translateType = type === 'text'
? Localization.getTranslation("dialogs.base64-text")
: Localization.getTranslation("dialogs.base64-files");
if (navigator.clipboard.readText) { 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._clickCallback = _ => this.processClipboard(type);
this.$pasteBtn.addEventListener('click', _ => this._clickCallback()); this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
} else { } 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.") 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.$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.$fallbackTextarea.removeAttribute('hidden');
this._inputCallback = _ => this.processInput(type); this._inputCallback = _ => this.processInput(type);
this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback()); this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
@ -1962,7 +1966,7 @@ class Base64ZipDialog extends Dialog {
if (!base64 || !this.isValidBase64(base64)) return; if (!base64 || !this.isValidBase64(base64)) return;
this._setPasteBtnToProcessing(); this._setPasteBtnToProcessing();
try { try {
if (type === "text") { if (type === 'text') {
await this.processBase64Text(base64); await this.processBase64Text(base64);
} else { } else {
await this.processBase64Zip(base64); await this.processBase64Zip(base64);

17
public/styles.css
View file

@ -1051,12 +1051,11 @@ x-dialog .dialog-subheader {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
border: solid 12px #438cff; border: solid 12px #438cff;
text-align: center; border-radius: 8px;
} }
#base64-paste-dialog .textarea { #base64-paste-dialog .textarea {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -1068,21 +1067,9 @@ x-dialog .dialog-subheader {
color: var(--primary-color); color: var(--primary-color);
font-weight: 700; font-weight: 700;
text-transform: uppercase; 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 */ /* Button */

4
public_included_ws_fallback/index.html
View file

@ -411,7 +411,9 @@
<x-paper shadow="2"> <x-paper shadow="2">
<button class="button center" id="base64-paste-btn" title="Paste"></button> <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> <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-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>

18
public_included_ws_fallback/scripts/ui.js
View file

@ -1873,11 +1873,11 @@ class Base64ZipDialog extends Dialog {
if (base64Text) { if (base64Text) {
this.show(); this.show();
if (base64Text === "paste") { if (base64Text === 'paste') {
// ?base64text=paste // ?base64text=paste
// base64 encoded string is ready to be pasted from clipboard // base64 encoded string is ready to be pasted from clipboard
this.preparePasting(Localization.getTranslation("dialogs.base64-text")); this.preparePasting('text');
} else if (base64Text === "hash") { } else if (base64Text === 'hash') {
// ?base64text=hash#BASE64ENCODED // ?base64text=hash#BASE64ENCODED
// base64 encoded string is url hash which is never sent to server and faster (recommended) // base64 encoded string is url hash which is never sent to server and faster (recommended)
this.processBase64Text(base64Hash) this.processBase64Text(base64Hash)
@ -1912,7 +1912,7 @@ class Base64ZipDialog extends Dialog {
}); });
} else { } else {
// ?base64zip=paste || ?base64zip=true // ?base64zip=paste || ?base64zip=true
this.preparePasting(Localization.getTranslation("dialogs.base64-files")); this.preparePasting('files');
} }
} }
} }
@ -1923,14 +1923,18 @@ class Base64ZipDialog extends Dialog {
} }
preparePasting(type) { preparePasting(type) {
const translateType = type === 'text'
? Localization.getTranslation("dialogs.base64-text")
: Localization.getTranslation("dialogs.base64-files");
if (navigator.clipboard.readText) { 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._clickCallback = _ => this.processClipboard(type);
this.$pasteBtn.addEventListener('click', _ => this._clickCallback()); this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
} else { } 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.") 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.$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.$fallbackTextarea.removeAttribute('hidden');
this._inputCallback = _ => this.processInput(type); this._inputCallback = _ => this.processInput(type);
this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback()); this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
@ -1964,7 +1968,7 @@ class Base64ZipDialog extends Dialog {
if (!base64 || !this.isValidBase64(base64)) return; if (!base64 || !this.isValidBase64(base64)) return;
this._setPasteBtnToProcessing(); this._setPasteBtnToProcessing();
try { try {
if (type === "text") { if (type === 'text') {
await this.processBase64Text(base64); await this.processBase64Text(base64);
} else { } else {
await this.processBase64Zip(base64); await this.processBase64Zip(base64);

17
public_included_ws_fallback/styles.css
View file

@ -1081,12 +1081,11 @@ x-dialog .dialog-subheader {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
border: solid 12px #438cff; border: solid 12px #438cff;
text-align: center; border-radius: 8px;
} }
#base64-paste-dialog .textarea { #base64-paste-dialog .textarea {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -1098,21 +1097,9 @@ x-dialog .dialog-subheader {
color: var(--primary-color); color: var(--primary-color);
font-weight: 700; font-weight: 700;
text-transform: uppercase; 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 */ /* Button */