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>
This commit is contained in:
Laurenz 2022-04-24 11:23:10 +01:00 committed by GitHub
parent 989ab5a432
commit dc8e6e53c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 167 additions and 17 deletions

View file

@ -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;

View file

@ -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));
}
}

View file

@ -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();
}
};

View file

@ -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;

View file

@ -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);

View file

@ -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>
);
}

View file

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

View file

@ -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}

View file

@ -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,

View file

@ -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"

View file

@ -1,5 +1,6 @@
@use '../../partials/flex';
@use '../../partials/dir';
@use '../../partials/screen';
.room-header__btn {
min-width: 0;
@ -25,3 +26,17 @@
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;
}
}

View file

@ -1,5 +1,6 @@
@use '../../partials/flex';
@use '../../partials/dir';
@use '../../partials/screen';
.settings-window {
& .pw {
@ -87,3 +88,16 @@
}
}
}
.settings-window {
@include screen.smallerThan(mobileBreakpoint) {
.pw__drawer p, .pw__drawer .header h4 {
display: none;
width: 0;
}
.pw__drawer {
width: fit-content;
}
}
}

View file

@ -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;
}
}
}

View file

@ -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 />

View file

@ -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;

View file

@ -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,

View file

@ -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: {

View file

@ -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,