UX: Improve copying from IP lookup component.

- Removed trailing whitespaces caused by textarea.
- Clicking the Copy button will show "copied" for 2 seconds.
This commit is contained in:
Bianca Nenciu 2018-08-23 22:27:08 +02:00
parent 64c4171937
commit 5ccf581e1e
3 changed files with 12 additions and 4 deletions

View File

@ -88,10 +88,13 @@ export default Ember.Component.extend({
text += `: ${location.phone}\n`; text += `: ${location.phone}\n`;
} }
} }
const copyRange = $(`<textarea id="copy-range"></textarea>`); const copyRange = $('<p id="copy-range"></p>');
copyRange.text(text); copyRange.html(text.trim().replace("\n", "<br>"));
$(document.body).append(copyRange); $(document.body).append(copyRange);
copyText(text, copyRange[0]); if (copyText(text, copyRange[0])) {
this.set("copied", true);
Ember.run.later(() => this.set("copied", false), 2000);
}
copyRange.remove(); copyRange.remove();
}, },

View File

@ -6,7 +6,11 @@
{{#if show}} {{#if show}}
<div class="location-box"> <div class="location-box">
<a class="close pull-right" {{action "hide"}}>{{d-icon "times"}}</a> <a class="close pull-right" {{action "hide"}}>{{d-icon "times"}}</a>
<a class="btn pull-right" {{action "copy"}}>{{d-icon "copy"}}</a> {{#if copied}}
<a class="btn btn-hover pull-right">{{d-icon "copy"}} {{i18n "ip_lookup.copied"}}</a>
{{else}}
<a class="btn pull-right" {{action "copy"}}>{{d-icon "copy"}}</a>
{{/if}}
<h4>{{i18n 'ip_lookup.title'}}</h4> <h4>{{i18n 'ip_lookup.title'}}</h4>
<p class='powered-by'>{{{i18n 'ip_lookup.powered_by'}}}</p> <p class='powered-by'>{{{i18n 'ip_lookup.powered_by'}}}</p>
<dl> <dl>

View File

@ -597,6 +597,7 @@ en:
post_count: "# posts" post_count: "# posts"
confirm_delete_other_accounts: "Are you sure you want to delete these accounts?" confirm_delete_other_accounts: "Are you sure you want to delete these accounts?"
powered_by: "powered by <a href='https://ipinfo.io'>ipinfo.io</a>" powered_by: "powered by <a href='https://ipinfo.io'>ipinfo.io</a>"
copied: "copied"
user_fields: user_fields:
none: "(select an option)" none: "(select an option)"