Change add room action for rooms to context menu

res/css/views/rooms/_RoomList.scss

@@ -17,3 +17,10 @@ limitations under the License.
 .mx_RoomList {
     padding-right: 7px; // width of the scrollbar, to line things up
 }
+
+.mx_RoomList_iconPlus::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+}
+.mx_RoomList_iconExplore::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+}

res/css/views/rooms/_RoomSublist.scss

@@ -120,7 +120,7 @@ limitations under the License.
         }
 
         .mx_RoomSublist_auxButton::before {
-            mask-image: url('$(res)/img/feather-customised/plus.svg');
+            mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
         }
 
         .mx_RoomSublist_menuButton::before {

res/img/element-icons/roomlist/explore.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM13.375 5.3266C13.5583 4.92826 13.0716 4.44152 12.6733 4.62491L7.66968 6.9285C7.33893 7.08077 7.08014 7.33956 6.92787 7.67031L4.62428 12.6739C4.44089 13.0722 4.92763 13.559 5.32597 13.3756L10.3295 11.072C10.6603 10.9197 10.9191 10.6609 11.0714 10.3302L13.375 5.3266Z" fill="black"/>
+<path d="M9.8835 9.88413C9.39534 10.3723 8.60389 10.3723 8.11573 9.88413C7.62757 9.39597 7.62757 8.60452 8.11573 8.11636C8.60389 7.62821 9.39534 7.62821 9.8835 8.11636C10.3717 8.60452 10.3717 9.39597 9.8835 9.88413Z" fill="black"/>
+</svg>

res/img/element-icons/roomlist/plus.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 4C9.75 3.58579 9.41421 3.25 9 3.25C8.58579 3.25 8.25 3.58579 8.25 4V8.25L4 8.25C3.58579 8.25 3.25 8.58579 3.25 9C3.25 9.41421 3.58579 9.75 4 9.75L8.25 9.75V14C8.25 14.4142 8.58579 14.75 9 14.75C9.41421 14.75 9.75 14.4142 9.75 14V9.75L14 9.75C14.4142 9.75 14.75 9.41421 14.75 9C14.75 8.58579 14.4142 8.25 14 8.25L9.75 8.25V4Z" fill="black"/>
+</svg>

src/components/views/rooms/RoomList.tsx

@@ -43,6 +43,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
 import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
 import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
+import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -81,6 +82,7 @@ interface ITagAesthetics {
     sectionLabelRaw?: string;
     addRoomLabel?: string;
     onAddRoom?: (dispatcher?: Dispatcher<ActionPayload>) => void;
+    addRoomContextMenu?: (onFinished: () => void) => React.ReactNode;
     isInvite: boolean;
     defaultHidden: boolean;
 }
@@ -112,9 +114,30 @@ const TAG_AESTHETICS: {
         sectionLabel: _td("Rooms"),
         isInvite: false,
         defaultHidden: false,
-        addRoomLabel: _td("Create room"),
+        addRoomLabel: _td("Add room"),
-        onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
+        addRoomContextMenu: (onFinished: () => void) => {
-            (dispatcher || defaultDispatcher).dispatch({action: 'view_create_room'})
+            return <IconizedContextMenuOptionList first>
+                <IconizedContextMenuOption
+                    label={_t("Create new room")}
+                    iconClassName="mx_RoomList_iconPlus"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onFinished();
+                        defaultDispatcher.dispatch({action: "view_create_room"});
+                    }}
+                />
+                <IconizedContextMenuOption
+                    label={_t("Explore public rooms")}
+                    iconClassName="mx_RoomList_iconExplore"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onFinished();
+                        defaultDispatcher.fire(Action.ViewRoomDirectory);
+                    }}
+                />
+            </IconizedContextMenuOptionList>;
         },
     },
     [DefaultTagID.LowPriority]: {
@@ -324,6 +347,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
                     onAddRoom={aesthetics.onAddRoom}
                     addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
+                    addRoomContextMenu={aesthetics.addRoomContextMenu}
                     isMinimized={this.props.isMinimized}
                     onResize={this.props.onResize}
                     extraBadTilesThatShouldntExist={extraTiles}

src/components/views/rooms/RoomSublist.tsx

@@ -50,6 +50,7 @@ import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
 import { objectExcluding, objectHasDiff } from "../../../utils/objects";
 import TemporaryTile from "./TemporaryTile";
 import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
+import IconizedContextMenu from "../context_menus/IconizedContextMenu";
 
 const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
 const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
@@ -65,6 +66,7 @@ interface IProps {
     startAsHidden: boolean;
     label: string;
     onAddRoom?: () => void;
+    addRoomContextMenu?: (onFinished: () => void) => React.ReactNode;
     addRoomLabel: string;
     isMinimized: boolean;
     tagId: TagID;
@@ -87,6 +89,7 @@ type PartialDOMRect = Pick<DOMRect, "left" | "top" | "height">;
 
 interface IState {
     contextMenuPosition: PartialDOMRect;
+    addRoomContextMenuPosition: PartialDOMRect;
     isResizing: boolean;
     isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
     height: number;
@@ -112,6 +115,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         this.notificationState = RoomNotificationStateStore.instance.getListState(this.props.tagId);
         this.state = {
             contextMenuPosition: null,
+            addRoomContextMenuPosition: null,
             isResizing: false,
             isExpanded: this.isBeingFiltered ? this.isBeingFiltered : !this.layout.isCollapsed,
             height: 0, // to be fixed in a moment, we need `rooms` to calculate this.
@@ -376,10 +380,21 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         });
     };
 
+    private onAddRoomContextMenu = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const target = ev.target as HTMLButtonElement;
+        this.setState({addRoomContextMenuPosition: target.getBoundingClientRect()});
+    };
+
     private onCloseMenu = () => {
         this.setState({contextMenuPosition: null});
     };
 
+    private onCloseAddRoomMenu = () => {
+        this.setState({addRoomContextMenuPosition: null});
+    };
+
     private onUnreadFirstChanged = async () => {
         const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
         const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
@@ -594,6 +609,18 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                     </div>
                 </ContextMenu>
             );
+        } else if (this.state.addRoomContextMenuPosition) {
+            contextMenu = (
+                <IconizedContextMenu
+                    chevronFace={ChevronFace.None}
+                    left={this.state.addRoomContextMenuPosition.left - 7} // center align with the handle
+                    top={this.state.addRoomContextMenuPosition.top + this.state.addRoomContextMenuPosition.height}
+                    onFinished={this.onCloseAddRoomMenu}
+                    compact
+                >
+                    {this.props.addRoomContextMenu(this.onCloseAddRoomMenu)}
+                </IconizedContextMenu>
+            );
         }
 
         return (
@@ -637,9 +664,21 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                                 tabIndex={tabIndex}
                                 onClick={this.onAddRoom}
                                 className="mx_RoomSublist_auxButton"
+                                tooltipClassName="mx_RoomSublist_addRoomTooltip"
                                 aria-label={this.props.addRoomLabel || _t("Add room")}
                                 title={this.props.addRoomLabel}
-                                tooltipClassName={"mx_RoomSublist_addRoomTooltip"}
+                            />
+                        );
+                    } else if (this.props.addRoomContextMenu) {
+                        addRoomButton = (
+                            <ContextMenuTooltipButton
+                                tabIndex={tabIndex}
+                                onClick={this.onAddRoomContextMenu}
+                                className="mx_RoomSublist_auxButton"
+                                tooltipClassName="mx_RoomSublist_addRoomTooltip"
+                                aria-label={this.props.addRoomLabel || _t("Add room")}
+                                title={this.props.addRoomLabel}
+                                isExpanded={!!this.state.addRoomContextMenuPosition}
                             />
                         );
                     }

src/i18n/strings/en_EN.json

@@ -1111,7 +1111,9 @@
     "People": "People",
     "Start chat": "Start chat",
     "Rooms": "Rooms",
-    "Create room": "Create room",
+    "Add room": "Add room",
+    "Create new room": "Create new room",
+    "Explore public rooms": "Explore public rooms",
     "Low priority": "Low priority",
     "System Alerts": "System Alerts",
     "Historical": "Historical",
@@ -1168,7 +1170,6 @@
     "List options": "List options",
     "Jump to first unread room.": "Jump to first unread room.",
     "Jump to first invite.": "Jump to first invite.",
-    "Add room": "Add room",
     "Show %(count)s more|other": "Show %(count)s more",
     "Show %(count)s more|one": "Show %(count)s more",
     "Use default": "Use default",