mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 02:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3914 from matrix-org/t3chguy/userinfo_scroll

Browse source 
Make the entire User Info scrollable, sticky close button
This commit is contained in:
Michael Telatynski 2020-01-24 10:22:17 +00:00 committed by GitHub
commit 0078c2f099
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
res/css/views/right_panel/_UserInfo.scss
View file

@ -23,15 +23,23 @@ limitations under the License.
font-size: 12px; font-size: 12px;
.mx_UserInfo_cancel { .mx_UserInfo_cancel {
cursor: pointer;
position: absolute;
top: 0;
border-radius: 4px;
background-color: $dark-panel-bg-color;
margin: 9px;
z-index: 1; // render on top of the right panel
div {
height: 16px; height: 16px;
width: 16px; width: 16px;
padding: 10px 0 10px 10px; padding: 4px;
cursor: pointer;
mask-image: url('$(res)/img/minimise.svg'); mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: 16px center; mask-position: 7px center;
background-color: $rightpanel-button-color; background-color: $rightpanel-button-color;
position: absolute; }
} }
h2 { h2 {

9
src/components/views/right_panel/UserInfo.js
View file

@ -1237,10 +1237,9 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
let closeButton; let closeButton;
if (onClose) { if (onClose) {
closeButton = <AccessibleButton closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
className="mx_UserInfo_cancel" <div />
onClick={onClose} </AccessibleButton>;
title={_t('Close')} />;
} }
const memberDetails = ( const memberDetails = (
@ -1356,6 +1355,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
return ( return (
<div className="mx_UserInfo" role="tabpanel"> <div className="mx_UserInfo" role="tabpanel">
<AutoHideScrollbar className="mx_UserInfo_scrollContainer">
{ closeButton } { closeButton }
{ avatarElement } { avatarElement }
@ -1381,7 +1381,6 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
</div> </div>
</div> } </div> }
<AutoHideScrollbar className="mx_UserInfo_scrollContainer">
{ securitySection } { securitySection }
<UserOptionsSection <UserOptionsSection
devices={devices} devices={devices}