Add RoomSettings comp

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

public/res/ic/outlined/shield-user.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<circle cx="12" cy="9" r="2"/>
+	<path d="M15,16H9v-1c0-1.7,1.3-3,3-3h0c1.7,0,3,1.3,3,3V16z"/>
+</g>
+</svg>

src/app/atoms/input/Input.jsx

@@ -8,7 +8,7 @@ function Input({
   id, label, name, value, placeholder,
   required, type, onChange, forwardRef,
   resizable, minHeight, onResize, state,
-  onKeyDown,
+  onKeyDown, disabled,
 }) {
   return (
     <div className="input-container">
@@ -29,6 +29,7 @@ function Input({
             onChange={onChange}
             onResize={onResize}
             onKeyDown={onKeyDown}
+            disabled={disabled}
           />
         ) : (
           <input
@@ -43,6 +44,7 @@ function Input({
             autoComplete="off"
             onChange={onChange}
             onKeyDown={onKeyDown}
+            disabled={disabled}
           />
         )}
     </div>
@@ -64,6 +66,7 @@ Input.defaultProps = {
   onResize: null,
   state: 'normal',
   onKeyDown: null,
+  disabled: false,
 };
 
 Input.propTypes = {
@@ -81,6 +84,7 @@ Input.propTypes = {
   onResize: PropTypes.func,
   state: PropTypes.oneOf(['normal', 'success', 'error']),
   onKeyDown: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default Input;

src/app/atoms/input/Input.scss

@@ -1,3 +1,5 @@
+@use '../../atoms/scroll/scrollbar';
+
 .input {
   display: block;
   width: 100%;
@@ -13,6 +15,11 @@
   letter-spacing: var(--ls-b2);
   line-height: var(--lh-b2);
 
+  :disabled {
+    opacity: 0.4;
+    cursor: no-drop;
+  }
+
   &__label {
     display: inline-block;
     margin-bottom: var(--sp-ultra-tight);
@@ -21,6 +28,10 @@
 
   &--resizable {
     resize: vertical !important;
+    overflow-y: auto !important;
+    @include scrollbar.scroll;
+    @include scrollbar.scroll__v;
+    @include scrollbar.scroll--auto-hide;
   }
   &--success {
     border: 1px solid var(--bg-positive);

src/app/atoms/modal/RawModal.scss

@@ -1,6 +1,6 @@
 .ReactModal__Overlay {
   opacity: 0;
-  transition: opacity 200ms cubic-bezier(0.13, 0.56, 0.25, 0.99);
+  transition: opacity 200ms var(--fluid-slide-up);
 }
 .ReactModal__Overlay--after-open{
   opacity: 1;
@@ -11,7 +11,7 @@
 
 .ReactModal__Content {
   transform: translateY(100%);
-  transition: transform 200ms cubic-bezier(0.13, 0.56, 0.25, 0.99);
+  transition: transform 200ms var(--fluid-slide-up);
 }
 
 .ReactModal__Content--after-open{

src/app/organisms/room/Room.jsx

@@ -9,6 +9,7 @@ import RoomTimeline from '../../../client/state/RoomTimeline';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
+import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
 
 function Room() {
@@ -42,8 +43,11 @@ function Room() {
   if (roomTimeline === null) return <Welcome />;
 
   return (
-    <div className="room-container">
-      <RoomView roomTimeline={roomTimeline} eventId={eventId} />
+    <div className="room">
+      <div className="room__content">
+        <RoomSettings roomId={roomTimeline.roomId} />
+        <RoomView roomTimeline={roomTimeline} eventId={eventId} />
+      </div>
       { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
     </div>
   );

src/app/organisms/room/Room.scss

@@ -1,4 +1,12 @@
-.room-container {
-  display: flex;
+@use '../../partials/flex';
+
+.room {
+  @extend .cp-fx__row;
   height: 100%;
+
+  &__content {
+    @extend .cp-fx__item-one;
+    position: relative;
+    overflow: hidden;
+  }
 }

src/app/organisms/room/RoomSettings.jsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomSettings.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import Tabs from '../../atoms/tabs/Tabs';
+import RoomProfile from '../../molecules/room-profile/RoomProfile';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
+import LockIC from '../../../../public/res/ic/outlined/lock.svg';
+import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
+const tabItems = [{
+  iconSrc: SettingsIC,
+  text: 'General',
+  disabled: false,
+}, {
+  iconSrc: SearchIC,
+  text: 'Search',
+  disabled: false,
+}, {
+  iconSrc: ShieldUserIC,
+  text: 'Permissions',
+  disabled: false,
+}, {
+  iconSrc: LockIC,
+  text: 'Security',
+  disabled: false,
+}, {
+  iconSrc: InfoIC,
+  text: 'Advanced',
+  disabled: false,
+}];
+
+function RoomSettings({ roomId }) {
+  const [, forceUpdate] = useForceUpdate();
+
+  useEffect(() => {
+    const settingsToggle = (isVisible) => {
+      if (isVisible) forceUpdate();
+      else setTimeout(() => forceUpdate(), 200);
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
+
+  if (!navigation.isRoomSettings) return null;
+
+  return (
+    <div className="room-settings">
+      <ScrollView autoHide>
+        <div className="room-settings__content">
+          <Header>
+            <TitleWrapper>
+              <Text variant="s1" weight="medium" primary>Room settings</Text>
+            </TitleWrapper>
+          </Header>
+          <RoomProfile roomId={roomId} />
+          <Tabs items={tabItems} onSelect={() => false} />
+          <div className="room-settings__cards-wrapper">
+            {/* <div className="room-settings__card">
+            </div> */}
+          </div>
+        </div>
+      </ScrollView>
+    </div>
+  );
+}
+
+RoomSettings.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomSettings;

src/app/organisms/room/RoomSettings.scss

@@ -0,0 +1,39 @@
+@use '../../partials/dir';
+
+.room-settings {
+  height: 100%;
+
+  &__content {
+    padding-bottom: calc(2 * var(--sp-extra-loose));
+    position: relative;
+
+    & .room-profile {
+      margin: var(--sp-extra-loose);
+    }
+  }
+  
+  & .tabs {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    background-color: var(--bg-surface-low);
+    box-shadow: 0 -4px 0 var(--bg-surface-low),
+      inset 0 -1px 0 var(--bg-surface-border);
+
+    &__content {
+      padding: 0 var(--sp-normal);
+    }
+  }
+  
+  &__cards-wrapper {
+    padding: var(--sp-normal);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+  }
+
+  &__card {
+    background-color: var(--bg-surface);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-surface-border);
+    padding: 16px;
+  }
+}

src/app/organisms/room/RoomView.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomView.scss';
 
 import EventEmitter from 'events';
 
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
 import RoomViewHeader from './RoomViewHeader';
 import RoomViewContent from './RoomViewContent';
 import RoomViewFloating from './RoomViewFloating';
@@ -13,11 +16,27 @@ import RoomViewCmdBar from './RoomViewCmdBar';
 const viewEvent = new EventEmitter();
 
 function RoomView({ roomTimeline, eventId }) {
+  const roomViewRef = useRef(null);
   // eslint-disable-next-line react/prop-types
   const { roomId } = roomTimeline;
 
+  useEffect(() => {
+    const settingsToggle = (isVisible) => {
+      const roomView = roomViewRef.current;
+      roomView.classList.toggle('room-view--dropped');
+
+      const roomViewContent = roomView.children[1];
+      if (isVisible) setTimeout(() => { roomViewContent.style.visibility = 'hidden'; }, 200);
+      else roomViewContent.style.visibility = 'visible';
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
+
   return (
-    <div className="room-view">
+    <div className="room-view" ref={roomViewRef}>
       <RoomViewHeader roomId={roomId} />
       <div className="room-view__content-wrapper">
         <div className="room-view__scrollable">

src/app/organisms/room/RoomView.scss

@@ -1,8 +1,23 @@
 @use '../../partials/flex';
 
 .room-view {
-  @extend .cp-fx__item-one;
   @extend .cp-fx__column;
+  background-color: var(--bg-surface);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  box-shadow: none;
+
+  transition: transform 200ms var(--fluid-slide-down),
+    box-shadow 200ms var(--fluid-slide-down);
+
+  &--dropped {
+    transform: translateY(calc(100% - var(--header-height)));
+    border-radius: var(--bo-radius) var(--bo-radius) 0 0;
+    box-shadow: var(--bs-popup);
+  }
 
   &__content-wrapper {
     @extend .cp-fx__item-one;

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import './RoomViewHeader.scss';
 
 import { twemojify } from '../../../util/twemojify';
+import { blurOnBubbling } from '../../atoms/button/script';
 
 import initMatrix from '../../../client/initMatrix';
-import { openRoomOptions } from '../../../client/action/navigation';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { toggleRoomSettings, openRoomOptions } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
 import IconButton from '../../atoms/button/IconButton';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
 
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
 function RoomViewHeader({ roomId }) {
@@ -23,15 +29,35 @@ function RoomViewHeader({ roomId }) {
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
   avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
   const roomName = mx.getRoom(roomId).name;
-  const roomTopic = mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
 
+  const roomHeaderBtnRef = useRef(null);
+  useEffect(() => {
+    const settingsToggle = (isVisibile) => {
+      const rawIcon = roomHeaderBtnRef.current.lastElementChild;
+      rawIcon.style.transform = isVisibile
+        ? 'rotateX(180deg)'
+        : 'rotateX(0deg)';
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
   return (
     <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
-      <TitleWrapper>
-        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
-        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
-      </TitleWrapper>
+      <button
+        ref={roomHeaderBtnRef}
+        className="room-header__btn"
+        onClick={toggleRoomSettings}
+        type="button"
+        onMouseUp={(e) => blurOnBubbling(e, '.room-header__btn')}
+      >
+        <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
+        <TitleWrapper>
+          <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
+        </TitleWrapper>
+        <RawIcon src={ChevronBottomIC} />
+      </button>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton
         onClick={(e) => openRoomOptions(getEventCords(e), roomId)}

src/app/organisms/room/RoomViewHeader.scss

@@ -0,0 +1,27 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.room-header__btn {
+  min-width: 0;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, auto);
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  
+  & .ic-raw {
+    @include dir.side(margin, 0, var(--sp-extra-tight));
+    transition: transform 200ms ease-in-out;
+  }
+  @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;
+  }
+}

src/app/organisms/room/RoomViewInput.jsx

@@ -151,7 +151,6 @@ function RoomViewInput({
     navigation.on(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
     if (textAreaRef?.current !== null) {
       isTyping = false;
-      focusInput();
       textAreaRef.current.value = roomsInput.getMessage(roomId);
       setAttachment(roomsInput.getAttachment(roomId));
       setReplyTo(roomsInput.getReplyTo(roomId));

src/app/organisms/welcome/Welcome.scss

@@ -3,6 +3,7 @@
 .app-welcome {
   width: 100%;
   height: 100%;
+  background-color: var(--bg-surface);
 
   & > div {
     @extend .cp-fx__column--c-c;

src/app/templates/client/Client.scss

@@ -9,7 +9,6 @@
 .room__wrapper {
   flex: 1;
   min-width: 0;
-  background-color: var(--bg-surface);
 }
 
 

src/client/action/navigation.js

@@ -23,6 +23,13 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
+export function toggleRoomSettings(roomId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
+    roomId,
+  });
+}
+
 export function openInviteList() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_LIST,

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) {
@@ -11,12 +11,24 @@ function listenKeyboard(event) {
       openSearch();
     }
   }
+
   if (!event.ctrlKey && !event.altKey) {
+    if (event.keyCode === 38 && navigation.isRoomSettings) {
+      // close room settings
+      toggleRoomSettings();
+      return;
+    }
+    if (event.keyCode === 40 && !navigation.isRoomSettings) {
+      // open room settings
+      toggleRoomSettings();
+      return;
+    }
+
     if (navigation.isRawModalVisible) return;
     if (['text', 'textarea'].includes(document.activeElement.type)) {
       return;
     }
-    if (event.keyCode < 48
+    if ((event.keyCode !== 8 && event.keyCode < 48)
       || (event.keyCode >= 91 && event.keyCode <= 93)
       || (event.keyCode >= 112 && event.keyCode <= 183)) {
       return;

src/client/state/cons.js

@@ -30,7 +30,7 @@ const cons = {
       SELECT_TAB: 'SELECT_TAB',
       SELECT_SPACE: 'SELECT_SPACE',
       SELECT_ROOM: 'SELECT_ROOM',
-      TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
+      TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS',
       OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
       OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
       OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
@@ -65,7 +65,7 @@ const cons = {
       TAB_SELECTED: 'TAB_SELECTED',
       SPACE_SELECTED: 'SPACE_SELECTED',
       ROOM_SELECTED: 'ROOM_SELECTED',
-      PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
+      ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
       INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
       PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
       CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',

src/client/state/navigation.js

@@ -11,6 +11,7 @@ class Navigation extends EventEmitter {
     this.selectedSpacePath = [cons.tabs.HOME];
 
     this.selectedRoomId = null;
+    this.isRoomSettings = false;
     this.recentRooms = [];
 
     this.isRawModalVisible = false;
@@ -77,6 +78,10 @@ class Navigation extends EventEmitter {
         this.removeRecentRoom(prevSelectedRoomId);
         this.addRecentRoom(prevSelectedRoomId);
         this.removeRecentRoom(this.selectedRoomId);
+        if (this.isRoomSettings) {
+          this.isRoomSettings = !this.isRoomSettings;
+          this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+        }
         this.emit(
           cons.events.navigation.ROOM_SELECTED,
           this.selectedRoomId,
@@ -84,6 +89,10 @@ class Navigation extends EventEmitter {
           action.eventId,
         );
       },
+      [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
+        this.isRoomSettings = !this.isRoomSettings;
+        this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+      },
       [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);
       },

src/index.scss

@@ -68,6 +68,7 @@
 
 
   /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-high: #272727;
   --ic-surface-normal: #626262;
   --ic-surface-low: #7c7c7c;
   --ic-primary-normal: #ffffff;
@@ -177,6 +178,8 @@
 
   /* transition curves */
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
+  --fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
+  --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
   
   --font-primary: 'Roboto', sans-serif;
   --font-secondary: 'Roboto', sans-serif;
@@ -218,6 +221,7 @@
 
 
   /* text color | --tc-[background type]-[priority]: value */
+  --ic-surface-high: rgb(255, 255, 255);;
   --tc-surface-high: rgba(255, 255, 255, 98%);
   --tc-surface-normal: rgba(255, 255, 255, 94%);
   --tc-surface-normal-low: rgba(255, 255, 255, 60%);
@@ -299,7 +303,8 @@
 
 
   /* system icons | --ic-[background type]-[priority]: value */
-  --ic-surface-normal: rgb(255, 251, 222, 84%);
+  --ic-surface-high: rgb(255, 251, 222);
+  --ic-surface-normal: rgba(255, 251, 222, 84%);
   --ic-surface-low: rgba(255, 251, 222, 64%);
 }