Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Organize UserInfo.scss (#8461)
Browse files Browse the repository at this point in the history 
* .mx_UserInfo_profileField under .mx_UserInfo_memberDetails

Signed-off-by: Suguru Hirahara <[email protected]>

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

Signed-off-by: Suguru Hirahara <[email protected]>

* reorganize structure of .mx_UserInfo_avatar - 1

.mx_UserInfo_avatar > div > div *

Signed-off-by: Suguru Hirahara <[email protected]>

* reorganize structure of .mx_UserInfo_avatar - 2

.mx_UserInfo_avatar > div > div

Signed-off-by: Suguru Hirahara <[email protected]>

* reorganize structure of .mx_UserInfo_avatar - 3

.mx_UserInfo_avatar > div

Signed-off-by: Suguru Hirahara <[email protected]>

* reorganize structure of .mx_UserInfo_avatar - 4

- .mx_BaseAvatar_initial
- .mx_BaseAvatar

Signed-off-by: Suguru Hirahara <[email protected]>

* reorganize structure of .mx_UserInfo_avatar - 5

Move .mx_BaseAvatar_initial under .mx_BaseAvatar

Signed-off-by: Suguru Hirahara <[email protected]>

* Replace a wildcard with className

Signed-off-by: Suguru Hirahara <[email protected]>

* Specify className

Signed-off-by: Suguru Hirahara <[email protected]>

* .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar

Signed-off-by: Suguru Hirahara <[email protected]>

* Use variables

Signed-off-by: Suguru Hirahara <[email protected]>

* 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 <[email protected]>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <[email protected]>
  • Loading branch information
@luixxiul
luixxiul authored May 23, 2022
1 parent 4f95983 commit 20fd68b
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 90 deletions.
187 changes: 99 additions & 88 deletions res/css/views/right_panel/_UserInfo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ limitations under the License.
top: 0;
border-radius: 4px;
background-color: $dark-panel-bg-color;
margin: 9px;
margin: 9px; // TODO: Use a variable
z-index: 1; // render on top of the right panel

div {
Expand All @@ -47,11 +47,24 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: 600;
margin: 18px 0 0 0;
margin: 18px 0 0 0; // TODO: Use a variable
}

.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 {
margin-top: $spacing-8;
Expand All @@ -65,7 +78,7 @@ limitations under the License.
.mx_UserInfo_memberDetailsContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 8px;
margin-bottom: $spacing-8;
}

.mx_RoomTile_titleContainer {
Expand All @@ -81,52 +94,54 @@ limitations under the License.
}

.mx_UserInfo_avatar {
margin: 24px 32px 0 32px;
}

.mx_UserInfo_avatar > div {
max-width: 30vh;
margin: 0 auto;
transition: 0.5s;
}

.mx_UserInfo_avatar > div > div {
/* use padding-top instead of height to make this element square,
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),
and not a % of the parent height. */
padding-top: 100%;
position: relative;
}

.mx_UserInfo_avatar > div > div * {
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

.mx_UserInfo_avatar .mx_BaseAvatar_initial {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;

// override the calculated sizes so that the letter isn't HUGE
font-size: 6rem !important;
width: 100% !important;
transition: font-size 0.5s;
}

.mx_UserInfo_avatar .mx_BaseAvatar {
.mx_BaseAvatar_initial + .mx_BaseAvatar_image {
cursor: default;
}
margin: $spacing-24 $spacing-32 0 $spacing-32;

.mx_UserInfo_avatar_transition {
max-width: 30vh;
margin: 0 auto;
transition: 0.5s;

.mx_UserInfo_avatar_transition_child {
/* use padding-top instead of height to make this element square,
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),
and not a % of the parent height. */
padding-top: 100%;
position: relative;

.mx_BaseAvatar,
.mx_BaseAvatar_initial,
.mx_BaseAvatar_image {
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

&.mx_BaseAvatar_image {
cursor: zoom-in;
.mx_BaseAvatar {
&.mx_BaseAvatar_image {
cursor: zoom-in;
}

.mx_BaseAvatar_initial {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;

// override the calculated sizes so that the letter isn't HUGE
font-size: 6rem !important;
width: 100% !important;
transition: font-size 0.5s;

& + .mx_BaseAvatar_image {
cursor: default;
}
}
}
}
}
}

Expand All @@ -135,11 +150,11 @@ limitations under the License.
color: $tertiary-content;
font-weight: 600;
font-size: $font-12px;
margin: 4px 0;
margin: $spacing-4 0;
}

p {
margin: 5px 0;
margin: 5px 0; // TODO: Use a variable
}

.mx_UserInfo_profile {
Expand All @@ -165,34 +180,36 @@ limitations under the License.
}

.mx_E2EIcon {
margin-top: 3px; // visual vertical centering to the top line of text
margin-right: 4px; // margin from displyname
margin-top: 3px; // visual vertical centering to the top line of text. TODO: Use a variable
margin-inline-end: $spacing-4; // margin from displayName
min-width: 18px; // convince flexbox to not collapse it
}
}

.mx_UserInfo_profileStatus {
margin-top: 12px;
margin-top: $spacing-12;
}
}

.mx_UserInfo_memberDetails .mx_UserInfo_profileField {
display: flex;
justify-content: center;
align-items: center;

margin: 6px 0;

.mx_UserInfo_roleDescription {
.mx_UserInfo_memberDetails {
.mx_UserInfo_profileField {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
margin: 11px 0 12px 0;
}

.mx_Field {
margin: 0;
margin: 6px 0; // TODO: Use a variable

.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
margin: 11px 0 12px 0;
}

.mx_Field {
margin: 0;
}
}
}

Expand Down Expand Up @@ -224,19 +241,6 @@ limitations under the License.
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_device {
display: flex;
Expand Down Expand Up @@ -272,17 +276,24 @@ limitations under the License.
.mx_UserInfo_expand {
column-gap: 5px; // cf: mx_UserInfo_device_name
margin-bottom: 11px;
align-items: initial; // Cancel the default property
}
}
}

.mx_UserInfo.mx_UserInfo_smallAvatar {
.mx_UserInfo_avatar > div {
max-width: 72px;
margin: 0 auto;
}
&.mx_UserInfo_smallAvatar {
.mx_UserInfo_avatar {
.mx_UserInfo_avatar_transition {
max-width: 72px;
margin: 0 auto;
}

.mx_UserInfo_avatar .mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller
.mx_UserInfo_avatar_transition_child {
.mx_BaseAvatar {
.mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller
}
}
}
}
}
}
4 changes: 2 additions & 2 deletions src/components/views/right_panel/UserInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1428,8 +1428,8 @@ const UserInfoHeader: React.FC<{

const avatarElement = (
<div className="mx_UserInfo_avatar">
<div>
<div>
<div className="mx_UserInfo_avatar_transition">
<div className="mx_UserInfo_avatar_transition_child">
<MemberAvatar
key={member.userId} // to instantly blank the avatar when UserInfo changes members
member={member as RoomMember}
Expand Down

0 comments on commit 20fd68b

Please sign in to comment.