From a9a227640798e92ac29103de02b1278771b9a571 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:06:51 +0900 Subject: [PATCH 01/15] Use shorthand for margin values Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 1546164710e..dc511d82247 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -15,9 +15,7 @@ limitations under the License. */ .mx_LinkPreviewWidget { - margin-top: 15px; - margin-right: 15px; - margin-bottom: 15px; + margin: 15px 15px 15px auto; display: flex; border-left: 2px solid $preview-widget-bar-color; border-radius: 2px; From dd73cba15f21dbdf0e8993d9eed2d53f42e12e0c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:08:48 +0900 Subject: [PATCH 02/15] Merge style declarations Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index dc511d82247..e3512084300 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -35,13 +35,17 @@ limitations under the License. overflow: hidden; // cause it to wrap rather than clip } -.mx_LinkPreviewWidget_title { - font-weight: bold; - white-space: normal; +.mx_LinkPreviewWidget_title, +.mx_LinkPreviewWidget_description { display: -webkit-box; - -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + white-space: normal; +} + +.mx_LinkPreviewWidget_title { + font-weight: bold; + -webkit-line-clamp: 2; .mx_LinkPreviewWidget_siteName { font-weight: normal; @@ -50,11 +54,8 @@ limitations under the License. .mx_LinkPreviewWidget_description { margin-top: 8px; - white-space: normal; word-wrap: break-word; - display: -webkit-box; -webkit-line-clamp: 3; - -webkit-box-orient: vertical; } .mx_MatrixChat_useCompactLayout { From 89592a511810a7742c51aec2760a14982805fe3f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:09:31 +0900 Subject: [PATCH 03/15] Merge style declarations Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index e3512084300..162a0575405 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -22,15 +22,18 @@ limitations under the License. color: $info-plinth-fg-color; } +.mx_LinkPreviewWidget_image, +.mx_LinkPreviewWidget_caption { + margin-left: 15px; +} + .mx_LinkPreviewWidget_image { flex: 0 0 100px; - margin-left: 15px; text-align: center; cursor: pointer; } .mx_LinkPreviewWidget_caption { - margin-left: 15px; flex: 1 1 auto; overflow: hidden; // cause it to wrap rather than clip } From f9f97191fff5be108272d72ee856b88bc9b20bac Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:10:37 +0900 Subject: [PATCH 04/15] Include mx_MatrixChat_useCompactLayout in mx_LinkPreviewWidget Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 162a0575405..decf9c4e106 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -20,6 +20,11 @@ limitations under the License. border-left: 2px solid $preview-widget-bar-color; border-radius: 2px; color: $info-plinth-fg-color; + + .mx_MatrixChat_useCompactLayout & { + margin-top: 6px; + margin-bottom: 6px; + } } .mx_LinkPreviewWidget_image, @@ -60,10 +65,3 @@ limitations under the License. word-wrap: break-word; -webkit-line-clamp: 3; } - -.mx_MatrixChat_useCompactLayout { - .mx_LinkPreviewWidget { - margin-top: 6px; - margin-bottom: 6px; - } -} From 9efec6c204932fd81cbf26b6e9ecef9bc5482230 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:13:17 +0900 Subject: [PATCH 05/15] Include in mx_LinkPreviewWidget Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index decf9c4e106..ab6a7686bb5 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -25,7 +25,6 @@ limitations under the License. margin-top: 6px; margin-bottom: 6px; } -} .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { @@ -65,3 +64,4 @@ limitations under the License. word-wrap: break-word; -webkit-line-clamp: 3; } +} From d96dcb129999eb10186bc0177221806c3e107fd3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:14:01 +0900 Subject: [PATCH 06/15] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 62 ++++++++++----------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index ab6a7686bb5..22236fe0d84 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -26,42 +26,42 @@ limitations under the License. margin-bottom: 6px; } -.mx_LinkPreviewWidget_image, -.mx_LinkPreviewWidget_caption { - margin-left: 15px; -} + .mx_LinkPreviewWidget_image, + .mx_LinkPreviewWidget_caption { + margin-left: 15px; + } -.mx_LinkPreviewWidget_image { - flex: 0 0 100px; - text-align: center; - cursor: pointer; -} + .mx_LinkPreviewWidget_image { + flex: 0 0 100px; + text-align: center; + cursor: pointer; + } -.mx_LinkPreviewWidget_caption { - flex: 1 1 auto; - overflow: hidden; // cause it to wrap rather than clip -} + .mx_LinkPreviewWidget_caption { + flex: 1 1 auto; + overflow: hidden; // cause it to wrap rather than clip + } -.mx_LinkPreviewWidget_title, -.mx_LinkPreviewWidget_description { - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; - white-space: normal; -} + .mx_LinkPreviewWidget_title, + .mx_LinkPreviewWidget_description { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + white-space: normal; + } -.mx_LinkPreviewWidget_title { - font-weight: bold; - -webkit-line-clamp: 2; + .mx_LinkPreviewWidget_title { + font-weight: bold; + -webkit-line-clamp: 2; - .mx_LinkPreviewWidget_siteName { - font-weight: normal; + .mx_LinkPreviewWidget_siteName { + font-weight: normal; + } } -} -.mx_LinkPreviewWidget_description { - margin-top: 8px; - word-wrap: break-word; - -webkit-line-clamp: 3; -} + .mx_LinkPreviewWidget_description { + margin-top: 8px; + word-wrap: break-word; + -webkit-line-clamp: 3; + } } From 24d08f5e10519899add45e4abcc852c78416bc7a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:15:58 +0900 Subject: [PATCH 07/15] Use spacing variables Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 22236fe0d84..77028c1976a 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_LinkPreviewWidget { - margin: 15px 15px 15px auto; + margin: $spacing-16 $spacing-16 $spacing-16 auto; display: flex; border-left: 2px solid $preview-widget-bar-color; border-radius: 2px; @@ -28,7 +28,7 @@ limitations under the License. .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { - margin-left: 15px; + margin-left: $spacing-16; } .mx_LinkPreviewWidget_image { @@ -60,7 +60,7 @@ limitations under the License. } .mx_LinkPreviewWidget_description { - margin-top: 8px; + margin-top: $spacing-8; word-wrap: break-word; -webkit-line-clamp: 3; } From e9b1458f7100ee84522db18c74339e9480db3320 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:19:00 +0900 Subject: [PATCH 08/15] Use logical variables Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 77028c1976a..4f6a18a9388 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_LinkPreviewWidget { margin: $spacing-16 $spacing-16 $spacing-16 auto; display: flex; - border-left: 2px solid $preview-widget-bar-color; + border-inline-start: 2px solid $preview-widget-bar-color; border-radius: 2px; color: $info-plinth-fg-color; @@ -28,7 +28,7 @@ limitations under the License. .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { - margin-left: $spacing-16; + margin-inline-start: $spacing-16; } .mx_LinkPreviewWidget_image { From 425266d893095305311fd03ef6d6bfc0243e0417 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 22:33:45 +0900 Subject: [PATCH 09/15] Prevent flex children blowout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 4f6a18a9388..5bcbec68dcb 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -29,6 +29,7 @@ limitations under the License. .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { margin-inline-start: $spacing-16; + min-width: 0; // Prevent blowout } .mx_LinkPreviewWidget_image { From e820db95a8930292d836dd03a62c2d5529c8781d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 23:03:28 +0900 Subject: [PATCH 10/15] Wrap caption Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 7 +++++- .../views/rooms/LinkPreviewWidget.tsx | 22 ++++++++++--------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 5bcbec68dcb..2a57cbf83da 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -26,6 +26,10 @@ limitations under the License. margin-bottom: 6px; } + .mx_LinkPreviewWidget_wrap { + display: flex; + flex-wrap: wrap; + .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { margin-inline-start: $spacing-16; @@ -39,7 +43,7 @@ limitations under the License. } .mx_LinkPreviewWidget_caption { - flex: 1 1 auto; + flex: 1; overflow: hidden; // cause it to wrap rather than clip } @@ -65,4 +69,5 @@ limitations under the License. word-wrap: break-word; -webkit-line-clamp: 3; } + } } diff --git a/src/components/views/rooms/LinkPreviewWidget.tsx b/src/components/views/rooms/LinkPreviewWidget.tsx index d14c504dd8c..e4d63a99417 100644 --- a/src/components/views/rooms/LinkPreviewWidget.tsx +++ b/src/components/views/rooms/LinkPreviewWidget.tsx @@ -120,16 +120,18 @@ export default class LinkPreviewWidget extends React.Component { return (
- { img } -
-
- { p["og:title"] } - { p["og:site_name"] && - { (" - " + p["og:site_name"]) } - } -
-
- { description } +
+ { img } +
+
+ { p["og:title"] } + { p["og:site_name"] && + { (" - " + p["og:site_name"]) } + } +
+
+ { description } +
{ this.props.children } From 55d0f9ebb740704c1f0b81bbbbe87650f17bc9ca Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 23:04:34 +0900 Subject: [PATCH 11/15] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 64 ++++++++++----------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 2a57cbf83da..738997fa3f7 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -30,44 +30,44 @@ limitations under the License. display: flex; flex-wrap: wrap; - .mx_LinkPreviewWidget_image, - .mx_LinkPreviewWidget_caption { - margin-inline-start: $spacing-16; - min-width: 0; // Prevent blowout - } + .mx_LinkPreviewWidget_image, + .mx_LinkPreviewWidget_caption { + margin-inline-start: $spacing-16; + min-width: 0; // Prevent blowout + } - .mx_LinkPreviewWidget_image { - flex: 0 0 100px; - text-align: center; - cursor: pointer; - } + .mx_LinkPreviewWidget_image { + flex: 0 0 100px; + text-align: center; + cursor: pointer; + } - .mx_LinkPreviewWidget_caption { - flex: 1; - overflow: hidden; // cause it to wrap rather than clip - } + .mx_LinkPreviewWidget_caption { + flex: 1; + overflow: hidden; // cause it to wrap rather than clip + } - .mx_LinkPreviewWidget_title, - .mx_LinkPreviewWidget_description { - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; - white-space: normal; - } + .mx_LinkPreviewWidget_title, + .mx_LinkPreviewWidget_description { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + white-space: normal; + } - .mx_LinkPreviewWidget_title { - font-weight: bold; - -webkit-line-clamp: 2; + .mx_LinkPreviewWidget_title { + font-weight: bold; + -webkit-line-clamp: 2; - .mx_LinkPreviewWidget_siteName { - font-weight: normal; + .mx_LinkPreviewWidget_siteName { + font-weight: normal; + } } - } - .mx_LinkPreviewWidget_description { - margin-top: $spacing-8; - word-wrap: break-word; - -webkit-line-clamp: 3; - } + .mx_LinkPreviewWidget_description { + margin-top: $spacing-8; + word-wrap: break-word; + -webkit-line-clamp: 3; + } } } From 058330a38500c94ea92a586d18ec3d16fa18190b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 23:30:28 +0900 Subject: [PATCH 12/15] Set row-gap between image and caption Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 738997fa3f7..c7bbbd3226d 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -29,6 +29,7 @@ limitations under the License. .mx_LinkPreviewWidget_wrap { display: flex; flex-wrap: wrap; + row-gap: $spacing-8; .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { From 1f601c32af53cdc378b6a51da2453fcab00d9da2 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Jun 2022 23:33:31 +0900 Subject: [PATCH 13/15] Set column-gap between the caption and close button Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index c7bbbd3226d..4e053c9b325 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -17,6 +17,7 @@ limitations under the License. .mx_LinkPreviewWidget { margin: $spacing-16 $spacing-16 $spacing-16 auto; display: flex; + column-gap: $spacing-8; border-inline-start: 2px solid $preview-widget-bar-color; border-radius: 2px; color: $info-plinth-fg-color; From 9cdd96bb08fc01c980a40a754dbc1c38c5db2cf6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Jun 2022 19:28:26 +0900 Subject: [PATCH 14/15] Rename the class name Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 3 ++- src/components/views/rooms/LinkPreviewWidget.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 4e053c9b325..8a36e385d41 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -27,7 +27,8 @@ limitations under the License. margin-bottom: 6px; } - .mx_LinkPreviewWidget_wrap { + // Exclude mx_LinkPreviewGroup_hide from wrapping + .mx_LinkPreviewWidget_wrapImageCaption { display: flex; flex-wrap: wrap; row-gap: $spacing-8; diff --git a/src/components/views/rooms/LinkPreviewWidget.tsx b/src/components/views/rooms/LinkPreviewWidget.tsx index e4d63a99417..cb28739f179 100644 --- a/src/components/views/rooms/LinkPreviewWidget.tsx +++ b/src/components/views/rooms/LinkPreviewWidget.tsx @@ -120,7 +120,7 @@ export default class LinkPreviewWidget extends React.Component { return (
-
+
{ img }
From 69e4a18d8a3900672ab782d14a8b07f9dd833b9b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 2 Jul 2022 01:12:52 +0900 Subject: [PATCH 15/15] Decrease inline spacing Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_LinkPreviewWidget.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 8a36e385d41..e274994a532 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -15,9 +15,9 @@ limitations under the License. */ .mx_LinkPreviewWidget { - margin: $spacing-16 $spacing-16 $spacing-16 auto; + margin: $spacing-16 0 $spacing-16 auto; display: flex; - column-gap: $spacing-8; + column-gap: $spacing-4; border-inline-start: 2px solid $preview-widget-bar-color; border-radius: 2px; color: $info-plinth-fg-color;