Adapt to different device widths (#401)

* Now adapting to small screen sizes, needs improvements

* Fix that site only gets into mobile mode when resized

* - Added navigation event triggered if user requests to return to navigation on compact screens
- People drawer wont be shown on compact screens
  - Still accessible using settings
  - would be duplicated UI
- mobileSize is now compactSize

* Put threshold for collapsing the base UI in a shared file

* Switch to a more simple solution using CSS media queries over JS
- Move back button to the left a bit so it doesnt get in touch with room icon

* switch from component-individual-thresholds to device-type thresholds
- <750px: Mobile
- <900px: Tablet
- >900px: Desktop

* Make Settings drawer component collapse on mobile

* Fix EmojiBoard not showing up and messing up UI when screen is smaller than 360px

* Improve code quality; allow passing classNames to IconButton
- remove unnessesary div wrappers
- use dir.side where appropriate
- rename threshold and its mixins to more descriptive names
- Rename "OPEN_NAVIGATION" to "NAVIGATION_OPENED"

* - follow BEM methology
- remove ROOM_SELECTED listener
- rename NAVIGATION_OPENED to OPEN_NAVIGATION where appropriate
- this does NOT changes that ref should be used for changing visability

* Use ref to change visability to avoid re-rendering

* Use ref to change visability to avoid re-rendering

* Fix that room component is not hidden by default.
This resulted in a broken view when application is viewed in mobile size without having selected a room since loading.

* fix: leaving a room should bring one back to navigation

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>

src/app/atoms/button/IconButton.jsx

@@ -11,11 +11,12 @@ const IconButton = React.forwardRef(({
   variant, size, type,
   tooltip, tooltipPlacement, src,
   onClick, tabIndex, disabled, isImage,
+  className,
 }, ref) => {
   const btn = (
     <button
       ref={ref}
-      className={`ic-btn ic-btn-${variant}`}
+      className={`ic-btn ic-btn-${variant} ${className}`}
       onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
       onClick={onClick}
       // eslint-disable-next-line react/button-has-type
@@ -47,6 +48,7 @@ IconButton.defaultProps = {
   tabIndex: 0,
   disabled: false,
   isImage: false,
+  className: '',
 };
 
 IconButton.propTypes = {
@@ -60,6 +62,7 @@ IconButton.propTypes = {
   tabIndex: PropTypes.number,
   disabled: PropTypes.bool,
   isImage: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default IconButton;

src/app/atoms/header/Header.scss

@@ -1,5 +1,6 @@
 @use '../../partials/text';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .header {
   @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@@ -40,4 +41,8 @@
       display: -webkit-box;
     }
   }
+
+  @include screen.smallerThan(mobileBreakpoint) {
+    @include dir.side(padding, calc(var(--sp-normal) - 10px), var(--sp-extra-tight));
+  }
 }

src/app/molecules/popup-window/PopupWindow.scss

@@ -72,4 +72,4 @@
       @include dir.side(margin, 0, var(--sp-tight));
     }
   }
-}
+}

src/app/molecules/room-options/RoomOptions.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
-import { openInviteUser } from '../../../client/action/navigation';
+import { openInviteUser, openNavigation } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 import { markAsRead } from '../../../client/action/notifications';
 
@@ -33,6 +33,7 @@ function RoomOptions({ roomId, afterOptionSelect }) {
     if (confirm('Are you sure that you want to leave this room?')) {
       roomActions.leave(roomId);
       afterOptionSelect();
+      openNavigation();
     }
   };
 

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -6,6 +6,8 @@
   --emoji-board-height: 390px;
   --emoji-board-width: 286px;
   display: flex;
+  max-width: 90vw;
+  max-height: 90vh;
   
   &__content {
     @extend .cp-fx__item-one;

src/app/organisms/invite-list/InviteList.jsx

@@ -5,7 +5,7 @@ import './InviteList.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectTab } from '../../../client/action/navigation';
+import { selectRoom, selectTab, openNavigation } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -28,6 +28,7 @@ function InviteList({ isOpen, onRequestClose }) {
     procInvite.add(roomId);
     changeProcInvite(new Set(Array.from(procInvite)));
     roomActions.leave(roomId, isDM);
+    openNavigation();
   }
   function updateInviteList(roomId) {
     if (procInvite.has(roomId)) procInvite.delete(roomId);

src/app/organisms/room/Room.jsx

@@ -3,9 +3,9 @@ import './Room.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
 import settings from '../../../client/state/settings';
 import RoomTimeline from '../../../client/state/RoomTimeline';
+import navigation from '../../../client/state/navigation';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
@@ -61,7 +61,7 @@ function Room() {
         <RoomSettings roomId={roomTimeline.roomId} />
         <RoomView roomTimeline={roomTimeline} eventId={eventId} />
       </div>
-      { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
+      {isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
     </div>
   );
 }

src/app/organisms/room/Room.scss

@@ -1,4 +1,5 @@
 @use '../../partials/flex';
+@use '../../partials/screen';
 
 .room {
   @extend .cp-fx__row;
@@ -9,4 +10,10 @@
     position: relative;
     overflow: hidden;
   }
-}
+}
+
+.room .people-drawer {
+  @include screen.smallerThan(tabletBreakpoint) {
+    display: none;
+  }
+}

src/app/organisms/room/RoomSettings.jsx

@@ -7,7 +7,7 @@ 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, toggleRoomSettings } from '../../../client/action/navigation';
+import { openInviteUser, toggleRoomSettings, openNavigation } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
@@ -88,6 +88,7 @@ function GeneralSettings({ roomId }) {
           onClick={() => {
             if (confirm('Are you sure that you want to leave this room?')) {
               roomActions.leave(roomId);
+              openNavigation();
             }
           }}
           iconSrc={LeaveArrowIC}

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -14,6 +14,7 @@ import {
   openCreateRoom,
   openPublicRooms,
   openInviteUser,
+  openNavigation,
 } from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
@@ -44,7 +45,10 @@ const commands = [{
 }, {
   name: 'leave',
   description: 'Leave current room',
-  exe: (roomId) => roomActions.leave(roomId),
+  exe: (roomId) => {
+    roomActions.leave(roomId);
+    openNavigation();
+  },
 }, {
   name: 'invite',
   isOptions: true,

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import './RoomViewHeader.scss';
 
@@ -25,6 +25,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 
@@ -73,6 +74,12 @@ function RoomViewHeader({ roomId }) {
 
   return (
     <Header>
+      <IconButton
+        src={BackArrowIC}
+        className="room-header__back-btn"
+        tooltip="Return to navigation"
+        onClick={() => navigation.emit(cons.events.navigation.NAVIGATION_OPENED)}
+      />
       <button
         ref={roomHeaderBtnRef}
         className="room-header__btn"
@@ -87,7 +94,7 @@ function RoomViewHeader({ roomId }) {
         <RawIcon src={ChevronBottomIC} />
       </button>
       <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
-      <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
+      <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton
         onClick={openRoomOptions}
         tooltip="Options"

src/app/organisms/room/RoomViewHeader.scss

@@ -1,5 +1,6 @@
 @use '../../partials/flex';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .room-header__btn {
   min-width: 0;
@@ -24,4 +25,18 @@
     box-shadow: var(--bs-surface-outline);
     outline: none;
   }
-}
+}
+
+.header .room-header__drawer-btn {
+  @include screen.smallerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
+
+.header .room-header__back-btn {
+  @include dir.side(margin, 0, 5px);
+
+  @include screen.biggerThan(mobileBreakpoint) {
+    display: none;
+  }
+}

src/app/organisms/settings/Settings.scss

@@ -1,5 +1,6 @@
 @use '../../partials/flex';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .settings-window {
   & .pw {
@@ -86,4 +87,17 @@
       margin: var(--sp-extra-tight) 0;
     }
   }
-}
+}
+
+.settings-window {
+  @include screen.smallerThan(mobileBreakpoint) {
+    .pw__drawer p, .pw__drawer .header h4 {
+      display: none;
+      width: 0;
+    }
+
+    .pw__drawer {
+      width: fit-content;
+    }
+  }
+}

src/app/partials/screen.scss

@@ -0,0 +1,28 @@
+
+$breakpoint-tablet: 900px;
+$breakpoint-mobile: 750px;
+
+@mixin smallerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (max-width: $breakpoint-mobile) {
+      @content;
+    }
+  }
+  @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (max-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}
+
+@mixin biggerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (min-width: $breakpoint-mobile) {
+      @content;
+    }
+  } @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (min-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}

src/app/templates/client/Client.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './Client.scss';
 
 import { initHotkeys } from '../../../client/event/hotkeys';
@@ -19,11 +19,45 @@ import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
+const classNameHidden = 'client__item-hidden';
+
 function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
 
+  /**
+   * @type {React.MutableRefObject<HTMLDivElement>}
+   */
+  const navWrapperRef = useRef(null);
+  /**
+   * @type {React.MutableRefObject<HTMLDivElement>}
+   */
+  const roomWrapperRef = useRef(null);
+
+  // #region Liston on events for compact screen sizes
+  function onRoomSelected() {
+    // setActiveView(viewPossibilities.room);
+    navWrapperRef.current.classList.add(classNameHidden);
+    roomWrapperRef.current.classList.remove(classNameHidden);
+  }
+  function onNavigationSelected() {
+    // setActiveView(viewPossibilities.nav);
+    navWrapperRef.current.classList.remove(classNameHidden);
+    roomWrapperRef.current.classList.add(classNameHidden);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
+    navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+
+    return (() => {
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
+      navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    });
+  }, []);
+  // #endregion
+
   useEffect(() => {
     let counter = 0;
     const iId = setInterval(() => {
@@ -64,6 +98,7 @@ function Client() {
     );
   }
 
+  // #region drag and drop
   function dragContainsFiles(e) {
     if (!e.dataTransfer.types) return false;
 
@@ -119,6 +154,7 @@ function Client() {
     initMatrix.roomsInput.setAttachment(roomId, file);
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
+  // #endregion
 
   return (
     <div
@@ -128,10 +164,10 @@ function Client() {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="navigation__wrapper">
+      <div className="navigation__wrapper" ref={navWrapperRef}>
         <Navigation />
       </div>
-      <div className="room__wrapper">
+      <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
         <Room />
       </div>
       <Windows />

src/app/templates/client/Client.scss

@@ -1,3 +1,5 @@
+@use '../../partials/screen';
+
 .client-container {
   display: flex;
   height: 100%;
@@ -5,12 +7,22 @@
 
 .navigation__wrapper {
   width: var(--navigation-width);
+  
+  @include screen.smallerThan(mobileBreakpoint) {
+    width: 100%;
+  }
 }
+
 .room__wrapper {
   flex: 1;
   min-width: 0;
 }
 
+@include screen.smallerThan(mobileBreakpoint) {
+  .client__item-hidden {
+    display: none;
+  }
+}
 
 .loading-display {
   position: absolute;
@@ -41,4 +53,4 @@
   .text {
     color: var(--tc-link);
   }
-}
+}

src/client/action/navigation.js

@@ -23,6 +23,15 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
+/**
+ * Open navigation on compact screen sizes
+ */
+export function openNavigation() {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_NAVIGATION,
+  });
+}
+
 export function openSpaceSettings(roomId, tabText) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_SPACE_SETTINGS,

src/client/state/cons.js

@@ -47,6 +47,7 @@ const cons = {
       CLICK_REPLY_TO: 'CLICK_REPLY_TO',
       OPEN_SEARCH: 'OPEN_SEARCH',
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_NAVIGATION: 'OPEN_NAVIGATION',
       OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
     },
     room: {
@@ -93,6 +94,7 @@ const cons = {
       REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
       SEARCH_OPENED: 'SEARCH_OPENED',
       REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      NAVIGATION_OPENED: 'NAVIGATION_OPENED',
       REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
     },
     roomList: {

src/client/state/navigation.js

@@ -131,6 +131,9 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.OPEN_SETTINGS]: () => {
         this.emit(cons.events.navigation.SETTINGS_OPENED, action.tabText);
       },
+      [cons.actions.navigation.OPEN_NAVIGATION]: () => {
+        this.emit(cons.events.navigation.NAVIGATION_OPENED);
+      },
       [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
         this.emit(
           cons.events.navigation.EMOJIBOARD_OPENED,