Merge branches 'develop' and 't3chguy/e2eedefault' of github.com:matrix-org/matrix-react-sdk into t3chguy/e2eedefault
This commit is contained in:
commit
d99babfe05
26 changed files with 808 additions and 153 deletions
|
@ -247,9 +247,8 @@ export default createReactClass({
|
|||
// do SSO instead. If we've already started the UI Auth process though, we don't
|
||||
// need to.
|
||||
if (!this.state.doingUIAuth) {
|
||||
await this._makeRegisterRequest({});
|
||||
// This should never succeed since we specified an empty
|
||||
// auth object.
|
||||
await this._makeRegisterRequest(null);
|
||||
// This should never succeed since we specified no auth object.
|
||||
console.log("Expecting 401 from register request but got success!");
|
||||
}
|
||||
} catch (e) {
|
||||
|
|
|
@ -156,70 +156,16 @@ export default class PersistedElement extends React.Component {
|
|||
child.style.display = visible ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/*
|
||||
* Clip element bounding rectangle to that of the parent elements.
|
||||
* This is not a full visibility check, but prevents the persisted
|
||||
* element from overflowing parent containers when inside a scrolled
|
||||
* area.
|
||||
*/
|
||||
_getClippedBoundingClientRect(element) {
|
||||
let parentElement = element.parentElement;
|
||||
let rect = element.getBoundingClientRect();
|
||||
|
||||
rect = new DOMRect(rect.left, rect.top, rect.width, rect.height);
|
||||
|
||||
while (parentElement) {
|
||||
const parentRect = parentElement.getBoundingClientRect();
|
||||
|
||||
if (parentRect.left > rect.left) {
|
||||
rect.width = rect.width - (parentRect.left - rect.left);
|
||||
rect.x = parentRect.x;
|
||||
}
|
||||
|
||||
if (parentRect.top > rect.top) {
|
||||
rect.height = rect.height - (parentRect.top - rect.top);
|
||||
rect.y = parentRect.y;
|
||||
}
|
||||
|
||||
if (parentRect.right < rect.right) {
|
||||
rect.width = rect.width - (rect.right - parentRect.right);
|
||||
}
|
||||
|
||||
if (parentRect.bottom < rect.bottom) {
|
||||
rect.height = rect.height - (rect.bottom - parentRect.bottom);
|
||||
}
|
||||
|
||||
parentElement = parentElement.parentElement;
|
||||
}
|
||||
|
||||
if (rect.width < 0) rect.width = 0;
|
||||
if (rect.height < 0) rect.height = 0;
|
||||
|
||||
return rect;
|
||||
}
|
||||
|
||||
updateChildPosition(child, parent) {
|
||||
if (!child || !parent) return;
|
||||
|
||||
const parentRect = parent.getBoundingClientRect();
|
||||
const clipRect = this._getClippedBoundingClientRect(parent);
|
||||
|
||||
Object.assign(child.parentElement.style, {
|
||||
position: 'absolute',
|
||||
top: clipRect.top + 'px',
|
||||
left: clipRect.left + 'px',
|
||||
width: clipRect.width + 'px',
|
||||
height: clipRect.height + 'px',
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
Object.assign(child.style, {
|
||||
position: 'absolute',
|
||||
top: (parentRect.top - clipRect.top) + 'px',
|
||||
left: (parentRect.left - clipRect.left) + 'px',
|
||||
top: parentRect.top + 'px',
|
||||
left: parentRect.left + 'px',
|
||||
width: parentRect.width + 'px',
|
||||
height: parentRect.height + 'px',
|
||||
overflow: "hidden",
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -141,15 +141,6 @@ export default createReactClass({
|
|||
return counters;
|
||||
},
|
||||
|
||||
_onScroll: function(rect) {
|
||||
if (this.props.onResize) {
|
||||
this.props.onResize();
|
||||
}
|
||||
|
||||
/* Force refresh of PersistedElements which may be partially hidden */
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const CallView = sdk.getComponent("voip.CallView");
|
||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||
|
@ -274,7 +265,7 @@ export default createReactClass({
|
|||
}
|
||||
|
||||
return (
|
||||
<AutoHideScrollbar className={classes} style={style} onScroll={this._onScroll}>
|
||||
<AutoHideScrollbar className={classes} style={style} >
|
||||
{ stateViews }
|
||||
{ appsDrawer }
|
||||
{ fileDropTarget }
|
||||
|
|
|
@ -27,6 +27,7 @@ import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
|
|||
import ContentMessages from '../../../ContentMessages';
|
||||
import E2EIcon from './E2EIcon';
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
|
||||
|
||||
function ComposerAvatar(props) {
|
||||
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
|
||||
|
@ -103,6 +104,32 @@ HangupButton.propTypes = {
|
|||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const EmojiButton = ({addEmoji}) => {
|
||||
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
||||
|
||||
let contextMenu;
|
||||
if (menuDisplayed) {
|
||||
const buttonRect = button.current.getBoundingClientRect();
|
||||
const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker');
|
||||
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
|
||||
<EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
|
||||
</ContextMenu>;
|
||||
}
|
||||
|
||||
return <React.Fragment>
|
||||
<ContextMenuButton className="mx_MessageComposer_button mx_MessageComposer_emoji"
|
||||
onClick={openMenu}
|
||||
isExpanded={menuDisplayed}
|
||||
label={_t('Emoji picker')}
|
||||
inputRef={button}
|
||||
>
|
||||
|
||||
</ContextMenuButton>
|
||||
|
||||
{ contextMenu }
|
||||
</React.Fragment>;
|
||||
};
|
||||
|
||||
class UploadButton extends React.Component {
|
||||
static propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
|
@ -312,6 +339,13 @@ export default class MessageComposer extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
addEmoji(emoji) {
|
||||
dis.dispatch({
|
||||
action: "insert_emoji",
|
||||
emoji,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const controls = [
|
||||
this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
|
||||
|
@ -335,8 +369,9 @@ export default class MessageComposer extends React.Component {
|
|||
room={this.props.room}
|
||||
placeholder={this.renderPlaceholderText()}
|
||||
permalinkCreator={this.props.permalinkCreator} />,
|
||||
<Stickerpicker key='stickerpicker_controls_button' room={this.props.room} />,
|
||||
<UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
|
||||
<EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
|
||||
<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />,
|
||||
);
|
||||
|
||||
if (this.state.showCallButtons) {
|
||||
|
|
|
@ -373,6 +373,9 @@ export default class SendMessageComposer extends React.Component {
|
|||
case 'quote':
|
||||
this._insertQuotedMessage(payload.event);
|
||||
break;
|
||||
case 'insert_emoji':
|
||||
this._insertEmoji(payload.emoji);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -410,6 +413,17 @@ export default class SendMessageComposer extends React.Component {
|
|||
this._editorRef && this._editorRef.focus();
|
||||
}
|
||||
|
||||
_insertEmoji = (emoji) => {
|
||||
const {model} = this;
|
||||
const {partCreator} = model;
|
||||
const caret = this._editorRef.getCaret();
|
||||
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
|
||||
model.transform(() => {
|
||||
const addedLen = model.insert([partCreator.plain(emoji)], position);
|
||||
return model.positionForOffset(caret.offset + addedLen, true);
|
||||
});
|
||||
};
|
||||
|
||||
_onPaste = (event) => {
|
||||
const {clipboardData} = event;
|
||||
if (clipboardData.files.length) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue