From 006d8aa361ce64390cf60822e2e73e8c470518d3 Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Sun, 5 Feb 2023 14:39:09 +0100 Subject: [PATCH] Improve link and text sharing UI --- css/dialogs.css | 9 ++------- js/edit_sessions.js | 2 +- js/interface/dialog.js | 41 ++++++++++++++++++++++++++++++++++++++++- js/io/io.js | 28 +++++++++------------------- lang/en.json | 2 +- 5 files changed, 53 insertions(+), 29 deletions(-) diff --git a/css/dialogs.css b/css/dialogs.css index dd8a1f47..62b51d99 100644 --- a/css/dialogs.css +++ b/css/dialogs.css @@ -554,13 +554,8 @@ #settingslist li:hover .setting_icon i { color: var(--color-light); } - .password_toggle { - display: inline-block; - margin-left: 4px; - margin-top: 4px; - width: 24px; - text-align: center; - vertical-align: text-bottom; + .form_input_tool { + width: 30px; } /*Keybinds*/ diff --git a/js/edit_sessions.js b/js/edit_sessions.js index 9d9c77cd..4fda3cb3 100644 --- a/js/edit_sessions.js +++ b/js/edit_sessions.js @@ -462,7 +462,7 @@ BARS.defineActions(function() { title: 'dialog.edit_session.title', form: { username: {type: 'text', label: 'edit_session.username', value: username}, - token: {type: 'text', label: 'edit_session.token', value: token, readonly: !!session}, + token: {type: 'text', label: 'edit_session.token', value: token, readonly: !!session, share_text: true}, about: {type: 'info', text: 'edit_session.about', condition: !session}, status: {type: 'info', text: `**${tl('edit_session.status')}**: ${(session && session.hosting) ? tl('edit_session.hosting') : tl('edit_session.connected')}`, condition: !!session}, }, diff --git a/js/interface/dialog.js b/js/interface/dialog.js index 51fe75f1..72c58c6c 100644 --- a/js/interface/dialog.js +++ b/js/interface/dialog.js @@ -56,7 +56,7 @@ function buildForm(dialog) { bar.append(list); } if (data.type == 'password') { - bar.append(`
+ bar.append(`
`) input_element.type = 'password'; @@ -69,6 +69,45 @@ function buildForm(dialog) { this_bar.find('.password_toggle i')[0].className = hidden ? 'fas fa-eye-slash' : 'fas fa-eye'; }) } + if (data.share_text && data.value) { + let text = data.value.toString(); + let is_url = text.startsWith('https://'); + + let copy_button = Interface.createElement('div', {class: 'form_input_tool tool'}, Blockbench.getIconNode('content_paste')); + copy_button.addEventListener('click', e => { + if (isApp || navigator.clipboard) { + Clipbench.setText(text); + Blockbench.showQuickMessage('dialog.copied_to_clipboard'); + input_element.focus(); + document.execCommand('selectAll'); + + } else if (is_url) { + Blockbench.showMessageBox({ + title: 'dialog.share_model.title', + message: `[${text}](${text})`, + }) + } + }); + bar.append(copy_button); + + if (is_url) { + let open_button = Interface.createElement('div', {class: 'form_input_tool tool'}, Blockbench.getIconNode('open_in_browser')); + open_button.addEventListener('click', e => { + Blockbench.openLink(text); + }); + bar.append(open_button); + } + if (navigator.share) { + let share_button = Interface.createElement('div', {class: 'form_input_tool tool'}, Blockbench.getIconNode('share')); + share_button.addEventListener('click', e => { + navigator.share({ + label: data.label ? tl(data.label) : 'Share', + [is_url ? 'url' : 'text']: text + }); + }); + bar.append(share_button); + } + } break; case 'textarea': input_element = Object.assign(document.createElement('textarea'), { diff --git a/js/io/io.js b/js/io/io.js index 8d782563..2841c732 100644 --- a/js/io/io.js +++ b/js/io/io.js @@ -514,12 +514,15 @@ function uploadSketchfabModel() { processData: false, type: 'POST', success: function(response) { - Blockbench.showMessageBox({ + let url = `https://sketchfab.com/models/${response.uid}` + new Dialog('sketchfab_link', { title: tl('message.sketchfab.success'), - message: - `[${formResult.name} on Sketchfab](https://sketchfab.com/models/${response.uid})`, //\n\n \n\n`+ icon: 'icon-sketchfab', - }) + form: { + message: {type: 'info', text: `[${formResult.name} on Sketchfab](${url})`}, + link: {type: 'text', value: url, readonly: true, share_text: true} + } + }).show(); }, error: function(response) { Blockbench.showQuickMessage(tl('message.sketchfab.error') + `Error ${response.status}`, 1500) @@ -848,24 +851,11 @@ BARS.defineActions(function() { success: function(response) { let link = `https://blckbn.ch/${response.id}` - let link_dialog = new Dialog({ + new Dialog({ id: 'share_model_link', title: 'dialog.share_model.title', form: { - link: {type: 'text', value: link} - }, - buttons: ['action.copy', 'dialog.close'], - onConfirm() { - link_dialog.hide(); - if (isApp || navigator.clipboard) { - Clipbench.setText(link); - Blockbench.showQuickMessage('dialog.share_model.copied_to_clipboard'); - } else { - Blockbench.showMessageBox({ - title: 'dialog.share_model.title', - message: `[${link}](${link})`, - }) - } + link: {type: 'text', value: link, readonly: true, share_text: true} } }).show(); diff --git a/lang/en.json b/lang/en.json index fb40e4b3..2c5754db 100644 --- a/lang/en.json +++ b/lang/en.json @@ -13,6 +13,7 @@ "dialog.continue": "Continue", "dialog.ignore": "Ignore", "dialog.dontshowagain": "Don't Show Again", + "dialog.copied_to_clipboard": "Copied to clipboard", "data.cube": "Cube", "data.locator": "Locator", @@ -582,7 +583,6 @@ "dialog.share_model.title": "Share Model", "dialog.share_model.expire_time": "Expire Time", "dialog.share_model.thumbnail": "Thumbnail", - "dialog.share_model.copied_to_clipboard": "Link copied to clipboard", "dialog.share_model.failed": "Failed to upload model", "dialog.model_stats.title": "Model Stats",