diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1e162bb9f7..7a13515ec6 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -330,9 +330,9 @@ $left-gutter: 64px; .mx_EventTile_e2eIcon { position: absolute; top: 6px; - left: 46px; - width: 15px; - height: 15px; + left: 44px; + width: 14px; + height: 14px; display: block; bottom: 0; right: 0; @@ -399,10 +399,6 @@ $left-gutter: 64px; margin-bottom: 0px; } -.mx_EventTile_12hr .mx_EventTile_e2eIcon { - padding-left: 5px; -} - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { @@ -507,7 +503,7 @@ $left-gutter: 64px; display: inline-block; visibility: hidden; cursor: pointer; - top: 6px; + top: 8px; right: 6px; width: 19px; height: 19px; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index de68f68265..9f6d2ec590 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -76,8 +76,8 @@ limitations under the License. left: 60px; margin-right: 0; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class - width: 14px; - height: 14px; + width: 12px; + height: 12px; } .mx_MessageComposer_noperm_error { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 6173ea940f..46993bb644 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -19,13 +19,16 @@ limitations under the License. border-bottom: 1px solid $primary-hairline-color; background-color: $roomheader-bg-color; - .mx_E2EIcon { - margin: 0; - position: absolute; - bottom: -2px; - right: -6px; - height: 15px; - width: 15px; + .mx_RoomHeader_e2eIcon { + height: 12px; + width: 12px; + + .mx_E2EIcon { + margin: 0; + position: absolute; + height: 12px; + width: 12px; + } } } @@ -178,7 +181,7 @@ limitations under the License. .mx_RoomHeader_avatar { flex: 0; - margin: 0 7px 0 6px; + margin: 0 6px 0 7px; position: relative; } diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 40ba15af33..80bfac6787 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -30,6 +30,8 @@ interface IProps { tag: TagID; displayBadge?: boolean; forceCount?: boolean; + oobData?: object; + viewAvatarOnClick?: boolean; } interface IState { @@ -57,7 +59,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent - + {badge} ; diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index f236ed1070..51163e27e3 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -33,7 +33,8 @@ import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; import DMRoomMap from '../../../utils/DMRoomMap'; import E2EIcon from './E2EIcon'; -import InviteOnlyIcon from './InviteOnlyIcon'; +import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; +import {DefaultTagID} from "../../../stores/room-list/models"; export default createReactClass({ displayName: 'RoomHeader', @@ -152,25 +153,14 @@ export default createReactClass({ }, render: function() { - const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); - let searchStatus = null; let cancelButton = null; let settingsButton = null; let pinnedEventsButton = null; - const e2eIcon = this.props.e2eStatus ? - : - undefined; - const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", ""); const joinRule = joinRules && joinRules.getContent().join_rule; - let privateIcon; - // Don't show an invite-only icon for DMs. Users know they're invite-only. - if (!dmUserId && joinRule === "invite") { - privateIcon = ; - } if (this.props.onCancelClick) { cancelButton = ; @@ -221,15 +211,16 @@ export default createReactClass({ } const topicElement =
{ topic }
; - const avatarSize = 32; + let roomAvatar; if (this.props.room) { - roomAvatar = (); + viewAvatarOnClick={true} + />; } if (this.props.onSettingsClick) { @@ -311,11 +302,13 @@ export default createReactClass({ { searchButton } ; + const e2eIcon = this.props.e2eStatus ? : undefined; + return (
-
{ roomAvatar }{ e2eIcon }
- { privateIcon } +
{ roomAvatar }
+
{ e2eIcon }
{ name } { topicElement } { cancelButton }