Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

res/css/views/rooms/_AppsDrawer.scss

@@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
     padding: 0;
     margin: 5px auto 5px auto;
     color: $accent-color;
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_AddWidget_button_full_width {
@@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
     padding: 9px;
     color: $primary-hairline-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
 }
 
 .mx_AppTile {
@@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppTileMenuBar {
     margin: 0;
-    font-size: 12px;
+    font-size: $font-12px;
     background-color: $widget-menu-bar-bg-color;
     display: flex;
     flex-direction: row;
@@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
+    font-size: $font-16px;
 }
 
 .mx_AppPermissionWarning_row {
@@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionWarning_smallText {
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_AppPermissionWarning_bolder {

res/css/views/rooms/_BasicMessageComposer.scss

@@ -63,8 +63,8 @@ limitations under the License.
                 border-radius: 8px;
                 text-align: center;
                 font-weight: normal;
-                line-height: 16px;
-                font-size: 10.4px;
+                line-height: $font-16px;
+                font-size: $font-10-4px;
             }
         }
     }

res/css/views/rooms/_EntityTile.scss

@@ -78,7 +78,7 @@ limitations under the License.
 .mx_GroupRoomTile_name {
     flex: 1 1 0;
     overflow: hidden;
-    font-size: 14px;
+    font-size: $font-14px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -116,7 +116,7 @@ limitations under the License.
 }
 
 .mx_EntityTile_subtext {
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_EntityTile_power {
     padding-inline-start: 6px;
-    font-size: 10px;
+    font-size: $font-10px;
     color: $notice-secondary-color;
     max-width: 6em;
     overflow: hidden;

res/css/views/rooms/_EventTile.scss

@@ -19,7 +19,7 @@ limitations under the License.
     max-width: 100%;
     clear: both;
     padding-top: 18px;
-    font-size: 14px;
+    font-size: $font-14px;
     position: relative;
 }
 
@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
@@ -72,7 +72,7 @@ limitations under the License.
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: 17px;
+    line-height: $font-17px;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -111,15 +111,23 @@ limitations under the License.
 }
 
 .mx_EventTile_line, .mx_EventTile_reply {
+    clear: both;
     position: relative;
-    /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
-    margin-right: 110px;
     padding-left: 65px; /* left gutter */
     padding-top: 4px;
     padding-bottom: 2px;
     border-radius: 4px;
     min-height: 24px;
-    line-height: 22px;
+    line-height: $font-22px;
+}
+
+.mx_RoomView_timeline_rr_enabled,
+// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
+.mx_EventListSummary {
+    .mx_EventTile_line, .mx_EventTile_reply {
+        /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
+        margin-right: 110px;
+    }
 }
 
 .mx_EventTile_bubbleContainer {
@@ -307,7 +315,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_readAvatarRemainder {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
     position: absolute;
 }
 
@@ -336,7 +344,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_spoiler_reason {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
 }
 
 .mx_EventTile_spoiler_content {
@@ -388,7 +396,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile_keyRequestInfo {
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_EventTile_keyRequestInfo_text {
@@ -466,7 +474,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_content .mx_EventTile_edited {
     user-select: none;
-    font-size: 12px;
+    font-size: $font-12px;
     color: $roomtopic-color;
     display: inline-block;
     margin-left: 9px;
@@ -484,7 +492,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     white-space: normal !important;
     line-height: inherit !important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
-    font-size: 14px;
+    font-size: $font-14px;
 
     pre, code {
         font-family: $monospace-font-family !important;
@@ -584,9 +592,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     .mx_EventTile.mx_EventTile_info {
         // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
         padding-top: 0px;
-        font-size: 13px;
+        font-size: $font-13px;
         .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: 20px;
+            line-height: $font-20px;
         }
         .mx_EventTile_avatar {
             top: 4px;
@@ -594,7 +602,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     }
 
     .mx_EventTile .mx_SenderProfile {
-        font-size: 13px;
+        font-size: $font-13px;
     }
 
     .mx_EventTile.mx_EventTile_emote {

res/css/views/rooms/_JumpToBottomButton.scss

@@ -34,8 +34,8 @@ limitations under the License.
     top: -12px;
     border-radius: 16px;
     font-weight: bold;
-    font-size: 12px;
-    line-height: 14px;
+    font-size: $font-12px;
+    line-height: $font-14px;
     text-align: center;
     // to be able to get it centered
     // with text-align in parent

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -59,7 +59,7 @@ limitations under the License.
 
 .mx_MemberDeviceInfo_deviceId {
     word-break: break-word;
-    font-size: 13px;
+    font-size: $font-13px;
 }
 
 .mx_MemberDeviceInfo_deviceInfo {

res/css/views/rooms/_MemberInfo.scss

@@ -48,7 +48,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo h2 {
-    font-size: 18px;
+    font-size: $font-18px;
     font-weight: 600;
     margin: 16px 0 16px 15px;
 }
@@ -94,12 +94,12 @@ limitations under the License.
     text-transform: uppercase;
     color: $input-darker-fg-color;
     font-weight: bold;
-    font-size: 12px;
+    font-size: $font-12px;
     margin: 4px 0;
 }
 
 .mx_MemberInfo_profileField {
-    font-size: 15px;
+    font-size: $font-15px;
     position: relative;
 }
 
@@ -109,10 +109,10 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     cursor: pointer;
-    font-size: 15px;
+    font-size: $font-15px;
     color: $primary-fg-color;
     margin-left: 8px;
-    line-height: 23px;
+    line-height: $font-23px;
 }
 
 .mx_MemberInfo_createRoom {
@@ -128,7 +128,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo label {
-    font-size: 13px;
+    font-size: $font-13px;
 }
 
 .mx_MemberInfo label .mx_MemberInfo_label_text {
@@ -144,7 +144,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_statusMessage {
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;

res/css/views/rooms/_MemberList.scss

@@ -30,7 +30,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $h3-color;
         font-weight: 600;
-        font-size: 13px;
+        font-size: $font-13px;
         padding-left: 3px;
         padding-right: 12px;
         margin-top: 8px;

res/css/views/rooms/_MessageComposer.scss

@@ -105,7 +105,7 @@ limitations under the License.
     min-height: 60px;
     justify-content: flex-start;
     align-items: flex-start;
-    font-size: 14px;
+    font-size: $font-14px;
     margin-right: 6px;
 }
 
@@ -161,7 +161,7 @@ limitations under the License.
     box-shadow: none;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     max-height: 120px;
     overflow: auto;
     /* needed for FF */
@@ -242,7 +242,7 @@ limitations under the License.
 
     flex-direction: row;
     align-items: center;
-    font-size: 10px;
+    font-size: $font-10px;
     color: $greyed-fg-color;
 }
 

res/css/views/rooms/_MessageComposerFormatBar.scss

@@ -97,13 +97,13 @@ limitations under the License.
 
 .mx_MessageComposerFormatBar_buttonTooltip {
     white-space: nowrap;
-    font-size: 13px;
+    font-size: $font-13px;
     font-weight: 600;
     min-width: 54px;
     text-align: center;
 
     .mx_MessageComposerFormatBar_tooltipShortcut {
-        font-size: 9px;
+        font-size: $font-9px;
         opacity: 0.7;
     }
 }

res/css/views/rooms/_PresenceLabel.scss

@@ -15,6 +15,6 @@ limitations under the License.
 */
 
 .mx_PresenceLabel {
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 0.5;
 }

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -41,7 +41,7 @@ limitations under the License.
         overflow-x: visible;
     }
 
-    .mx_AutoHideScrollbar_offset {
+    .mx_AutoHideScrollbar {
         display: flex;
         flex-direction: row;
         height: 100%;

res/css/views/rooms/_RoomDropTarget.scss

@@ -28,7 +28,7 @@ limitations under the License.
 }
 
 .mx_RoomDropTarget {
-    font-size: 13px;
+    font-size: $font-13px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
@@ -41,7 +41,7 @@ limitations under the License.
 .mx_RoomDropTarget_label {
     position: relative;
     margin-top: 3px;
-    line-height: 21px;
+    line-height: $font-21px;
     z-index: 1;
     text-align: center;
 }

res/css/views/rooms/_RoomHeader.scss

@@ -77,9 +77,9 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 52px;
+    line-height: $font-52px;
     color: $roomheader-color;
-    font-size: 18px;
+    font-size: $font-18px;
     font-weight: 600;
     overflow: hidden;
     margin-left: 63px;
@@ -102,7 +102,7 @@ limitations under the License.
     overflow: hidden;
     color: $roomheader-color;
     font-weight: 600;
-    font-size: 18px;
+    font-size: $font-18px;
     margin: 0 7px;
     border-bottom: 1px solid transparent;
     display: flex;
@@ -161,7 +161,7 @@ limitations under the License.
     flex: 1;
     color: $roomtopic-color;
     font-weight: 400;
-    font-size: 13px;
+    font-size: $font-13px;
     margin: 0 7px;
     margin-top: 4px; // to align baseline of topic with room name
     overflow: hidden;

res/css/views/rooms/_RoomList.scss

@@ -47,13 +47,13 @@ limitations under the License.
 }
 
 .mx_RoomList_emptySubListTip {
-    font-size: 13px;
+    font-size: $font-13px;
     padding: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
     background-color: $droptarget-bg-color;
     border-radius: 4px;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
 .mx_RoomList_emptySubListTip .mx_RoleButton {

res/css/views/rooms/_RoomPreviewBar.scss

@@ -23,7 +23,7 @@ limitations under the License.
     -webkit-align-items: center;
 
     h3 {
-        font-size: 18px;
+        font-size: $font-18px;
         font-weight: 600;
 
         &.mx_RoomPreviewBar_spinnerTitle {
@@ -33,6 +33,13 @@ limitations under the License.
         }
     }
 
+    h3,
+    .mx_RoomPreviewBar_message p {
+        // break-word, with fallback to break-all, which is wider supported
+        word-break: break-all;
+        word-break: break-word;
+    }
+
     .mx_Spinner {
         width: auto;
         height: auto;
@@ -41,8 +48,8 @@ limitations under the License.
     }
 
     .mx_RoomPreviewBar_footer {
-        font-size: 12px;
-        line-height: 20px;
+        font-size: $font-12px;
+        line-height: $font-20px;
 
         .mx_Spinner {
             vertical-align: middle;

res/css/views/rooms/_RoomTile.scss

@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_RoomTile_subtext {
     display: inline-block;
-    font-size: 11px;
+    font-size: $font-11px;
     padding: 0 0 0 7px;
     margin: 0;
     overflow: hidden;
@@ -112,7 +112,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_name {
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 0 4px;
     color: $roomtile-name-color;
     white-space: nowrap;
@@ -126,7 +126,7 @@ limitations under the License.
     padding: 0 0.4em;
     color: $roomtile-badge-fg-color;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .collapsed {

res/css/views/rooms/_SearchBar.scss

@@ -22,7 +22,7 @@ limitations under the License.
 
     .mx_SearchBar_input {
         // border: 1px solid $input-border-color;
-        // font-size: 15px;
+        // font-size: $font-15px;
         flex: 1 1 0;
         margin-left: 22px;
     }
@@ -45,7 +45,7 @@ limitations under the License.
         border: 0;
         margin: 0 0 0 22px;
         padding: 5px;
-        font-size: 15px;
+        font-size: $font-15px;
         cursor: pointer;
         color: $primary-fg-color;
         border-bottom: 2px solid $accent-color;

res/css/views/rooms/_SearchableEntityList.scss

@@ -1,77 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_SearchableEntityList {
-    display: flex;
-
-    flex-direction: column;
-}
-
-.mx_SearchableEntityList_query {
-    font-family: $font-family;
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
-    padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
-    margin-left: 3px;
-    font-size: 15px;
-    margin-bottom: 8px;
-    width: 189px;
-}
-
-.mx_SearchableEntityList_query::-moz-placeholder {
-    color: $primary-fg-color;
-    opacity: 0.5;
-    font-size: 12px;
-}
-
-.mx_SearchableEntityList_query::-webkit-input-placeholder {
-    color: $primary-fg-color;
-    opacity: 0.5;
-    font-size: 12px;
-}
-
-.mx_SearchableEntityList_listWrapper {
-    flex: 1;
-
-    overflow-y: auto;
-}
-
-.mx_SearchableEntityList_list {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-}
-
-.mx_SearchableEntityList_list .mx_EntityTile_chevron {
-    display: none;
-}
-
-.mx_SearchableEntityList_hrWrapper {
-    width: 100%;
-    flex: 0 0 auto;
-}
-
-.mx_SearchableEntityList hr {
-    height: 1px;
-    border: 0px;
-    color: $primary-fg-color;
-    background-color: $primary-fg-color;
-    margin-right: 15px;
-    margin-top: 11px;
-    margin-bottom: 11px;
-}

res/css/views/rooms/_SendMessageComposer.scss

@@ -18,7 +18,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
-    font-size: 14px;
+    font-size: $font-14px;
     justify-content: center;
     margin-right: 6px;
     // don't grow wider than available space

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -51,8 +51,30 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
+    mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;
 }
+
+.mx_TopUnreadMessagesBar_markAsRead {
+    display: block;
+    width: 18px;
+    height: 18px;
+    background: $primary-bg-color;
+    border: 1.3px solid $roomtile-name-color;
+    border-radius: 10px;
+    margin: 5px auto;
+}
+
+.mx_TopUnreadMessagesBar_markAsRead::before {
+    content: "";
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    mask-image: url('$(res)/img/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-size: 10px;
+    mask-position: 4px 4px;
+    background: $roomtile-name-color;
+}

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -49,7 +49,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -57,7 +57,7 @@ limitations under the License.
 
 .mx_WhoIsTypingTile_label {
     flex: 1;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     color: $eventtile-meta-color;
 }