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

Merge pull request #4312 from matrix-org/t3chguy/xsigning/fix_userinfo_e2eicon

Browse source 
Fix alignment of e2e icon in userinfo and expose full displayname in title
This commit is contained in:
Michael Telatynski 2020-04-03 20:33:42 +01:00 committed by GitHub
commit da8939107a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -134,12 +134,13 @@ limitations under the License.
text-align: center; text-align: center;
h2 { h2 {
display: flex;
font-size: $font-18px; font-size: $font-18px;
line-height: $font-25px; line-height: $font-25px;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
align-items: center;
span {
// limit to 2 lines, show an ellipsis if it overflows // limit to 2 lines, show an ellipsis if it overflows
// this looks webkit specific but is supported by Firefox 68+ // this looks webkit specific but is supported by Firefox 68+
display: -webkit-box; display: -webkit-box;
@ -149,9 +150,12 @@ limitations under the License.
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.mx_E2EIcon { .mx_E2EIcon {
margin: 5px; margin-top: 3px; // visual vertical centering to the top line of text
margin-right: 4px; // margin from displyname
min-width: 18px; // convince flexbox to not collapse it
} }
} }

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

@ -1444,9 +1444,11 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
<div className="mx_UserInfo_container mx_UserInfo_separator"> <div className="mx_UserInfo_container mx_UserInfo_separator">
<div className="mx_UserInfo_profile"> <div className="mx_UserInfo_profile">
<div> <div>
<h2 aria-label={displayName}> <h2>
{ e2eIcon } { e2eIcon }
<span title={displayName} aria-label={displayName}>
{ displayName } { displayName }
</span>
</h2> </h2>
</div> </div>
<div>{ member.userId }</div> <div>{ member.userId }</div>