From 6a5ea970e940bb53671103fe222f0d2220db114b Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 13 Mar 2021 15:20:42 +0200 Subject: [PATCH 1/7] fix: make call area smaller on small screens so that it doesn't need a scrollbar --- res/css/views/voip/_CallView.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 7eb329594a..4ade5d90f8 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -30,6 +30,9 @@ limitations under the License. .mx_CallView_voice { height: 360px; + @media only screen and (max-height: 768px) { + height: 300px; + } } } From 879dd6eaeac1c91c66ed9329e382c830ad92cd21 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 13 Mar 2021 15:24:26 +0200 Subject: [PATCH 2/7] fix: make status bar area not show when it is undefined e.g. when user is in call, and there are search results --- src/components/structures/RoomView.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 706cd5ded8..2fdb193389 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1841,6 +1841,17 @@ export default class RoomView extends React.Component { />; } + const statusBarAreaClass = classNames("mx_RoomView_statusArea", { + "mx_RoomView_statusArea_expanded": isStatusAreaExpanded, + }); + + const statusBarArea = statusBar &&
+
+
+ {statusBar} +
+
+ const roomVersionRecommendation = this.state.upgradeRecommendation; const showRoomUpgradeBar = ( roomVersionRecommendation && @@ -2052,10 +2063,6 @@ export default class RoomView extends React.Component { />); } - const statusBarAreaClass = classNames("mx_RoomView_statusArea", { - "mx_RoomView_statusArea_expanded": isStatusAreaExpanded, - }); - const showRightPanel = this.state.room && this.state.showRightPanel; const rightPanel = showRightPanel ? @@ -2104,12 +2111,7 @@ export default class RoomView extends React.Component { {messagePanel} {searchResultsPanel}
-
-
-
- {statusBar} -
-
+ {statusBarArea} {previewBar} {messageComposer}
From 4d2ecc98b0c4d0d9e5a357e930203b6c917ccb8c Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 13 Mar 2021 19:11:57 +0200 Subject: [PATCH 3/7] fix: decrease the size of CallView on smaller screens so that when the user opens the search box, it does not disappear, and AuxPanel does not need an awkward scrollbar --- res/css/views/voip/_CallView.scss | 2 +- src/components/views/voip/CallView.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 4ade5d90f8..7f01aecbcd 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_CallView_voice { height: 360px; @media only screen and (max-height: 768px) { - height: 300px; + height: 220px; } } } diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 9bdc8fb11d..762a2bb941 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -538,7 +538,8 @@ export default class CallView extends React.Component { {callControls} ; } else { - const avatarSize = this.props.pipMode ? 76 : 160; + const normalAvatarSize = window.innerHeight <= 768 ? 120 : 160; + const avatarSize = this.props.pipMode ? 76 : normalAvatarSize; const classes = classNames({ mx_CallView_voice: true, mx_CallView_voice_hold: isOnHold, From e5794a4c80a3c9fe8f4e02e2f25a18220e5d4a8e Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 13 Mar 2021 19:52:59 +0200 Subject: [PATCH 4/7] linter --- res/css/views/voip/_CallView.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 7f01aecbcd..c7e2456a16 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -30,6 +30,7 @@ limitations under the License. .mx_CallView_voice { height: 360px; + @media only screen and (max-height: 768px) { height: 220px; } From e9efc9571297c8bfc381825a19190dfd0043bb71 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 24 Jul 2021 16:10:51 +0300 Subject: [PATCH 5/7] lint --- src/components/structures/RoomView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 5e39c6af79..76158e6392 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1856,8 +1856,8 @@ export default class RoomView extends React.Component {
{statusBar}
- - + ; + const roomVersionRecommendation = this.state.upgradeRecommendation; const showRoomUpgradeBar = ( roomVersionRecommendation && From 153eb05561fd4a36b402dd05d45c00dd4d7b6603 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 24 Jul 2021 19:00:47 +0300 Subject: [PATCH 6/7] lint --- src/components/structures/RoomView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 76158e6392..2c934ecfb6 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1854,7 +1854,7 @@ export default class RoomView extends React.Component { const statusBarArea = statusBar &&
- {statusBar} + { statusBar }
; @@ -2101,9 +2101,9 @@ export default class RoomView extends React.Component { { messagePanel } { searchResultsPanel }
- {statusBarArea} - {previewBar} - {messageComposer} + { statusBarArea } + { previewBar } + { messageComposer } From 1c7a89b2e4b36b4e23d8c358ccf6db6cb1ee5580 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sun, 8 Aug 2021 21:00:15 +0300 Subject: [PATCH 7/7] add comment - explain conditional statusBar --- src/components/structures/RoomView.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 69d4cfc590..781fb94ddc 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1852,6 +1852,8 @@ export default class RoomView extends React.Component { "mx_RoomView_statusArea_expanded": isStatusAreaExpanded, }); + // if statusBar does not exist then statusBarArea is blank and takes up unnecessary space on the screen + // show statusBarArea only if statusBar is present const statusBarArea = statusBar &&