Fix room header timeline and composer alignment

Room header use DecoratedRoomAvatar instead of manual e2eIcon overlay
move e2eIcon next to it instead of private padlock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-13 23:56:25 +01:00
parent 98f3d9bd74
commit 4d432f23e4
5 changed files with 38 additions and 38 deletions

View file

@ -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;

View file

@ -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 {

View file

@ -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;
}

View file

@ -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<IProps, ISt
}
return <div className="mx_DecoratedRoomAvatar">
<RoomAvatar room={this.props.room} width={this.props.avatarSize} height={this.props.avatarSize} />
<RoomAvatar
room={this.props.room}
width={this.props.avatarSize}
height={this.props.avatarSize}
oobData={this.props.oobData}
viewAvatarOnClick={this.props.viewAvatarOnClick}
/>
<RoomTileIcon room={this.props.room} tag={this.props.tag} />
{badge}
</div>;

View file

@ -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 ?
<E2EIcon status={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 = <InviteOnlyIcon />;
}
if (this.props.onCancelClick) {
cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
@ -221,15 +211,16 @@ export default createReactClass({
}
const topicElement =
<div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
const avatarSize = 32;
let roomAvatar;
if (this.props.room) {
roomAvatar = (<RoomAvatar
roomAvatar = <DecoratedRoomAvatar
room={this.props.room}
width={avatarSize}
height={avatarSize}
avatarSize={32}
tag={DefaultTagID.Untagged} // to apply room publicity badging
oobData={this.props.oobData}
viewAvatarOnClick={true} />);
viewAvatarOnClick={true}
/>;
}
if (this.props.onSettingsClick) {
@ -311,11 +302,13 @@ export default createReactClass({
{ searchButton }
</div>;
const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
return (
<div className="mx_RoomHeader light-panel">
<div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
{ privateIcon }
<div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
<div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
{ name }
{ topicElement }
{ cancelButton }