From 0c865e81a29868884d99ee6cbfe4ded47303472a Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Wed, 31 May 2017 22:18:10 -0400 Subject: [PATCH 1/4] 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 f6ba2321..1ae2a47c 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 3d5fe029..6fd44d26 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 1969bc2d..1025052b 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 d853f939..17efd78b 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 1d8261d7..4495b142 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 525cc1f6..d95688c6 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 7b76eb7f..1ee56d95 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 d3bbce1b..277d10d1 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 bb60fa1e..056e9bd3 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; + } +} From 9aa10ba15c2e8f96d24bb02a98a5710eebd78f13 Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Wed, 31 May 2017 23:03:30 -0400 Subject: [PATCH 2/4] also shrink the composer bar when you don't have permissions --- .../css/matrix-react-sdk/views/rooms/_MessageComposer.scss | 4 ++++ 1 file changed, 4 insertions(+) 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 d95688c6..85c0e2c7 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 @@ -205,4 +205,8 @@ limitations under the License. .mx_MessageComposer_input { min-height: 50px; } + + .mx_MessageComposer_noperm_error { + height: 50px; + } } From 4f1fad27390e20136588f5e1a28c8e179ce116c3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 1 Jun 2017 15:28:02 +0100 Subject: [PATCH 3/4] improve legibility and compactness by shrinking sender name a bit --- .../views/rooms/_EventTile.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) 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 17efd78b..afbcf62c 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 @@ -366,32 +366,36 @@ limitations under the License. padding-top: 4px; } + .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: 1px; - padding-bottom: 2px; + padding-top: 0px; + padding-bottom: 1px; } } .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation { padding-top: 0; .mx_EventTile_line { - padding-top: 1px; - padding-bottom: 1px; + padding-top: 0px; + padding-bottom: 0px; } } .mx_EventTile_line { - padding-top: 1px; - padding-bottom: 1px; + padding-top: 0px; + padding-bottom: 0px; } .mx_EventTile_avatar { - top: 0; + top: 2px; } .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { From 9f597e9d3c3d453ac3b0e42385cfa295880a09db Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Thu, 1 Jun 2017 12:09:36 -0400 Subject: [PATCH 4/4] fix alignment of info event tiles --- .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss | 4 ++++ 1 file changed, 4 insertions(+) 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 afbcf62c..5542d18d 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 @@ -366,6 +366,10 @@ limitations under the License. padding-top: 4px; } + .mx_EventTile.mx_EventTile_info { + padding-top: 0px; + } + .mx_EventTile .mx_SenderProfile { font-size: 13px; }