Add btn and hotkey to close room settings (#269)

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/room/RoomSettings.jsx

@@ -2,13 +2,16 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomSettings.scss';
 
+import { blurOnBubbling } from '../../atoms/button/script';
+
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { openInviteUser } from '../../../client/action/navigation';
+import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import Tabs from '../../atoms/tabs/Tabs';
@@ -28,6 +31,7 @@ import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
+import ChevronTopIC from '../../../../public/res/ic/outlined/chevron-top.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 
@@ -124,6 +128,7 @@ SecuritySettings.propTypes = {
 function RoomSettings({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const [selectedTab, setSelectedTab] = useState(tabItems[0]);
+  const room = initMatrix.matrixClient.getRoom(roomId);
 
   const handleTabChange = (tabItem) => {
     setSelectedTab(tabItem);
@@ -153,9 +158,20 @@ function RoomSettings({ roomId }) {
       <ScrollView autoHide>
         <div className="room-settings__content">
           <Header>
+            <button
+              className="room-settings__header-btn"
+              onClick={() => toggleRoomSettings()}
+              type="button"
+              onMouseUp={(e) => blurOnBubbling(e, '.room-settings__header-btn')}
+            >
               <TitleWrapper>
-              <Text variant="s1" weight="medium" primary>Room settings</Text>
+                <Text variant="s1" weight="medium" primary>
+                  {`${room.name}`}
+                  <span style={{ color: 'var(--tc-surface-low)' }}> — room settings</span>
+                </Text>
               </TitleWrapper>
+              <RawIcon src={ChevronTopIC} />
+            </button>
           </Header>
           <RoomProfile roomId={roomId} />
           <Tabs

src/app/organisms/room/RoomSettings.scss

@@ -1,4 +1,5 @@
 @use '../../partials/dir';
+@use '../../partials/flex';
 
 .room-settings {
   height: 100%;
@@ -6,6 +7,32 @@
     position: relative;
   }
 
+  & .header {
+    padding: 0 var(--sp-extra-tight);
+  }
+
+  &__header-btn {
+    min-width: 0;
+    @extend .cp-fx__row--s-c;
+    @include dir.side(margin, 0, auto);
+    padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+    border-radius: calc(var(--bo-radius) / 2);
+    cursor: pointer;
+    
+    @media (hover:hover) {
+      &:hover {
+        background-color: var(--bg-surface-hover);
+        box-shadow: var(--bs-surface-outline);
+      }
+    }
+    &:focus,
+    &:active {
+      background-color: var(--bg-surface-active);
+      box-shadow: var(--bs-surface-outline);
+      outline: none;
+    }
+  }
+
   &__content {
     padding-bottom: calc(2 * var(--sp-extra-loose));
 

src/app/organisms/space-settings/SpaceSettings.jsx

@@ -127,7 +127,8 @@ function SpaceSettings() {
       className="space-settings"
       title={(
         <Text variant="s1" weight="medium" primary>
-          {twemojify(isOpen ? `${room.name} - space settings` : 'Space settings')}
+          {isOpen && twemojify(room.name)}
+          <span style={{ color: 'var(--tc-surface-low)' }}> — space settings</span>
         </Text>
       )}
       contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}

src/client/event/hotkeys.js

@@ -1,4 +1,4 @@
-import { openSearch } from '../action/navigation';
+import { openSearch, toggleRoomSettings } from '../action/navigation';
 import navigation from '../state/navigation';
 
 function listenKeyboard(event) {
@@ -17,11 +17,19 @@ function listenKeyboard(event) {
     if (['text', 'textarea'].includes(document.activeElement.type)) {
       return;
     }
+
+    // esc - close room settings panel
+    if (event.keyCode === 27 && navigation.isRoomSettings) {
+      toggleRoomSettings();
+    }
+
     if ((event.keyCode !== 8 && event.keyCode < 48)
       || (event.keyCode >= 91 && event.keyCode <= 93)
       || (event.keyCode >= 112 && event.keyCode <= 183)) {
       return;
     }
+
+    // press any key to focus and type in message field
     const msgTextarea = document.getElementById('message-textarea');
     msgTextarea?.focus();
   }