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

View file

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

View file

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

View file

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { twemojify } from '../../../util/twemojify'; import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix'; 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 * as roomActions from '../../../client/action/room';
import { markAsRead } from '../../../client/action/notifications'; 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?')) { if (confirm('Are you sure that you want to leave this room?')) {
roomActions.leave(roomId); roomActions.leave(roomId);
afterOptionSelect(); afterOptionSelect();
openNavigation();
} }
}; };

View file

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

View file

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

View file

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

View file

@ -1,4 +1,5 @@
@use '../../partials/flex'; @use '../../partials/flex';
@use '../../partials/screen';
.room { .room {
@extend .cp-fx__row; @extend .cp-fx__row;
@ -9,4 +10,10 @@
position: relative; position: relative;
overflow: hidden; 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 initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; 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 * as roomActions from '../../../client/action/room';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
@ -88,6 +88,7 @@ function GeneralSettings({ roomId }) {
onClick={() => { onClick={() => {
if (confirm('Are you sure that you want to leave this room?')) { if (confirm('Are you sure that you want to leave this room?')) {
roomActions.leave(roomId); roomActions.leave(roomId);
openNavigation();
} }
}} }}
iconSrc={LeaveArrowIC} iconSrc={LeaveArrowIC}

View file

@ -14,6 +14,7 @@ import {
openCreateRoom, openCreateRoom,
openPublicRooms, openPublicRooms,
openInviteUser, openInviteUser,
openNavigation,
} from '../../../client/action/navigation'; } from '../../../client/action/navigation';
import { getEmojiForCompletion } from '../emoji-board/custom-emoji'; import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
import AsyncSearch from '../../../util/AsyncSearch'; import AsyncSearch from '../../../util/AsyncSearch';
@ -44,7 +45,10 @@ const commands = [{
}, { }, {
name: 'leave', name: 'leave',
description: 'Leave current room', description: 'Leave current room',
exe: (roomId) => roomActions.leave(roomId), exe: (roomId) => {
roomActions.leave(roomId);
openNavigation();
},
}, { }, {
name: 'invite', name: 'invite',
isOptions: true, 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 PropTypes from 'prop-types';
import './RoomViewHeader.scss'; 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 SearchIC from '../../../../public/res/ic/outlined/search.svg';
import UserIC from '../../../../public/res/ic/outlined/user.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.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'; import { useForceUpdate } from '../../hooks/useForceUpdate';
@ -73,6 +74,12 @@ function RoomViewHeader({ roomId }) {
return ( return (
<Header> <Header>
<IconButton
src={BackArrowIC}
className="room-header__back-btn"
tooltip="Return to navigation"
onClick={() => navigation.emit(cons.events.navigation.NAVIGATION_OPENED)}
/>
<button <button
ref={roomHeaderBtnRef} ref={roomHeaderBtnRef}
className="room-header__btn" className="room-header__btn"
@ -87,7 +94,7 @@ function RoomViewHeader({ roomId }) {
<RawIcon src={ChevronBottomIC} /> <RawIcon src={ChevronBottomIC} />
</button> </button>
<IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} /> <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 <IconButton
onClick={openRoomOptions} onClick={openRoomOptions}
tooltip="Options" tooltip="Options"

View file

@ -1,5 +1,6 @@
@use '../../partials/flex'; @use '../../partials/flex';
@use '../../partials/dir'; @use '../../partials/dir';
@use '../../partials/screen';
.room-header__btn { .room-header__btn {
min-width: 0; min-width: 0;
@ -24,4 +25,18 @@
box-shadow: var(--bs-surface-outline); box-shadow: var(--bs-surface-outline);
outline: none; 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/flex';
@use '../../partials/dir'; @use '../../partials/dir';
@use '../../partials/screen';
.settings-window { .settings-window {
& .pw { & .pw {
@ -86,4 +87,17 @@
margin: var(--sp-extra-tight) 0; 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;
}
}
}

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 './Client.scss';
import { initHotkeys } from '../../../client/event/hotkeys'; import { initHotkeys } from '../../../client/event/hotkeys';
@ -19,11 +19,45 @@ import navigation from '../../../client/state/navigation';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import DragDrop from '../../organisms/drag-drop/DragDrop'; import DragDrop from '../../organisms/drag-drop/DragDrop';
const classNameHidden = 'client__item-hidden';
function Client() { function Client() {
const [isLoading, changeLoading] = useState(true); const [isLoading, changeLoading] = useState(true);
const [loadingMsg, setLoadingMsg] = useState('Heating up'); const [loadingMsg, setLoadingMsg] = useState('Heating up');
const [dragCounter, setDragCounter] = useState(0); 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(() => { useEffect(() => {
let counter = 0; let counter = 0;
const iId = setInterval(() => { const iId = setInterval(() => {
@ -64,6 +98,7 @@ function Client() {
); );
} }
// #region drag and drop
function dragContainsFiles(e) { function dragContainsFiles(e) {
if (!e.dataTransfer.types) return false; if (!e.dataTransfer.types) return false;
@ -119,6 +154,7 @@ function Client() {
initMatrix.roomsInput.setAttachment(roomId, file); initMatrix.roomsInput.setAttachment(roomId, file);
initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file); initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
} }
// #endregion
return ( return (
<div <div
@ -128,10 +164,10 @@ function Client() {
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
> >
<div className="navigation__wrapper"> <div className="navigation__wrapper" ref={navWrapperRef}>
<Navigation /> <Navigation />
</div> </div>
<div className="room__wrapper"> <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
<Room /> <Room />
</div> </div>
<Windows /> <Windows />

View file

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

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) { export function openSpaceSettings(roomId, tabText) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SPACE_SETTINGS, type: cons.actions.navigation.OPEN_SPACE_SETTINGS,

View file

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

View file

@ -131,6 +131,9 @@ class Navigation extends EventEmitter {
[cons.actions.navigation.OPEN_SETTINGS]: () => { [cons.actions.navigation.OPEN_SETTINGS]: () => {
this.emit(cons.events.navigation.SETTINGS_OPENED, action.tabText); 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]: () => { [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
this.emit( this.emit(
cons.events.navigation.EMOJIBOARD_OPENED, cons.events.navigation.EMOJIBOARD_OPENED,