Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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 {
padding: 0 5px 5px 5px;
// margin left to not allow the handle to not encroach on the space for the scrollbar
margin-left: 8px;
padding: 0 5px 5px 0px;
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
.mx_RightPanel_ResizeHandle {
width: 9px;
}
&:hover .mx_RightPanel_ResizeHandle {
// Need to use important to override element style attributes
// set by re-resizable
top: 50% !important;
transform: translate(0, -50%);
&::before {
position: absolute;
left: 6px;
top: 50%;
transform: translate(0, -50%);
height: 64px !important; // to match width of the ones on roomlist
width: 4px !important;
border-radius: 4px !important;
height: 64px;
width: 4px;
border-radius: 4px;
background-color: $primary-fg-color;
opacity: 0.8;
content: ' ';
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%;
height: 100%;
// This is an ugly fix for centering this element
margin-left: 6.25px;
font-size: $font-18px;
text-align: center;
@ -120,16 +117,23 @@ limitations under the License.
height: 50px;
}
.mx_RoomView_body {
.mx_RoomView_container {
position: relative; //for .mx_RoomView_auxPanel_fullHeight
display: flex;
flex-direction: column;
}
.mx_RoomView_body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
order: 2;
}
margin-right: 10px;
}
.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}
/>
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
<div className="mx_RoomView_body">
<div className={"mx_RoomView_container"}>
{auxPanel}
<div className={timelineClasses}>
{topUnreadMessagesBar}
{jumpToBottom}
{messagePanel}
{searchResultsPanel}
</div>
<div className={statusBarAreaClass}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line" />
{statusBar}
<div className="mx_RoomView_body">
<div className={timelineClasses}>
{topUnreadMessagesBar}
{jumpToBottom}
{messagePanel}
{searchResultsPanel}
</div>
<div className={statusBarAreaClass}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line" />
{statusBar}
</div>
</div>
{previewBar}
{messageComposer}
</div>
{previewBar}
{messageComposer}
</div>
</MainSplit>
</ErrorBoundary>