Merge branch 'experimental' into bwindels/smarterresizer

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";
@@ -50,7 +51,7 @@
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
-@import "./views/dialogs/keybackup/_NewRecoveryMethodDialog.scss";
+@import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
 @import "./views/directory/_NetworkDropdown.scss";
 @import "./views/elements/_AccessibleButton.scss";
@@ -91,6 +92,7 @@
 @import "./views/messages/_UnknownBody.scss";
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
+@import "./views/rooms/_AuxPanel.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_LinkPreviewWidget.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/_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/_KeyBackupFailedDialog.scss

@@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_NewRecoveryMethodDialog .mx_Dialog_title {
+.mx_KeyBackupFailedDialog .mx_Dialog_title {
     margin-bottom: 32px;
 }
 
-.mx_NewRecoveryMethodDialog_title {
+.mx_KeyBackupFailedDialog_title {
     position: relative;
     padding-left: 45px;
     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: "";
@@ -36,6 +36,6 @@ limitations under the License.
     }
 }
 
-.mx_NewRecoveryMethodDialog .mx_Dialog_buttons {
+.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
     margin-top: 36px;
 }

res/css/views/rooms/_AuxPanel.scss

@@ -0,0 +1,50 @@
+/*
+Copyright 2018 New Vector 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.
+*/
+
+.m_RoomView_auxPanel_stateViews {
+    padding: 5px;
+    padding-left: 19px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.m_RoomView_auxPanel_stateViews_span a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=warning] {
+    font-weight: bold;
+    color: orange;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=alert] {
+    font-weight: bold;
+    color: red;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=normal] {
+    font-weight: normal;
+}
+
+.m_RoomView_auxPanel_stateViews_span[data-severity=notice] {
+    font-weight: normal;
+    color: $settings-grey-fg-color;
+}
+
+.m_RoomView_auxPanel_stateViews_delim {
+    padding: 0 5px;
+    color: $settings-grey-fg-color;
+}

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;
 }