Visual fixes in ForwardMenu.
This commit is contained in:
@@ -13,6 +13,10 @@ export default class ForwardMenu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
query: null
|
||||
};
|
||||
|
||||
this.selfRef = React.createRef();
|
||||
this.handlePageClick = this.handlePageClick.bind(this);
|
||||
this.handleEscapeKey = this.handleEscapeKey.bind(this);
|
||||
@@ -51,6 +55,7 @@ export default class ForwardMenu extends React.Component {
|
||||
}
|
||||
|
||||
handleSearchContacts(query) {
|
||||
this.setState({ query: Tinode.isNullValue(query) ? null : query });
|
||||
this.props.onSearchContacts(query);
|
||||
}
|
||||
|
||||
@@ -60,20 +65,22 @@ export default class ForwardMenu extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
|
||||
// Ensure that menu is inside the app-container.
|
||||
const hSize = 20 * REM_SIZE;
|
||||
const vSize = REM_SIZE * (0.7 + this.props.contacts.length * 3);
|
||||
const vSize = REM_SIZE * (0.7 + contacts.length * 3);
|
||||
const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
|
||||
(this.props.clickAt.x - this.props.bounds.left - hSize) :
|
||||
(this.props.clickAt.x - this.props.bounds.left);
|
||||
const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
|
||||
(this.props.clickAt.y - this.props.bounds.top - vSize) :
|
||||
Math.max(this.props.clickAt.y - this.props.bounds.top - vSize, this.props.bounds.top + 70) :
|
||||
(this.props.clickAt.y - this.props.bounds.top);
|
||||
|
||||
const style = {
|
||||
left: left + 'px',
|
||||
top: top + 'px',
|
||||
maxWidth: hSize + 'px'
|
||||
maxWidth: hSize + 'px',
|
||||
height: '100%'
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -83,7 +90,7 @@ export default class ForwardMenu extends React.Component {
|
||||
onSearchContacts={this.handleSearchContacts} />
|
||||
<ContactList
|
||||
tinode={this.props.tinode}
|
||||
contacts={this.props.searchResults}
|
||||
contacts={contacts}
|
||||
myUserId={this.props.myUserId}
|
||||
emptyListMessage={null}
|
||||
showOnline={false}
|
||||
|
||||
Reference in New Issue
Block a user