From 7870b3f7ec4ee2f7e900f62204f00f18c6bbdb6e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jul 2020 01:54:40 +0300
Subject: [PATCH] neater way to do hover thing with still image

---
 src/components/status/status.scss          | 13 +---
 src/components/still-image/still-image.vue | 75 +++++++++++-----------
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 85e433c4..8797211e 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -10,16 +10,9 @@ $status-margin: 0.75em;
   border-left: 4px $fallback--cRed;
   border-left: 4px var(--cRed, $fallback--cRed);
 
-  // TODO find a way to do this in a cleaner way without JS
-  // stylelint-disable rscss/class-format
-  &:hover .avatar.animated {
-    canvas {
-      display: none;
-    }
-
-    img {
-      visibility: visible;
-    }
+  &:hover .avatar {
+    --still-image-img: visible;
+    --still-image-canvas: hidden;
   }
 
   &.-focused {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 2ebf33ba..6fa055de 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -35,43 +35,6 @@
   display: flex;
   align-items: center;
 
-  &:hover canvas {
-    display: none;
-  }
-
-  img {
-    width: 100%;
-    min-height: 100%;
-    object-fit: contain;
-  }
-
-  &.animated {
-    &:hover::before,
-    img {
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible
-    }
-
-    &::before {
-      content: 'gif';
-      position: absolute;
-      line-height: 10px;
-      font-size: 10px;
-      top: 5px;
-      left: 5px;
-      background: rgba(127,127,127,.5);
-      color: #FFF;
-      display: block;
-      padding: 2px 4px;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-      z-index: 2;
-    }
-  }
-
   canvas {
     position: absolute;
     top: 0;
@@ -81,6 +44,44 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
+    visibility: var(--still-image-canvas, visible);
+  }
+
+  img {
+    width: 100%;
+    min-height: 100%;
+    object-fit: contain;
+  }
+
+  &.animated {
+    &::before {
+      content: 'gif';
+      position: absolute;
+      line-height: 10px;
+      font-size: 10px;
+      top: 5px;
+      left: 5px;
+      background: rgba(127, 127, 127, 0.5);
+      color: #fff;
+      display: block;
+      padding: 2px 4px;
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      z-index: 2;
+    }
+
+    &:hover canvas {
+      display: none;
+    }
+
+    &:hover::before,
+    img {
+      visibility: var(--still-image-img, hidden);
+    }
+
+    &:hover img {
+      visibility: visible;
+    }
   }
 }
 </style>