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

Frontend: Show description in photo viewer and card view

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-05-19 08:51:25 +02:00
parent 950b6440be
commit 6936b7f8d1
7 changed files with 624 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

714
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

11
frontend/package.json
View file

@ -28,7 +28,7 @@
"@fortawesome/fontawesome-free": "^5.13.0",
"acorn": "6.4.1",
"ajv": "^6.12.2",
"autoprefixer": "^9.7.6",
"autoprefixer": "^9.8.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.18.1",
"babel-eslint": "^10.1.0",
@ -64,9 +64,9 @@
"hls.js": "^0.13.2",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.19.1",
"i18n-iso-countries": "^5.3.0",
"i18n-iso-countries": "^5.4.0",
"inject-loader": "^4.0.1",
"karma": "^5.0.5",
"karma": "^5.0.8",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-htmlfile-reporter": "^0.3.8",
@ -74,13 +74,13 @@
"karma-verbose-reporter": "^0.0.6",
"karma-webpack": "^4.0.2",
"luxon": "^1.24.1",
"mapbox-gl": "^1.10.0",
"mapbox-gl": "^1.10.1",
"material-design-icons-iconfont": "^5.0.1",
"mediaelement": "^4.2.16",
"mini-css-extract-plugin": "^0.7.0",
"minimist": ">=1.2.5",
"mocha": "^6.2.3",
"moment-timezone": "^0.5.28",
"moment-timezone": "^0.5.31",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0",
"photoswipe": "^4.1.3",
@ -99,6 +99,7 @@
"sass-loader": "^7.3.1",
"sinon": "^9.0.2",
"sockette": "^2.0.6",
"string-strip-html": "^4.4.5",
"style-loader": "^0.23.1",
"sugarss": "^2.0.0",
"svg-url-loader": "^5.0.0",

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

@ -1,6 +1,7 @@
import PhotoSwipe from "photoswipe";
import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default.js";
import Event from "pubsub-js";
import stripHtml from "string-strip-html";
const thumbs = window.clientConfig.thumbnails;
@ -69,6 +70,25 @@ class Viewer {
return item[button.id].src + "?download=1";
}
},
addCaptionHTMLFn: function(item, captionEl, isFake) {
// item - slide object
// captionEl - caption DOM element
// isFake - true when content is added to fake caption container
// (used to get size of next or previous caption)
if(!item.title) {
captionEl.children[0].innerHTML = '';
return false;
}
if(item.description) {
captionEl.children[0].innerHTML = stripHtml(item.title) + '<br><span class="description">' + stripHtml(item.description) + '</span>';
} else {
captionEl.children[0].innerHTML = stripHtml(item.title);
}
return true;
},
};
let gallery = new PhotoSwipe(this.getEl(), PhotoSwipeUI_Default, items, options);

6
frontend/src/component/p-photo-cards.vue
View file

@ -87,11 +87,15 @@
{{ photo.PhotoTitle | truncate(80) }}
</button>
</h3>
<div class="caption mb-2" v-if="photo.PhotoDescription" title="Description">
{{ photo.PhotoDescription }}
</div>
<div class="caption">
<button @click.exact="editPhoto(index)">
<v-icon size="14" title="Taken">date_range</v-icon>
{{ photo.getDateString() }}
</button>
<template v-if="!photo.PhotoDescription">
<br/>
<button v-if="photo.PhotoVideo" @click.exact="openPhoto(index, true)" title="Video">
<v-icon size="14">movie</v-icon>
@ -101,6 +105,7 @@
<v-icon size="14">photo_camera</v-icon>
{{ photo.getPhotoInfo() }}
</button>
</template>
<template v-if="showLocation && photo.LocationID">
<br/>
<button @click.exact="openLocation(index)" title="Location">
@ -108,6 +113,7 @@
{{ photo.getLocation() }}
</button>
</template>
<!-- template v-if="debug">
<br/>
<button @click.exact="openUUID(index)" title="Unique ID">

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

@ -11,6 +11,8 @@
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__taken hidden-xs-only">{{ item.taken }}</div>
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

35
frontend/src/css/viewer.css
View file

@ -6,4 +6,39 @@
padding: 10px;
line-height: 20px;
color: #E0E0E0;
font-weight: 400;
}
#p-photo-viewer .pswp__caption__center .description {
font-weight: 300;
font-size: 13px;
}
#p-photo-viewer .pswp__caption__center .taken {
font-weight: 300;
font-size: 13px;
}
#p-photo-viewer .pswp__taken {
padding: 10px;
line-height: 20px;
font-size: 14px;
color: #E0E0E0;
font-weight: 300;
width: auto;
height: 44px;
position: relative;
background: none;
cursor: none;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
margin: 0;
float: left;
opacity: 0.75;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-box-shadow: none;
box-shadow: none;
}

8
frontend/src/model/thumb.js
View file

@ -8,6 +8,8 @@ class Thumb extends Model {
return {
uuid: "",
title: "",
taken: "",
description: "",
favorite: false,
original_w: 0,
original_h: 0,
@ -29,6 +31,8 @@ class Thumb extends Model {
const result = {
uuid: "",
title: "Not Found",
taken: "",
description: "",
favorite: false,
original_w: 0,
original_h: 0,
@ -69,6 +73,8 @@ class Thumb extends Model {
const result = {
uuid: photo.PhotoUUID,
title: photo.PhotoTitle,
taken: photo.getDateString(),
description: photo.PhotoDescription,
favorite: photo.PhotoFavorite,
download_url: this.downloadUrl(photo),
original_w: photo.FileWidth,
@ -96,6 +102,8 @@ class Thumb extends Model {
const result = {
uuid: photo.PhotoUUID,
title: photo.PhotoTitle,
taken: photo.getDateString(),
description: photo.PhotoDescription,
favorite: photo.PhotoFavorite,
download_url: this.downloadUrl(file),
original_w: file.FileWidth,