From 34dd6a2468ef336cbaa15b5d46159876234e5b62 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Wed, 7 Sep 2022 16:12:06 -0700
Subject: [PATCH] Show selection background

---
 src/components/Photo.vue    | 37 ++++++++++++++++++++++++-------------
 src/components/Timeline.vue |  1 +
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Photo.vue b/src/components/Photo.vue
index 3d23c240..3b52f26d 100644
--- a/src/components/Photo.vue
+++ b/src/components/Photo.vue
@@ -1,18 +1,19 @@
 <template>
     <div class="photo-container" :class="{ 'selected': data.selected }">
-        <div class="icon-checkmark select" @click="toggleSelect"></div>
+        <div class="icon-checkmark select" v-if="!data.ph" @click="toggleSelect"></div>
 
         <div v-if="data.isvideo" class="icon-video-white"></div>
-        <img
-            @click="click"
-            :src="data.ph ? undefined : getPreviewUrl(data.fileid, data.etag)"
-            :key="data.fileid"
-            @load = "data.l = Math.random()"
-            @error="(e) => e.target.src='/apps/memories/img/error.svg'"
-            :style="{
+        <div class="img-outer" :style="{
                 width: rowHeight + 'px',
                 height: rowHeight + 'px',
-            }"/>
+            }">
+            <img
+                @click="click"
+                :src="data.ph ? undefined : getPreviewUrl(data.fileid, data.etag)"
+                :key="data.fileid"
+                @load = "data.l = Math.random()"
+                @error="(e) => e.target.src='/apps/memories/img/error.svg'" />
+        </div>
     </div>
 </template>
 
@@ -138,6 +139,10 @@ export default {
         },
 
         toggleSelect() {
+            if (this.data.ph) {
+                return;
+            }
+
             this.$emit('select', this.data);
             this.$forceUpdate();
         },
@@ -147,14 +152,17 @@ export default {
 
 <style scoped>
 .photo-container:hover .icon-checkmark {
-    opacity: 0.6;
+    opacity: 0.7;
 }
 .photo-container.selected .icon-checkmark {
     opacity: 0.9;
     filter: invert();
 }
+.photo-container.selected .img-outer {
+    padding: 6%;
+}
 .photo-container.selected img {
-    padding: 8%;
+    box-shadow: 0 0 6px 2px var(--color-primary);
 }
 .icon-checkmark {
     opacity: 0;
@@ -171,13 +179,16 @@ export default {
     position: absolute;
     top: 8px; right: 8px;
 }
+.img-outer {
+    padding: 2px;
+    transition: all 0.1s ease-in-out;
+}
 img {
     background-clip: content-box;
     background-color: var(--color-loading-light);
-    padding: 2px;
     object-fit: cover;
     border-radius: 3%;
     cursor: pointer;
-    transition: padding 0.1s ease-in-out;
+    width: 100%; height: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 198c35db..1c6bbca2 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -675,6 +675,7 @@ export default {
     display: inline-block;
     position: relative;
     cursor: pointer;
+    vertical-align: top;
 }
 
 .head-row {