mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

small makeover of member info panel

Browse source 
this removes the style sharing between the verify buttons in the memberinfo panel and
and the encrypted event dialog because the diverge too much now.
This commit is contained in:
Bruno Windels 2019-01-29 21:14:16 +01:00
parent 8e7f3e1a68
commit 7d6f551841
4 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/views/dialogs/_EncryptedEventDialog.scss
View file

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

15
res/css/views/rooms/_MemberDeviceInfo.scss
View file

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

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

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

3
src/components/views/elements/DeviceVerifyButtons.js
View file

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