Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/room-list-widgets

 Conflicts:

	src/components/views/elements/AppTile.js

	src/utils/WidgetUtils.ts

res/css/structures/_CustomRoomTagPanel.scss

@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_CustomRoomTagPanel {
-    background-color: $tagpanel-bg-color;
+    background-color: $groupFilterPanel-bg-color;
     max-height: 40vh;
 }
 

res/css/structures/_GroupFilterPanel.scss

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_TagPanel {
+.mx_GroupFilterPanel {
     flex: 1;
-    background-color: $tagpanel-bg-color;
+    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
 
     display: flex;
@@ -26,49 +26,49 @@ limitations under the License.
     min-height: 0;
 }
 
-.mx_TagPanel_items_selected {
+.mx_GroupFilterPanel_items_selected {
     cursor: pointer;
 }
 
-.mx_TagPanel .mx_TagPanel_divider {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
     height: 0px;
     width: 90%;
     border: none;
-    border-bottom: 1px solid $tagpanel-divider-color;
+    border-bottom: 1px solid $groupFilterPanel-divider-color;
 }
 
-.mx_TagPanel .mx_TagPanel_scroller {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
     flex-grow: 1;
     width: 100%;
 }
 
-.mx_TagPanel .mx_TagPanel_tagTileContainer {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
 
     padding-top: 6px;
 }
-.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
     margin: 6px 0;
 }
 
-.mx_TagPanel .mx_TagTile {
+.mx_GroupFilterPanel .mx_TagTile {
     // opacity: 0.5;
     position: relative;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_prototype {
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
     padding: 3px;
 }
 
-.mx_TagPanel .mx_TagTile:focus,
-.mx_TagPanel .mx_TagTile:hover,
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+.mx_GroupFilterPanel .mx_TagTile:focus,
+.mx_GroupFilterPanel .mx_TagTile:hover,
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected {
     // opacity: 1;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
     background-color: $primary-bg-color;
     border-radius: 6px;
 }
@@ -108,7 +108,7 @@ limitations under the License.
     }
 }
 
-.mx_TagPanel .mx_TagTile_plus {
+.mx_GroupFilterPanel .mx_TagTile_plus {
     margin-bottom: 12px;
     height: 32px;
     width: 32px;
@@ -132,7 +132,7 @@ limitations under the License.
     }
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before {
     content: '';
     height: 100%;
     background-color: $accent-color;
@@ -142,7 +142,7 @@ limitations under the License.
     border-radius: 0 3px 3px 0;
 }
 
-.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
+.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
     filter: none;
 }
 

res/css/structures/_LeftPanel.scss

@@ -14,29 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$tagPanelWidth: 56px; // only applies in this file, used for calculations
+$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     min-width: 260px;
     max-width: 50%;
 
-    // Create a row-based flexbox for the TagPanel and the room list
+    // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
 
-    .mx_LeftPanel_tagPanelContainer {
+    .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
         flex-shrink: 0;
-        flex-basis: $tagPanelWidth;
+        flex-basis: $groupFilterPanelWidth;
         height: 100%;
 
-        // Create another flexbox so the TagPanel fills the container
+        // Create another flexbox so the GroupFilterPanel fills the container
         display: flex;
 
-        // TagPanel handles its own CSS
+        // GroupFilterPanel handles its own CSS
     }
 
-    &:not(.mx_LeftPanel_hasTagPanel) {
+    &:not(.mx_LeftPanel_hasGroupFilterPanel) {
         .mx_LeftPanel_roomListContainer {
             width: 100%;
         }
@@ -45,7 +45,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
-        width: calc(100% - $tagPanelWidth);
+        width: calc(100% - $groupFilterPanelWidth);
         background-color: $roomlist-bg-color;
 
         // Create another flexbox (this time a column) for the room list components
@@ -169,10 +169,10 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
         min-width: unset;
 
         // We have to forcefully set the width to override the resizer's style attribute.
-        &.mx_LeftPanel_hasTagPanel {
-            width: calc(68px + $tagPanelWidth) !important;
+        &.mx_LeftPanel_hasGroupFilterPanel {
+            width: calc(68px + $groupFilterPanelWidth) !important;
         }
-        &:not(.mx_LeftPanel_hasTagPanel) {
+        &:not(.mx_LeftPanel_hasGroupFilterPanel) {
             width: 68px !important;
         }
 

res/css/structures/_RoomDirectory.scss

@@ -133,6 +133,10 @@ limitations under the License.
 .mx_RoomDirectory_topic {
     cursor: initial;
     color: $light-fg-color;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
 }
 
 .mx_RoomDirectory_alias {

res/css/structures/_TabbedView.scss

@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_TabbedView {
     margin: 0;
-    padding: 0 0 0 58px;
+    padding: 0 0 0 16px;
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -25,6 +25,7 @@ limitations under the License.
     bottom: 0;
     left: 0;
     right: 0;
+    margin-top: 8px;
 }
 
 .mx_TabbedView_tabLabels {
@@ -35,13 +36,13 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabel {
+    display: flex;
+    align-items: center;
     vertical-align: text-top;
     cursor: pointer;
-    display: block;
-    border-radius: 3px;
-    font-size: $font-14px;
-    min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
-    margin-bottom: 6px;
+    padding: 8px 0;
+    border-radius: 8px;
+    font-size: $font-13px;
     position: relative;
 }
 
@@ -51,9 +52,8 @@ limitations under the License.
 }
 
 .mx_TabbedView_maskedIcon {
-    margin-left: 6px;
-    margin-right: 9px;
-    margin-top: 1px;
+    margin-left: 8px;
+    margin-right: 16px;
     width: 16px;
     height: 16px;
     display: inline-block;
@@ -65,10 +65,9 @@ limitations under the License.
     mask-repeat: no-repeat;
     mask-size: 16px;
     width: 16px;
-    height: 22px;
+    height: 16px;
     mask-position: center;
     content: '';
-    vertical-align: middle;
 }
 
 .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {