diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 8f57d97833..3bf6845c85 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -114,6 +114,15 @@ limitations under the License.
cursor: pointer;
}
+.mx_EmojiPicker_search_icon {
+ width: 16px;
+ margin: 8px;
+}
+
+.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+ pointer-events: none;
+}
+
.mx_EmojiPicker_search_icon::after {
mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
mask-size: 100%;
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 8a21b017fd..a0ad2b5c81 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -116,6 +116,21 @@ const LeftPanel = createReactClass({
this.focusedElement = null;
},
+ _onFilterKeyDown: function(ev) {
+ if (!this.focusedElement) return;
+
+ switch (ev.key) {
+ // On enter of rooms filter select and activate first room if such one exists
+ case Key.ENTER: {
+ const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile");
+ if (firstRoom) {
+ firstRoom.click();
+ }
+ break;
+ }
+ }
+ },
+
_onKeyDown: function(ev) {
if (!this.focusedElement) return;
@@ -255,6 +270,7 @@ const LeftPanel = createReactClass({
enableRoomSearchFocus={true}
blurredPlaceholder={ _t('Filter') }
placeholder={ _t('Filter rooms…') }
+ onKeyDown={this._onFilterKeyDown}
onSearch={ this.onSearch }
onCleared={ this.onSearchCleared }
onFocus={this._onSearchFocus}
@@ -273,18 +289,19 @@ const LeftPanel = createReactClass({
{ breadcrumbs }
-
-
- { exploreButton }
- { searchBox }
-
-
+
+ { exploreButton }
+ { searchBox }
+
);
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index de9a86c3a6..21613733db 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -30,6 +30,7 @@ module.exports = createReactClass({
propTypes: {
onSearch: PropTypes.func,
onCleared: PropTypes.func,
+ onKeyDown: PropTypes.func,
className: PropTypes.string,
placeholder: PropTypes.string.isRequired,
@@ -93,6 +94,7 @@ module.exports = createReactClass({
this._clearSearch("keyboard");
break;
}
+ if (this.props.onKeyDown) this.props.onKeyDown(ev);
},
_onFocus: function(ev) {
diff --git a/src/components/views/elements/EventListSummary.js b/src/components/views/elements/EventListSummary.js
index 79712ebb45..7a69398071 100644
--- a/src/components/views/elements/EventListSummary.js
+++ b/src/components/views/elements/EventListSummary.js
@@ -62,12 +62,12 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
-
- { avatars }
-
+
+ { avatars }
+
- { summaryText }
-
+ { summaryText }
+
diff --git a/src/components/views/emojipicker/ReactionPicker.js b/src/components/views/emojipicker/ReactionPicker.js
index 01c04529ed..5e506f39d1 100644
--- a/src/components/views/emojipicker/ReactionPicker.js
+++ b/src/components/views/emojipicker/ReactionPicker.js
@@ -24,7 +24,7 @@ class ReactionPicker extends React.Component {
mxEvent: PropTypes.object.isRequired,
onFinished: PropTypes.func.isRequired,
closeMenu: PropTypes.func.isRequired,
- reactions: PropTypes.object.isRequired,
+ reactions: PropTypes.object,
};
constructor(props) {
diff --git a/src/components/views/emojipicker/Search.js b/src/components/views/emojipicker/Search.js
index 8646559fed..3432dadea8 100644
--- a/src/components/views/emojipicker/Search.js
+++ b/src/components/views/emojipicker/Search.js
@@ -35,13 +35,22 @@ class Search extends React.PureComponent {
}
render() {
+ let rightButton;
+ if (this.props.query) {
+ rightButton = (
+