Add profile options on compose form (#7789)

* Add profile options on compose form

* Remove unused imports to appease codeclimate

* Play nicely with cancel button and use ellipsis-v instead of hamburger

* Fix whitespace and quotes to appease codeclimate

1 files changed, 39 insertions, 9 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index cb790ac05..42eebb05c 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1510,9 +1510,21 @@ a.account__display-name {
     text-decoration: none;
   }
 
-  .icon-button {
-    pointer-events: none;
-    opacity: 0;
+  .navigation-bar__actions {
+    position: relative;
+
+    .icon-button.close {
+      position: absolute;
+      pointer-events: none;
+      transform: scale(0.0, 1.0) translate(-100%, 0);
+      opacity: 0;
+    }
+
+    .compose__action-bar .icon-button {
+      pointer-events: auto;
+      transform: scale(1.0, 1.0) translate(0, 0);
+      opacity: 1;
+    }
   }
 }
 
@@ -4932,9 +4944,18 @@ noscript {
       transition: margin-top $duration $delay;
     }
 
-    & > .icon-button {
-      will-change: opacity;
-      transition: opacity $duration $delay;
+    .navigation-bar__actions {
+      & > .icon-button.close {
+        will-change: opacity transform;
+        transition: opacity $duration * 0.5 $delay,
+                    transform $duration $delay;
+      }
+
+      & > .compose__action-bar .icon-button {
+        will-change: opacity transform;
+        transition: opacity $duration * 0.5 $delay + $duration * 0.5,
+                    transform $duration $delay;
+      }
     }
   }
 
@@ -4961,9 +4982,18 @@ noscript {
         margin-top: -50px;
       }
 
-      .icon-button {
-        pointer-events: auto;
-        opacity: 1;
+      .navigation-bar__actions {
+        .icon-button.close {
+          pointer-events: auto;
+          opacity: 1;
+          transform: scale(1.0, 1.0) translate(0, 0);
+        }
+
+        .compose__action-bar .icon-button {
+          pointer-events: none;
+          opacity: 0;
+          transform: scale(0.0, 1.0) translate(100%, 0);
+        }
       }
     }
   }