Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 724f545

Browse files
turt2liveturt2live
committed
Merge remote-tracking branch 'origin/develop' into travis/room-list/sublist-badges
2 parents 8632d56 + d9bd3cf commit 724f545

File tree

22 files changed

+432
-65
lines changed

22 files changed

+432
-65
lines changed

‎res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import "./structures/_NotificationPanel.scss";
2020
@import "./structures/_RightPanel.scss";
2121
@import "./structures/_RoomDirectory.scss";
22+
@import "./structures/_RoomSearch.scss";
2223
@import "./structures/_RoomStatusBar.scss";
2324
@import "./structures/_RoomSubList.scss";
2425
@import "./structures/_RoomView.scss";

‎res/css/structures/_LeftPanel2.scss

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,44 @@ $roomListMinimizedWidth: 50px;
8888
}
8989

9090
.mx_LeftPanel2_filterContainer {
91-
// TODO: Improve CSS for filtering and its input
91+
margin-left: 12px;
92+
margin-right: 12px;
93+
94+
// Create a flexbox to organize the inputs
95+
display: flex;
96+
align-items: center;
97+
98+
.mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
99+
// Cheaty way to return the occupied space to the filter input
100+
margin: 0;
101+
width: 0;
102+
103+
// Don't forget to hide the masked ::before icon
104+
visibility: hidden;
105+
}
106+
107+
.mx_LeftPanel2_exploreButton {
108+
width: 28px;
109+
height: 28px;
110+
border-radius: 20px;
111+
background-color: #fff; // TODO: Variable and theme
112+
position: relative;
113+
margin-left: 8px;
114+
115+
&::before {
116+
content: '';
117+
position: absolute;
118+
top: 6px;
119+
left: 6px;
120+
width: 16px;
121+
height: 16px;
122+
mask-image: url('$(res)/img/feather-customised/compass.svg');
123+
mask-position: center;
124+
mask-size: contain;
125+
mask-repeat: no-repeat;
126+
background: $primary-fg-color;
127+
}
128+
}
92129
}
93130

94131
.mx_LeftPanel2_actualRoomListContainer {

‎res/css/structures/_RoomSearch.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/*
2+
Copyright 2020 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
// Note: this component expects to be contained within a flexbox
18+
.mx_RoomSearch {
19+
flex: 1;
20+
border-radius: 20px;
21+
background-color: #fff; // TODO: Variable & theme
22+
height: 26px;
23+
padding: 2px;
24+
25+
// Create a flexbox for the icons (easier to manage)
26+
display: flex;
27+
align-items: center;
28+
29+
.mx_RoomSearch_icon {
30+
width: 16px;
31+
height: 16px;
32+
mask: url('$(res)/img/feather-customised/search-input.svg');
33+
mask-repeat: no-repeat;
34+
background: $primary-fg-color;
35+
margin-left: 7px;
36+
}
37+
38+
.mx_RoomSearch_input {
39+
border: none !important; // !important to override default app-wide styles
40+
flex: 1 !important; // !important to override default app-wide styles
41+
color: $primary-fg-color !important; // !important to override default app-wide styles
42+
padding: 0;
43+
height: 100%;
44+
width: 100%;
45+
font-size: $font-12px;
46+
line-height: $font-16px;
47+
48+
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
49+
color: $primary-fg-color !important; // !important to override default app-wide styles
50+
}
51+
}
52+
53+
&.mx_RoomSearch_expanded {
54+
.mx_RoomSearch_clearButton {
55+
width: 16px;
56+
height: 16px;
57+
mask-image: url('$(res)/img/feather-customised/x.svg');
58+
mask-position: center;
59+
mask-size: contain;
60+
mask-repeat: no-repeat;
61+
background: $primary-fg-color;
62+
margin-right: 8px;
63+
}
64+
}
65+
66+
.mx_RoomSearch_clearButton {
67+
width: 0;
68+
height: 0;
69+
}
70+
}

‎res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,7 @@ limitations under the License.
4343
padding-left: 20px;
4444
padding-right: 5px;
4545
}
46+
47+
.mx_SettingsTab_customFontSizeField {
48+
margin-left: calc($font-16px + 10px);
49+
}

‎res/img/feather-customised/compass.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/structures/HomePage.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@ import { _t } from "../../languageHandler";
2222
import SdkConfig from "../../SdkConfig";
2323
import * as sdk from "../../index";
2424
import dis from "../../dispatcher/dispatcher";
25+
import { Action } from "../../dispatcher/actions";
2526

2627
const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'});
27-
const onClickExplore = () => dis.dispatch({action: 'view_room_directory'});
28+
const onClickExplore = () => dis.fire(Action.ViewRoomDirectory);
2829
const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'});
2930

3031
const HomePage = () => {

‎src/components/structures/LeftPanel.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ const LeftPanel = createReactClass({
252252
if (!this.props.collapsed) {
253253
exploreButton = (
254254
<div className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
255-
<AccessibleButton onClick={() => dis.dispatch({action: 'view_room_directory'})}>{_t("Explore")}</AccessibleButton>
255+
<AccessibleButton onClick={() => dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}</AccessibleButton>
256256
</div>
257257
);
258258
}

‎src/components/structures/LeftPanel2.tsx

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ import * as React from "react";
1818
import TagPanel from "./TagPanel";
1919
import classNames from "classnames";
2020
import dis from "../../dispatcher/dispatcher";
21-
import AccessibleButton from "../views/elements/AccessibleButton";
2221
import { _t } from "../../languageHandler";
2322
import SearchBox from "./SearchBox";
2423
import RoomList2 from "../views/rooms/RoomList2";
25-
import TopLeftMenuButton from "./TopLeftMenuButton";
2624
import { Action } from "../../dispatcher/actions";
2725
import { MatrixClientPeg } from "../../MatrixClientPeg";
2826
import BaseAvatar from '../views/avatars/BaseAvatar';
2927
import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
3028
import UserMenuButton from "./UserMenuButton";
29+
import RoomSearch from "./RoomSearch";
30+
import AccessibleButton from "../views/elements/AccessibleButton";
3131

3232
/*******************************************************************
3333
* CAUTION *
@@ -42,7 +42,6 @@ interface IProps {
4242
}
4343

4444
interface IState {
45-
searchExpanded: boolean;
4645
searchFilter: string; // TODO: Move search into room list?
4746
}
4847

@@ -58,7 +57,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
5857
super(props);
5958

6059
this.state = {
61-
searchExpanded: false,
6260
searchFilter: "",
6361
};
6462
}
@@ -67,24 +65,10 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
6765
this.setState({searchFilter: term});
6866
};
6967

70-
private onSearchCleared = (source: string): void => {
71-
if (source === "keyboard") {
72-
dis.fire(Action.FocusComposer);
73-
}
74-
this.setState({searchExpanded: false});
75-
}
76-
77-
private onSearchFocus = (): void => {
78-
this.setState({searchExpanded: true});
68+
private onExplore = () => {
69+
dis.fire(Action.ViewRoomDirectory);
7970
};
8071

81-
private onSearchBlur = (event: FocusEvent): void => {
82-
const target = event.target as HTMLInputElement;
83-
if (target.value.length === 0) {
84-
this.setState({searchExpanded: false});
85-
}
86-
}
87-
8872
private renderHeader(): React.ReactNode {
8973
// TODO: Update when profile info changes
9074
// TODO: Presence
@@ -126,25 +110,29 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
126110
);
127111
}
128112

113+
private renderSearchExplore(): React.ReactNode {
114+
// TODO: Collapsed support
115+
116+
return (
117+
<div className="mx_LeftPanel2_filterContainer">
118+
<RoomSearch onQueryUpdate={this.onSearch} />
119+
<AccessibleButton
120+
tabIndex={-1}
121+
className='mx_LeftPanel2_exploreButton'
122+
onClick={this.onExplore}
123+
alt={_t("Explore rooms")}
124+
/>
125+
</div>
126+
);
127+
}
128+
129129
public render(): React.ReactNode {
130130
const tagPanel = (
131131
<div className="mx_LeftPanel2_tagPanelContainer">
132132
<TagPanel/>
133133
</div>
134134
);
135135

136-
const searchBox = (<SearchBox
137-
className="mx_LeftPanel2_filterRoomsSearch"
138-
enableRoomSearchFocus={true}
139-
blurredPlaceholder={_t('Filter')}
140-
placeholder={_t('Filter rooms…')}
141-
onKeyDown={() => {/*TODO*/}}
142-
onSearch={this.onSearch}
143-
onCleared={this.onSearchCleared}
144-
onFocus={this.onSearchFocus}
145-
onBlur={this.onSearchBlur}
146-
collapsed={false}/>); // TODO: Collapsed support
147-
148136
// TODO: Improve props for RoomList2
149137
const roomList = <RoomList2
150138
onKeyDown={() => {/*TODO*/}}
@@ -167,14 +155,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
167155
{tagPanel}
168156
<aside className="mx_LeftPanel2_roomListContainer">
169157
{this.renderHeader()}
170-
<div
171-
className="mx_LeftPanel2_filterContainer"
172-
onKeyDown={() => {/*TODO*/}}
173-
onFocus={() => {/*TODO*/}}
174-
onBlur={() => {/*TODO*/}}
175-
>
176-
{searchBox}
177-
</div>
158+
{this.renderSearchExplore()}
178159
<div className="mx_LeftPanel2_actualRoomListContainer">
179160
{roomList}
180161
</div>

‎src/components/structures/MatrixChat.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -624,7 +624,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
624624
Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
625625
break;
626626
}
627-
case 'view_room_directory': {
627+
case Action.ViewRoomDirectory: {
628628
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
629629
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {},
630630
'mx_RoomDirectory_dialogWrapper', false, true);
@@ -1611,9 +1611,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
16111611
action: 'require_registration',
16121612
});
16131613
} else if (screen === 'directory') {
1614-
dis.dispatch({
1615-
action: 'view_room_directory',
1616-
});
1614+
dis.fire(Action.ViewRoomDirectory);
16171615
} else if (screen === 'groups') {
16181616
dis.dispatch({
16191617
action: 'view_my_groups',

0 commit comments

Comments
 (0)