+
;
+};
+
+export default EventTileBubble;
diff --git a/src/components/views/messages/MJitsiWidgetEvent.tsx b/src/components/views/messages/MJitsiWidgetEvent.tsx
index 3d191209f9..82aa32d3b7 100644
--- a/src/components/views/messages/MJitsiWidgetEvent.tsx
+++ b/src/components/views/messages/MJitsiWidgetEvent.tsx
@@ -18,6 +18,7 @@ import React from 'react';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../languageHandler";
import WidgetStore from "../../../stores/WidgetStore";
+import EventTileBubble from "./EventTileBubble";
interface IProps {
mxEvent: MatrixEvent;
@@ -40,37 +41,24 @@ export default class MJitsiWidgetEvent extends React.PureComponent{ title }
+ { subtitle && { subtitle }
}
+ { children }
+
-
- );
+ return
- {_t('Video conference ended by %(senderName)s', {senderName})}
-
-
-
- );
+ return
- {_t('Video conference updated by %(senderName)s', {senderName})}
-
-
- {joinCopy}
-
-
-
- );
+ return
- {_t("Video conference started by %(senderName)s", {senderName})}
-
-
- {joinCopy}
-
-
-
);
+ return {title}
- {subtitle}
- {
- _t("%(name)s wants to verify", {name})}
);
- subtitle = ({
- userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}
);
+ title = _t("%(name)s wants to verify", {name});
+ subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
if (request.canAccept) {
stateNode = ({
- _t("You sent a verification request")}
);
- subtitle = ({
- userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}
);
+ title = _t("You sent a verification request");
+ subtitle = userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId());
}
if (title) {
- return (
- {title}
- {subtitle}
- {stateNode}
-
);
+ return
-
-
;
+ );
+
+ return
- {_t("This room is a continuation of another conversation.")}
-
-
+ const link = (
+
{_t("Click here to see older messages.")}
-
- { _t("There's no one else here! Would you like to invite others " +
- "or stop warning about the empty room ?",
- {},
- {
- 'inviteText': (sub) =>
- { sub },
- 'nowarnText': (sub) =>
- { sub },
- },
- ) }
-
- );
- }
-
return null;
}
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 0cb4a5d305..8618e930d5 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -150,7 +150,6 @@ export interface IState {
guestsCanJoin: boolean;
canPeek: boolean;
showApps: boolean;
- isAlone: boolean;
isPeeking: boolean;
showingPinned: boolean;
showReadReceipts: boolean;
@@ -223,7 +222,6 @@ export default class RoomView extends React.Component
- {
- if (!ev.target.files?.length) return;
- setBusy(true);
- const file = ev.target.files[0];
- const uri = await cli.uploadContent(file);
- await cli.setAvatarUrl(uri);
- setBusy(false);
- }}
- accept="image/*"
- />
-
- {
- uploadRef.current.click();
- }}
+ cli.setAvatarUrl(url)}
>
- {state => (
-
-
+
;
+}
+
+const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {
+ const cli = useContext(MatrixClientContext);
+ const [busy, setBusy] = useState(false);
+ const [hover, setHover] = useState(false);
+ const [show, setShow] = useState(false);
+
+ useTimeout(() => {
+ setShow(true);
+ }, 3_000); // show after 3 seconds
+ useTimeout(() => {
+ setShow(false);
+ }, 13_000); // hide after being shown for 10 seconds
+
+ const uploadRef = useRef();
+
+ const label = hasAvatar || busy ? hasAvatarLabel : noAvatarLabel;
+
+ return
+ {
+ if (!ev.target.files?.length) return;
+ setBusy(true);
+ const file = ev.target.files[0];
+ const uri = await cli.uploadContent(file);
+ await setAvatarUrl(uri);
+ setBusy(false);
+ }}
+ accept="image/*"
+ />
+
+ {
+ uploadRef.current.click();
+ }}
+ onMouseOver={() => setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ >
+ { children }
+
+
+ ;
+};
+
+export default MiniAvatarUploader;
From 664079a12735f0bbeb36593d2da754dbdfda76f6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 15:50:42 +0000
Subject: [PATCH 08/16] Use MiniAvatarUploader for the new NewRoomIntro
component
---
res/css/_components.scss | 1 +
res/css/views/messages/_CreateEvent.scss | 2 +-
res/css/views/rooms/_NewRoomIntro.scss | 67 ++++++++++
src/components/structures/MessagePanel.js | 6 +-
src/components/views/avatars/RoomAvatar.tsx | 5 +-
src/components/views/rooms/NewRoomIntro.tsx | 131 ++++++++++++++++++++
6 files changed, 208 insertions(+), 4 deletions(-)
create mode 100644 res/css/views/rooms/_NewRoomIntro.scss
create mode 100644 src/components/views/rooms/NewRoomIntro.tsx
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 860b0f126e..62b5031a31 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -184,6 +184,7 @@
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss";
+@import "./views/rooms/_NewRoomIntro.scss";
@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss
index 1181a80d10..a61a261ff1 100644
--- a/res/css/views/messages/_CreateEvent.scss
+++ b/res/css/views/messages/_CreateEvent.scss
@@ -16,7 +16,7 @@ limitations under the License.
.mx_CreateEvent {
&::before {
- background-color: $primary-fg-color;
+ background-color: $composer-e2e-icon-color;
mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
}
}
diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.scss
new file mode 100644
index 0000000000..af72a0dd69
--- /dev/null
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@@ -0,0 +1,67 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NewRoomIntro {
+ margin: 80px 0 48px 64px;
+
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
+ &::before, &::after {
+ content: unset;
+ }
+ }
+
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+ }
+
+ .mx_NewRoomIntro_buttons {
+ margin-top: 28px;
+
+ .mx_AccessibleButton {
+ line-height: $font-24px;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ background-color: $button-fg-color;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: 20px;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+ vertical-align: text-bottom;
+ }
+ }
+
+ .mx_NewRoomIntro_inviteButton::before {
+ mask-image: url('$(res)/img/element-icons/room/invite.svg');
+ }
+ }
+
+ > h2 {
+ margin-top: 24px;
+ font-size: $font-24px;
+ font-weight: 600;
+ }
+
+ > p {
+ margin: 0;
+ font-size: $font-15px;
+ color: $secondary-fg-color;
+ }
+}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 9cf3eaaa9d..512ffb6c07 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -31,6 +31,7 @@ import {haveTileForEvent} from "../views/rooms/EventTile";
import {textForEvent} from "../../TextForEvent";
import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
import DMRoomMap from "../../utils/DMRoomMap";
+import NewRoomIntro from "../views/rooms/NewRoomIntro";
const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -955,13 +956,16 @@ class CreationGrouper {
const ev = this.events[this.events.length - 1];
let summaryText;
+ const roomId = ev.getRoomId();
const creator = ev.sender ? ev.sender.name : ev.getSender();
- if (DMRoomMap.shared().getUserIdForRoomId(ev.getRoomId())) {
+ if (DMRoomMap.shared().getUserIdForRoomId(roomId)) {
summaryText = _t("%(creator)s created this DM.", { creator });
} else {
summaryText = _t("%(creator)s created and configured the room.", { creator });
}
+ ret.push( {
};
public render() {
- const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
+ const {room, oobData, viewAvatarOnClick, onClick, ...otherProps} = this.props;
const roomName = room ? room.name : oobData.name;
@@ -139,7 +140,7 @@ export default class RoomAvatar extends React.Component {
name={roomName}
idName={room ? room.roomId : null}
urls={this.state.urls}
- onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : null}
+ onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick}
/>
);
}
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
new file mode 100644
index 0000000000..27404eef12
--- /dev/null
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -0,0 +1,131 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useContext} from "react";
+import {EventType} from "matrix-js-sdk/src/@types/event";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import MiniAvatarUploader, {AVATAR_SIZE} from "../elements/MiniAvatarUploader";
+import RoomAvatar from "../avatars/RoomAvatar";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
+import {Action} from "../../../dispatcher/actions";
+import dis from "../../../dispatcher/dispatcher";
+
+const NewRoomIntro = () => {
+ const cli = useContext(MatrixClientContext);
+ const {room, roomId} = useContext(RoomContext);
+
+ const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
+ let body;
+ if (dmPartner) {
+ let caption;
+ if ((room.getJoinedMemberCount() + room.getInvitedMemberCount()) === 2) {
+ caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join.");
+ }
+
+ const member = room?.getMember(dmPartner);
+ const displayName = member?.rawDisplayName || dmPartner;
+ body =
+ {
+ defaultDispatcher.dispatch({
+ action: Action.ViewUser,
+ // XXX: We should be using a real member object and not assuming what the receiver wants.
+ member: member || {userId: dmPartner},
+ });
+ }} />
+
+ ;
+ } else {
+ const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
+ const canAddTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getUserId());
+
+ const onTopicClick = () => {
+ dis.dispatch({
+ action: "open_room_settings",
+ room_id: roomId,
+ }, true);
+ // focus the topic field to help the user find it as it'll gain an outline
+ setImmediate(() => {
+ window.document.getElementById("profileTopic").focus();
+ });
+ };
+
+ let topicText;
+ if (canAddTopic && topic) {
+ topicText = _t("Topic: %(topic)s (edit)", { topic }, {
+ a: sub => { sub } ,
+ });
+ } else if (topic) {
+ topicText = _t("Topic: %(topic)s ", { topic });
+ } else if (canAddTopic) {
+ topicText = _t("Add a topic to help people know what it is about.", {}, {
+ a: sub => { sub } ,
+ });
+ }
+
+ const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+
+ let createdText;
+ if (creator === cli.getUserId()) {
+ createdText = _t("You created this room.");
+ } else {
+ createdText = _t("%(displayName)s created this room.", {
+ displayName: creatorName,
+ });
+ }
+
+ const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;
+ body =
+ cli.sendStateEvent(roomId, EventType.RoomAvatar, { url }, '')}
+ >
+
+
+ ;
+ }
+
+ return invite others or stop warning about the empty room ?": "There's no one else here! Would you like to invite others or stop warning about the empty room ?",
"You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
"You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?",
"Search failed": "Search failed",
From 81f1e1d8d713da3264722a58ba534fd430d4c859 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 15:54:21 +0000
Subject: [PATCH 10/16] delint
---
res/css/views/messages/_EventTileBubble.scss | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss
index 99feb03ef9..e0f5d521cb 100644
--- a/res/css/views/messages/_EventTileBubble.scss
+++ b/res/css/views/messages/_EventTileBubble.scss
@@ -53,11 +53,8 @@ limitations under the License.
}
.mx_EventTileBubble_subtitle {
+ font-size: $font-12px;
grid-column: 2;
grid-row: 2;
}
-
- .mx_EventTileBubble_subtitle {
- font-size: $font-12px;
- }
}
From 602232a524d0b2b17fd878b3949e999a1634ec86 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 16:08:36 +0000
Subject: [PATCH 11/16] Update res/css/views/messages/_CreateEvent.scss
Co-authored-by: Travis Ralston
---
res/css/views/messages/_CreateEvent.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss
index a61a261ff1..cb2bf841dd 100644
--- a/res/css/views/messages/_CreateEvent.scss
+++ b/res/css/views/messages/_CreateEvent.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
From 54e41b5f32e37e43686f827a05f232905d03ed2d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 16:27:41 +0000
Subject: [PATCH 12/16] fix tests
---
src/components/views/messages/EncryptionEvent.tsx | 7 ++++---
src/components/views/messages/EventTileBubble.tsx | 8 ++++----
src/contexts/RoomContext.ts | 1 -
test/components/structures/MessagePanel-test.js | 3 +++
test/test-utils.js | 1 +
5 files changed, 12 insertions(+), 8 deletions(-)
diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx
index 7416cc3c9a..3af9c463c9 100644
--- a/src/components/views/messages/EncryptionEvent.tsx
+++ b/src/components/views/messages/EncryptionEvent.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {useContext} from 'react';
+import React, {forwardRef, useContext} from 'react';
import {MatrixEvent} from "matrix-js-sdk/src/models/event";
import { _t } from '../../../languageHandler';
@@ -27,7 +27,7 @@ interface IProps {
mxEvent: MatrixEvent;
}
-const EncryptionEvent: React.FC = ({mxEvent}) => {
+const EncryptionEvent = forwardRef(({mxEvent}, ref) => {
const cli = useContext(MatrixClientContext);
const roomId = mxEvent.getRoomId();
const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
@@ -61,7 +61,8 @@ const EncryptionEvent: React.FC = ({mxEvent}) => {
className="mx_cryptoEvent mx_cryptoEvent_icon mx_cryptoEvent_icon_warning"
title={_t("Encryption not enabled")}
subtitle={_t("The encryption used by this room isn't supported.")}
+ ref={ref}
/>;
-}
+});
export default EncryptionEvent;
diff --git a/src/components/views/messages/EventTileBubble.tsx b/src/components/views/messages/EventTileBubble.tsx
index 8a2cf0f01c..f797a97a3d 100644
--- a/src/components/views/messages/EventTileBubble.tsx
+++ b/src/components/views/messages/EventTileBubble.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {ReactNode} from "react";
+import React, {forwardRef, ReactNode} from "react";
import classNames from "classnames";
interface IProps {
@@ -23,12 +23,12 @@ interface IProps {
subtitle?: ReactNode;
}
-const EventTileBubble: React.FC = ({ className, title, subtitle, children }) => {
- return
{ _t("Welcome %(name)s", { name: ownProfile.displayName }) }
{ _t("Now, let's help you get started") }
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx new file mode 100644 index 0000000000..903826c3e6 --- /dev/null +++ b/src/components/views/elements/MiniAvatarUploader.tsx @@ -0,0 +1,90 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, {useContext, useRef, useState} from 'react'; +import classNames from 'classnames'; + +import AccessibleButton from "./AccessibleButton"; +import Tooltip from './Tooltip'; +import MatrixClientContext from "../../../contexts/MatrixClientContext"; +import {useTimeout} from "../../../hooks/useTimeout"; + +export const AVATAR_SIZE = 52; + +interface IProps { + hasAvatar: boolean; + noAvatarLabel?: string; + hasAvatarLabel?: string; + setAvatarUrl(url: string): Promise{ room.name }
+ +{_t("This is the beginning of your direct message history with
{ caption }
} +{ room.name }
+ +{createdText} {_t("This is the start of
{topicText}
+
+
+ {_t("Invite to this room")}
+
+
+
+ { body }
+
;
+};
+
+export default NewRoomIntro;
From c269577037ca209266c2e95cd8d182e4932f86d6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 15:51:36 +0000
Subject: [PATCH 09/16] i18n
---
src/i18n/strings/en_EN.json | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8b976c144e..271b288c11 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1083,6 +1083,15 @@
"Strikethrough": "Strikethrough",
"Code block": "Code block",
"Quote": "Quote",
+ "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Only the two of you are in this conversation, unless either of you invites anyone to join.",
+ "This is the beginning of your direct message history with
+const EventTileBubble = forwardRef(({ className, title, subtitle, children }, ref) => {
+ return
;
-};
+});
export default EventTileBubble;
diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts
index e8eb0c23b4..082dcc4e6b 100644
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@@ -29,7 +29,6 @@ const RoomContext = createContext({
guestsCanJoin: false,
canPeek: false,
showApps: false,
- isAlone: false,
isPeeking: false,
showingPinned: false,
showReadReceipts: true,
diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 235ae94010..0bcdfcd5e5 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -38,6 +38,7 @@ import { configure, mount } from "enzyme";
import Velocity from 'velocity-animate';
import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
import RoomContext from "../../../src/contexts/RoomContext";
+import DMRoomMap from "../../../src/utils/DMRoomMap";
configure({ adapter: new Adapter() });
@@ -79,6 +80,8 @@ describe('MessagePanel', function() {
// complete without this even if we mock the clock and tick it
// what should be the correct amount of time).
Velocity.mock = true;
+
+ DMRoomMap.makeShared();
});
afterEach(function() {
diff --git a/test/test-utils.js b/test/test-utils.js
index d006eee823..c8e623b1d9 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -242,6 +242,7 @@ export function mkStubRoom(roomId = null) {
setBlacklistUnverifiedDevices: jest.fn(),
on: jest.fn(),
removeListener: jest.fn(),
+ getDMInviter: jest.fn(),
};
}
From ae2d9941ff26c4f8dc55124dbf1237c879332b67 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 16:54:25 +0000
Subject: [PATCH 13/16] fix more tests
---
src/Skinner.js | 4 ++--
test/components/structures/MessagePanel-test.js | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/Skinner.js b/src/Skinner.js
index 87c5a7be7f..d17bc1782a 100644
--- a/src/Skinner.js
+++ b/src/Skinner.js
@@ -50,8 +50,8 @@ class Skinner {
return null;
}
- // components have to be functions.
- const validType = typeof comp === 'function';
+ // components have to be functions or forwardRef objects with a render function.
+ const validType = typeof comp === 'function' || comp.render;
if (!validType) {
throw new Error(`Not a valid component: ${name} (type = ${typeof(comp)}).`);
}
diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 0bcdfcd5e5..0cb7e2cc71 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -53,7 +53,7 @@ class WrappedMessagePanel extends React.Component {
render() {
return
-
+
;
From 4997676f5d472462b0ddbabafb7aafb1044ea7e3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 16:57:51 +0000
Subject: [PATCH 14/16] fix last remaining broken test
---
test/components/structures/MessagePanel-test.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 0cb7e2cc71..f40f8c5187 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -436,8 +436,8 @@ describe('MessagePanel', function() {
const rm = res.find('.mx_RoomView_myReadMarker_container').getDOMNode();
const rows = res.find('.mx_RoomView_MessageList').children();
- expect(rows.length).toEqual(6);
- expect(rm.previousSibling).toEqual(rows.at(4).getDOMNode());
+ expect(rows.length).toEqual(7); // 6 events + the NewRoomIntro
+ expect(rm.previousSibling).toEqual(rows.at(5).getDOMNode());
// read marker should be hidden given props and at the last event
expect(isReadMarkerVisible(rm)).toBeFalsy();
From 252484fcd9c9d435c41ea7f6832af04ee94a4277 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Nov 2020 17:01:20 +0000
Subject: [PATCH 15/16] add key to make React happier
---
src/components/structures/MessagePanel.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 512ffb6c07..375545f819 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -964,7 +964,7 @@ class CreationGrouper {
summaryText = _t("%(creator)s created and configured the room.", { creator });
}
- ret.push(
Date: Tue, 10 Nov 2020 10:00:55 +0000
Subject: [PATCH 16/16] Iterate PR
---
res/css/views/rooms/_EventTile.scss | 1 +
src/components/views/elements/MiniAvatarUploader.tsx | 6 +++---
src/components/views/rooms/EventTile.js | 11 ++++++-----
3 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 80ede1152d..429ac7ed4b 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -124,6 +124,7 @@ $left-gutter: 64px;
.mx_EventTile_line {
margin-right: 0;
grid-column: 1 / 3;
+ // override default padding of mx_EventTile_line so that we can be centered
padding: 0 !important;
}
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index 903826c3e6..b5e117b42a 100644
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -39,14 +39,14 @@ const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAva
useTimeout(() => {
setShow(true);
- }, 3_000); // show after 3 seconds
+ }, 3000); // show after 3 seconds
useTimeout(() => {
setShow(false);
- }, 13_000); // hide after being shown for 10 seconds
+ }, 13000); // hide after being shown for 10 seconds
const uploadRef = useRef();
- const label = hasAvatar || busy ? hasAvatarLabel : noAvatarLabel;
+ const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
return
{ title }
{ subtitle && { subtitle }
}
{ children }