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

Organize UserInfo.scss (#8461)

Browse source 
* .mx_UserInfo_profileField under .mx_UserInfo_memberDetails

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* reorganize structure of .mx_UserInfo_avatar - 1

.mx_UserInfo_avatar > div > div *

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* reorganize structure of .mx_UserInfo_avatar - 2

.mx_UserInfo_avatar > div > div

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* reorganize structure of .mx_UserInfo_avatar - 3

.mx_UserInfo_avatar > div

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* reorganize structure of .mx_UserInfo_avatar - 4

- .mx_BaseAvatar_initial
- .mx_BaseAvatar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* reorganize structure of .mx_UserInfo_avatar - 5

Move .mx_BaseAvatar_initial under .mx_BaseAvatar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace a wildcard with className

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Specify className

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix position of the E2E icon of expanding sessions button

To prevent the icon from moving down a little bit

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-23 11:42:31 +00:00 committed by GitHub
parent 4f9598361f
commit 20fd68b902
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 98 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,7 @@ limitations under the License.
top: 0; top: 0;
border-radius: 4px; border-radius: 4px;
background-color: $dark-panel-bg-color; background-color: $dark-panel-bg-color;
margin: 9px; margin: 9px; // TODO: Use a variable
z-index: 1; // render on top of the right panel z-index: 1; // render on top of the right panel
div { div {
@ -47,11 +47,24 @@ limitations under the License.
h2 { h2 {
font-size: $font-18px; font-size: $font-18px;
font-weight: 600; font-weight: 600;
margin: 18px 0 0 0; margin: 18px 0 0 0; // TODO: Use a variable
} }
.mx_UserInfo_container { .mx_UserInfo_container {
padding: 8px 16px; padding: $spacing-8 $spacing-16;
&:not(.mx_UserInfo_separator) {
padding-top: $spacing-16;
padding-bottom: 0;
> :not(h3) {
margin-inline-start: $spacing-8;
display: flex;
flex-flow: column;
align-items: flex-start;
row-gap: $spacing-8;
}
}
.mx_UserInfo_container_verifyButton { .mx_UserInfo_container_verifyButton {
margin-top: $spacing-8; margin-top: $spacing-8;
@ -65,7 +78,7 @@ limitations under the License.
.mx_UserInfo_memberDetailsContainer { .mx_UserInfo_memberDetailsContainer {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 8px; margin-bottom: $spacing-8;
} }
.mx_RoomTile_titleContainer { .mx_RoomTile_titleContainer {
@ -81,25 +94,24 @@ limitations under the License.
} }
.mx_UserInfo_avatar { .mx_UserInfo_avatar {
margin: 24px 32px 0 32px; margin: $spacing-24 $spacing-32 0 $spacing-32;
}
.mx_UserInfo_avatar > div { .mx_UserInfo_avatar_transition {
max-width: 30vh; max-width: 30vh;
margin: 0 auto; margin: 0 auto;
transition: 0.5s; transition: 0.5s;
}
.mx_UserInfo_avatar > div > div { .mx_UserInfo_avatar_transition_child {
/* use padding-top instead of height to make this element square, /* use padding-top instead of height to make this element square,
as the % in padding is a % of the width (including margin, as the % in padding is a % of the width (including margin,
that's why we had to put the margin to center on a parent div), that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */ and not a % of the parent height. */
padding-top: 100%; padding-top: 100%;
position: relative; position: relative;
}
.mx_UserInfo_avatar > div > div * { .mx_BaseAvatar,
.mx_BaseAvatar_initial,
.mx_BaseAvatar_image {
border-radius: 100%; border-radius: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
@ -108,7 +120,12 @@ limitations under the License.
height: 100% !important; height: 100% !important;
} }
.mx_UserInfo_avatar .mx_BaseAvatar_initial { .mx_BaseAvatar {
&.mx_BaseAvatar_image {
cursor: zoom-in;
}
.mx_BaseAvatar_initial {
z-index: 1; z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
@ -118,15 +135,13 @@ limitations under the License.
font-size: 6rem !important; font-size: 6rem !important;
width: 100% !important; width: 100% !important;
transition: font-size 0.5s; transition: font-size 0.5s;
}
.mx_UserInfo_avatar .mx_BaseAvatar { & + .mx_BaseAvatar_image {
.mx_BaseAvatar_initial + .mx_BaseAvatar_image {
cursor: default; cursor: default;
} }
}
&.mx_BaseAvatar_image { }
cursor: zoom-in; }
} }
} }
@ -135,11 +150,11 @@ limitations under the License.
color: $tertiary-content; color: $tertiary-content;
font-weight: 600; font-weight: 600;
font-size: $font-12px; font-size: $font-12px;
margin: 4px 0; margin: $spacing-4 0;
} }
p { p {
margin: 5px 0; margin: 5px 0; // TODO: Use a variable
} }
.mx_UserInfo_profile { .mx_UserInfo_profile {
@ -165,23 +180,24 @@ limitations under the License.
} }
.mx_E2EIcon { .mx_E2EIcon {
margin-top: 3px; // visual vertical centering to the top line of text margin-top: 3px; // visual vertical centering to the top line of text. TODO: Use a variable
margin-right: 4px; // margin from displyname margin-inline-end: $spacing-4; // margin from displayName
min-width: 18px; // convince flexbox to not collapse it min-width: 18px; // convince flexbox to not collapse it
} }
} }
.mx_UserInfo_profileStatus { .mx_UserInfo_profileStatus {
margin-top: 12px; margin-top: $spacing-12;
} }
} }
.mx_UserInfo_memberDetails .mx_UserInfo_profileField { .mx_UserInfo_memberDetails {
.mx_UserInfo_profileField {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 6px 0; margin: 6px 0; // TODO: Use a variable
.mx_UserInfo_roleDescription { .mx_UserInfo_roleDescription {
display: flex; display: flex;
@ -195,6 +211,7 @@ limitations under the License.
margin: 0; margin: 0;
} }
} }
}
.mx_UserInfo_field { .mx_UserInfo_field {
line-height: $font-16px; line-height: $font-16px;
@ -224,19 +241,6 @@ limitations under the License.
flex: 1 1 0; flex: 1 1 0;
} }
.mx_UserInfo_container:not(.mx_UserInfo_separator) {
padding-top: 16px;
padding-bottom: 0;
> :not(h3) {
margin-inline-start: $spacing-8;
display: flex;
flex-flow: column;
align-items: flex-start;
row-gap: $spacing-8;
}
}
.mx_UserInfo_devices { .mx_UserInfo_devices {
.mx_UserInfo_device { .mx_UserInfo_device {
display: flex; display: flex;
@ -272,17 +276,24 @@ limitations under the License.
.mx_UserInfo_expand { .mx_UserInfo_expand {
column-gap: 5px; // cf: mx_UserInfo_device_name column-gap: 5px; // cf: mx_UserInfo_device_name
margin-bottom: 11px; margin-bottom: 11px;
align-items: initial; // Cancel the default property
} }
} }
}
.mx_UserInfo.mx_UserInfo_smallAvatar { &.mx_UserInfo_smallAvatar {
.mx_UserInfo_avatar > div { .mx_UserInfo_avatar {
.mx_UserInfo_avatar_transition {
max-width: 72px; max-width: 72px;
margin: 0 auto; margin: 0 auto;
} }
.mx_UserInfo_avatar .mx_BaseAvatar_initial { .mx_UserInfo_avatar_transition_child {
.mx_BaseAvatar {
.mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller font-size: 40px !important; // override the other override because here the avatar is smaller
} }
}
}
}
}
} }

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

@ -1428,8 +1428,8 @@ const UserInfoHeader: React.FC<{
const avatarElement = ( const avatarElement = (
<div className="mx_UserInfo_avatar"> <div className="mx_UserInfo_avatar">
<div> <div className="mx_UserInfo_avatar_transition">
<div> <div className="mx_UserInfo_avatar_transition_child">
<MemberAvatar <MemberAvatar
key={member.userId} // to instantly blank the avatar when UserInfo changes members key={member.userId} // to instantly blank the avatar when UserInfo changes members
member={member as RoomMember} member={member as RoomMember}