Merge branch 'nadonomy/ui-tweaks-part-deux' into 'element'

UI tweaks - part deux

See merge request new-vector/element/element-web/matrix-react-sdk!8

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

src/components/views/messages/TextualBody.js

@@ -35,6 +35,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext} from "../../../utils/strings";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default createReactClass({
     displayName: 'TextualBody',
@@ -146,7 +147,6 @@ export default createReactClass({
                 nextProps.showUrlPreview !== this.props.showUrlPreview ||
                 nextProps.editState !== this.props.editState ||
                 nextState.links !== this.state.links ||
-                nextState.editedMarkerHovered !== this.state.editedMarkerHovered ||
                 nextState.widgetHidden !== this.state.widgetHidden);
     },
 
@@ -367,42 +367,24 @@ export default createReactClass({
         });
     },
 
-    _onMouseEnterEditedMarker: function() {
-        this.setState({editedMarkerHovered: true});
-    },
-
-    _onMouseLeaveEditedMarker: function() {
-        this.setState({editedMarkerHovered: false});
-    },
-
     _openHistoryDialog: async function() {
         const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog");
         Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent});
     },
 
     _renderEditedMarker: function() {
-        let editedTooltip;
-        if (this.state.editedMarkerHovered) {
-            const Tooltip = sdk.getComponent('elements.Tooltip');
-            const date = this.props.mxEvent.replacingEventDate();
-            const dateString = date && formatDate(date);
-            editedTooltip = <Tooltip
-                tooltipClassName="mx_Tooltip_timeline"
-                label={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
-            />;
-        }
+        const date = this.props.mxEvent.replacingEventDate();
+        const dateString = date && formatDate(date);
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
-            <AccessibleButton
-                key="editedMarker"
+            <AccessibleTooltipButton
                 className="mx_EventTile_edited"
                 onClick={this._openHistoryDialog}
-                onMouseEnter={this._onMouseEnterEditedMarker}
-                onMouseLeave={this._onMouseLeaveEditedMarker}
+                title={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
+                tooltipClassName="mx_Tooltip_timeline"
             >
-                { editedTooltip }<span>{`(${_t("edited")})`}</span>
-            </AccessibleButton>
+                <span>{`(${_t("edited")})`}</span>
+            </AccessibleTooltipButton>
         );
     },
 

src/components/views/rooms/E2EIcon.js

@@ -42,11 +42,12 @@ const crossSigningRoomTitles = {
     [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
 };
 
-const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
+const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => {
     const [hover, setHover] = useState(false);
 
     const classes = classNames({
         mx_E2EIcon: true,
+        mx_E2EIcon_bordered: bordered,
         mx_E2EIcon_warning: status === E2E_STATE.WARNING,
         mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
         mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,

src/components/views/rooms/EntityTile.js

@@ -170,7 +170,7 @@ const EntityTile = createReactClass({
         let e2eIcon;
         const { e2eStatus } = this.props;
         if (e2eStatus) {
-            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />;
+            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');

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 ?
-            <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 }