|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="paginated-media">
|
|
<div class="paginated-media">
|
|
<div class="media" ref="media">
|
|
<div class="media" ref="media">
|
|
- <div v-for="image in images"
|
|
|
|
|
|
+ <div v-for="(image, i) in images"
|
|
v-bind:key="image.path"
|
|
v-bind:key="image.path"
|
|
class="image"
|
|
class="image"
|
|
@click="$emit('click', image)">
|
|
@click="$emit('click', image)">
|
|
@@ -10,15 +10,18 @@
|
|
<div v-if="current && current.path === image.path"
|
|
<div v-if="current && current.path === image.path"
|
|
class="active"/>
|
|
class="active"/>
|
|
|
|
|
|
- <div v-if="deletable"
|
|
|
|
- class="delete"
|
|
|
|
- @click="deleteElement(image)">
|
|
|
|
-
|
|
|
|
|
|
+ <div v-if="deletable" class="media-control delete" @click="deleteElement(image)">
|
|
<img alt="remove" src="@/assets/icons/x-circle.svg">
|
|
<img alt="remove" src="@/assets/icons/x-circle.svg">
|
|
</div>
|
|
</div>
|
|
- <div v-if="image.has_annotations" class="annotated">
|
|
|
|
|
|
+
|
|
|
|
+ <div title="Annotated file" v-if="image.has_annotations" class="annotated">
|
|
<img alt="annotated" src="@/assets/icons/tag.svg">
|
|
<img alt="annotated" src="@/assets/icons/tag.svg">
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <div title="Copy results from previous file" v-if="inline && i != 0" class="media-control copy" @click="copyFrom(i, image)">
|
|
|
|
+ <img alt="copy" src="@/assets/icons/paper-airplane.svg">
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -125,6 +128,12 @@ export default {
|
|
deleteElement: function (element) {
|
|
deleteElement: function (element) {
|
|
this.$root.socket.post(`/data/${element.identifier}/remove`, {remove: true});
|
|
this.$root.socket.post(`/data/${element.identifier}/remove`, {remove: true});
|
|
},
|
|
},
|
|
|
|
+ copyFrom: function (fromIdx, element) {
|
|
|
|
+ if (fromIdx === undefined || fromIdx === 0)
|
|
|
|
+ return;
|
|
|
|
+ let copy_from = this.images[fromIdx-1].identifier;
|
|
|
|
+ this.$root.socket.post(`/data/${element.identifier}/copy_results`, {copy_from});
|
|
|
|
+ },
|
|
prevPage: function (callback) {
|
|
prevPage: function (callback) {
|
|
if (this.page > 1)
|
|
if (this.page > 1)
|
|
this.page -= 1;
|
|
this.page -= 1;
|
|
@@ -323,15 +332,21 @@ export default {
|
|
box-shadow: 0 0 20px -5px var(--primary) inset;
|
|
box-shadow: 0 0 20px -5px var(--primary) inset;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.media .media-control {
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.4);
|
|
|
|
+ border-radius: 2rem;
|
|
|
|
+ filter: invert(1);
|
|
|
|
+ padding: 0.3rem 0.3rem 0.1rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.media .media-control:hover {
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.8);
|
|
|
|
+}
|
|
|
|
+
|
|
.media .delete {
|
|
.media .delete {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0.15rem;
|
|
top: 0.15rem;
|
|
right: 0.15rem;
|
|
right: 0.15rem;
|
|
-
|
|
|
|
- background-color: rgba(255, 255, 255, 0.4);
|
|
|
|
- border-radius: 2rem;
|
|
|
|
- padding: 0.3rem 0.3rem 0.1rem;
|
|
|
|
- filter: invert(1);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.media .annotated {
|
|
.media .annotated {
|
|
@@ -341,6 +356,11 @@ export default {
|
|
|
|
|
|
padding: 0.3rem 0.3rem 0.3rem;
|
|
padding: 0.3rem 0.3rem 0.3rem;
|
|
}
|
|
}
|
|
|
|
+.media .copy {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0.10rem;
|
|
|
|
+ left: 0.10rem;
|
|
|
|
+}
|
|
|
|
|
|
.media .delete img {
|
|
.media .delete img {
|
|
width: 1rem;
|
|
width: 1rem;
|