Frontend: Add edit button to photo viewer
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
21fd6f20a8
commit
6a2f4f6b51
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@
|
|||
this.filterChange();
|
||||
},
|
||||
showUpload() {
|
||||
Event.publish("upload.show");
|
||||
Event.publish("dialog.upload");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
},
|
||||
methods: {
|
||||
showUpload() {
|
||||
Event.publish("upload.show");
|
||||
Event.publish("dialog.upload");
|
||||
},
|
||||
submit() {
|
||||
// DO NOTHING
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue