diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 78e7307bc0..6ea99585d2 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -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'); } } diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 3e9a8ac102..de54fabc53 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -284,6 +284,10 @@ export default class RoomList extends React.PureComponent { } }; + 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 { 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 { if (this.state.isNameFiltering) { explorePrompt =
{_t("Can't see what you’re looking for?")}
- + + {_t("Start a new chat")} + + {_t("Explore all public rooms")}
; @@ -388,7 +404,18 @@ export default class RoomList extends React.PureComponent { if (unfilteredRooms.length < 1 && unfilteredHistorical < 1) { explorePrompt =
{_t("Use the + to make a new room or explore existing ones below")}
- + + {_t("Start a new chat")} + + {_t("Explore all public rooms")}
; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 701bee457f..3bfa962216 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -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",