luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: Improve copy to clipboard event handler in photo edit dialog

Browse source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2023-11-01 13:20:27 +01:00
parent fe182d78f4
commit 4ffbbe9f84
2 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/dialog/photo/edit/files.vue
View file

@ -77,25 +77,25 @@
<td title="Unique ID"> <td title="Unique ID">
UID UID
</td> </td>
<td>{{ file.UID | uppercase }}</td> <td><span class="clickable" @click.stop.prevent="copyText(file.UID)">{{ file.UID | uppercase }}</span></td>
</tr> </tr>
<tr v-if="file.InstanceID" title="XMP"> <tr v-if="file.InstanceID" title="XMP">
<td> <td>
<translate>Instance ID</translate> <translate>Instance ID</translate>
</td> </td>
<td class="clickable" @click.stop.prevent="copyText">{{ file.InstanceID | uppercase }}</td> <td><span class="clickable" @click.stop.prevent="copyText(file.InstanceID)">{{ file.InstanceID | uppercase }}</span></td>
</tr> </tr>
<tr> <tr>
<td title="SHA-1"> <td title="SHA-1">
<translate>Hash</translate> <translate>Hash</translate>
</td> </td>
<td class="clickable" @click.stop.prevent="copyText">{{ file.Hash }}</td> <td><span class="clickable" @click.stop.prevent="copyText(file.Hash)">{{ file.Hash }}</span></td>
</tr> </tr>
<tr v-if="file.Name"> <tr v-if="file.Name">
<td> <td>
<translate>Filename</translate> <translate>Filename</translate>
</td> </td>
<td class="clickable" @click.stop.prevent="copyText">{{ file.Name }}</td> <td><span class="clickable" @click.stop.prevent="copyText(file.Name)">{{ file.Name }}</span></td>
</tr> </tr>
<tr v-if="file.Root"> <tr v-if="file.Root">
<td> <td>
@ -107,7 +107,7 @@
<td> <td>
<translate>Original Name</translate> <translate>Original Name</translate>
</td> </td>
<td class="clickable" @click.stop.prevent="copyText">{{ file.OriginalName }}</td> <td><span class="clickable" @click.stop.prevent="copyText(file.OriginalName)">{{ file.OriginalName }}</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -332,14 +332,12 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
async copyText(ev) { async copyText(text) {
if (!ev || !ev.target) { if (!text) {
return; return;
} }
try { try {
const el = ev.target;
const text = el.innerText || el.textContent;
await Util.copyToMachineClipboard(text); await Util.copyToMachineClipboard(text);
this.$notify.success(this.$gettext("Copied to clipboard")); this.$notify.success(this.$gettext("Copied to clipboard"));
} catch (error) { } catch (error) {

22
frontend/src/dialog/photo/edit/info.vue
View file

@ -6,11 +6,11 @@
<tbody> <tbody>
<tr> <tr>
<td>UID</td> <td>UID</td>
<td>{{ model.UID | uppercase }}</td> <td><span class="clickable" @click.stop.prevent="copyText(model.UID)">{{ model.UID | uppercase }}</span></td>
</tr> </tr>
<tr v-if="model.DocumentID"> <tr v-if="model.DocumentID">
<td>Document ID</td> <td>Document ID</td>
<td>{{ model.DocumentID | uppercase }}</td> <td><span class="clickable" @click.stop.prevent="copyText(model.DocumentID)">{{ model.DocumentID | uppercase }}</span></td>
</tr> </tr>
<tr> <tr>
<td :title="model.TypeSrc"> <td :title="model.TypeSrc">
@ -34,13 +34,13 @@
<td> <td>
<translate>Folder</translate> <translate>Folder</translate>
</td> </td>
<td>{{ model.Path }}</td> <td><span class="clickable" @click.stop.prevent="copyText(model.Path)">{{ model.Path }}</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<translate>Name</translate> <translate>Name</translate>
</td> </td>
<td>{{ model.Name }}</td> <td><span class="clickable" @click.stop.prevent="copyText(model.Name)">{{ model.Name }}</span></td>
</tr> </tr>
<tr v-if="model.OriginalName"> <tr v-if="model.OriginalName">
<td> <td>
@ -64,7 +64,7 @@
<v-icon v-if="model.TitleSrc === 'manual'" class="src">check</v-icon> <v-icon v-if="model.TitleSrc === 'manual'" class="src">check</v-icon>
</td> </td>
<td :title="sourceName(model.TitleSrc)"> <td :title="sourceName(model.TitleSrc)">
{{ model.Title }} <span class="clickable" @click.stop.prevent="copyText(model.Title)">{{ model.Title }}</span>
<v-icon v-if="model.TitleSrc === 'name'" class="src">insert_drive_file</v-icon> <v-icon v-if="model.TitleSrc === 'name'" class="src">insert_drive_file</v-icon>
</td> </td>
</tr> </tr>
@ -340,6 +340,18 @@ export default {
}, },
}, },
methods: { methods: {
async copyText(text) {
if (!text) {
return;
}
try {
await Util.copyToMachineClipboard(text);
this.$notify.success(this.$gettext("Copied to clipboard"));
} catch (error) {
this.$notify.error(this.$gettext("Failed copying to clipboard"));
}
},
sourceName(s) { sourceName(s) {
switch (s) { switch (s) {
case "": case "":