Merge branch 'develop' into show-username

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -101,7 +101,8 @@ limitations under the License.
     }
 
     .mx_SearchBox {
-        margin: 0;
+        // To match the space around the title
+        margin: 0 0 15px 0;
         flex-grow: 0;
     }
 
@@ -123,7 +124,9 @@ limitations under the License.
     }
 
     .mx_AddExistingToSpaceDialog_section {
-        margin-top: 24px;
+        &:not(:first-child) {
+            margin-top: 24px;
+        }
 
         > h3 {
             margin: 0;

res/css/views/rooms/_BasicMessageComposer.scss

@@ -68,8 +68,8 @@ limitations under the License.
         }
 
         &.mx_BasicMessageComposer_input_disabled {
+            // Ignore all user input to avoid accidentally triggering the composer
             pointer-events: none;
-            cursor: not-allowed;
         }
     }
 

res/css/views/rooms/_EventTile.scss

@@ -159,6 +159,7 @@ $left-gutter: 64px;
 .mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
 .mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
 .mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
 .mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
 .mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
     visibility: visible;
@@ -282,6 +283,10 @@ $left-gutter: 64px;
     display: inline-block;
     height: $font-14px;
     width: $font-14px;
+
+    transition:
+        left var(--transition-short) ease-out,
+        top var(--transition-standard) ease-out;
 }
 
 .mx_EventTile_readAvatarRemainder {

res/css/views/rooms/_IRCLayout.scss

@@ -216,6 +216,25 @@ $irc-line-height: $font-18px;
                 }
             }
         }
+
+        .mx_EventTile_emote {
+            > .mx_EventTile_avatar {
+                margin-left: initial;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            width: initial;
+        }
+
+        /**
+         * adding the icon back in the document flow
+         * if it's not present, there's no unwanted wasted space
+         */
+        .mx_EventTile_e2eIcon {
+            position: relative;
+            order: -1;
+        }
     }
 
     .mx_ProfileResizer {

res/css/views/rooms/_RoomSublist.scss

@@ -18,6 +18,10 @@ limitations under the License.
     margin-left: 8px;
     margin-bottom: 4px;
 
+    &.mx_RoomSublist_hidden {
+        display: none;
+    }
+
     .mx_RoomSublist_headerContainer {
         // Create a flexbox to make alignment easy
         display: flex;
@@ -37,7 +41,9 @@ limitations under the License.
         // The combined height must be set in the LeftPanel component for sticky headers
         // to work correctly.
         padding-bottom: 8px;
-        height: 24px;
+        // Allow the container to collapse on itself if its children
+        // are not in the normal document flow
+        max-height: 24px;
         color: $roomlist-header-color;
 
         .mx_RoomSublist_stickable {

res/css/views/rooms/_VoiceRecordComposerTile.scss

@@ -53,7 +53,8 @@ limitations under the License.
     font-size: $font-14px;
 
     &::before {
-        // TODO: @@ TravisR: Animate
+        animation: recording-pulse 2s infinite;
+
         content: '';
         background-color: $voice-record-live-circle-color;
         width: 10px;
@@ -74,3 +75,26 @@ limitations under the License.
         width: 42px; // we're not using a monospace font, so fake it
     }
 }
+
+// The keyframes are slightly weird here to help make a ramping/punch effect
+// for the recording dot. We start and end at 100% opacity to help make the
+// dot feel a bit like a real lamp that is blinking: the animation ends up
+// spending a lot of its time showing a steady state without a fade effect.
+// This lamp effect extends into why the 0% opacity keyframe is not in the
+// midpoint: lamps take longer to turn off than they do to turn on, and the
+// extra frames give it a bit of a realistic punch for when the animation is
+// ramping back up to 100% opacity.
+//
+// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
+// (intended to be used in a loop for 2s animation speed)
+@keyframes recording-pulse {
+    0% {
+        opacity: 1;
+    }
+    35% {
+        opacity: 0;
+    }
+    65% {
+        opacity: 1;
+    }
+}