Merge pull request from matrix-org/bwindels/memberpanel-tiny-makeover

Redesign: small member info panel makeover
This commit is contained in:
Bruno Windels 2019-01-30 10:01:33 +00:00 committed by GitHub
commit 6aca7e4515
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 20 deletions

View file

@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_EncryptedEventDialog .mx_MemberDeviceInfo {
.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
float: right;
padding: 0px;
margin-right: 42px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {

View file

@ -15,13 +15,15 @@ limitations under the License.
*/
.mx_MemberDeviceInfo {
padding: 10px 0px;
display: flex;
padding-bottom: 10px;
}
.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
flex: 0 1 auto;
align-items: stretch;
}
.mx_MemberDeviceInfo_textButton {
@ -39,16 +41,13 @@ limitations under the License.
}
.mx_MemberDeviceInfo_deviceInfo {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,0.1);
margin: 0 5px 5px 8px;
}
/* "Unblacklist" is too long for a regular button: make it wider and
reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
width: 8em;
padding-left: 1em;
padding-right: 1em;
}

View file

@ -43,7 +43,7 @@ limitations under the License.
}
.mx_MemberInfo_container {
padding: 8px;
margin: 0 16px 16px 16px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
@ -60,6 +60,7 @@ limitations under the License.
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
margin-bottom: 16px;
}
.mx_MemberInfo_avatar > img {
@ -83,15 +84,14 @@ limitations under the License.
.mx_MemberInfo h3 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 16px;
margin-bottom: 14px;
color: $input-darker-fg-color;
font-weight: bold;
font-size: 12px;
margin: 4px 0;
}
.mx_MemberInfo_profileField {
font-size: 13px;
font-size: 15px;
position: relative;
}
@ -101,14 +101,17 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: 13px;
color: $accent-color;
font-size: 15px;
color: $primary-fg-color;
margin-left: 8px;
line-height: 23px;
}
.mx_MemberInfo_createRoom {
cursor: pointer;
display: flex;
align-items: center;
padding: 0 8px;
}
.mx_MemberInfo_createRoom_label {

View file

@ -114,9 +114,8 @@ export default React.createClass({
);
}
// mx_MemberDeviceInfo because the vector's CSS on EncryptedEventDialog is awful
return (
<div className="mx_MemberDeviceInfo mx_DeviceVerifyButtons" >
<div className="mx_DeviceVerifyButtons" >
{ verifyButton }
{ blacklistButton }
</div>