Simple structuring of the room list itself

This covers the larger parts of the design, but doesn't deal with the nuances of hover states, badge sizing, etc.
2020-06-04 21:21:04 -06:00
parent 4c1bc50649
commit 0c15b2bdb6
8 changed files with 205 additions and 116 deletions
@@ -16,7 +16,27 @@ limitations under the License.

@import "../../../../node_modules/react-resizable/css/styles.css";

-.mx_RoomList2 .mx_RoomSubList2_labelContainer {
-  z-index: 12;
-  background-color: purple;
+.mx_RoomSublist2 {
+    // The sublist is a column of rows, essentially
+    display: flex;
+    flex-direction: column;
+
+    margin-left: 8px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+
+    .mx_RoomSublist2_headerContainer {
+        text-transform: uppercase;
+        opacity: 0.5;
+        line-height: $font-16px;
+        font-size: $font-12px;
+        padding-bottom: 8px;
+    }
+
+    .mx_RoomSublist2_resizeBox {
+        // Create another flexbox column for the tiles
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
 }
@@ -14,5 +14,81 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+// Note: the room tile expects to be in a flexbox column container
 .mx_RoomTile2 {
+    width: 100%;
+    padding-bottom: 12px;
+
+    // The tile is also a flexbox row itself
+    display: flex;
+    flex-wrap: wrap;
+
+    .mx_RoomTile2_avatarContainer {
+        margin-right: 8px;
+    }
+
+    .mx_RoomTile2_nameContainer {
+        // Create a new column layout flexbox for the name parts
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .mx_RoomTile2_name,
+        .mx_RoomTile2_messagePreview {
+            margin: 0 2px;
+        }
+
+        // TODO: Ellipsis on the name and preview
+
+        .mx_RoomTile2_name {
+            font-weight: 600;
+            font-size: $font-14px;
+            line-height: $font-19px;
+        }
+
+        .mx_RoomTile2_messagePreview {
+            font-size: $font-13px;
+            line-height: $font-18px;
+            color: $roomtile2-preview-color;
+        }
+    }
+
+    .mx_RoomTile2_badgeContainer {
+        flex-grow: 1;
+
+        // Create another flexbox row because it's super easy to position the badge at
+        // the end this way.
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        .mx_RoomTile2_badge {
+            background-color: $roomtile2-badge-color;
+
+            &:not(.mx_RoomTile2_badgeEmpty) {
+                border-radius: 16px;
+                font-size: $font-10px;
+                line-height: $font-14px;
+                text-align: center;
+                font-weight: bold;
+                margin-right: 14px;
+                color: #fff; // TODO: Variable
+
+                // TODO: Confirm padding on counted badges
+                padding: 2px 5px;
+            }
+
+            &.mx_RoomTile2_badgeEmpty {
+                width: 6px;
+                height: 6px;
+                border-radius: 6px;
+                margin-right: 18px;
+            }
+
+            &.mx_RoomTile2_badgeHighlight {
+                // TODO: Use a more specific variable
+                background-color: $warning-color;
+            }
+        }
+    }
 }