Merge branch 'kerry/unstable-prefix-for-tile-server' into psf-924/basic-beacon-maximised-view

Signed-off-by: Kerry Archibald <[email protected]>

Author: Kerry Archibald

res/css/views/right_panel/_ThreadPanel.scss

@@ -165,6 +165,10 @@ limitations under the License.
         }
     }
 
+    .mx_GenericEventListSummary > .mx_EventTile_line {
+        padding-left: 30px !important; // Override main timeline styling - align summary text with message text
+    }
+
     .mx_EventTile:not([data-layout=bubble]) {
         .mx_EventTile_e2eIcon {
             left: 8px;
@@ -212,19 +216,21 @@ limitations under the License.
     }
 
     // handling for hidden events (e.g reactions) in the thread view
-    &.mx_ThreadView .mx_GenericEventListSummary_unstyledList .mx_EventTile_info {
+    &.mx_ThreadView .mx_EventTile_info {
+        padding-top: 0 !important; // override main timeline padding
+
         .mx_EventTile_line {
             padding-left: 0 !important; // override main timeline padding
 
             .mx_EventTile_content {
-                margin-left: 54px; // align with text
-                width: calc(100% - 54px - 8px); // match width of parent
+                margin-left: 48px; // align with text
+                width: calc(100% - 48px - 8px); // match width of parent
             }
         }
 
         .mx_EventTile_avatar {
             position: absolute;
-            left: 36px !important; // override main timeline positioning
+            left: 30px !important; // override main timeline positioning
             z-index: 9; // position above the hover styling
         }
 

res/css/views/right_panel/_TimelineCard.scss

@@ -39,6 +39,7 @@ limitations under the License.
         overflow: hidden;
         position: relative; // offset parent for jump to bottom button
         flex: 1;
+        border-radius: 8px;
     }
 
     .mx_AutoHideScrollbar {
@@ -124,4 +125,12 @@ limitations under the License.
     .mx_WhoIsTypingTile_avatars {
         flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
     }
+
+    &.mx_BaseCard {
+        // For a chat timeline on the right panel when the widget is maximised
+        // TODO: rename ThreadPanel
+        &.mx_ThreadPanel {
+            padding-right: 8px; // .mx_RightPanel padding
+        }
+    }
 }

res/css/views/rooms/_EventTile.scss

@@ -762,7 +762,8 @@ $left-gutter: 64px;
         bottom: 0;
         width: 60px;
         box-sizing: border-box;
-        background: linear-gradient(270deg, $system 52.6%, transparent 100%);
+        // XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
+        background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
 
         opacity: 0;
         transform: translateX(60px);

res/themes/dark/css/_dark.scss

@@ -7,6 +7,7 @@ $quaternary-content: #6F7882;
 $quinary-content: #394049;
 
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: #15191E;
 $overlay-background: rgba($background, 0.85);
 

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -1,5 +1,6 @@
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 
 // unified palette
 // try to use these colors when possible
@@ -97,6 +98,7 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 

res/themes/legacy-light/css/_legacy-light.scss

@@ -150,6 +150,7 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #F4F6FA;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 

res/themes/light-custom/css/_custom.scss

@@ -26,6 +26,8 @@ $secondary-content: var(--secondary-content, $secondary-content);
 $tertiary-content: var(--tertiary-content, $tertiary-content);
 $quaternary-content: var(--quaternary-content, $quaternary-content);
 $quinary-content: var(--quinary-content, $quinary-content);
+// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
+$system-transparent: var(--system-transparent, rgba($system, 0.0));
 $system: var(--system, $system);
 $background: var(--background, $background);
 $panels: rgba($system, 0.9);

res/themes/light/css/_light.scss

@@ -34,6 +34,7 @@ $quaternary-content: #c1c6cd;
 $quinary-content: #E3E8F0;
 
 $system: #F4F6FA;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: #ffffff;
 $overlay-background: rgba($background, 0.85);
 

src/Avatar.ts

@@ -57,7 +57,7 @@ function isValidHexColor(color: string): boolean {
     return typeof color === "string" &&
         (color.length === 7 || color.length === 9) &&
         color.charAt(0) === "#" &&
-        !color.substr(1).split("").some(c => isNaN(parseInt(c, 16)));
+        !color.slice(1).split("").some(c => isNaN(parseInt(c, 16)));
 }
 
 function urlForColor(color: string): string {

src/Lifecycle.ts

@@ -875,8 +875,9 @@ async function clearStorage(opts?: { deleteEverything?: boolean }): Promise<void
     Analytics.disable();
 
     if (window.localStorage) {
-        // try to save any 3pid invites from being obliterated
+        // try to save any 3pid invites from being obliterated and registration time
         const pendingInvites = ThreepidInviteStore.instance.getWireInvites();
+        const registrationTime = window.localStorage.getItem("mx_registration_time");
 
         window.localStorage.clear();
 
@@ -886,13 +887,17 @@ async function clearStorage(opts?: { deleteEverything?: boolean }): Promise<void
             logger.error("idbDelete failed for account:mx_access_token", e);
         }
 
-        // now restore those invites
+        // now restore those invites and registration time
         if (!opts?.deleteEverything) {
             pendingInvites.forEach(i => {
                 const roomId = i.roomId;
                 delete i.roomId; // delete to avoid confusing the store
                 ThreepidInviteStore.instance.storeInvite(roomId, i);
             });
+
+            if (registrationTime) {
+                window.localStorage.setItem("mx_registration_time", registrationTime);
+            }
         }
     }