Merge pull request #5759 from panoschal/fix/call-search-areas

Compact call area, better ui when in call & searching messages
This commit is contained in:
Travis Ralston 2021-09-07 12:31:56 -06:00 committed by GitHub
commit 3217ab26ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1848,6 +1848,19 @@ export default class RoomView extends React.Component<IProps, IState> {
/>; />;
} }
const statusBarAreaClass = classNames("mx_RoomView_statusArea", {
"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 && <div className={statusBarAreaClass}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line" />
{ statusBar }
</div>
</div>;
const roomVersionRecommendation = this.state.upgradeRecommendation; const roomVersionRecommendation = this.state.upgradeRecommendation;
const showRoomUpgradeBar = ( const showRoomUpgradeBar = (
roomVersionRecommendation && roomVersionRecommendation &&
@ -2045,10 +2058,6 @@ export default class RoomView extends React.Component<IProps, IState> {
/>); />);
} }
const statusBarAreaClass = classNames("mx_RoomView_statusArea", {
"mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
});
const showRightPanel = this.state.room && this.state.showRightPanel; const showRightPanel = this.state.room && this.state.showRightPanel;
const rightPanel = showRightPanel const rightPanel = showRightPanel
? <RightPanel ? <RightPanel
@ -2097,12 +2106,7 @@ export default class RoomView extends React.Component<IProps, IState> {
{ messagePanel } { messagePanel }
{ searchResultsPanel } { searchResultsPanel }
</div> </div>
<div className={statusBarAreaClass}> { statusBarArea }
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line" />
{ statusBar }
</div>
</div>
{ previewBar } { previewBar }
{ messageComposer } { messageComposer }
</div> </div>