From e72a7567f7ded00d8d0b353506479775f1affef3 Mon Sep 17 00:00:00 2001 From: William Kray Date: Fri, 15 Jan 2021 11:59:32 -0800 Subject: [PATCH 1/8] drop video preview max-height to 300px --- res/css/views/messages/_MVideoBody.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss index ac3491bc8f..2be15447f7 100644 --- a/res/css/views/messages/_MVideoBody.scss +++ b/res/css/views/messages/_MVideoBody.scss @@ -17,7 +17,7 @@ limitations under the License. span.mx_MVideoBody { video.mx_MVideoBody { max-width: 100%; - height: auto; + max-height: 300px; border-radius: 4px; } } From cd1a99186b0af27367ec47eda875d077aa90dc5b Mon Sep 17 00:00:00 2001 From: William Kray Date: Wed, 25 Nov 2020 11:41:57 -0800 Subject: [PATCH 2/8] change image rendering size max height --- src/components/views/messages/MImageBody.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index a8cdc17abf..8456a5bd09 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -362,7 +362,7 @@ export default class MImageBody extends React.Component { } // The maximum height of the thumbnail as it is rendered as an - const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight); + const maxHeight = Math.min(this.props.maxImageHeight || 240, infoHeight); // The maximum width of the thumbnail, as dictated by its natural // maximum height. const maxWidth = infoWidth * maxHeight / infoHeight; From b459395d6ddf6011e4044278bacde2097c3502ed Mon Sep 17 00:00:00 2001 From: William Kray Date: Wed, 25 Nov 2020 12:11:05 -0800 Subject: [PATCH 3/8] increase size of url preview thumbnail --- src/components/views/rooms/LinkPreviewWidget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js index 2a053bf467..8581a9d444 100644 --- a/src/components/views/rooms/LinkPreviewWidget.js +++ b/src/components/views/rooms/LinkPreviewWidget.js @@ -107,7 +107,7 @@ export default class LinkPreviewWidget extends React.Component { if (!SettingsStore.getValue("showImages")) { image = null; // Don't render a button to show the image, just hide it outright } - const imageMaxWidth = 100; const imageMaxHeight = 100; + const imageMaxWidth = 320; const imageMaxHeight = 240; if (image && image.startsWith("mxc://")) { image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight); } From 03c30b0338b44704cd9a42835718c643e585b162 Mon Sep 17 00:00:00 2001 From: William Kray Date: Thu, 26 Nov 2020 08:42:55 -0800 Subject: [PATCH 4/8] change link previews to vertical flow --- res/css/views/rooms/_LinkPreviewWidget.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 022cf3ed28..659b0111dd 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -19,6 +19,8 @@ limitations under the License. margin-right: 15px; margin-bottom: 15px; display: flex; + flex-direction: column; + max-width: 360px border-left: 4px solid $preview-widget-bar-color; color: $preview-widget-fg-color; } From 9260b031e958d9c48d6acc5144715f87c6bd54d1 Mon Sep 17 00:00:00 2001 From: William Kray Date: Thu, 26 Nov 2020 09:09:41 -0800 Subject: [PATCH 5/8] oops missed a semicolon --- 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 659b0111dd..d06cd65502 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -20,7 +20,7 @@ limitations under the License. margin-bottom: 15px; display: flex; flex-direction: column; - max-width: 360px + max-width: 360px; border-left: 4px solid $preview-widget-bar-color; color: $preview-widget-fg-color; } From 99be8ccd88375d36ce74f400069231818ae9e101 Mon Sep 17 00:00:00 2001 From: William Kray Date: Fri, 27 Nov 2020 12:08:59 -0800 Subject: [PATCH 6/8] move close-preview button to top --- src/components/views/rooms/LinkPreviewWidget.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js index 8581a9d444..458b3e7054 100644 --- a/src/components/views/rooms/LinkPreviewWidget.js +++ b/src/components/views/rooms/LinkPreviewWidget.js @@ -134,6 +134,10 @@ export default class LinkPreviewWidget extends React.Component { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); return (
+ + + { img }
@@ -142,10 +146,6 @@ export default class LinkPreviewWidget extends React.Component { { description }
- - - ); } From e6da146b21c3e4df169cf90a189cb700ab8ac052 Mon Sep 17 00:00:00 2001 From: William Kray Date: Sun, 29 Nov 2020 16:53:50 -0800 Subject: [PATCH 7/8] pad url preview close button a bit --- 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 d06cd65502..27453cf352 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -57,6 +57,7 @@ limitations under the License. cursor: pointer; width: 18px; height: 18px; + padding: 0px 5px 5px 5px; img { flex: 0 0 40px; From fec230945129dea9074547b24e24112a4b658eb2 Mon Sep 17 00:00:00 2001 From: William Kray Date: Fri, 29 Jan 2021 01:30:08 -0800 Subject: [PATCH 8/8] move cancel button to the right --- res/css/views/rooms/_LinkPreviewWidget.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 27453cf352..5310bd3bbb 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -58,6 +58,8 @@ limitations under the License. width: 18px; height: 18px; padding: 0px 5px 5px 5px; + margin-left: auto; + margin-right: 0px; img { flex: 0 0 40px;