Add media editing modal (#11563)

Move media description input to a modal and unite that modal with
the focal point modal. Add a hint about choosing focal points, as
well as a preview of a 16:9 thumbnail. Enable the user to watch
the video next to the media description input.

Fix #8320
Fix #6713

1 files changed, 41 insertions, 15 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 8de72d72e..f2967a398 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4567,6 +4567,14 @@ a.status-card.compact:hover {
     }
   }
 
+  .setting-text-label {
+    display: block;
+    color: $inverted-text-color;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
   .setting-toggle {
     margin-top: 20px;
     margin-bottom: 24px;
@@ -4960,6 +4968,10 @@ a.status-card.compact:hover {
   max-width: 100%;
   border-radius: 4px;
 
+  &.editable {
+    border-radius: 0;
+  }
+
   &:focus {
     outline: 0;
   }
@@ -5688,27 +5700,20 @@ noscript {
   }
 }
 
-.focal-point-modal {
-  max-width: 80vw;
-  max-height: 80vh;
-  position: relative;
-}
-
 .focal-point {
   position: relative;
-  cursor: pointer;
+  cursor: move;
   overflow: hidden;
 
-  &.dragging {
-    cursor: move;
-  }
-
-  img {
-    max-width: 80vw;
+  img,
+  video {
+    display: block;
     max-height: 80vh;
-    width: auto;
+    width: 100%;
     height: auto;
-    margin: auto;
+    margin: 0;
+    object-fit: contain;
+    background: $base-shadow-color;
   }
 
   &__reticle {
@@ -5728,6 +5733,27 @@ noscript {
     top: 0;
     left: 0;
   }
+
+  &__preview {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    z-index: 2;
+    cursor: default;
+
+    strong {
+      color: $primary-text-color;
+      font-size: 14px;
+      font-weight: 500;
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    div {
+      border-radius: 4px;
+      box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
+    }
+  }
 }
 
 .account__header__content {