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

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

@ -6,11 +6,11 @@
<tbody>
<tr>
<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 v-if="model.DocumentID">
<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>
<td :title="model.TypeSrc">
@ -34,13 +34,13 @@
<td>
<translate>Folder</translate>
</td>
<td>{{ model.Path }}</td>
<td><span class="clickable" @click.stop.prevent="copyText(model.Path)">{{ model.Path }}</span></td>
</tr>
<tr>
<td>
<translate>Name</translate>
</td>
<td>{{ model.Name }}</td>
<td><span class="clickable" @click.stop.prevent="copyText(model.Name)">{{ model.Name }}</span></td>
</tr>
<tr v-if="model.OriginalName">
<td>
@ -64,7 +64,7 @@
<v-icon v-if="model.TitleSrc === 'manual'" class="src">check</v-icon>
</td>
<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>
</td>
</tr>
@ -340,6 +340,18 @@ export default {
},
},
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) {
switch (s) {
case "":