diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx index 61e7eeb2..c2d760dc 100644 --- a/src/components/common/user/UserShort.tsx +++ b/src/components/common/user/UserShort.tsx @@ -4,6 +4,7 @@ import { User } from "revolt.js/dist/maps/Users"; import { Text } from "preact-i18n"; +import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useClient } from "../../../context/revoltjs/RevoltClient"; import UserIcon from "./UserIcon"; @@ -67,14 +68,23 @@ export default function UserShort({ size?: number; showServerIdentity?: boolean; }) { + const { openScreen } = useIntermediate(); + const openProfile = () => + user && openScreen({ id: "profile", user_id: user._id }); + return ( <> - + ); } diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx new file mode 100644 index 00000000..f8023f16 --- /dev/null +++ b/src/components/navigation/right/Search.tsx @@ -0,0 +1,12 @@ +/*export const SearchSidebar = observer( + ({ channel }: { channel: Channel }) => { + const keys = [...channel.recipient_ids!]; + const entries = useEntries(channel, keys); + + return ( + + + + ); + }, +);*/ diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 048e8b12..24c2cc29 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -1,5 +1,8 @@ +import { Menu } from "@styled-icons/boxicons-regular"; import styled, { css } from "styled-components"; +import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; + interface Props { borders?: boolean; background?: boolean; @@ -60,3 +63,19 @@ export default styled.div` border-start-start-radius: 8px; `} `; + +export function HamburgerAction() { + if (!isTouchscreenDevice) return null; + + function openSidebar() { + document + .querySelector("#app > div > div") + ?.scrollTo({ behavior: "smooth", left: 0 }); + } + + return ( +
+ +
+ ); +} diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index 819dddd9..814460a3 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -130,7 +130,20 @@ export const UserProfile = observer( `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`, }}>
- + + user.avatar && + openScreen({ + id: "image_viewer", + attachment: user.avatar, + }) + } + />
maxFileSize) { return tooLarge(); } diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index 00653181..0559cc4d 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -16,7 +16,7 @@ import MessageBox from "../../components/common/messaging/MessageBox"; import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom"; import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator"; -import MemberSidebar from "../../components/navigation/right/MemberSidebar"; +import RightSidebar from "../../components/navigation/RightSidebar"; import ChannelHeader from "./ChannelHeader"; import { MessageArea } from "./messaging/MessageArea"; import VoiceHeader from "./voice/VoiceHeader"; @@ -93,9 +93,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => { - {!isTouchscreenDevice && showMembers && ( - - )} + {!isTouchscreenDevice && showMembers && } ); diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index ae2c1881..72d62b49 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -12,7 +12,7 @@ import { getChannelName } from "../../context/revoltjs/util"; import { useStatusColour } from "../../components/common/user/UserIcon"; import UserStatus from "../../components/common/user/UserStatus"; -import Header from "../../components/ui/Header"; +import Header, { HamburgerAction } from "../../components/ui/Header"; import Markdown from "../../components/markdown/Markdown"; import HeaderActions from "./actions/HeaderActions"; @@ -87,11 +87,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => { return (
- {isTouchscreenDevice && ( -
- -
- )} + {icon} {name} diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index fa304598..3a9bb1ab 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -8,6 +8,7 @@ import { } from "@styled-icons/boxicons-solid"; import { useHistory } from "react-router-dom"; +import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; @@ -24,6 +25,18 @@ export default function HeaderActions({ const { openScreen } = useIntermediate(); const history = useHistory(); + function openSidebar() { + if (isTouchscreenDevice) { + const panels = document.querySelector("#app > div > div"); + panels?.scrollTo({ + behavior: "smooth", + left: panels.clientWidth * 3, + }); + } else { + toggleSidebar?.(); + } + } + return ( <> @@ -54,7 +67,7 @@ export default function HeaderActions({ {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && ( - + )}