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 = ( +