imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework profile sections of user and room settings

Browse source 
Mostly by design request. Some is freehand, to be reviewed.
This commit is contained in:
Travis Ralston 2020-09-21 21:00:51 -06:00
parent 6fee3d8f4f
commit 4f983ad9a1
7 changed files with 200 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

87
res/css/views/settings/_AvatarSetting.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,13 +15,55 @@ limitations under the License.
*/
.mx_AvatarSetting_avatar {
width: $font-88px;
height: $font-88px;
margin-left: 13px;
width: 90px;
height: 90px;
margin-top: 8px;
position: relative;
.mx_AvatarSetting_hover {
transition: opacity 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
// position to place the hover bg over the entire thing
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none; // let the pointer fall through the underlying thing
line-height: 90px;
text-align: center;
> span {
color: #fff; // hardcoded to contrast with background
position: relative; // tricks the layout engine into putting this on top of the bg
font-weight: 500;
}
.mx_AvatarSetting_hoverBg {
// absolute position to lazily fill the entire container
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
background-color: $settings-profile-overlay-placeholder-fg-color;
border-radius: 90px;
}
}
&.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover {
opacity: 1;
}
&:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover {
opacity: 0;
}
& > * {
width: $font-88px;
box-sizing: border-box;
}
@ -30,7 +72,7 @@ limitations under the License.
}
.mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
color: $button-danger-bg-color;
width: 100%;
}
& > img {
@ -41,8 +83,9 @@ limitations under the License.
& > img,
.mx_AvatarSetting_avatarPlaceholder {
display: block;
height: $font-88px;
border-radius: 4px;
height: 90px;
border-radius: 90px;
cursor: pointer;
}
.mx_AvatarSetting_avatarPlaceholder::before {
@ -58,6 +101,34 @@ limitations under the License.
left: 0;
right: 0;
}
.mx_AvatarSetting_avatarPlaceholder ~ .mx_AvatarSetting_uploadButton {
border: 1px solid $settings-profile-overlay-placeholder-fg-color;
}
.mx_AvatarSetting_uploadButton {
width: 32px;
height: 32px;
border-radius: 32px;
background-color: $settings-profile-placeholder-bg-color;
position: absolute;
bottom: 0;
right: 0;
}
.mx_AvatarSetting_uploadButton::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 55%;
background-color: $settings-profile-overlay-placeholder-fg-color;
mask-image: url('$(res)/img/feather-customised/edit.svg');
}
}
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {

23
res/css/views/settings/_ProfileSettings.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -20,6 +20,13 @@ limitations under the License.
.mx_ProfileSettings_controls {
flex-grow: 1;
margin-right: 54px;
// We put the header under the controls with some minor styling to cheat
// alignment of the field with the avatar
.mx_SettingsTab_subheading {
margin-top: 0;
}
}
.mx_ProfileSettings_controls .mx_Field #profileTopic {
@ -41,3 +48,17 @@ limitations under the License.
.mx_ProfileSettings_avatarUpload {
display: none;
}
.mx_ProfileSettings_profileForm {
@mixin mx_Settings_fullWidthField;
border-bottom: 1px solid $menu-border-color;
}
.mx_ProfileSettings_buttons {
margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
margin-bottom: 28px;
> .mx_AccessibleButton_kind_link {
padding-left: 0; // to align with left side
}
}