From b28bb34cb7020771ef01cfca4ba7f3b8bdfbdef8 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 20:13:20 +0100 Subject: [PATCH 01/39] Small tweaks to padding and sizing --- res/css/structures/_RoomView.scss | 2 +- res/css/views/rooms/_EventTile.scss | 2 +- res/css/views/rooms/_RoomHeader.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 3b60c4e62b..3410660cca 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -196,7 +196,7 @@ limitations under the License. .mx_RoomView_MessageList { list-style-type: none; - padding: 18px; + padding: 12px; margin: 0; /* needed as min-height is set to clientHeight in ScrollPanel to prevent shrinking when WhoIsTypingTile is hidden */ diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index c168699b70..25137ad45b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -408,7 +408,7 @@ limitations under the License. } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 5px solid; + border-left: $e2e-verified-color 4px solid; } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 3499fe0630..e8c6d4f0a7 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -35,7 +35,7 @@ limitations under the License. display: flex; align-items: center; min-width: 0; - padding: 0 10px 0 19px; + padding: 0 10px 0 12px; } .mx_RoomHeader_spinner { From dec377a448bd0660c1e77c14cb0262ffc8bba1f7 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 20:15:09 +0100 Subject: [PATCH 02/39] Temporarily apply Joriks CSS fix --- res/css/views/rooms/_RoomSublist2.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index c4638c583d..a9eeb0767e 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -198,6 +198,8 @@ limitations under the License. // as the box model should be top aligned. Happens in both FF and Chromium display: flex; flex-direction: column; + + mask-image: linear-gradient(0deg, transparent, black 3px) } .mx_RoomSublist2_resizerHandles_showNButton { From 4244c67acab7fa734c0d2ce6c3666d367d4952ec Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 20:29:08 +0100 Subject: [PATCH 03/39] Fix even spacing between sticky and non-sticky headers Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_RoomSublist2.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index a9eeb0767e..762bc247ad 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -52,6 +52,7 @@ limitations under the License. // We don't use display:none as that causes the header to go away too. &.mx_RoomSublist2_headerContainer_hasSticky { height: 0; + padding-bottom: 4px; // to get even spacing between sticky and non-sticky headers } .mx_RoomSublist2_stickable { From 69929134c56204641cf7415546b57bba886cf0a6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 20:40:42 +0100 Subject: [PATCH 04/39] add spacing between sublists of 4px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_RoomSublist2.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index 762bc247ad..9cafd49ee9 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -22,6 +22,7 @@ limitations under the License. flex-direction: column; margin-left: 8px; + margin-bottom: 4px; width: 100%; flex-shrink: 0; // to convince safari's layout engine the flexbox is fine From 87a8dc4ff008fcb1263a95afc2271aefcb9bf3af Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 20:41:18 +0100 Subject: [PATCH 05/39] Improve spacing --- res/css/structures/_LeftPanel2.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss index 2c5ef84322..9603731dd5 100644 --- a/res/css/structures/_LeftPanel2.scss +++ b/res/css/structures/_LeftPanel2.scss @@ -143,7 +143,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations flex-grow: 1; overflow: hidden; min-height: 0; - margin-top: 12px; // so we're not up against the search/filter + margin-top: 10px; // so we're not up against the search/filter &.mx_LeftPanel2_roomListWrapper_stickyBottom { padding-bottom: 32px; From 21a8f2298e59fee24b9bcca16ee18fcb5d88d40e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 20:48:19 +0100 Subject: [PATCH 06/39] Remove text decoration from links Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index 6e70618142..1ff7f24396 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -75,6 +75,7 @@ a:hover, a:link, a:visited { color: $accent-color-alt; + text-decoration: none; } input[type=text], From a3b1c9314912037d8973b4d5f4a2fc25397463a9 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 20:50:26 +0100 Subject: [PATCH 07/39] Tweak padding --- res/css/structures/_RoomView.scss | 2 +- res/css/views/rooms/_RoomHeader.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 3410660cca..6fb7b68e8a 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -196,7 +196,7 @@ limitations under the License. .mx_RoomView_MessageList { list-style-type: none; - padding: 12px; + padding: 16px; margin: 0; /* needed as min-height is set to clientHeight in ScrollPanel to prevent shrinking when WhoIsTypingTile is hidden */ diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index e8c6d4f0a7..0ca7503709 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -35,7 +35,7 @@ limitations under the License. display: flex; align-items: center; min-width: 0; - padding: 0 10px 0 12px; + padding: 0 10px 0 16px; } .mx_RoomHeader_spinner { From fafbd25f6bd20e3b5f450531cf38e521761ecdf0 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 20:57:24 +0100 Subject: [PATCH 08/39] Tweak padding & weight --- res/css/structures/_RoomView.scss | 2 +- res/css/views/rooms/_RoomTile2.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 6fb7b68e8a..3b60c4e62b 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -196,7 +196,7 @@ limitations under the License. .mx_RoomView_MessageList { list-style-type: none; - padding: 16px; + padding: 18px; margin: 0; /* needed as min-height is set to clientHeight in ScrollPanel to prevent shrinking when WhoIsTypingTile is hidden */ diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss index 9b967c09b8..79b28598bd 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile2.scss @@ -63,7 +63,7 @@ limitations under the License. } .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents { - font-weight: 700; + font-weight: 600; } .mx_RoomTile2_messagePreview { From 5a85ce5d3d99115ec40b46d6e3833889b37d0b73 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 21:02:08 +0100 Subject: [PATCH 09/39] Remove text decoration from links v2 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_EventTile.scss | 1 - res/css/views/rooms/_Stickers.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 25137ad45b..1efa6ec5aa 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -537,7 +537,6 @@ limitations under the License. .mx_EventTile_content .markdown-body a { color: $accent-color-alt; - text-decoration: underline; } .mx_EventTile_content .markdown-body .hljs { diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index d33ecc0bb6..4bd45631cc 100644 --- a/res/css/views/rooms/_Stickers.scss +++ b/res/css/views/rooms/_Stickers.scss @@ -31,7 +31,7 @@ .mx_Stickers_addLink { display: inline; cursor: pointer; - text-decoration: underline; + color: $button-link-fg-color; } .mx_Stickers_hideStickers { From 88a653445f610928424fc51242be0d487685be3f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 21:15:58 +0100 Subject: [PATCH 10/39] Fix h-alignment of the room header, timeline and composer avatars Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_MessageComposer.scss | 4 ++-- res/css/views/rooms/_RoomHeader.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 8af9d36fee..bace47a041 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -20,7 +20,7 @@ limitations under the License. margin: auto; border-top: 1px solid $primary-hairline-color; position: relative; - padding-left: 84px; + padding-left: 83px; } .mx_MessageComposer_replaced_wrapper { @@ -60,7 +60,7 @@ limitations under the License. .mx_MessageComposer .mx_MessageComposer_avatar { position: absolute; - left: 27px; + left: 26px; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 0ca7503709..4aa25e9508 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -35,7 +35,7 @@ limitations under the License. display: flex; align-items: center; min-width: 0; - padding: 0 10px 0 16px; + padding: 0 10px 0 18px; } .mx_RoomHeader_spinner { From 1b9d918a92fa99114e2535362e74f460b1f0c95e Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 21:20:55 +0100 Subject: [PATCH 11/39] Add new e2e icons --- res/img/e2e/normal.svg | 4 ++-- res/img/e2e/verified.svg | 5 ++--- res/img/e2e/warning.svg | 6 ++---- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/res/img/e2e/normal.svg b/res/img/e2e/normal.svg index 5b848bc27f..23ca78e44d 100644 --- a/res/img/e2e/normal.svg +++ b/res/img/e2e/normal.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg index 464b443dcf..ac4827baed 100644 --- a/res/img/e2e/verified.svg +++ b/res/img/e2e/verified.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg index 209ae0f71f..d42922892a 100644 --- a/res/img/e2e/warning.svg +++ b/res/img/e2e/warning.svg @@ -1,5 +1,3 @@ - - - - + + From 6a58512397ef0145ce6639a145a6d9b42bdbe1ae Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 21:45:48 +0100 Subject: [PATCH 12/39] Fix alignments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_MessageComposer.scss | 4 ++-- res/css/views/rooms/_RoomHeader.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index bace47a041..de68f68265 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -76,8 +76,8 @@ limitations under the License. left: 60px; margin-right: 0; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class - width: 15px; - height: 15px; + width: 14px; + height: 14px; } .mx_MessageComposer_noperm_error { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 4aa25e9508..0acc734d7e 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -36,6 +36,10 @@ limitations under the License. align-items: center; min-width: 0; padding: 0 10px 0 18px; + + .mx_InviteOnlyIcon_large { + margin: 0; + } } .mx_RoomHeader_spinner { From d136d02f5ecac57280f4353cf09d13a3c0b9e727 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 21:52:31 +0100 Subject: [PATCH 13/39] Stylise right panel as card --- res/css/structures/_RightPanel.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index e43ca44476..1e1d73d7c3 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -23,6 +23,8 @@ limitations under the License. max-width: 50%; display: flex; flex-direction: column; + border-radius: 8px; + margin: 5px; } .mx_RightPanel_header { From 9007653ec6eae35096ab7e5d69ed2c5bbb21480f Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 21:52:52 +0100 Subject: [PATCH 14/39] Make room clipping list mask softer --- res/css/views/rooms/_RoomSublist2.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index 9cafd49ee9..f6b91786b6 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -201,7 +201,7 @@ limitations under the License. display: flex; flex-direction: column; - mask-image: linear-gradient(0deg, transparent, black 3px) + mask-image: linear-gradient(0deg, transparent, black 4px) } .mx_RoomSublist2_resizerHandles_showNButton { From 93e1ba4699b3863073f6e82d4901b7d7e2318068 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 21:56:48 +0100 Subject: [PATCH 15/39] Change border radius of context menus and dialog from 4px to 8px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.scss | 6 +++--- res/css/structures/_ContextualMenu.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1ff7f24396..5f698de7bf 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -265,7 +265,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { padding: 25px 30px 30px 30px; max-height: 80%; box-shadow: 2px 15px 30px 0 $dialog-shadow-color; - border-radius: 4px; + border-radius: 8px; overflow-y: auto; } @@ -623,12 +623,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // round the top corners of the top button for the hover effect to be bounded &:first-child .mx_AccessibleButton:first-child { - border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu + border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu } // round the bottom corners of the bottom button for the hover effect to be bounded &:last-child .mx_AccessibleButton:last-child { - border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu + border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu } .mx_AccessibleButton { diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 61070a0541..658033339a 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -31,7 +31,7 @@ limitations under the License. } .mx_ContextualMenu { - border-radius: 4px; + border-radius: 8px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; color: $primary-fg-color; From 5e5620a6c24398934d7ce6d7fe56a5a4b8ceaa8c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 21:59:46 +0100 Subject: [PATCH 16/39] Make widgets match the new 8px border-radius standard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_AppsDrawer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 1b1bab67bc..6d5ef5c14f 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px; margin: 0; padding: 0; border: 5px solid $widget-menu-bar-bg-color; - border-radius: 4px; + border-radius: 8px; } .mx_AppTile_mini { From a1ff00a7a8243c2c97ef357756c5c7405c7a1b58 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 22:13:29 +0100 Subject: [PATCH 17/39] Fix scrollbar occlusion in the right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_RightPanel.scss | 5 +++++ res/css/views/rooms/_MemberList.scss | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 1e1d73d7c3..5be9f449be 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -25,6 +25,11 @@ limitations under the License. flex-direction: column; border-radius: 8px; margin: 5px; + padding: 4px 0; + + .mx_RoomView_MessageList { + padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above + } } .mx_RightPanel_header { diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 99dc2338d4..98ed5025eb 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -26,6 +26,10 @@ limitations under the License. flex: 1 0 auto; } + .mx_SearchBox { + margin-bottom: 5px; + } + h2 { text-transform: uppercase; color: $h3-color; @@ -75,7 +79,7 @@ limitations under the License. background-color: $button-bg-color; border-radius: 4px; padding: 8px; - margin: 9px; + margin: 5px 9px 9px; display: flex; justify-content: center; color: $button-fg-color; From a40972cec97bb40269390fa1f157874fe8f958da Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 22:21:06 +0100 Subject: [PATCH 18/39] Fix text jumps for event tile hover Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_EventTile.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1efa6ec5aa..e1c3c10e19 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -182,7 +182,7 @@ limitations under the License. * TODO: ultimately we probably want some transition on here. */ .mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color 5px solid; + border-left: $accent-color 4px solid; padding-left: 60px; background-color: $event-selected-color; } @@ -412,11 +412,11 @@ limitations under the License. } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 5px solid; + border-left: $e2e-unverified-color 4px solid; } .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color 5px solid; + border-left: $e2e-unknown-color 4px solid; } .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, From de46c0091f6ab17156c92d4b870fb8e13aa19e14 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 22:50:18 +0100 Subject: [PATCH 19/39] Fix UserInfo separator colour to match User Menu context menu Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/right_panel/_UserInfo.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 26b81e94f3..b1511441cb 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -53,7 +53,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid lightgray; + border-bottom: 1px solid rgba($primary-fg-color, .1); } .mx_UserInfo_memberDetailsContainer { From 145b154a011a0babf285a5d6d3f7c86bbae95204 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 22:56:20 +0100 Subject: [PATCH 20/39] fix left gutter based on the border-left shrinking by 1px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_EventTile.scss | 8 +++++--- res/css/views/rooms/_GroupLayout.scss | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index e1c3c10e19..1e162bb9f7 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -15,6 +15,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +$left-gutter: 64px; + .mx_EventTile { max-width: 100%; clear: both; @@ -45,7 +47,7 @@ limitations under the License. .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { top: $font-8px; - left: 65px; + left: $left-gutter; } .mx_EventTile_continuation { @@ -73,7 +75,7 @@ limitations under the License. /* the next three lines, along with overflow hidden, truncate long display names */ white-space: nowrap; text-overflow: ellipsis; - max-width: calc(100% - 65px); + max-width: calc(100% - $left-gutter); } .mx_EventTile .mx_SenderProfile .mx_Flair { @@ -111,7 +113,7 @@ limitations under the License. .mx_EventTile_line, .mx_EventTile_reply { position: relative; - padding-left: 65px; /* left gutter */ + padding-left: $left-gutter; border-radius: 4px; } diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 44eb8c1e89..2b447be44a 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -$left-gutter: 65px; +$left-gutter: 64px; .mx_GroupLayout { .mx_EventTile { From b10195cefaa713ffa41ac690c0a7ca92134c654c Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 23:12:11 +0100 Subject: [PATCH 21/39] Use consistent values between right and left panels --- res/css/views/right_panel/_UserInfo.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index b1511441cb..bb22a0e683 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -120,8 +120,8 @@ limitations under the License. h3 { text-transform: uppercase; - color: $notice-secondary-color; - font-weight: bold; + color: $roomlist2-header-color; + font-weight: 600; font-size: $font-12px; margin: 4px 0; } From ce365cc5a1d498353c3eeafe75f8b188b1f348cc Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 23:12:33 +0100 Subject: [PATCH 22/39] Optically align room header height with panel heights --- res/css/views/rooms/_RoomHeader.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 0acc734d7e..6173ea940f 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_RoomHeader { - flex: 0 0 56px; + flex: 0 0 50px; border-bottom: 1px solid $primary-hairline-color; background-color: $roomheader-bg-color; @@ -31,7 +31,7 @@ limitations under the License. .mx_RoomHeader_wrapper { margin: auto; - height: 56px; + height: 50px; display: flex; align-items: center; min-width: 0; From 646c5d4a644ad04a696eec0b07738f7caf14f571 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 23:14:00 +0100 Subject: [PATCH 23/39] Replace timeline tooltips to match breadcrumb tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/elements/_Tooltip.scss | 21 +++-- .../elements/AccessibleTooltipButton.tsx | 5 +- .../views/messages/ReactionsRowButton.js | 75 +++++++--------- .../messages/ReactionsRowButtonTooltip.js | 85 ------------------- src/components/views/messages/TextualBody.js | 34 ++------ 5 files changed, 53 insertions(+), 167 deletions(-) delete mode 100644 src/components/views/messages/ReactionsRowButtonTooltip.js diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index d67928bf83..f87498ca1e 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -76,17 +76,16 @@ limitations under the License. } .mx_Tooltip_timeline { - box-shadow: none; - background-color: $tooltip-timeline-bg-color; - color: $tooltip-timeline-fg-color; - text-align: center; - border: none; - border-radius: 3px; - font-size: $font-14px; - line-height: 1.2; - padding: 6px 8px; + margin-left: -42px; + margin-top: -42px; - .mx_Tooltip_chevron::after { - border-right-color: $tooltip-timeline-bg-color; + &.mx_Tooltip { + background-color: $inverted-bg-color; + color: $accent-fg-color; + border: 0; + + .mx_Tooltip_chevron { + display: none; + } } } diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index f4d63136e1..45e769e32d 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -24,6 +24,7 @@ import Tooltip from './Tooltip'; interface ITooltipProps extends IProps { title: string; + tooltip?: React.ReactNode; tooltipClassName?: string; } @@ -52,7 +53,7 @@ export default class AccessibleTooltipButton extends React.PureComponent :
; return ( diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 09824cd315..8c0cf3b0b0 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -19,10 +19,11 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; -import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; import dis from "../../../dispatcher/dispatcher"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import {unicodeToShortcode} from "../../../HtmlUtils"; export default class ReactionsRowButton extends React.PureComponent { static propTypes = { @@ -38,14 +39,6 @@ export default class ReactionsRowButton extends React.PureComponent { myReactionEvent: PropTypes.object, } - constructor(props) { - super(props); - - this.state = { - tooltipVisible: false, - }; - } - onClick = (ev) => { const { mxEvent, myReactionEvent, content } = this.props; if (myReactionEvent) { @@ -65,24 +58,7 @@ export default class ReactionsRowButton extends React.PureComponent { } }; - onMouseOver = () => { - this.setState({ - // To avoid littering the DOM with a tooltip for every reaction, - // only render it on first use. - tooltipRendered: true, - tooltipVisible: true, - }); - } - - onMouseOut = () => { - this.setState({ - tooltipVisible: false, - }); - } - render() { - const ReactionsRowButtonTooltip = - sdk.getComponent('messages.ReactionsRowButtonTooltip'); const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props; const classes = classNames({ @@ -90,18 +66,9 @@ export default class ReactionsRowButton extends React.PureComponent { mx_ReactionsRowButton_selected: !!myReactionEvent, }); - let tooltip; - if (this.state.tooltipRendered) { - tooltip = ; - } - const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId()); let label; + let tooltip; if (room) { const senders = []; for (const reactionEvent of reactionEvents) { @@ -126,14 +93,37 @@ export default class ReactionsRowButton extends React.PureComponent { }, }, ); + + const shortName = unicodeToShortcode(content); + tooltip =
{_t( + "reacted with %(shortName)s", + { + shortName, + }, + { + reactors: () => { + return
+ {formatCommaSeparatedList(senders, 6)} +
; + }, + reactedWith: (sub) => { + if (!shortName) { + return null; + } + return
+ {sub} +
; + }, + }, + )}
; } - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - return ; + ; } } diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js deleted file mode 100644 index 59e9d2ad7f..0000000000 --- a/src/components/views/messages/ReactionsRowButtonTooltip.js +++ /dev/null @@ -1,85 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -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. -*/ - -import React from 'react'; -import PropTypes from 'prop-types'; - -import {MatrixClientPeg} from '../../../MatrixClientPeg'; -import * as sdk from '../../../index'; -import { unicodeToShortcode } from '../../../HtmlUtils'; -import { _t } from '../../../languageHandler'; -import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; - -export default class ReactionsRowButtonTooltip extends React.PureComponent { - static propTypes = { - // The event we're displaying reactions for - mxEvent: PropTypes.object.isRequired, - // The reaction content / key / emoji - content: PropTypes.string.isRequired, - // A Set of Martix reaction events for this key - reactionEvents: PropTypes.object.isRequired, - visible: PropTypes.bool.isRequired, - } - - render() { - const Tooltip = sdk.getComponent('elements.Tooltip'); - const { content, reactionEvents, mxEvent, visible } = this.props; - - const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId()); - let tooltipLabel; - if (room) { - const senders = []; - for (const reactionEvent of reactionEvents) { - const member = room.getMember(reactionEvent.getSender()); - const name = member ? member.name : reactionEvent.getSender(); - senders.push(name); - } - const shortName = unicodeToShortcode(content); - tooltipLabel =
{_t( - "reacted with %(shortName)s", - { - shortName, - }, - { - reactors: () => { - return
- {formatCommaSeparatedList(senders, 6)} -
; - }, - reactedWith: (sub) => { - if (!shortName) { - return null; - } - return
- {sub} -
; - }, - }, - )}
; - } - - let tooltip; - if (tooltipLabel) { - tooltip = ; - } - - return tooltip; - } -} diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index c762b95f83..84126ed7fc 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -35,6 +35,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers"; import {isPermalinkHost} from "../../../utils/permalinks/Permalinks"; import {toRightOf} from "../../structures/ContextMenu"; import {copyPlaintext} from "../../../utils/strings"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; export default createReactClass({ displayName: 'TextualBody', @@ -146,7 +147,6 @@ export default createReactClass({ nextProps.showUrlPreview !== this.props.showUrlPreview || nextProps.editState !== this.props.editState || nextState.links !== this.state.links || - nextState.editedMarkerHovered !== this.state.editedMarkerHovered || nextState.widgetHidden !== this.state.widgetHidden); }, @@ -367,42 +367,24 @@ export default createReactClass({ }); }, - _onMouseEnterEditedMarker: function() { - this.setState({editedMarkerHovered: true}); - }, - - _onMouseLeaveEditedMarker: function() { - this.setState({editedMarkerHovered: false}); - }, - _openHistoryDialog: async function() { const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog"); Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent}); }, _renderEditedMarker: function() { - let editedTooltip; - if (this.state.editedMarkerHovered) { - const Tooltip = sdk.getComponent('elements.Tooltip'); - const date = this.props.mxEvent.replacingEventDate(); - const dateString = date && formatDate(date); - editedTooltip = ; - } + const date = this.props.mxEvent.replacingEventDate(); + const dateString = date && formatDate(date); - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); return ( - - { editedTooltip }{`(${_t("edited")})`} - + {`(${_t("edited")})`} + ); }, From cd2f323002b629c4fa0dced657b3f94962063ef7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 23:18:33 +0100 Subject: [PATCH 24/39] re-add text-align center Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/elements/_Tooltip.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index f87498ca1e..efaaf83545 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -83,6 +83,7 @@ limitations under the License. background-color: $inverted-bg-color; color: $accent-fg-color; border: 0; + text-align: center; .mx_Tooltip_chevron { display: none; From 98f3d9bd74db73b505035d6541c3994ea46f006f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 23:23:21 +0100 Subject: [PATCH 25/39] fix input border colour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 5f698de7bf..8998aae7e7 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -161,9 +161,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; - border: 1px solid $dialog-close-fg-color; - // these things should probably not be defined - // globally + border: 1px solid rgba($primary-fg-color, .1); + // these things should probably not be defined globally margin: 9px; flex: 0 0 auto; } From 4d432f23e45b8476615f0236a021e84530b00376 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 13 Jul 2020 23:56:25 +0100 Subject: [PATCH 26/39] Fix room header timeline and composer alignment Room header use DecoratedRoomAvatar instead of manual e2eIcon overlay move e2eIcon next to it instead of private padlock Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_EventTile.scss | 12 +++---- res/css/views/rooms/_MessageComposer.scss | 4 +-- res/css/views/rooms/_RoomHeader.scss | 19 +++++++----- .../views/avatars/DecoratedRoomAvatar.tsx | 10 +++++- src/components/views/rooms/RoomHeader.js | 31 +++++++------------ 5 files changed, 38 insertions(+), 38 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1e162bb9f7..7a13515ec6 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -330,9 +330,9 @@ $left-gutter: 64px; .mx_EventTile_e2eIcon { position: absolute; top: 6px; - left: 46px; - width: 15px; - height: 15px; + left: 44px; + width: 14px; + height: 14px; display: block; bottom: 0; right: 0; @@ -399,10 +399,6 @@ $left-gutter: 64px; margin-bottom: 0px; } -.mx_EventTile_12hr .mx_EventTile_e2eIcon { - padding-left: 5px; -} - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { @@ -507,7 +503,7 @@ $left-gutter: 64px; display: inline-block; visibility: hidden; cursor: pointer; - top: 6px; + top: 8px; right: 6px; width: 19px; height: 19px; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index de68f68265..9f6d2ec590 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -76,8 +76,8 @@ limitations under the License. left: 60px; margin-right: 0; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class - width: 14px; - height: 14px; + width: 12px; + height: 12px; } .mx_MessageComposer_noperm_error { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 6173ea940f..46993bb644 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -19,13 +19,16 @@ limitations under the License. border-bottom: 1px solid $primary-hairline-color; background-color: $roomheader-bg-color; - .mx_E2EIcon { - margin: 0; - position: absolute; - bottom: -2px; - right: -6px; - height: 15px; - width: 15px; + .mx_RoomHeader_e2eIcon { + height: 12px; + width: 12px; + + .mx_E2EIcon { + margin: 0; + position: absolute; + height: 12px; + width: 12px; + } } } @@ -178,7 +181,7 @@ limitations under the License. .mx_RoomHeader_avatar { flex: 0; - margin: 0 7px 0 6px; + margin: 0 6px 0 7px; position: relative; } diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 40ba15af33..80bfac6787 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -30,6 +30,8 @@ interface IProps { tag: TagID; displayBadge?: boolean; forceCount?: boolean; + oobData?: object; + viewAvatarOnClick?: boolean; } interface IState { @@ -57,7 +59,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent - + {badge}
; diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index f236ed1070..51163e27e3 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -33,7 +33,8 @@ import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; import DMRoomMap from '../../../utils/DMRoomMap'; import E2EIcon from './E2EIcon'; -import InviteOnlyIcon from './InviteOnlyIcon'; +import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; +import {DefaultTagID} from "../../../stores/room-list/models"; export default createReactClass({ displayName: 'RoomHeader', @@ -152,25 +153,14 @@ export default createReactClass({ }, render: function() { - const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); - let searchStatus = null; let cancelButton = null; let settingsButton = null; let pinnedEventsButton = null; - const e2eIcon = this.props.e2eStatus ? - : - undefined; - const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", ""); const joinRule = joinRules && joinRules.getContent().join_rule; - let privateIcon; - // Don't show an invite-only icon for DMs. Users know they're invite-only. - if (!dmUserId && joinRule === "invite") { - privateIcon = ; - } if (this.props.onCancelClick) { cancelButton = ; @@ -221,15 +211,16 @@ export default createReactClass({ } const topicElement =
{ topic }
; - const avatarSize = 32; + let roomAvatar; if (this.props.room) { - roomAvatar = (); + viewAvatarOnClick={true} + />; } if (this.props.onSettingsClick) { @@ -311,11 +302,13 @@ export default createReactClass({ { searchButton } ; + const e2eIcon = this.props.e2eStatus ? : undefined; + return (
-
{ roomAvatar }{ e2eIcon }
- { privateIcon } +
{ roomAvatar }
+
{ e2eIcon }
{ name } { topicElement } { cancelButton } From d0d61e7e3c323812edbb62f4c8f9e846719fa33a Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Mon, 13 Jul 2020 23:45:59 +0100 Subject: [PATCH 27/39] Improve legibility of room headers --- res/css/views/rooms/_RoomSublist2.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index f6b91786b6..13b01ab6a2 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -146,9 +146,8 @@ limitations under the License. .mx_RoomSublist2_headerText { flex: 1; max-width: calc(100% - 16px); // 16px is the badge width - text-transform: uppercase; line-height: $font-16px; - font-size: $font-12px; + font-size: $font-13px; font-weight: 600; // Ellipsize any text overflow From d70b510d8110d364d5a8727f3410d82e29cc0158 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Tue, 14 Jul 2020 00:06:08 +0100 Subject: [PATCH 28/39] Tweak panel colours --- res/themes/element-dark/css/_element-dark.scss | 6 +++--- res/themes/element/css/_element.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss index 6e9ac98ed2..b77bf75000 100644 --- a/res/themes/element-dark/css/_element-dark.scss +++ b/res/themes/element-dark/css/_element-dark.scss @@ -35,7 +35,7 @@ $info-plinth-fg-color: #888; $preview-bar-bg-color: $header-panel-bg-color; -$tagpanel-bg-color: rgba(44, 50, 56, 0.92); +$tagpanel-bg-color: rgba(38, 39, 43, 0.82); $inverted-bg-color: $base-color; // used by AddressSelector @@ -93,7 +93,7 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; $roomheader-bg-color: rgba(21, 25, 30, 0.6); -$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity +$roomheader-addroom-bg-color:rgba(92, 100, 112, 0.3); $roomheader-addroom-fg-color: $text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; @@ -114,7 +114,7 @@ $theme-button-bg-color: #e3e8f0; $roomlist2-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons -$roomlist2-bg-color: rgba(33, 38, 44, 0.92); +$roomlist2-bg-color: rgba(33, 38, 44, 0.90); $roomlist2-header-color: #8E99A4; $roomsublist2-divider-color: $primary-fg-color; diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss index f04d931f31..2c302a4c9a 100644 --- a/res/themes/element/css/_element.scss +++ b/res/themes/element/css/_element.scss @@ -65,7 +65,7 @@ $preview-bar-bg-color: #f7f7f7; $secondary-accent-color: #f2f5f8; $tertiary-accent-color: #d3efe1; -$tagpanel-bg-color: #dee3ead1; +$tagpanel-bg-color: rgba(232, 232, 232, 0.82); // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; @@ -158,7 +158,7 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-bg-color: $primary-bg-color; -$roomheader-addroom-bg-color: #c9ced9; +$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); $roomheader-addroom-fg-color: #5c6470; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; @@ -179,7 +179,7 @@ $header-divider-color: #91A1C0; $theme-button-bg-color: #e3e8f0; $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons -$roomlist2-bg-color: #f3f8fde8; +$roomlist2-bg-color: rgba(245, 245, 245, 0.90); $roomlist2-header-color: $primary-fg-color; $roomsublist2-divider-color: $primary-fg-color; From d4e397cbd0d1e00a2b19305a59fb855869941d57 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 14 Jul 2020 00:52:03 +0100 Subject: [PATCH 29/39] Switch to svg masks for the e2eicon and border it for the EntityTile avatars Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_ToastContainer.scss | 17 +++++-- res/css/views/rooms/_E2EIcon.scss | 60 ++++++++++++++++++------ res/css/views/rooms/_EntityTile.scss | 2 - res/css/views/rooms/_EventTile.scss | 43 +++++++++++++++-- src/components/views/rooms/E2EIcon.js | 3 +- src/components/views/rooms/EntityTile.js | 2 +- 6 files changed, 101 insertions(+), 26 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index b15f357fc7..e798e4ac52 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -48,13 +48,14 @@ limitations under the License. padding: 8px; &.mx_Toast_hasIcon { - &::after { + &::before, &::after { content: ""; width: 22px; height: 22px; grid-column: 1; grid-row: 1; mask-size: 100%; + mask-position: center; mask-repeat: no-repeat; background-size: 100%; background-repeat: no-repeat; @@ -65,8 +66,18 @@ limitations under the License. background-color: $primary-fg-color; } - &.mx_Toast_icon_verification_warning::after { - background-image: url("$(res)/img/e2e/warning.svg"); + &.mx_Toast_icon_verification_warning { + // white infill for the hollow svg mask + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-size: 90%; + } + + &::after { + mask-image: url("$(res)/img/e2e/warning.svg"); + background-color: $notice-primary-color; + } } &.mx_Toast_icon_element_logo::after { diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 584ea17433..cacbad6693 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -22,28 +22,58 @@ limitations under the License. display: block; } -.mx_E2EIcon_warning::after, -.mx_E2EIcon_normal::after, -.mx_E2EIcon_verified::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-repeat: no-repeat; - background-size: contain; +.mx_E2EIcon_warning, +.mx_E2EIcon_normal, +.mx_E2EIcon_verified { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } +} + +// white infill for the transparency +.mx_E2EIcon::before { + background-color: #ffffff; + mask: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; +} + +// transparent-looking border surrounding the shield for when overlain over avatars +.mx_E2EIcon_bordered { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $header-panel-bg-color; + + // shrink the actual badge + &::after { + mask-size: 75%; + } + // shrink the infill of the badge + &::before { + mask-size: 65%; + } } .mx_E2EIcon_warning::after { - background-image: url('$(res)/img/e2e/warning.svg'); + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; } .mx_E2EIcon_normal::after { - background-image: url('$(res)/img/e2e/normal.svg'); + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: #020202; // TODO theme this } .mx_E2EIcon_verified::after { - background-image: url('$(res)/img/e2e/verified.svg'); + mask-image: url('$(res)/img/e2e/verified.svg'); + background-color: $accent-color; } diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 8db71f297c..27a4e67089 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -26,8 +26,6 @@ limitations under the License. position: absolute; bottom: 2px; right: 7px; - height: 15px; - width: 15px; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 7a13515ec6..00782c58fe 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -341,23 +341,58 @@ $left-gutter: 64px; background-size: contain; } +.mx_EventTile_e2eIcon { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &::before { + background-color: #ffffff; + mask: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } +} + .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unknown { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unencrypted { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unauthenticated { - background-image: url('$(res)/img/e2e/normal.svg'); + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: #020202; // TODO theme this + } opacity: 1; } diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js index 254e28dffa..1ea21bfc9a 100644 --- a/src/components/views/rooms/E2EIcon.js +++ b/src/components/views/rooms/E2EIcon.js @@ -42,11 +42,12 @@ const crossSigningRoomTitles = { [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"), }; -const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => { +const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => { const [hover, setHover] = useState(false); const classes = classNames({ mx_E2EIcon: true, + mx_E2EIcon_bordered: bordered, mx_E2EIcon_warning: status === E2E_STATE.WARNING, mx_E2EIcon_normal: status === E2E_STATE.NORMAL, mx_E2EIcon_verified: status === E2E_STATE.VERIFIED, diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index b6d2bce785..d880e824da 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -170,7 +170,7 @@ const EntityTile = createReactClass({ let e2eIcon; const { e2eStatus } = this.props; if (e2eStatus) { - e2eIcon = ; + e2eIcon = ; } const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); From 0cb0d2a4eba481b7b2e60a04f83f3ffcc2afb140 Mon Sep 17 00:00:00 2001 From: Michael Telatynski Date: Tue, 14 Jul 2020 09:27:53 +0000 Subject: [PATCH 30/39] Apply 1 suggestion(s) to 1 file(s) --- res/themes/element-dark/css/_element-dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss index b77bf75000..43a6c0ecec 100644 --- a/res/themes/element-dark/css/_element-dark.scss +++ b/res/themes/element-dark/css/_element-dark.scss @@ -93,7 +93,7 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; $roomheader-bg-color: rgba(21, 25, 30, 0.6); -$roomheader-addroom-bg-color:rgba(92, 100, 112, 0.3); +$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); $roomheader-addroom-fg-color: $text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; From 488f49dc5c0c5d4c54187bb42b7bf019421e6441 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 14 Jul 2020 12:51:51 +0200 Subject: [PATCH 31/39] redefine variable rather than picking a different one to not break other teams --- res/css/views/right_panel/_UserInfo.scss | 2 +- res/themes/element/css/_element.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index bb22a0e683..6f86d1ad18 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -120,7 +120,7 @@ limitations under the License. h3 { text-transform: uppercase; - color: $roomlist2-header-color; + color: $notice-secondary-color; font-weight: 600; font-size: $font-12px; margin: 4px 0; diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss index 2c302a4c9a..0703176dab 100644 --- a/res/themes/element/css/_element.scss +++ b/res/themes/element/css/_element.scss @@ -18,11 +18,12 @@ $accent-color: #03b381; $accent-bg-color: rgba(3, 179, 129, 0.16); $notice-primary-color: #ff4b55; $notice-primary-bg-color: rgba(255, 75, 85, 0.16); -$notice-secondary-color: #61708b; +$primary-fg-color: #2e2f32; +$roomlist2-header-color: $primary-fg-color; +$notice-secondary-color: $roomlist2-header-color; $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) -$primary-fg-color: #2e2f32; $primary-bg-color: #ffffff; $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text @@ -180,7 +181,6 @@ $theme-button-bg-color: #e3e8f0; $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons $roomlist2-bg-color: rgba(245, 245, 245, 0.90); -$roomlist2-header-color: $primary-fg-color; $roomsublist2-divider-color: $primary-fg-color; $roomtile2-preview-color: #9e9e9e; From c936439ad54190d463788aa8dd536620025bfcf2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 14 Jul 2020 12:52:28 +0200 Subject: [PATCH 32/39] only remove underline for links in element theme --- res/css/_common.scss | 1 - res/themes/element/css/_mods.scss | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 8998aae7e7..7fead4317e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -75,7 +75,6 @@ a:hover, a:link, a:visited { color: $accent-color-alt; - text-decoration: none; } input[type=text], diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss index cc5205ccba..e963be5814 100644 --- a/res/themes/element/css/_mods.scss +++ b/res/themes/element/css/_mods.scss @@ -24,3 +24,9 @@ .mx_RoomSublist2_showNButton { background-color: transparent !important; } + +a:hover, +a:link, +a:visited { + text-decoration: none; +} From 4e8203cca1d06958633d726beb7dd694b3dc640c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 14 Jul 2020 12:42:51 +0100 Subject: [PATCH 33/39] revert some changes to resolve what looks like a props mutation race-condition Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/messages/ReactionsRowButton.js | 75 +++++++++------- .../messages/ReactionsRowButtonTooltip.js | 85 +++++++++++++++++++ 2 files changed, 128 insertions(+), 32 deletions(-) create mode 100644 src/components/views/messages/ReactionsRowButtonTooltip.js diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 8c0cf3b0b0..09824cd315 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -19,11 +19,10 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; +import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; import dis from "../../../dispatcher/dispatcher"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; -import {unicodeToShortcode} from "../../../HtmlUtils"; export default class ReactionsRowButton extends React.PureComponent { static propTypes = { @@ -39,6 +38,14 @@ export default class ReactionsRowButton extends React.PureComponent { myReactionEvent: PropTypes.object, } + constructor(props) { + super(props); + + this.state = { + tooltipVisible: false, + }; + } + onClick = (ev) => { const { mxEvent, myReactionEvent, content } = this.props; if (myReactionEvent) { @@ -58,7 +65,24 @@ export default class ReactionsRowButton extends React.PureComponent { } }; + onMouseOver = () => { + this.setState({ + // To avoid littering the DOM with a tooltip for every reaction, + // only render it on first use. + tooltipRendered: true, + tooltipVisible: true, + }); + } + + onMouseOut = () => { + this.setState({ + tooltipVisible: false, + }); + } + render() { + const ReactionsRowButtonTooltip = + sdk.getComponent('messages.ReactionsRowButtonTooltip'); const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props; const classes = classNames({ @@ -66,9 +90,18 @@ export default class ReactionsRowButton extends React.PureComponent { mx_ReactionsRowButton_selected: !!myReactionEvent, }); + let tooltip; + if (this.state.tooltipRendered) { + tooltip = ; + } + const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId()); let label; - let tooltip; if (room) { const senders = []; for (const reactionEvent of reactionEvents) { @@ -93,37 +126,14 @@ export default class ReactionsRowButton extends React.PureComponent { }, }, ); - - const shortName = unicodeToShortcode(content); - tooltip =
{_t( - "reacted with %(shortName)s", - { - shortName, - }, - { - reactors: () => { - return
- {formatCommaSeparatedList(senders, 6)} -
; - }, - reactedWith: (sub) => { - if (!shortName) { - return null; - } - return
- {sub} -
; - }, - }, - )}
; } - return ; + {tooltip} + ; } } diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js new file mode 100644 index 0000000000..59e9d2ad7f --- /dev/null +++ b/src/components/views/messages/ReactionsRowButtonTooltip.js @@ -0,0 +1,85 @@ +/* +Copyright 2019 The Matrix.org Foundation C.I.C. + +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. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import {MatrixClientPeg} from '../../../MatrixClientPeg'; +import * as sdk from '../../../index'; +import { unicodeToShortcode } from '../../../HtmlUtils'; +import { _t } from '../../../languageHandler'; +import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; + +export default class ReactionsRowButtonTooltip extends React.PureComponent { + static propTypes = { + // The event we're displaying reactions for + mxEvent: PropTypes.object.isRequired, + // The reaction content / key / emoji + content: PropTypes.string.isRequired, + // A Set of Martix reaction events for this key + reactionEvents: PropTypes.object.isRequired, + visible: PropTypes.bool.isRequired, + } + + render() { + const Tooltip = sdk.getComponent('elements.Tooltip'); + const { content, reactionEvents, mxEvent, visible } = this.props; + + const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId()); + let tooltipLabel; + if (room) { + const senders = []; + for (const reactionEvent of reactionEvents) { + const member = room.getMember(reactionEvent.getSender()); + const name = member ? member.name : reactionEvent.getSender(); + senders.push(name); + } + const shortName = unicodeToShortcode(content); + tooltipLabel =
{_t( + "reacted with %(shortName)s", + { + shortName, + }, + { + reactors: () => { + return
+ {formatCommaSeparatedList(senders, 6)} +
; + }, + reactedWith: (sub) => { + if (!shortName) { + return null; + } + return
+ {sub} +
; + }, + }, + )}
; + } + + let tooltip; + if (tooltipLabel) { + tooltip = ; + } + + return tooltip; + } +} From 9c5f7492e3462992e6ffda11abccb217e457b3e2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 14 Jul 2020 12:53:55 +0100 Subject: [PATCH 34/39] undo changes which are no longer needed Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/AccessibleTooltipButton.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 45e769e32d..f4d63136e1 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -24,7 +24,6 @@ import Tooltip from './Tooltip'; interface ITooltipProps extends IProps { title: string; - tooltip?: React.ReactNode; tooltipClassName?: string; } @@ -53,7 +52,7 @@ export default class AccessibleTooltipButton extends React.PureComponent :
; return ( From 9f199758b94843c4cf27e9ec7256026b28cf4bd0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 14 Jul 2020 13:00:25 +0100 Subject: [PATCH 35/39] restore old tooltip positioning (right) instead of (above) for timeline tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/elements/_Tooltip.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index efaaf83545..7efea2c3f7 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -76,9 +76,6 @@ limitations under the License. } .mx_Tooltip_timeline { - margin-left: -42px; - margin-top: -42px; - &.mx_Tooltip { background-color: $inverted-bg-color; color: $accent-fg-color; From 1578b1c3d36f0b7bdbd06883f4e06550c4788d8f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 14 Jul 2020 14:24:35 +0200 Subject: [PATCH 36/39] different blur radius for dark theme --- res/themes/element-dark/css/_element-dark.scss | 4 ++++ res/themes/element-dark/css/element-dark.scss | 6 +++++- res/themes/element/css/_element.scss | 5 +++++ res/themes/element/css/_mods.scss | 4 ++-- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss index 43a6c0ecec..8b8cfdb3b2 100644 --- a/res/themes/element-dark/css/_element-dark.scss +++ b/res/themes/element-dark/css/_element-dark.scss @@ -204,6 +204,10 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; +// blur amounts for left left panel (only for element theme, used in _mods.scss) +$roomlist-background-blur-amount: 40px; +$tagpanel-background-blur-amount: 20px; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/element-dark/css/element-dark.scss b/res/themes/element-dark/css/element-dark.scss index 5aefac5881..35b31a9078 100644 --- a/res/themes/element-dark/css/element-dark.scss +++ b/res/themes/element-dark/css/element-dark.scss @@ -2,6 +2,10 @@ @import "../../element/css/_paths.scss"; @import "../../element/css/_fonts.scss"; @import "../../element/css/_element.scss"; -@import "../../element/css/_mods.scss"; +// important this goes before _mods, +// as $tagpanel-background-blur-amount and +// $roomlist-background-blur-amount +// are overridden in _element-dark.scss @import "_element-dark.scss"; +@import "../../element/css/_mods.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss index 0703176dab..1229728351 100644 --- a/res/themes/element/css/_element.scss +++ b/res/themes/element/css/_element.scss @@ -331,6 +331,11 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; +// blur amounts for left left panel (only for element theme, used in _mods.scss) +$roomlist-background-blur-amount: 175px; +$tagpanel-background-blur-amount: 100px; + + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss index e963be5814..810e0375ba 100644 --- a/res/themes/element/css/_mods.scss +++ b/res/themes/element/css/_mods.scss @@ -13,11 +13,11 @@ } .mx_TagPanel { - backdrop-filter: blur(100px); + backdrop-filter: blur($tagpanel-background-blur-amount); } .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer { - backdrop-filter: blur(175px); + backdrop-filter: blur($roomlist-background-blur-amount); } } From fcf5fc09901dfc0fb8ff335c19dc5d87040bd9f4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 14 Jul 2020 13:30:05 +0100 Subject: [PATCH 37/39] Fix normal e2e icon colour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_E2EIcon.scss | 2 +- res/css/views/rooms/_EventTile.scss | 2 +- res/themes/dark/css/_dark.scss | 1 + res/themes/element-dark/css/_element-dark.scss | 1 + res/themes/element/css/_element.scss | 2 +- res/themes/light/css/_light.scss | 2 +- 6 files changed, 6 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index cacbad6693..ac47e3aedf 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -70,7 +70,7 @@ limitations under the License. .mx_E2EIcon_normal::after { mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: #020202; // TODO theme this + background-color: $composer-e2e-icon-color; } .mx_E2EIcon_verified::after { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 00782c58fe..6e2dc17727 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -391,7 +391,7 @@ $left-gutter: 64px; .mx_EventTile_e2eIcon_unauthenticated { &::after { mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: #020202; // TODO theme this + background-color: $composer-e2e-icon-color; } opacity: 1; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index bc133c2756..a6a85edfe1 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -103,6 +103,7 @@ $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; $header-divider-color: $header-panel-text-primary-color; +$composer-e2e-icon-color: $header-panel-text-primary-color; // ******************** diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss index 43a6c0ecec..9ae3548c67 100644 --- a/res/themes/element-dark/css/_element-dark.scss +++ b/res/themes/element-dark/css/_element-dark.scss @@ -104,6 +104,7 @@ $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; $header-divider-color: $header-panel-text-primary-color; +$composer-e2e-icon-color: $header-panel-text-primary-color; // ******************** diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss index 0703176dab..b61172cb31 100644 --- a/res/themes/element/css/_element.scss +++ b/res/themes/element/css/_element.scss @@ -169,7 +169,7 @@ $composer-button-color: #91A1C0; $roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; -$composer-e2e-icon-color: #c9ced6; +$composer-e2e-icon-color: #91A1C0; $header-divider-color: #91A1C0; // ******************** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 9ce2c9a980..991abdefff 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -169,7 +169,7 @@ $composer-button-color: #91a1c0; $roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; -$composer-e2e-icon-color: #c9ced6; +$composer-e2e-icon-color: #91a1c0; $header-divider-color: #91a1c0; // ******************** From 9700e7e2692a59526a17c239a6c6d176c89129db Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Tue, 14 Jul 2020 13:35:23 +0100 Subject: [PATCH 38/39] Tweak blur & alpha on panels --- res/themes/element-dark/css/_element-dark.scss | 4 ++-- res/themes/element/css/_element.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss index 85ab1c928d..c2edbe24a4 100644 --- a/res/themes/element-dark/css/_element-dark.scss +++ b/res/themes/element-dark/css/_element-dark.scss @@ -206,8 +206,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color; $appearance-tab-border-color: $room-highlight-color; // blur amounts for left left panel (only for element theme, used in _mods.scss) -$roomlist-background-blur-amount: 40px; -$tagpanel-background-blur-amount: 20px; +$roomlist-background-blur-amount: 60px; +$tagpanel-background-blur-amount: 30px; // ***** Mixins! ***** diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss index 5f33ec4174..109f970932 100644 --- a/res/themes/element/css/_element.scss +++ b/res/themes/element/css/_element.scss @@ -66,7 +66,7 @@ $preview-bar-bg-color: #f7f7f7; $secondary-accent-color: #f2f5f8; $tertiary-accent-color: #d3efe1; -$tagpanel-bg-color: rgba(232, 232, 232, 0.82); +$tagpanel-bg-color: rgba(232, 232, 232, 0.77); // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; @@ -332,8 +332,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color; $appearance-tab-border-color: $input-darker-bg-color; // blur amounts for left left panel (only for element theme, used in _mods.scss) -$roomlist-background-blur-amount: 175px; -$tagpanel-background-blur-amount: 100px; +$roomlist-background-blur-amount: 40px; +$tagpanel-background-blur-amount: 20px; // ***** Mixins! ***** From 7ff3e6a26db3ecd9c54c24a86c945c49e976a20b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 14 Jul 2020 15:09:53 +0200 Subject: [PATCH 39/39] bring back padding between show more and resize handle --- res/css/views/rooms/_RoomSublist2.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index 69cb76d79d..18eaa5747c 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -183,6 +183,7 @@ limitations under the License. // See also https://github.com/vector-im/riot-web/issues/14429. &:first-child .mx_RoomSublist2_headerContainer { height: 0; + padding-bottom: 4px; } .mx_RoomSublist2_resizeBox {