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

Make the entire User Info scrollable, sticky close button

Browse source
This commit is contained in:
Michael Telatynski 2020-01-23 16:09:32 +00:00
parent d7a4698db8
commit 237a0ed071
2 changed files with 43 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
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 {
height: 16px;
width: 16px;
padding: 10px 0 10px 10px;
cursor: pointer; cursor: pointer;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: 16px center;
background-color: $rightpanel-button-color;
position: absolute; 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;
width: 16px;
padding: 4px;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: 7px center;
background-color: $rightpanel-button-color;
}
} }
h2 { h2 {

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

@ -1219,10 +1219,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 = (
@ -1338,32 +1337,32 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
return ( return (
<div className="mx_UserInfo" role="tabpanel"> <div className="mx_UserInfo" role="tabpanel">
{ closeButton }
{ avatarElement }
<div className="mx_UserInfo_container">
<div className="mx_UserInfo_profile">
<div>
<h2 aria-label={displayName}>
{ e2eIcon }
{ displayName }
</h2>
</div>
<div>{ user.userId }</div>
<div className="mx_UserInfo_profileStatus">
{presenceLabel}
{statusLabel}
</div>
</div>
</div>
{ memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
<div className="mx_UserInfo_memberDetails">
{ memberDetails }
</div>
</div> }
<AutoHideScrollbar className="mx_UserInfo_scrollContainer"> <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
{ closeButton }
{ avatarElement }
<div className="mx_UserInfo_container">
<div className="mx_UserInfo_profile">
<div>
<h2 aria-label={displayName}>
{ e2eIcon }
{ displayName }
</h2>
</div>
<div>{ user.userId }</div>
<div className="mx_UserInfo_profileStatus">
{presenceLabel}
{statusLabel}
</div>
</div>
</div>
{ memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
<div className="mx_UserInfo_memberDetails">
{ memberDetails }
</div>
</div> }
{ securitySection } { securitySection }
<UserOptionsSection <UserOptionsSection
devices={devices} devices={devices}