RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frame: refactor photo CSS 

Signed-off-by: Varun Patil <radialapps@gmail.com>
pull/900/head
Varun Patil 2023-10-28 18:17:00 -07:00
parent ba12616c0e
commit 757b02fc84
1 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/frame/Photo.vue
View File

@ -9,6 +9,7 @@
error: data.flag & c.FLAG_LOAD_FAIL, error: data.flag & c.FLAG_LOAD_FAIL,
}" }"
> >
<!-- Top-Left -->
<div <div
class="select" class="select"
v-once v-once
@ -18,25 +19,27 @@
<CheckCircleIcon :size="18" /> <CheckCircleIcon :size="18" />
</div> </div>
<div class="video" v-if="data.flag & c.FLAG_IS_VIDEO"> <!-- Top-Right -->
<span v-if="data.video_duration" class="time"> <div class="flag top-right video" v-if="data.flag & c.FLAG_IS_VIDEO">
{{ videoDuration }} <span v-if="data.video_duration" class="time">{{ videoDuration }}</span>
</span>
<VideoIcon :size="22" /> <VideoIcon :size="22" />
</div> </div>
<div
<div class="livephoto" v-if="data.liveid" @mouseenter.passive="playVideo" @mouseleave.passive="stopVideo"> class="flag top-right livephoto"
v-else-if="data.liveid"
@mouseenter.passive="playVideo"
@mouseleave.passive="stopVideo"
>
<LivePhotoIcon :size="22" /> <LivePhotoIcon :size="22" />
</div> </div>
<StarIcon class="bottom-left-flag" :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" /> <!-- Bottom-Left -->
<LocalIcon class="bottom-left-flag" :size="22" v-if="data.flag & c.FLAG_IS_LOCAL" /> <StarIcon class="flag bottom-left" :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
<LocalIcon class="flag bottom-left" :size="22" v-else-if="data.flag & c.FLAG_IS_LOCAL" />
<div <div
class="img-outer fill-block" class="img-outer fill-block"
:class="{ :class="{ 'memories-livephoto': data.liveid }"
'memories-livephoto': data.liveid,
}"
@contextmenu="contextmenu" @contextmenu="contextmenu"
@pointerdown.passive="$emit('pointerdown', $event)" @pointerdown.passive="$emit('pointerdown', $event)"
@touchstart.passive="$emit('touchstart', $event)" @touchstart.passive="$emit('touchstart', $event)"
@ -308,7 +311,9 @@ export default defineComponent({
$icon-half-size: 6px; $icon-half-size: 6px;
$icon-size: $icon-half-size * 2; $icon-size: $icon-half-size * 2;
/* Extra icons */ // Selection icon
// Not the same as any other flag because it does not
// translate when selected, and changes color
.select { .select {
position: absolute; position: absolute;
top: calc(var(--icon-dist) + 2px); top: calc(var(--icon-dist) + 2px);
@ -348,46 +353,49 @@ $icon-size: $icon-half-size * 2;
} }
} }
.video, // Flags to show on timeline
.bottom-left-flag, .flag {
.livephoto {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
transition: transform 0.15s ease; transition: transform 0.15s ease;
filter: invert(1) brightness(100); color: white;
}
.video, &.top-right {
.livephoto { top: var(--icon-dist);
position: absolute; right: var(--icon-dist);
top: var(--icon-dist); .p-outer.selected > & {
right: var(--icon-dist); transform: translate(-$icon-size, $icon-size);
.p-outer.selected > & { }
transform: translate(-$icon-size, $icon-size);
} }
display: flex; &.bottom-left {
align-items: center; bottom: var(--icon-dist);
justify-content: center; left: var(--icon-dist);
.p-outer.selected > & {
.time { transform: translate($icon-size, -$icon-size);
font-size: 0.75em; }
font-weight: bold;
margin-right: 3px;
} }
}
.livephoto { &.video {
pointer-events: auto; display: flex;
} align-items: center;
.bottom-left-flag { justify-content: center;
bottom: var(--icon-dist);
left: var(--icon-dist); > .time {
.p-outer.selected > & { font-size: 0.75em;
transform: translate($icon-size, -$icon-size); font-weight: bold;
margin-right: 3px;
}
}
&.livephoto {
// Hover to play livephoto
pointer-events: auto;
} }
} }
/* Actual image */ // Actual image
div.img-outer { div.img-outer {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;