PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Iterate the filtering prompt

Browse source
This commit is contained in:
Michael Telatynski 2020-11-11 13:21:20 +00:00
parent d3fee540c5
commit a481f3bdf1
3 changed files with 40 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/rooms/_RoomList.scss
View file

@ -33,7 +33,6 @@ limitations under the License.
div:first-child {
font-weight: $font-semi-bold;
margin-bottom: 8px;
}
.mx_AccessibleButton {
@ -41,6 +40,7 @@ limitations under the License.
position: relative;
padding: 0 0 0 24px;
font-size: inherit;
margin-top: 8px;
&::before {
content: '';
@ -53,6 +53,13 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
&.mx_RoomList_explorePrompt_startChat::before {
mask-image: url('$(res)/img/element-icons/feedback.svg');
}
&.mx_RoomList_explorePrompt_explore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}

35
src/components/views/rooms/RoomList.tsx
View file

@ -284,6 +284,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
}
};
private onStartChat = () => {
dis.dispatch({action: "view_create_chat"});
};
private onExplore = () => {
dis.fire(Action.ViewRoomDirectory);
};
@ -335,8 +339,9 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
return p;
}, [] as TagID[]);
// show a skeleton UI if the user is in no rooms
const showSkeleton = Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
// show a skeleton UI if the user is in no rooms and they are not filtering
const showSkeleton = !this.state.isNameFiltering &&
Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
for (const orderedTagId of tagOrder) {
const orderedRooms = this.state.sublists[orderedTagId] || [];
@ -376,7 +381,18 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
if (this.state.isNameFiltering) {
explorePrompt = <div className="mx_RoomList_explorePrompt">
<div>{_t("Can't see what you’re looking for?")}</div>
<AccessibleButton kind="link" onClick={this.onExplore}>
<AccessibleButton
className="mx_RoomList_explorePrompt_startChat"
kind="link"
onClick={this.onStartChat}
>
{_t("Start a new chat")}
</AccessibleButton>
<AccessibleButton
className="mx_RoomList_explorePrompt_explore"
kind="link"
onClick={this.onExplore}
>
{_t("Explore all public rooms")}
</AccessibleButton>
</div>;
@ -388,7 +404,18 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
if (unfilteredRooms.length < 1 && unfilteredHistorical < 1) {
explorePrompt = <div className="mx_RoomList_explorePrompt">
<div>{_t("Use the + to make a new room or explore existing ones below")}</div>
<AccessibleButton kind="link" onClick={this.onExplore}>
<AccessibleButton
className="mx_RoomList_explorePrompt_startChat"
kind="link"
onClick={this.onStartChat}
>
{_t("Start a new chat")}
</AccessibleButton>
<AccessibleButton
className="mx_RoomList_explorePrompt_explore"
kind="link"
onClick={this.onExplore}
>
{_t("Explore all public rooms")}
</AccessibleButton>
</div>;

1
src/i18n/strings/en_EN.json
View file

@ -1391,6 +1391,7 @@
"Historical": "Historical",
"Custom Tag": "Custom Tag",
"Can't see what you’re looking for?": "Can't see what you’re looking for?",
"Start a new chat": "Start a new chat",
"Explore all public rooms": "Explore all public rooms",
"Use the + to make a new room or explore existing ones below": "Use the + to make a new room or explore existing ones below",
"%(count)s results|other": "%(count)s results",