Merge pull request #4132 from uhoreg/compact

add styles for compact layout
element-hq · Jun 1, 2017 · f099f56 · f099f56
2 parents 19f9900 + 9f597e9
commit f099f56
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 1 deletion.
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -175,3 +175,22 @@ limitations under the License.
     margin-top: -2px;
 }
 
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomStatusBar {
+        min-height: 40px;
+    }
+
+    .mx_RoomStatusBar_indicator {
+        margin-top: 10px;
+    }
+
+    .mx_RoomStatusBar_callBar {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .mx_RoomStatusBar_typingBar {
+      height: 40px;
+      line-height: 40px;
+    }
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -260,4 +260,14 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_ongoingConfCallNotification a {
     color: $accent-fg-color ! important;
-}
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomView_MessageList {
+        margin-bottom: 4px;
+    }
+
+    .mx_RoomView_statusAreaBox {
+        min-height: 42px;
+    }
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
@@ -48,3 +48,13 @@ limitations under the License.
     margin-left: 63px;
     line-height: 30px;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_MemberEventListSummary_line {
+        line-height: 22px;
+    }
+
+    .mx_MemberEventListSummary_toggle {
+        margin-top: 2px;
+    }
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -360,3 +360,67 @@ limitations under the License.
 }
 
 /* end of overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        padding-top: 0px;
+    }
+
+    .mx_EventTile .mx_SenderProfile {
+        font-size: 13px;
+    }
+
+    .mx_EventTile.mx_EventTile_emote {
+        padding-top: 8px;
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+        .mx_EventTile_line {
+            padding-top: 0px;
+            padding-bottom: 1px;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+        padding-top: 0;
+        .mx_EventTile_line {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    }
+
+    .mx_EventTile_line {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .mx_EventTile_avatar {
+        top: 2px;
+    }
+
+    .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+        top: 5px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        top: 7px;
+    }
+
+    .mx_EventTile_readAvatars {
+        top: 27px;
+    }
+
+    .mx_EventTile_continuation .mx_EventTile_readAvatars,
+    .mx_EventTile_info .mx_EventTile_readAvatars,
+    .mx_EventTile_emote .mx_EventTile_readAvatars {
+        top: 5px;
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
@@ -60,3 +60,10 @@ limitations under the License.
 .mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
     visibility: visible;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_LinkPreviewWidget {
+        margin-top: 6px;
+        margin-bottom: 6px;
+    }
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -200,3 +200,13 @@ limitations under the License.
     padding: 4px 4px 4px 0;
     opacity: 0.8;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_MessageComposer_input {
+        min-height: 50px;
+    }
+
+    .mx_MessageComposer_noperm_error {
+        height: 50px;
+    }
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
@@ -44,3 +44,10 @@ limitations under the License.
     padding-top: 3px;
     cursor: pointer;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_TopUnreadMessagesBar {
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+}
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -104,3 +104,17 @@ limitations under the License.
     top: -25px;
     left: 6px;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_LeftPanel .mx_BottomLeftMenu {
+        flex: 0 0 50px;
+    }
+
+    .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+        flex: 0 0 160px;
+    }
+
+    .mx_LeftPanel .mx_BottomLeftMenu_options {
+        margin-top: 12px;
+    }
+}
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -118,3 +118,14 @@ limitations under the License.
     vertical-align: top;
     padding-left: 10px
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RightPanel_footer {
+        flex: 0 0 50px;
+    }
+
+    .mx_RightPanel_footer .mx_RightPanel_invite {
+        line-height: 25px;
+        padding-top: 8px;
+    }
+}