FIX: Improve admin permalink UX (#10101)
The admin permalink list was a little tricky to use because the URLs are easily reduced with a ... if they are too long. This adds a copy to clipboard button for the URL and a title on hover so the full text of the URL can be seen.
This commit is contained in:
parent
26260d50b1
commit
516a03be09
|
@ -22,6 +22,16 @@ export default Controller.extend({
|
||||||
this.model.unshiftObject(arg);
|
this.model.unshiftObject(arg);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
copyUrl(pl) {
|
||||||
|
let linkElement = document.querySelector(`#admin-permalink-${pl.id}`);
|
||||||
|
let textArea = document.createElement("textarea");
|
||||||
|
textArea.value = linkElement.textContent;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand("Copy");
|
||||||
|
textArea.remove();
|
||||||
|
},
|
||||||
|
|
||||||
destroy: function(record) {
|
destroy: function(record) {
|
||||||
return bootbox.confirm(
|
return bootbox.confirm(
|
||||||
I18n.t("admin.permalink.delete_confirm"),
|
I18n.t("admin.permalink.delete_confirm"),
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
content=permalinkTypes
|
content=permalinkTypes
|
||||||
value=permalinkType
|
value=permalinkType
|
||||||
onChange=(action (mut permalinkType))
|
onChange=(action (mut permalinkType))
|
||||||
|
class="permalink-type"
|
||||||
}}
|
}}
|
||||||
|
|
||||||
{{text-field
|
{{text-field
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
{{#each model as |pl|}}
|
{{#each model as |pl|}}
|
||||||
<tr class="admin-list-item">
|
<tr class="admin-list-item">
|
||||||
<td class="col first url">{{pl.url}}</td>
|
<td class="col first url">{{d-button title="admin.permalink.copy_to_clipboard" icon="far-clipboard" action=(action "copyUrl" pl)}} <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span></td>
|
||||||
<td class="col destination">
|
<td class="col destination">
|
||||||
{{#if pl.topic_id}}
|
{{#if pl.topic_id}}
|
||||||
<a href={{pl.topic_url}}>{{pl.topic_title}}</a>
|
<a href={{pl.topic_url}}>{{pl.topic_title}}</a>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
<a href={{pl.external_url}}>{{pl.external_url}}</a>
|
<a href={{pl.external_url}}>{{pl.external_url}}</a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</td>
|
</td>
|
||||||
<td class="col action">
|
<td class="col action" style="text-align: right;">
|
||||||
{{d-button action=(action "destroy") actionParam=pl icon="far-trash-alt" class="btn-danger"}}
|
{{d-button action=(action "destroy") actionParam=pl icon="far-trash-alt" class="btn-danger"}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -623,7 +623,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-kit {
|
.select-kit {
|
||||||
width: 150px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
|
|
|
@ -4760,8 +4760,9 @@ en:
|
||||||
category_id: "Category ID"
|
category_id: "Category ID"
|
||||||
category_title: "Category"
|
category_title: "Category"
|
||||||
tag_name: "Tag name"
|
tag_name: "Tag name"
|
||||||
external_url: "External URL"
|
external_url: "External or Relative URL"
|
||||||
destination: "Destination"
|
destination: "Destination"
|
||||||
|
copy_to_clipboard: "Copy Permalink to Clipboard"
|
||||||
delete_confirm: Are you sure you want to delete this permalink?
|
delete_confirm: Are you sure you want to delete this permalink?
|
||||||
form:
|
form:
|
||||||
label: "New:"
|
label: "New:"
|
||||||
|
|
Loading…
Reference in New Issue