diff --git a/public/index.html b/public/index.html index b4ef570..e585743 100644 --- a/public/index.html +++ b/public/index.html @@ -406,7 +406,9 @@ - +
+ +
diff --git a/public/scripts/ui.js b/public/scripts/ui.js index f93cb5d..d76be78 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -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); diff --git a/public/styles.css b/public/styles.css index be72759..863ff07 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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 */ diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html index 2a91ca1..4cd5fea 100644 --- a/public_included_ws_fallback/index.html +++ b/public_included_ws_fallback/index.html @@ -411,7 +411,9 @@ - +
+ +
diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index 2c9d901..ac0d0fa 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/public_included_ws_fallback/scripts/ui.js @@ -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); diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index 663f6e5..3ca88df 100644 --- a/public_included_ws_fallback/styles.css +++ b/public_included_ws_fallback/styles.css @@ -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 */