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