From 5114c37b82374429c7a7cb1f5889efbd2b1651d7 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 8 Jun 2020 20:33:21 -0600 Subject: [PATCH 1/3] Add filtering and exploring to the new room list This is per the designs. Animation doesn't feel required here. Like the rest of this series, this rewrites a component to be more purpose-built to help match the designs and to solve the smallest possible problem. --- res/css/_components.scss | 1 + res/css/structures/_LeftPanel2.scss | 39 ++++- res/css/structures/_RoomSearch.scss | 70 +++++++++ res/img/feather-customised/compass.svg | 1 + src/components/structures/HomePage.tsx | 3 +- src/components/structures/LeftPanel.js | 2 +- src/components/structures/LeftPanel2.tsx | 61 +++----- src/components/structures/MatrixChat.tsx | 6 +- src/components/structures/RoomSearch.tsx | 143 ++++++++++++++++++ src/components/structures/RoomView.js | 4 +- .../views/elements/RoomDirectoryButton.js | 3 +- src/dispatcher/actions.ts | 5 + 12 files changed, 287 insertions(+), 51 deletions(-) create mode 100644 res/css/structures/_RoomSearch.scss create mode 100644 res/img/feather-customised/compass.svg create mode 100644 src/components/structures/RoomSearch.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index de4c1c677c..66af2ba00f 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -19,6 +19,7 @@ @import "./structures/_NotificationPanel.scss"; @import "./structures/_RightPanel.scss"; @import "./structures/_RoomDirectory.scss"; +@import "./structures/_RoomSearch.scss"; @import "./structures/_RoomStatusBar.scss"; @import "./structures/_RoomSubList.scss"; @import "./structures/_RoomView.scss"; diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss index d335df305f..d9a2b1dd5c 100644 --- a/res/css/structures/_LeftPanel2.scss +++ b/res/css/structures/_LeftPanel2.scss @@ -88,7 +88,44 @@ $roomListMinimizedWidth: 50px; } .mx_LeftPanel2_filterContainer { - // TODO: Improve CSS for filtering and its input + margin-left: 12px; + margin-right: 12px; + + // Create a flexbox to organize the inputs + display: flex; + align-items: center; + + .mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton { + // Cheaty way to return the occupied space to the filter input + margin: 0; + width: 0; + + // Don't forget to hide the masked ::before icon + visibility: hidden; + } + + .mx_LeftPanel2_exploreButton { + width: 28px; + height: 28px; + border-radius: 20px; + background-color: #fff; // TODO: Variable and theme + position: relative; + margin-left: 8px; + + &::before { + content: ''; + position: absolute; + top: 6px; + left: 6px; + width: 16px; + height: 16px; + mask-image: url('$(res)/img/feather-customised/compass.svg'); + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: $primary-fg-color; + } + } } .mx_LeftPanel2_actualRoomListContainer { diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss new file mode 100644 index 0000000000..d078031090 --- /dev/null +++ b/res/css/structures/_RoomSearch.scss @@ -0,0 +1,70 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// Note: this component expects to be contained within a flexbox +.mx_RoomSearch { + flex: 1; + border-radius: 20px; + background-color: #fff; // TODO: Variable & theme + height: 26px; + padding: 2px; + + // Create a flexbox for the icons (easier to manage) + display: flex; + align-items: center; + + .mx_RoomSearch_icon { + width: 16px; + height: 16px; + mask: url('$(res)/img/feather-customised/search-input.svg'); + mask-repeat: no-repeat; + background: $primary-fg-color; + margin-left: 7px; + } + + .mx_RoomSearch_input { + border: none !important; // !important to override default app-wide styles + flex: 1 !important; // !important to override default app-wide styles + color: $primary-fg-color !important; // !important to override default app-wide styles + padding: 0; + height: 100%; + width: 100%; + font-size: $font-12px; + line-height: $font-16px; + + &:not(.mx_RoomSearch_inputExpanded)::placeholder { + color: $primary-fg-color !important; // !important to override default app-wide styles + } + } + + &.mx_RoomSearch_expanded { + .mx_RoomSearch_clearButton { + width: 16px; + height: 16px; + mask-image: url('$(res)/img/feather-customised/x.svg'); + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: $primary-fg-color; + margin-right: 8px; + } + } + + .mx_RoomSearch_clearButton { + width: 0; + height: 0; + } +} diff --git a/res/img/feather-customised/compass.svg b/res/img/feather-customised/compass.svg new file mode 100644 index 0000000000..3296260803 --- /dev/null +++ b/res/img/feather-customised/compass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index ff8d35a114..209f219598 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -22,9 +22,10 @@ import { _t } from "../../languageHandler"; import SdkConfig from "../../SdkConfig"; import * as sdk from "../../index"; import dis from "../../dispatcher/dispatcher"; +import { Action } from "../../dispatcher/actions"; const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'}); -const onClickExplore = () => dis.dispatch({action: 'view_room_directory'}); +const onClickExplore = () => dis.fire(Action.ViewRoomDirectory); const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'}); const HomePage = () => { diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 05cd97df2a..bae69b5631 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -252,7 +252,7 @@ const LeftPanel = createReactClass({ if (!this.props.collapsed) { exploreButton = (
- dis.dispatch({action: 'view_room_directory'})}>{_t("Explore")} + dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}
); } diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx index 2fd8612ff5..f417dc99b1 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel2.tsx @@ -18,16 +18,16 @@ import * as React from "react"; import TagPanel from "./TagPanel"; import classNames from "classnames"; import dis from "../../dispatcher/dispatcher"; -import AccessibleButton from "../views/elements/AccessibleButton"; import { _t } from "../../languageHandler"; import SearchBox from "./SearchBox"; import RoomList2 from "../views/rooms/RoomList2"; -import TopLeftMenuButton from "./TopLeftMenuButton"; import { Action } from "../../dispatcher/actions"; import { MatrixClientPeg } from "../../MatrixClientPeg"; import BaseAvatar from '../views/avatars/BaseAvatar'; import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import UserMenuButton from "./UserMenuButton"; +import RoomSearch from "./RoomSearch"; +import AccessibleButton from "../views/elements/AccessibleButton"; /******************************************************************* * CAUTION * @@ -42,7 +42,6 @@ interface IProps { } interface IState { - searchExpanded: boolean; searchFilter: string; // TODO: Move search into room list? } @@ -58,7 +57,6 @@ export default class LeftPanel2 extends React.Component { super(props); this.state = { - searchExpanded: false, searchFilter: "", }; } @@ -67,24 +65,10 @@ export default class LeftPanel2 extends React.Component { this.setState({searchFilter: term}); }; - private onSearchCleared = (source: string): void => { - if (source === "keyboard") { - dis.fire(Action.FocusComposer); - } - this.setState({searchExpanded: false}); - } - - private onSearchFocus = (): void => { - this.setState({searchExpanded: true}); + private onExplore = () => { + dis.fire(Action.ViewRoomDirectory); }; - private onSearchBlur = (event: FocusEvent): void => { - const target = event.target as HTMLInputElement; - if (target.value.length === 0) { - this.setState({searchExpanded: false}); - } - } - private renderHeader(): React.ReactNode { // TODO: Update when profile info changes // TODO: Presence @@ -126,6 +110,22 @@ export default class LeftPanel2 extends React.Component { ); } + private renderSearchExplore(): React.ReactNode { + // TODO: Collapsed support + + return ( +
+ + +
+ ); + } + public render(): React.ReactNode { const tagPanel = (
@@ -133,18 +133,6 @@ export default class LeftPanel2 extends React.Component {
); - const searchBox = ( {/*TODO*/}} - onSearch={this.onSearch} - onCleared={this.onSearchCleared} - onFocus={this.onSearchFocus} - onBlur={this.onSearchBlur} - collapsed={false}/>); // TODO: Collapsed support - // TODO: Improve props for RoomList2 const roomList = {/*TODO*/}} @@ -167,14 +155,7 @@ export default class LeftPanel2 extends React.Component { {tagPanel}