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

Merge pull request #2248 from matrix-org/bwindels/memberpanel

Browse source 
Redesign: basic makeover of member info panel
This commit is contained in:
David Baker 2018-10-25 14:52:54 +01:00 • committed by GitHub
commit adee0fdcef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

28
res/css/views/rooms/_EntityTile.scss
View file

@ -15,12 +15,19 @@ limitations under the License.
*/
.mx_EntityTile {
display: table-row;
position: relative;
display: flex;
align-items: center;
color: $primary-fg-color;
cursor: pointer;
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
}
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
@ -30,12 +37,10 @@ limitations under the License.
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
width: 36px;
height: 36px;
position: relative;
@ -51,32 +56,21 @@ limitations under the License.
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
display: table-cell;
vertical-align: middle;
flex: 1 1 0;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 155px;
}
.mx_EntityTile_details {
display: table-cell;
padding-right: 14px;
vertical-align: middle;
overflow: hidden;
}
.mx_EntityTile_name_hover {
font-size: 13px;
}
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;

48
res/css/views/rooms/_MemberInfo.scss
View file

@ -15,14 +15,36 @@ limitations under the License.
*/
.mx_MemberInfo {
margin-top: 20px;
padding-right: 20px;
height: 100%;
background-color: $secondary-accent-color;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}
.mx_MemberInfo_name {
align-items: center;
display: flex;
}
.mx_MemberInfo_cancel {
height: 16px;
padding: 10px 15px;
cursor: pointer;
}
.mx_MemberInfo_name h2 {
flex: 1;
}
.mx_MemberInfo h2 {
margin-top: 6px;
font-size: 18px;
font-weight: 600;
margin: 16px 0;
}
.mx_MemberInfo_container {
padding: 8px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
@ -37,14 +59,16 @@ limitations under the License.
width: 160px;
}
.mx_MemberInfo_cancel {
float: right;
margin-right: 10px;
cursor: pointer;
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
}
.mx_MemberInfo_avatar {
clear: both;
.mx_MemberInfo_avatar > img {
height: auto;
width: 100%;
max-height: 30vh;
object-fit: contain;
display: block;
}
.mx_MemberInfo_avatar .mx_BaseAvatar {
@ -70,7 +94,6 @@ limitations under the License.
.mx_MemberInfo_profileField {
font-size: 13px;
position: relative;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
@ -110,3 +133,6 @@ limitations under the License.
margin-left: 8px;
}
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
flex: 1;
}