frame: add local flag to photo

Signed-off-by: Varun Patil <radialapps@gmail.com>
pull/653/head
Varun Patil 2023-05-03 20:21:20 -07:00
parent 917fccf0da
commit 839de2e646
1 changed files with 17 additions and 14 deletions

View File

@ -9,20 +9,21 @@
error: data.flag & c.FLAG_LOAD_FAIL, error: data.flag & c.FLAG_LOAD_FAIL,
}" }"
> >
<CheckCircle v-once :size="18" class="select" @click="toggleSelect" /> <CheckCircleIcon v-once :size="18" class="select" @click="toggleSelect" />
<div class="video" v-if="data.flag & c.FLAG_IS_VIDEO"> <div class="video" v-if="data.flag & c.FLAG_IS_VIDEO">
<span v-if="data.video_duration" class="time"> <span v-if="data.video_duration" class="time">
{{ videoDuration }} {{ videoDuration }}
</span> </span>
<Video :size="22" /> <VideoIcon :size="22" />
</div> </div>
<div class="livephoto" @mouseenter.passive="playVideo" @mouseleave.passive="stopVideo"> <div class="livephoto" @mouseenter.passive="playVideo" @mouseleave.passive="stopVideo">
<LivePhoto :size="22" v-if="data.liveid" /> <LivePhotoIcon :size="22" v-if="data.liveid" />
</div> </div>
<Star :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" /> <StarIcon class="bottom-left-flag" :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
<LocalIcon class="bottom-left-flag" :size="22" v-if="data.flag & c.FLAG_IS_LOCAL" />
<div <div
class="img-outer fill-block" class="img-outer fill-block"
@ -60,18 +61,20 @@ import { IDay, IPhoto } from '../../types';
import * as utils from '../../services/Utils'; import * as utils from '../../services/Utils';
import errorsvg from '../../assets/error.svg'; import errorsvg from '../../assets/error.svg';
import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'; import CheckCircleIcon from 'vue-material-design-icons/CheckCircle.vue';
import Star from 'vue-material-design-icons/Star.vue'; import StarIcon from 'vue-material-design-icons/Star.vue';
import Video from 'vue-material-design-icons/PlayCircleOutline.vue'; import VideoIcon from 'vue-material-design-icons/PlayCircleOutline.vue';
import LivePhoto from 'vue-material-design-icons/MotionPlayOutline.vue'; import LivePhotoIcon from 'vue-material-design-icons/MotionPlayOutline.vue';
import LocalIcon from 'vue-material-design-icons/CloudOff.vue';
export default defineComponent({ export default defineComponent({
name: 'Photo', name: 'Photo',
components: { components: {
CheckCircle, CheckCircleIcon,
Video, VideoIcon,
Star, StarIcon,
LivePhoto, LivePhotoIcon,
LocalIcon,
}, },
props: { props: {
@ -323,7 +326,7 @@ $icon-size: $icon-half-size * 2;
} }
} }
.video, .video,
.star-icon, .bottom-left-flag,
.livephoto { .livephoto {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
@ -353,7 +356,7 @@ $icon-size: $icon-half-size * 2;
.livephoto { .livephoto {
pointer-events: auto; pointer-events: auto;
} }
.star-icon { .bottom-left-flag {
bottom: var(--icon-dist); bottom: var(--icon-dist);
left: var(--icon-dist); left: var(--icon-dist);
.p-outer.selected > & { .p-outer.selected > & {