Now only showing asset selection ticks when the mouse is hovered over.

ashleydavis · Aug 3, 2024 · 2f23428 · 2f23428
1 parent fc6d881
commit 2f23428
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -138,6 +138,14 @@ i {
     }
 }
 
+.selection-tick {
+    display: none;
+}
+
+.gallery-thumb-container:hover .selection-tick {
+    display: flex;
+}
+
 /* Gallery scrollbar */
 
 .gallery-scrollbar {

diff --git a/packages/user-interface/src/components/gallery-image.tsx b/packages/user-interface/src/components/gallery-image.tsx
@@ -108,6 +108,7 @@ export function GalleryImage({ isScrolling, item, onClick, x, y, width, height }
 
             {objectURL
                 && <div
+                    className="gallery-thumb-container"
                     style={{
                         position: "absolute",
                         left: `${x}px`,
@@ -176,6 +177,7 @@ export function GalleryImage({ isScrolling, item, onClick, x, y, width, height }
                     {/* Selection tick mark. */}
 
                     <div
+                        className="selection-tick"
                         style={{
                             position: "absolute",
                             left: "8px",
@@ -184,10 +186,10 @@ export function GalleryImage({ isScrolling, item, onClick, x, y, width, height }
                             height: "24px",
                             borderRadius: "50%",
                             backgroundColor: isSelected ? "rgba(0, 0, 255, 1)" : "rgba(0, 0, 0, 0.25)",
-                            display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
                             cursor: "pointer",
+                            display: isSelected ? "flex" : undefined,
                         }}
                         onClick={event => {
                             event.preventDefault();