From ef772986cf1b7acd4d7dfd0ae0b6b1620fbadb52 Mon Sep 17 00:00:00 2001 From: cha0s Date: Sat, 25 Jul 2020 02:34:54 -0500 Subject: [PATCH] flow: think I'm finally happy with mobile --- src/client/bar.jsx | 3 + src/client/bar.scss | 9 +-- src/client/chat--center.jsx | 112 +++++++++-------------------------- src/client/chat--center.scss | 18 +++++- src/client/chat--left.jsx | 51 +++++++++++++++- src/client/chat--left.scss | 13 ++-- src/client/chat--right.jsx | 21 +++++-- src/client/chat--right.scss | 2 +- src/client/chat.jsx | 37 +++++++++--- src/client/chat.scss | 5 +- 10 files changed, 155 insertions(+), 116 deletions(-) diff --git a/src/client/bar.jsx b/src/client/bar.jsx index 987b471..a2af4a4 100644 --- a/src/client/bar.jsx +++ b/src/client/bar.jsx @@ -12,6 +12,9 @@ export default function Bar(props) { className, onActive, } = props; + if (buttons.length < 2) { + return null; + } return (
channelUsersSelector(state, channel)); - const id = useSelector(idSelector); - const pendingFriendship = useSelector(pendingFriendshipSelector); - const unreadChannel = useSelector(unreadChannelSelector); - const unreadUser = useSelector(unreadUserSelector); - const leftButtons = [ - { - count: unreadChannel, - icon: '💬', - label: 'Chat', - }, - { - count: unreadUser + pendingFriendship.filter(({addeeId}) => addeeId === id).length, - icon: '😁', - label: 'Friends', - }, - ]; - const rightButtons = [] - .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : []) - .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []); return (
- -
- reddi - ? -
- {' '} -
- chat - ! -
- - )} - buttons={leftButtons} - className="bar--left" - isHorizontal - onActive={(active, i) => { - if (i === active) { - dispatch(toggleLeftIsOpen()); - } - dispatch(setLeftActiveIndex(active)); - }} - /> +
chatting in {channel}
- { - if (i === active) { - dispatch(toggleRightIsOpen()); - } - dispatch(setRightActiveIndex(active)); - }} - /> +
); } -ChatCenter.propTypes = {}; +ChatCenter.propTypes = { + onButton: PropTypes.func.isRequired, +}; diff --git a/src/client/chat--center.scss b/src/client/chat--center.scss index 6ab88b2..98ba7b5 100644 --- a/src/client/chat--center.scss +++ b/src/client/chat--center.scss @@ -5,7 +5,7 @@ flex-grow: 1; width: 100%; z-index: 100; - @include breakpoint(tablet) { + @include breakpoint(desktop) { width: auto; } } @@ -18,6 +18,22 @@ position: relative; } +.center__headerButton { + border: none; + height: 3em; + width: 3em; + @include breakpoint(desktop) { + display: none; + } +} + +.button--right { + padding: 1em; + path { + fill: white; + } +} + .center__headerChannel { align-self: center; display: flex; diff --git a/src/client/chat--left.jsx b/src/client/chat--left.jsx index c8bf751..10018f5 100644 --- a/src/client/chat--left.jsx +++ b/src/client/chat--left.jsx @@ -2,26 +2,73 @@ import './chat--left.scss'; import classnames from 'classnames'; import React from 'react'; -import {useSelector} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import { leftActiveIndexSelector, leftIsOpenSelector, + setLeftActiveIndex, } from '~/common/state/app'; +import { + idSelector, + pendingFriendshipSelector, + unreadChannelSelector, + unreadUserSelector, +} from '~/common/state/user'; -import useBreakpoints from './hooks/useBreakpoints'; +import useBreakpoints from '~/client/hooks/useBreakpoints'; + +import Bar from './bar'; import ChatLeftFriends from './chat--leftFriends'; import ChatLeftRooms from './chat--leftRooms'; export default function ChatLeft() { + const dispatch = useDispatch(); + const leftActiveIndex = useSelector(leftActiveIndexSelector); const active = useSelector(leftActiveIndexSelector); const isOpen = useSelector(leftIsOpenSelector); const {tablet} = useBreakpoints(); + const id = useSelector(idSelector); + const pendingFriendship = useSelector(pendingFriendshipSelector); + const unreadChannel = useSelector(unreadChannelSelector); + const unreadUser = useSelector(unreadUserSelector); const showsAsOpen = isOpen || !tablet; + const leftButtons = [ + { + count: unreadChannel, + icon: '💬', + label: 'Chat', + }, + { + count: unreadUser + pendingFriendship.filter(({addeeId}) => addeeId === id).length, + icon: '😁', + label: 'Friends', + }, + ]; return (
+ +
+ reddi + ? +
+ {' '} +
+ chat + ! +
+ + )} + buttons={leftButtons} + className="bar--left" + isHorizontal + onActive={(active) => dispatch(setLeftActiveIndex(active))} + /> {0 === active && } {1 === active && }
diff --git a/src/client/chat--left.scss b/src/client/chat--left.scss index 233ac53..f73268d 100644 --- a/src/client/chat--left.scss +++ b/src/client/chat--left.scss @@ -5,16 +5,17 @@ background-color: #373737; flex-shrink: 0; transform: translateX(-100%); - transition: 0.2s width; - @include breakpoint(tablet) { + transition: width 0.2s; + width: 25em; + @include breakpoint(desktop) { transform: none; } } -.left.open { - width: 25em; -} - .bar__brandItem .muted { opacity: 0.5; } + +.left .bar__buttonItem:last-child { + padding-right: 0.5em; +} diff --git a/src/client/chat--right.jsx b/src/client/chat--right.jsx index 4e56fe0..2b87b9e 100644 --- a/src/client/chat--right.jsx +++ b/src/client/chat--right.jsx @@ -2,22 +2,28 @@ import './chat--right.scss'; import classnames from 'classnames'; import React from 'react'; -import {useSelector} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import { rightActiveIndexSelector, rightIsOpenSelector, + setRightActiveIndex, } from '~/common/state/app'; import {channelUsersSelector} from '~/common/state/chat'; -import {blockedSelector} from '~/common/state/user'; +import { + blockedSelector, +} from '~/common/state/user'; import useBreakpoints from './hooks/useBreakpoints'; import useChannel from '~/client/hooks/useChannel'; +import Bar from './bar'; import ChatRightBlocked from './chat--rightBlocked'; import ChatRightUsers from './chat--rightUsers'; export default function ChatRight() { + const dispatch = useDispatch(); + const rightActiveIndex = useSelector(rightActiveIndexSelector); const active = useSelector(rightActiveIndexSelector); const channel = useChannel(); const blockedIds = useSelector(blockedSelector); @@ -25,16 +31,23 @@ export default function ChatRight() { const isOpen = useSelector(rightIsOpenSelector); const {tablet} = useBreakpoints(); const showsAsOpen = isOpen || !tablet; - const buttons = [] + const rightButtons = [] .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : []) .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []); - if (0 === buttons.length) { + if (0 === rightButtons.length) { return null; } return (
+ dispatch(setRightActiveIndex(active))} + /> {0 === active && channelUsers.length > 0 && } {1 === active && blockedIds.length > 0 && }
diff --git a/src/client/chat--right.scss b/src/client/chat--right.scss index 3db1893..2ee8e1c 100644 --- a/src/client/chat--right.scss +++ b/src/client/chat--right.scss @@ -6,7 +6,7 @@ right: 0; transform: translateX(100%); transition: 0.2s width; - @include breakpoint(tablet) { + @include breakpoint(desktop) { transform: none; } } diff --git a/src/client/chat.jsx b/src/client/chat.jsx index bcdb71b..e32f92e 100644 --- a/src/client/chat.jsx +++ b/src/client/chat.jsx @@ -19,7 +19,7 @@ import ChatRight from './chat--right'; export default function Chat() { const dispatch = useDispatch(); const ref = useRef(null); - const {tablet} = useBreakpoints(); + const {desktop} = useBreakpoints(); const user = useSelector(userSelector); const channel = useChannel(); const hasChannel = !!useSelector((state) => channelSelector(state, channel)); @@ -45,10 +45,18 @@ export default function Chat() { const abstract = { down: ({pageX}) => { if (ref.current) { + const left = parseInt(ref.current.style.left || 0, 10); + const windowWidth = window.innerWidth; + const max = Math.min(windowWidth - (4 * 16), 25 * 16); origin = { - left: parseInt(ref.current.style.left || 0, 10), + left, point: pageX, }; + if ( + (left === -max && pageX < windowWidth - max) + || (left === max && pageX > max)) { + ref.current.style.left = '0'; + } } }, move: ({pageX}) => { @@ -56,13 +64,13 @@ export default function Chat() { ref.current.classList.add('moving'); const offset = pageX - origin.point + origin.left; const snapped = Math.abs(offset) < 64 ? 0 : offset; - const max = Math.min(window.innerWidth - 32, 25 * 16); + const max = Math.min(window.innerWidth - (4 * 16), 25 * 16); ref.current.style.left = `${Math.max(-max, Math.min(max, snapped))}px`; } }, up: () => { const left = parseInt(ref.current.style.left, 10); - const max = Math.min(window.innerWidth - 32, 25 * 16); + const max = Math.min(window.innerWidth - (4 * 16), 25 * 16); if (left >= max / 2) { ref.current.style.left = `${max}px`; } @@ -70,7 +78,7 @@ export default function Chat() { ref.current.style.left = `${-max}px`; } else { - ref.current.removeAttribute('style'); + ref.current.style.left = '0'; } origin = undefined; ref.current.classList.remove('moving'); @@ -90,18 +98,29 @@ export default function Chat() { abstract.up(event.touches[0]); }, }; - if (tablet && ref.current) { - ref.current.removeAttribute('style'); + if (desktop && ref.current) { + ref.current.style.left = '0'; } return (
{!user.isAnonymous && } - + { + const max = Math.min(window.innerWidth - (4 * 16), 25 * 16); + const offset = parseInt(ref.current.style.left || '0px', 10); + if ('right' === type) { + ref.current.style.left = offset > -(max / 2) ? `-${max}px` : '0'; + } + else { + ref.current.style.left = offset < (max / 2) ? `${max}px` : '0'; + } + }} + /> {!user.isAnonymous && }
); diff --git a/src/client/chat.scss b/src/client/chat.scss index 79addcf..ca0091e 100644 --- a/src/client/chat.scss +++ b/src/client/chat.scss @@ -3,6 +3,7 @@ .chat { display: flex; height: 100%; + left: 0; position: absolute; width: 100%; &:not(.moving) { @@ -16,9 +17,9 @@ width: 0; overflow: hidden; &:not(.center) { - max-width: calc(100% - 2em); + max-width: calc(100% - 4em); } - @include breakpoint(tablet) { + @include breakpoint(desktop) { position: static; } }