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>pull/21833/head
parent
98f3d9bd74
commit
4d432f23e4
|
@ -330,9 +330,9 @@ $left-gutter: 64px;
|
||||||
.mx_EventTile_e2eIcon {
|
.mx_EventTile_e2eIcon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
left: 46px;
|
left: 44px;
|
||||||
width: 15px;
|
width: 14px;
|
||||||
height: 15px;
|
height: 14px;
|
||||||
display: block;
|
display: block;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -399,10 +399,6 @@ $left-gutter: 64px;
|
||||||
margin-bottom: 0px;
|
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_verified .mx_EventTile_line,
|
||||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
|
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
|
||||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||||
|
@ -507,7 +503,7 @@ $left-gutter: 64px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
top: 6px;
|
top: 8px;
|
||||||
right: 6px;
|
right: 6px;
|
||||||
width: 19px;
|
width: 19px;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
|
|
|
@ -76,8 +76,8 @@ limitations under the License.
|
||||||
left: 60px;
|
left: 60px;
|
||||||
margin-right: 0; // Counteract the E2EIcon class
|
margin-right: 0; // Counteract the E2EIcon class
|
||||||
margin-left: 3px; // Counteract the E2EIcon class
|
margin-left: 3px; // Counteract the E2EIcon class
|
||||||
width: 14px;
|
width: 12px;
|
||||||
height: 14px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer_noperm_error {
|
.mx_MessageComposer_noperm_error {
|
||||||
|
|
|
@ -19,13 +19,16 @@ limitations under the License.
|
||||||
border-bottom: 1px solid $primary-hairline-color;
|
border-bottom: 1px solid $primary-hairline-color;
|
||||||
background-color: $roomheader-bg-color;
|
background-color: $roomheader-bg-color;
|
||||||
|
|
||||||
.mx_E2EIcon {
|
.mx_RoomHeader_e2eIcon {
|
||||||
margin: 0;
|
height: 12px;
|
||||||
position: absolute;
|
width: 12px;
|
||||||
bottom: -2px;
|
|
||||||
right: -6px;
|
.mx_E2EIcon {
|
||||||
height: 15px;
|
margin: 0;
|
||||||
width: 15px;
|
position: absolute;
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -178,7 +181,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomHeader_avatar {
|
.mx_RoomHeader_avatar {
|
||||||
flex: 0;
|
flex: 0;
|
||||||
margin: 0 7px 0 6px;
|
margin: 0 6px 0 7px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,6 +30,8 @@ interface IProps {
|
||||||
tag: TagID;
|
tag: TagID;
|
||||||
displayBadge?: boolean;
|
displayBadge?: boolean;
|
||||||
forceCount?: boolean;
|
forceCount?: boolean;
|
||||||
|
oobData?: object;
|
||||||
|
viewAvatarOnClick?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
|
@ -57,7 +59,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div className="mx_DecoratedRoomAvatar">
|
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} />
|
<RoomTileIcon room={this.props.room} tag={this.props.tag} />
|
||||||
{badge}
|
{badge}
|
||||||
</div>;
|
</div>;
|
||||||
|
|
|
@ -33,7 +33,8 @@ import SettingsStore from "../../../settings/SettingsStore";
|
||||||
import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
|
import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
|
||||||
import DMRoomMap from '../../../utils/DMRoomMap';
|
import DMRoomMap from '../../../utils/DMRoomMap';
|
||||||
import E2EIcon from './E2EIcon';
|
import E2EIcon from './E2EIcon';
|
||||||
import InviteOnlyIcon from './InviteOnlyIcon';
|
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
|
||||||
|
import {DefaultTagID} from "../../../stores/room-list/models";
|
||||||
|
|
||||||
export default createReactClass({
|
export default createReactClass({
|
||||||
displayName: 'RoomHeader',
|
displayName: 'RoomHeader',
|
||||||
|
@ -152,25 +153,14 @@ export default createReactClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
|
|
||||||
|
|
||||||
let searchStatus = null;
|
let searchStatus = null;
|
||||||
let cancelButton = null;
|
let cancelButton = null;
|
||||||
let settingsButton = null;
|
let settingsButton = null;
|
||||||
let pinnedEventsButton = 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 dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
|
||||||
const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
|
const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
|
||||||
const joinRule = joinRules && joinRules.getContent().join_rule;
|
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) {
|
if (this.props.onCancelClick) {
|
||||||
cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
|
cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
|
||||||
|
@ -221,15 +211,16 @@ export default createReactClass({
|
||||||
}
|
}
|
||||||
const topicElement =
|
const topicElement =
|
||||||
<div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
|
<div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
|
||||||
const avatarSize = 32;
|
|
||||||
let roomAvatar;
|
let roomAvatar;
|
||||||
if (this.props.room) {
|
if (this.props.room) {
|
||||||
roomAvatar = (<RoomAvatar
|
roomAvatar = <DecoratedRoomAvatar
|
||||||
room={this.props.room}
|
room={this.props.room}
|
||||||
width={avatarSize}
|
avatarSize={32}
|
||||||
height={avatarSize}
|
tag={DefaultTagID.Untagged} // to apply room publicity badging
|
||||||
oobData={this.props.oobData}
|
oobData={this.props.oobData}
|
||||||
viewAvatarOnClick={true} />);
|
viewAvatarOnClick={true}
|
||||||
|
/>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.onSettingsClick) {
|
if (this.props.onSettingsClick) {
|
||||||
|
@ -311,11 +302,13 @@ export default createReactClass({
|
||||||
{ searchButton }
|
{ searchButton }
|
||||||
</div>;
|
</div>;
|
||||||
|
|
||||||
|
const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx_RoomHeader light-panel">
|
<div className="mx_RoomHeader light-panel">
|
||||||
<div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
|
<div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
|
||||||
<div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
|
<div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
|
||||||
{ privateIcon }
|
<div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
|
||||||
{ name }
|
{ name }
|
||||||
{ topicElement }
|
{ topicElement }
|
||||||
{ cancelButton }
|
{ cancelButton }
|
||||||
|
|
Loading…
Reference in New Issue