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

Frontend: Add edit button to photo viewer

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-04-15 14:27:05 +02:00
parent 21fd6f20a8
commit 6a2f4f6b51
12 changed files with 98 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/common/viewer.js
View file

@ -5,6 +5,7 @@ class Viewer {
constructor() {
this.photos = [];
this.el = null;
this.gallery = null;
}
photosWithSizes() {
@ -17,6 +18,7 @@ class Viewer {
download_url: photo.getDownloadUrl(),
original_w: photo.FileWidth,
original_h: photo.FileHeight,
uuid: photo.PhotoUUID,
};
const thumbs = window.clientConfig.thumbnails;
@ -103,6 +105,8 @@ class Viewer {
let firstResize = true;
let photoSrcWillChange;
this.gallery = gallery;
gallery.listen("beforeResize", () => {
realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;
realViewportHeight = gallery.viewportSize.y * window.devicePixelRatio;

42
frontend/src/component/p-navigation.vue
View file

@ -9,7 +9,7 @@
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn icon @click.stop="showUpload = true" v-if="!readonly && $config.feature('upload')">
<v-btn icon @click.stop="upload.dialog = true" v-if="!readonly && $config.feature('upload')">
<v-icon>cloud_upload</v-icon>
</v-btn>
</v-toolbar-items>
@ -109,7 +109,8 @@
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-if="mini && $config.feature('archive')" to="/archive" @click="" class="p-navigation-archive">
<v-list-tile v-if="mini && $config.feature('archive')" to="/archive" @click=""
class="p-navigation-archive">
<v-list-tile-action>
<v-icon>archive</v-icon>
</v-list-tile-action>
@ -167,7 +168,8 @@
</v-list-tile-content>
</v-list-tile>
<v-list-tile :to="{ name: 'places' }" @click="" class="p-navigation-places" v-if="$config.feature('places')">
<v-list-tile :to="{ name: 'places' }" @click="" class="p-navigation-places"
v-if="$config.feature('places')">
<v-list-tile-action>
<v-icon>place</v-icon>
</v-list-tile-action>
@ -263,8 +265,10 @@
</v-list>
</v-navigation-drawer>
<p-upload-dialog :show="showUpload" @cancel="showUpload = false"
@confirm="showUpload = false"></p-upload-dialog>
<p-upload-dialog :show="upload.dialog" @cancel="upload.dialog = false"
@confirm="upload.dialog = false"></p-upload-dialog>
<p-photo-edit-dialog :show="edit.dialog" :selection="edit.selection" :index="edit.index" :album="edit.album"
@close="edit.dialog = false"></p-photo-edit-dialog>
</div>
</template>
@ -283,8 +287,17 @@
readonly: this.$config.getValue("readonly"),
config: this.$config.values,
page: this.$config.page,
showUpload: false,
uploadSubId: null,
upload: {
dialog: false,
subscription: null,
},
edit: {
dialog: false,
subscription: null,
album: null,
selection: [],
index: 0,
},
};
},
computed: {
@ -292,7 +305,7 @@
return this.session.auth || this.public
},
albumExpandIcon() {
if(this.config.count.albums > 0) {
if (this.config.count.albums > 0) {
return this.$vuetify.icons.expand
}
@ -320,10 +333,19 @@
},
},
created() {
this.uploadSubId = Event.subscribe("upload.show", () => this.showUpload = true);
this.upload.subscription = Event.subscribe("dialog.upload", () => this.upload.dialog = true);
this.edit.subscription = Event.subscribe("dialog.edit", (ev, data) => {
if (!this.edit.dialog) {
this.edit.index = data.index;
this.edit.selection = data.selection;
this.edit.album = data.album;
this.edit.dialog = true;
}
});
},
destroyed() {
Event.unsubscribe(this.uploadSubId);
Event.unsubscribe(this.upload.subscription);
Event.unsubscribe(this.edit.subscription);
}
};
</script>

10
frontend/src/component/p-photo-clipboard.vue
View file

@ -42,7 +42,7 @@
:title="labels.edit"
color="edit"
:disabled="selection.length === 0"
@click.stop="dialog.edit = true"
@click.stop="edit"
v-if="context !== 'archive' && $config.feature('edit')"
class="p-photo-clipboard-edit"
>
@ -131,8 +131,6 @@
@confirm="addToAlbum"></p-photo-album-dialog>
<p-photo-archive-dialog :show="dialog.archive" @cancel="dialog.archive = false"
@confirm="batchArchivePhotos"></p-photo-archive-dialog>
<p-photo-edit-dialog :show="dialog.edit" :selection="selection" :album="album"
@close="dialog.edit = false"></p-photo-edit-dialog>
<p-photo-share-dialog :show="dialog.share" :selection="selection" :album="album" @cancel="dialog.share = false"
@confirm="dialog.share = false"></p-photo-share-dialog>
</div>
@ -140,6 +138,7 @@
<script>
import Api from "common/api";
import Notify from "common/notify";
import Event from "pubsub-js";
export default {
name: 'p-photo-clipboard',
@ -155,7 +154,6 @@
dialog: {
archive: false,
album: false,
edit: false,
share: false,
},
labels: {
@ -229,6 +227,10 @@
Notify.success(this.$gettext("Downloading..."));
window.open(path, "_blank");
},
edit() {
// Open Edit Dialog
Event.publish("dialog.edit", {selection: this.selection, album: this.album, index: 0});
},
}
};
</script>

1
frontend/src/component/p-photo-details.vue
View file

@ -68,7 +68,6 @@
<h3 class="body-2 mb-2" :title="photo.PhotoTitle">
<button @click.exact="editPhoto(index)">
{{ photo.PhotoTitle | truncate(80) }}
<v-icon v-if="hover" size="16" title="edit">edit</v-icon>
</button>
</h3>
<div class="caption">

17
frontend/src/component/p-photo-list.vue
View file

@ -27,15 +27,10 @@
</v-layout>
</v-img>
</td>
<td class="p-photo-desc" @click.exact="toggleSelection(props)">
<v-hover>
<button @click.stop.prevent="editPhoto(props.index)" slot-scope="{ hover }">
{{ props.item.PhotoTitle }}
<v-icon v-if="hover" size="16" title="edit">edit</v-icon>
</button>
</v-hover>
<td class="p-photo-desc p-pointer" @click.exact="toggleSelection(props)">
{{ props.item.PhotoTitle }}
</td>
<td class="p-photo-desc hidden-xs-only" @click.exact="toggleSelection(props)">
<td class="p-photo-desc hidden-xs-only">
<button v-if="props.item.LocationID && places" @click.stop.prevent="openLocation(props.index)">
{{ props.item.getLocation() }}
</button>
@ -43,7 +38,7 @@
{{ props.item.getLocation() }}
</span>
</td>
<td class="p-photo-desc hidden-sm-and-down" @click.exact="toggleSelection(props)">
<td class="p-photo-desc hidden-sm-and-down">
<button @click.stop.prevent="editPhoto(props.index)">
{{ props.item.CameraMake }} {{ props.item.CameraModel }}
</button>
@ -93,7 +88,7 @@
this.selected.splice(0);
for (let i = 0; i <= photos.length; i++) {
if(this.$clipboard.has(photos[i])) {
if (this.$clipboard.has(photos[i])) {
this.selected.push(photos[i]);
}
}
@ -111,7 +106,7 @@
this.selected.splice(0);
for (let i = 0; i <= this.photos.length; i++) {
if(this.$clipboard.has(this.photos[i])) {
if (this.$clipboard.has(this.photos[i])) {
this.selected.push(this.photos[i]);
}
}

4
frontend/src/component/p-photo-mosaic.vue
View file

@ -54,12 +54,12 @@
<v-icon v-else color="accent lighten-3" class="t-like t-off">favorite_border</v-icon>
</v-btn>
<v-btn v-if="hover" :flat="!hover" :ripple="false"
<!-- v-btn v-if="hover" :flat="!hover" :ripple="false"
icon small absolute
class="p-photo-edit"
@click.stop.prevent="editPhoto(index)">
<v-icon color="white">edit</v-icon>
</v-btn>
</v-btn -->
</v-img>
</v-card>

2
frontend/src/component/p-photo-search.vue
View file

@ -232,7 +232,7 @@
this.filterChange();
},
showUpload() {
Event.publish("upload.show");
Event.publish("dialog.upload");
}
},
};

33
frontend/src/component/p-photo-viewer.vue
View file

@ -15,7 +15,12 @@
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share p-photo-download" title="Share"></button>
<button class="pswp__button pswp__button--share p-photo-download" title="Share"
v-if="config.settings.features.download"></button>
<button class="pswp__button" style="background: none;" @click.exact="editDialog">
<v-icon size="16" title="edit" color="white">edit</v-icon>
</button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
@ -45,7 +50,6 @@
</div>
</div>
</div>
</div>
</template>
@ -53,9 +57,32 @@
<script>
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
import Event from "pubsub-js";
export default {
name: "p-photo-viewer",
methods: {}
data() {
return {
config: this.$config.values,
};
},
methods: {
editDialog() {
const g = this.$viewer.gallery; // Gallery
let index = 0;
let selection = g.items.map((p, i) => {
if (g.currItem.uuid === p.uuid) {
index = i;
}
return p.uuid
});
let album = null;
g.close(); // Close Gallery
Event.publish("dialog.edit", {selection, album, index}); // Open Edit Dialog
}
}
}
</script>

3
frontend/src/dialog/p-photo-edit-dialog.vue
View file

@ -66,6 +66,7 @@
export default {
name: 'p-photo-edit-dialog',
props: {
index: Number,
show: Boolean,
selection: Array,
album: Object,
@ -140,7 +141,7 @@
watch: {
show: function (show) {
if (show) {
this.find(0);
this.find(this.index);
}
}
},

18
frontend/src/pages/album/photos.vue
View file

@ -40,8 +40,6 @@
:album="model"
:open-photo="openPhoto"></p-photo-tiles>
</v-container>
<p-photo-edit-dialog :show="edit.dialog" :selection="edit.selection"
@close="edit.dialog = false"></p-photo-edit-dialog>
</div>
</template>
@ -99,10 +97,6 @@
lastFilter: {},
routeName: routeName,
loading: true,
edit: {
dialog: false,
selection: []
}
};
},
methods: {
@ -136,8 +130,12 @@
}
},
editPhoto(index) {
this.edit.selection = [this.results[index].getId()];
this.edit.dialog = true;
let selection = this.results.map((p) => {
return p.getId()
});
// Open Edit Dialog
Event.publish("dialog.edit", {selection: selection, album: this.album, index: index});
},
openPhoto(index) {
this.$viewer.show(this.results, index)
@ -171,7 +169,7 @@
if (this.scrollDisabled) {
this.offset = offset;
if(this.results.length > 1) {
if (this.results.length > 1) {
this.$notify.info(this.$gettext('All ') + this.results.length + this.$gettext(' photos loaded'));
}
} else {
@ -221,7 +219,7 @@
return params;
},
refresh() {
if(this.loading) return;
if (this.loading) return;
this.loading = true;
this.page = 0;
this.dirty = true;

2
frontend/src/pages/library/import.vue
View file

@ -104,7 +104,7 @@
},
methods: {
showUpload() {
Event.publish("upload.show");
Event.publish("dialog.upload");
},
submit() {
// DO NOTHING

14
frontend/src/pages/photos.vue
View file

@ -31,8 +31,6 @@
:edit-photo="editPhoto"
:open-location="openLocation"></p-photo-details>
</v-container>
<p-photo-edit-dialog :show="edit.dialog" :selection="edit.selection"
@close="edit.dialog = false"></p-photo-edit-dialog>
</div>
</template>
@ -101,10 +99,6 @@
lastFilter: {},
routeName: routeName,
loading: true,
edit: {
dialog: false,
selection: []
}
};
},
computed: {
@ -148,8 +142,12 @@
}
},
editPhoto(index) {
this.edit.selection = [this.results[index].getId()];
this.edit.dialog = true;
let selection = this.results.map((p) => {
return p.getId()
});
// Open Edit Dialog
Event.publish("dialog.edit", {selection: selection, album: null, index: index});
},
openPhoto(index) {
this.$viewer.show(this.results, index)