From 0c865e81a29868884d99ee6cbfe4ded47303472a Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Wed, 31 May 2017 22:18:10 -0400 Subject: [PATCH] add styles for compact layout Signed-off-by: Hubert Chathi --- .../structures/_RoomStatusBar.scss | 19 +++++++ .../structures/_RoomView.scss | 12 +++- .../elements/_MemberEventListSummary.scss | 10 ++++ .../views/rooms/_EventTile.scss | 56 +++++++++++++++++++ .../views/rooms/_LinkPreviewWidget.scss | 7 +++ .../views/rooms/_MessageComposer.scss | 6 ++ .../views/rooms/_TopUnreadMessagesBar.scss | 7 +++ .../css/vector-web/structures/_LeftPanel.scss | 14 +++++ .../vector-web/structures/_RightPanel.scss | 11 ++++ 9 files changed, 141 insertions(+), 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 index f6ba2321c8..1ae2a47c86 100644 --- 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 index 3d5fe02963..6fd44d26f5 100644 --- 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; -} \ No newline at end of file +} + +.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 index 1969bc2db0..1025052beb 100644 --- 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 index d853f9396f..17efd78baf 100644 --- 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,59 @@ limitations under the License. } /* end of overrides */ + +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + padding-top: 4px; + } + + .mx_EventTile.mx_EventTile_emote { + padding-top: 8px; + .mx_EventTile_avatar { + top: 2px; + } + .mx_EventTile_line { + padding-top: 1px; + padding-bottom: 2px; + } + } + + .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation { + padding-top: 0; + .mx_EventTile_line { + padding-top: 1px; + padding-bottom: 1px; + } + } + + .mx_EventTile_line { + padding-top: 1px; + padding-bottom: 1px; + } + + .mx_EventTile_avatar { + top: 0; + } + + .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 index 1d8261d711..4495b142e6 100644 --- 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 index 525cc1f654..d95688c62b 100644 --- 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,9 @@ limitations under the License. padding: 4px 4px 4px 0; opacity: 0.8; } + +.mx_MatrixChat_useCompactLayout { + .mx_MessageComposer_input { + min-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 index 7b76eb7f98..1ee56d9532 100644 --- 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 index d3bbce1b19..277d10d120 100644 --- 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 index bb60fa1e7e..056e9bd338 100644 --- 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; + } +}