PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix left panel resizer

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2020-12-17 13:25:22 +01:00
parent da97d18332
commit dcb30b72b0
3 changed files with 43 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
res/css/structures/_MainSplit.scss
View file

@ -22,22 +22,30 @@ limitations under the License.
} }
.mx_MainSplit > .mx_RightPanel_ResizeWrapper { .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 0 5px 5px 5px; padding: 0 5px 5px 0px;
// margin left to not allow the handle to not encroach on the space for the scrollbar
margin-left: 8px;
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
.mx_RightPanel_ResizeHandle {
width: 9px;
}
&:hover .mx_RightPanel_ResizeHandle { &:hover .mx_RightPanel_ResizeHandle {
// Need to use important to override element style attributes &::before {
// set by re-resizable position: absolute;
top: 50% !important; left: 6px;
transform: translate(0, -50%); top: 50%;
transform: translate(0, -50%);
height: 64px !important; // to match width of the ones on roomlist height: 64px;
width: 4px !important; width: 4px;
border-radius: 4px !important; border-radius: 4px;
background-color: $primary-fg-color; content: ' ';
opacity: 0.8;
background-color: $primary-fg-color;
opacity: 0.8;
margin-left: -10px;
}
} }
} }

12
res/css/structures/_RoomView.scss
View file

@ -25,9 +25,6 @@ limitations under the License.
width: 100%; width: 100%;
height: 100%; height: 100%;
// This is an ugly fix for centering this element
margin-left: 6.25px;
font-size: $font-18px; font-size: $font-18px;
text-align: center; text-align: center;
@ -120,16 +117,23 @@ limitations under the License.
height: 50px; height: 50px;
} }
.mx_RoomView_body { .mx_RoomView_container {
position: relative; //for .mx_RoomView_auxPanel_fullHeight position: relative; //for .mx_RoomView_auxPanel_fullHeight
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.mx_RoomView_body {
display: flex;
flex-direction: column;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner { .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
order: 2; order: 2;
} }
margin-right: 10px;
} }
.mx_RoomView_body .mx_RoomView_timeline { .mx_RoomView_body .mx_RoomView_timeline {

28
src/components/structures/RoomView.tsx
View file

@ -2003,22 +2003,24 @@ export default class RoomView extends React.Component<IProps, IState> {
appsShown={this.state.showApps} appsShown={this.state.showApps}
/> />
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}> <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
<div className="mx_RoomView_body"> <div className={"mx_RoomView_container"}>
{auxPanel} {auxPanel}
<div className={timelineClasses}> <div className="mx_RoomView_body">
{topUnreadMessagesBar} <div className={timelineClasses}>
{jumpToBottom} {topUnreadMessagesBar}
{messagePanel} {jumpToBottom}
{searchResultsPanel} {messagePanel}
</div> {searchResultsPanel}
<div className={statusBarAreaClass}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line" />
{statusBar}
</div> </div>
<div className={statusBarAreaClass}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line" />
{statusBar}
</div>
</div>
{previewBar}
{messageComposer}
</div> </div>
{previewBar}
{messageComposer}
</div> </div>
</MainSplit> </MainSplit>
</ErrorBoundary> </ErrorBoundary>