From 80dd5a1b0a576bcf4f3d7c242e3da9c9e94ba52f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 10 Sep 2019 10:53:55 +0200 Subject: [PATCH 1/8] add explore button next to filter field --- res/css/structures/_LeftPanel.scss | 41 +++++++++++ res/css/structures/_SearchBox.scss | 21 +++--- res/css/views/rooms/_RoomList.scss | 4 -- res/img/explore.svg | 97 ++++++++++++++++++++++++++ src/components/structures/LeftPanel.js | 15 +++- src/i18n/strings/en_EN.json | 1 + 6 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 res/img/explore.svg diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 7d10fdb6d6..e01dfb75cd 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -125,3 +125,44 @@ limitations under the License. margin-top: 12px; } } + +.mx_LeftPanel_exploreAndFilterRow { + display: flex; + + .mx_SearchBox { + flex: 1 1 0; + min-width: 0; + } +} + +.mx_LeftPanel_explore { + flex: 0 0 40%; + overflow: hidden; + box-sizing: border-box; + + .mx_AccessibleButton { + font-size: 14px; + margin: 9px; + margin-right: 0; + padding: 9px; + padding-left: 42px; + font-weight: 600; + color: $notice-secondary-color; + position: relative; + border-radius: 4px; + + &::before { + cursor: pointer; + mask: url('$(res)/img/explore.svg'); + mask-repeat: no-repeat; + mask-position: center center; + content: ""; + left: 14px; + top: 10px; + width: 16px; + height: 16px; + background-color: $notice-secondary-color; + position: absolute; + } + } +} diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss index 9434d93bd2..7d13405478 100644 --- a/res/css/structures/_SearchBox.scss +++ b/res/css/structures/_SearchBox.scss @@ -14,12 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_SearchBox_closeButton { - cursor: pointer; - background-image: url('$(res)/img/icons-close.svg'); - background-repeat: no-repeat; - width: 16px; - height: 16px; - background-position: center; - padding: 9px; +.mx_SearchBox { + flex: 1 1 0; + min-width: 0; + + .mx_SearchBox_closeButton { + cursor: pointer; + background-image: url('$(res)/img/icons-close.svg'); + background-repeat: no-repeat; + width: 16px; + height: 16px; + background-position: center; + padding: 9px; + } } diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index b51d720e4d..5ed22f997d 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -27,10 +27,6 @@ limitations under the License. position: relative; } -.mx_SearchBox { - flex: none; -} - /* hide resize handles next to collapsed / empty sublists */ .mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { display: none; diff --git a/res/img/explore.svg b/res/img/explore.svg new file mode 100644 index 0000000000..3956e912ac --- /dev/null +++ b/res/img/explore.svg @@ -0,0 +1,97 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f083e5ab38..ab1190d8b9 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -217,6 +217,7 @@ const LeftPanel = createReactClass({ const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton'); const SearchBox = sdk.getComponent('structures.SearchBox'); const CallPreview = sdk.getComponent('voip.CallPreview'); + const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel"); let tagPanelContainer; @@ -240,6 +241,15 @@ const LeftPanel = createReactClass({ }, ); + let exploreButton; + if (!this.props.collapsed) { + exploreButton = ( +
+ dis.dispatch({action: 'view_room_directory'})}>{_t("Explore")} +
+ ); + } + const searchBox = ( { breadcrumbs } - { searchBox } +
+ { exploreButton } + { searchBox } +
Date: Tue, 10 Sep 2019 10:57:25 +0200 Subject: [PATCH 2/8] hide explore button when focusing filter field --- res/css/structures/_LeftPanel.scss | 5 +++++ src/components/structures/LeftPanel.js | 13 +++++++++++++ src/components/structures/SearchBox.js | 10 ++++++++++ 3 files changed, 28 insertions(+) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index e01dfb75cd..c2b8a6873f 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -138,8 +138,13 @@ limitations under the License. .mx_LeftPanel_explore { flex: 0 0 40%; overflow: hidden; + transition: flex-basis 0.2s; box-sizing: border-box; + &.mx_LeftPanel_explore_hidden { + flex-basis: 0; + } + .mx_AccessibleButton { font-size: 14px; margin: 9px; diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index ab1190d8b9..b77b5e2e39 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -81,6 +81,9 @@ const LeftPanel = createReactClass({ if (this.state.searchFilter !== nextState.searchFilter) { return true; } + if (this.state.searchFocused !== nextState.searchFocused) { + return true; + } return false; }, @@ -209,6 +212,14 @@ const LeftPanel = createReactClass({ this._roomList = ref; }, + _onSearchFocus: function() { + this.setState({searchFocused: true}); + }, + + _onSearchBlur: function() { + this.setState({searchFocused: false}); + }, + render: function() { const RoomList = sdk.getComponent('rooms.RoomList'); const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs'); @@ -255,6 +266,8 @@ const LeftPanel = createReactClass({ placeholder={ _t('Filter room names') } onSearch={ this.onSearch } onCleared={ this.onSearchCleared } + onFocus={this._onSearchFocus} + onBlur={this._onSearchBlur} collapsed={this.props.collapsed} />); let breadcrumbs; diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index d8ff08adbf..70e898fe04 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -95,6 +95,15 @@ module.exports = createReactClass({ _onFocus: function(ev) { ev.target.select(); + if (this.props.onFocus) { + this.props.onFocus(ev); + } + }, + + _onBlur: function(ev) { + if (this.props.onBlur) { + this.props.onBlur(ev); + } }, _clearSearch: function(source) { @@ -132,6 +141,7 @@ module.exports = createReactClass({ onChange={ this.onChange } onKeyDown={ this._onKeyDown } placeholder={ this.props.placeholder } + onBlur={this._onBlur} /> { clearButton } From 15d37746651d9b9f8162859539d7f8ebcfc14f39 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 10 Sep 2019 10:58:11 +0200 Subject: [PATCH 3/8] show shorter placeholder for filter feed when not focused --- src/components/structures/LeftPanel.js | 3 ++- src/components/structures/SearchBox.js | 12 +++++++++++- src/i18n/strings/en_EN.json | 3 ++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index b77b5e2e39..4c5b1686f5 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -263,7 +263,8 @@ const LeftPanel = createReactClass({ const searchBox = ( {this._clearSearch("button"); } }> ) : undefined; + // show a shorter placeholder when blurred, if requested + // this is used for the room filter field that has + // the explore button next to it when blurred + const placeholder = this.state.blurred ? + (this.props.blurredPlaceholder || this.props.placeholder) : + this.props.placeholder; const className = this.props.className || ""; return (
@@ -140,8 +150,8 @@ module.exports = createReactClass({ onFocus={ this._onFocus } onChange={ this.onChange } onKeyDown={ this._onKeyDown } - placeholder={ this.props.placeholder } onBlur={this._onBlur} + placeholder={ placeholder } /> { clearButton }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b7220e3082..48a9e25857 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1549,8 +1549,9 @@ "Community %(groupId)s not found": "Community %(groupId)s not found", "This homeserver does not support communities": "This homeserver does not support communities", "Failed to load %(groupId)s": "Failed to load %(groupId)s", - "Filter room names": "Filter room names", "Explore": "Explore", + "Filter": "Filter", + "Filter rooms…": "Filter rooms…", "Failed to reject invitation": "Failed to reject invitation", "This room is not public. You will not be able to rejoin without an invite.": "This room is not public. You will not be able to rejoin without an invite.", "Are you sure you want to leave the room '%(roomName)s'?": "Are you sure you want to leave the room '%(roomName)s'?", From 1c4093eb0f3b37701b1a7dd6e726bbfbb989f6ca Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 10 Sep 2019 10:58:44 +0200 Subject: [PATCH 4/8] make filter feed transparent when not focussed --- res/css/structures/_SearchBox.scss | 4 ++++ src/components/structures/SearchBox.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss index 7d13405478..23ee06f7b3 100644 --- a/res/css/structures/_SearchBox.scss +++ b/res/css/structures/_SearchBox.scss @@ -18,6 +18,10 @@ limitations under the License. flex: 1 1 0; min-width: 0; + &.mx_SearchBox_blurred:not(:hover) { + background-color: transparent; + } + .mx_SearchBox_closeButton { cursor: pointer; background-image: url('$(res)/img/icons-close.svg'); diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index a381416a80..4d68ff4e96 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -140,7 +140,7 @@ module.exports = createReactClass({ this.props.placeholder; const className = this.props.className || ""; return ( -
+
Date: Tue, 10 Sep 2019 10:59:22 +0200 Subject: [PATCH 5/8] make explore button white on hover --- res/css/structures/_LeftPanel.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index c2b8a6873f..f83195f847 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -156,6 +156,10 @@ limitations under the License. position: relative; border-radius: 4px; + &:hover { + background-color: $primary-bg-color; + } + &::before { cursor: pointer; mask: url('$(res)/img/explore.svg'); From 4148f1697cd6bab2d183030f653d112c80d84572 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 10 Sep 2019 10:59:36 +0200 Subject: [PATCH 6/8] make input fields on a dark panel have a white background (filter field) --- res/css/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index adf4c93290..77b474a013 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -171,7 +171,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { color: $input-darker-fg-color; - background-color: $input-darker-bg-color; + background-color: $primary-bg-color; border: none; } } From 68dde07f49d5be72caf54e38720715e46f750060 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 10 Sep 2019 11:59:59 +0200 Subject: [PATCH 7/8] make add room button go to create room dialog instead of room directory --- src/components/structures/RoomDirectory.js | 11 ----------- src/components/views/rooms/RoomList.js | 2 +- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index aa2e56d3c2..13ae83b067 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -321,11 +321,6 @@ module.exports = createReactClass({ } }, - onCreateRoomClicked: function() { - this.props.onFinished(); - dis.dispatch({action: 'view_create_room'}); - }, - onJoinClick: function(alias) { // If we don't have a particular instance id selected, just show that rooms alias if (!this.state.instanceId) { @@ -602,17 +597,11 @@ module.exports = createReactClass({
; } - const createRoomButton = ({_t("Create new room")}); - return (
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 2454f012f8..da2d11f34b 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -758,7 +758,7 @@ module.exports = createReactClass({ headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'), - onAddRoom: () => {dis.dispatch({action: 'view_room_directory'})}, + onAddRoom: () => {dis.dispatch({action: 'view_create_room'});}, }, ]; const tagSubLists = Object.keys(this.state.lists) From ad2e16d432454a470cab42827f708153ae3f7299 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 11 Sep 2019 13:46:18 +0200 Subject: [PATCH 8/8] keep filter field expanded if it has text in it --- src/components/structures/LeftPanel.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 4c5b1686f5..fd315d2540 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -81,7 +81,7 @@ const LeftPanel = createReactClass({ if (this.state.searchFilter !== nextState.searchFilter) { return true; } - if (this.state.searchFocused !== nextState.searchFocused) { + if (this.state.searchExpanded !== nextState.searchExpanded) { return true; } @@ -206,6 +206,7 @@ const LeftPanel = createReactClass({ if (source === "keyboard") { dis.dispatch({action: 'focus_composer'}); } + this.setState({searchExpanded: false}); }, collectRoomList: function(ref) { @@ -213,11 +214,13 @@ const LeftPanel = createReactClass({ }, _onSearchFocus: function() { - this.setState({searchFocused: true}); + this.setState({searchExpanded: true}); }, - _onSearchBlur: function() { - this.setState({searchFocused: false}); + _onSearchBlur: function(event) { + if (event.target.value.length === 0) { + this.setState({searchExpanded: false}); + } }, render: function() { @@ -255,7 +258,7 @@ const LeftPanel = createReactClass({ let exploreButton; if (!this.props.collapsed) { exploreButton = ( -
+
dis.dispatch({action: 'view_room_directory'})}>{_t("Explore")}
);