Merge branch 'experimental' of github.com:matrix-org/matrix-react-sdk into erikj/state_counters

res/css/_components.scss

@@ -5,6 +5,7 @@
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
 @import "./structures/_FilePanel.scss";
+@import "./structures/_GroupGridView.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";

res/css/structures/_GroupGridView.scss

@@ -0,0 +1,130 @@
+/*
+Copyright 2017 Vector Creations 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_GroupGridView {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_GroupGridView_rooms {
+    display: grid;
+    grid-template-columns: repeat(3, calc(100% / 3));
+    grid-template-rows: repeat(2, calc(100% / 2));
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.mx_GroupGridView_rightPanel {
+    display: flex;
+    flex-direction: column;
+
+    .mx_GroupGridView_tabs {
+        flex: 0 0 52px;
+        border-bottom: 1px solid $primary-hairline-color;
+        display: flex;
+        align-items: center;
+
+        > div {
+            justify-content: flex-end;
+            width: 100%;
+            margin-right: 10px;
+        }
+    }
+
+    .mx_RightPanel {
+        flex: 1 0 auto !important;
+    }
+}
+
+
+.mx_GroupGridView > .mx_MainSplit {
+    flex: 1 1 0;
+    display: flex;
+}
+
+.mx_GroupGridView_emptyTile {
+    display: block;
+    margin-top: 100px;
+    text-align: center;
+    user-select: none;
+}
+
+.mx_GroupGridView_tile {
+    border-right: 1px solid $panel-divider-color;
+    border-bottom: 1px solid $panel-divider-color;
+}
+
+.mx_GroupGridView_activeTile {
+    position: relative;
+}
+
+.mx_GroupGridView_activeTile:before,
+.mx_GroupGridView_activeTile:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: "";
+    pointer-events: none;
+    z-index: 3500;
+}
+
+.mx_GroupGridView_activeTile:before {
+    border-radius: 14px;
+    border: 8px solid $gridview-focus-border-glow-color;
+    margin: -8px;
+}
+
+.mx_GroupGridView_activeTile:after {
+    border-radius: 8px;
+    border: 2px solid $gridview-focus-border-color;
+    margin: -2px;
+}
+
+.mx_GroupGridView_tile > .mx_RoomView {
+    height: 100%;
+}
+
+.mx_GroupGridView_rooms > *:nth-child(1) {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.mx_GroupGridView_rooms > *:nth-child(2) {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.mx_GroupGridView_rooms > *:nth-child(3) {
+    grid-column: 3;
+    grid-row: 1;
+}
+
+.mx_GroupGridView_rooms > *:nth-child(4) {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.mx_GroupGridView_rooms > *:nth-child(5) {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.mx_GroupGridView_rooms > *:nth-child(6) {
+    grid-column: 3;
+    grid-row: 2;
+}

res/css/structures/_LeftPanel.scss

@@ -41,10 +41,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_LeftPanel_callView {
-
-}
-
 .mx_LeftPanel {
     flex: 1;
     overflow-x: hidden;

res/css/structures/_MatrixChat.scss

@@ -73,14 +73,16 @@ limitations under the License.
 .mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
     background-color: $primary-bg-color;
 
-    flex: 1;
+    flex: 1 1 0;
+    min-width: 0;
 
     /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
        and https://github.com/vector-im/vector-web/issues/946.
        Empirically this stops the MessagePanel's width exploding outwards when
        gemini is in 'prevented' mode
        */
-    overflow-x: auto;
+    // disabling this for now as it clips the active room rect on the grid view
+    // overflow-x: auto;
 
     /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
        needed height 100% all the way down to the HomePage. Height does not

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CreateKeyBackupDialog {
-    padding-right: 40px;
-}
-
 .mx_CreateKeyBackupDialog .mx_Dialog_title {
     /* TODO: Consider setting this for all dialog titles. */
     margin-bottom: 1em;

res/css/views/dialogs/keybackup/_NewRecoveryMethodDialog.scss

@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     &:before {
-        mask: url("../../../img/e2e/lock-warning.svg");
+        mask: url("../../img/e2e/lock-warning.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;
         content: "";

res/css/views/elements/_RichText.scss

@@ -19,6 +19,11 @@
     cursor: pointer;
 }
 
+/* More specific to override `.markdown-body a` text-decoration */
+.mx_EventTile_content .markdown-body a.mx_Pill {
+    text-decoration: none;
+}
+
 /* More specific to override `.markdown-body a` color */
 .mx_EventTile_content .markdown-body a.mx_UserPill,
 .mx_UserPill {
@@ -31,7 +36,9 @@
     background-color: $accent-color ! important;
 }
 
+/* More specific to override `.markdown-body a` color */
 .mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
+.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
 .mx_EventTile_content .mx_AtRoomPill,
 .mx_MessageComposer_input .mx_AtRoomPill {
     color: $accent-fg-color;

res/css/views/messages/_MImageBody.scss

@@ -56,4 +56,6 @@ limitations under the License.
     border-radius: 5px;
     background: $imagebody-giflabel;
     border: 2px solid $imagebody-giflabel-border;
+    color: $imagebody-giflabel-color;
+    pointer-events: none;
 }

res/css/views/rooms/_MemberList.scss

@@ -53,6 +53,10 @@ limitations under the License.
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
+    flex: 0 0 auto;
+}
+
+.mx_MemberList .gm-scrollbar-container {
     flex: 1 1 0;
 }
 

res/css/views/rooms/_RoomTile.scss

@@ -54,12 +54,14 @@ limitations under the License.
     align-items: center;
     flex: 1;
     vertical-align: middle;
+    min-width: 0;
 }
 
 .mx_RoomTile_labelContainer {
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-width: 0;
 }
 
 .mx_RoomTile_subtext {
@@ -99,7 +101,6 @@ limitations under the License.
 }
 
 .mx_RoomTile_name {
-    flex: 1 5 auto;
     font-size: 14px;
     font-weight: 600;
     padding: 0 6px;