Animate lightbox and better touch support

signalapp · Oct 12, 2021 · 7dca544 · 7dca544
1 parent 7488fa5
commit 7dca544
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 201 deletions.
diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
@@ -5,18 +5,21 @@
   &__container {
     background-color: $color-black-alpha-90;
     bottom: 0;
-    display: flex;
-    flex-direction: column;
     left: 0;
-    padding: 0 16px;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 10;
+  }
 
-    &--zoom {
-      padding: 0;
-    }
+  &__animated {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
   }
 
   &__main-container {
@@ -76,15 +79,6 @@
     }
   }
 
-  &__shadow-container {
-    display: flex;
-    height: 100%;
-    padding: 0;
-    position: absolute;
-    width: 100%;
-    visibility: hidden;
-  }
-
   &__object {
     &--container {
       display: inline-flex;
@@ -93,34 +87,21 @@
       overflow: hidden;
       position: relative;
       z-index: 1;
+
+      &--zoom {
+        backface-visibility: hidden;
+      }
     }
 
     height: auto;
-    left: 50%;
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
     outline: none;
     padding: 0 40px;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
     width: auto;
   }
 
-  &__shadow-container &__object {
-    max-height: 200%;
-    max-width: 200%;
-    padding: 10%;
-    visibility: hidden;
-  }
-
-  &__object--container--zoom &__object {
-    max-height: 200%;
-    max-width: 200%;
-    padding: 10%;
-  }
-
   &__object--container--fill &__object {
     height: 100%;
     padding: 0;
@@ -206,6 +187,9 @@
     height: 56px;
     justify-content: space-between;
     margin-top: 24px;
+    opacity: 1;
+    padding: 0 16px;
+    transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
 
     &--container {
       display: flex;
@@ -226,6 +210,19 @@
     }
   }
 
+  &__footer {
+    opacity: 1;
+    padding: 0 16px;
+    transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
+  }
+
+  &__container--zoom {
+    .Lightbox__header,
+    .Lightbox__footer {
+      opacity: 0;
+    }
+  }
+
   &__button {
     @include button-reset;