Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1099 additions and 509 deletions
src/components/common/messaging/bars/ReplyBar.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n";
import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
import { File, XCircle } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { SYSTEM_USER_ID } from "revolt.js";
import styled from "styled-components";
import UserShort from "../../user/UserShort";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import { Text } from "preact-i18n";
import { StateUpdater, useEffect } from "preact/hooks";
import { ReplyBase } from "../attachments/MessageReply";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { At, Reply as ReplyIcon, File, XCircle } from "@styled-icons/boxicons-regular";
import { Reply } from "../../../../redux/reducers/queue";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
import { ReplyBase } from "../attachments/MessageReply";
interface Props {
channel: string,
replies: Reply[],
setReplies: StateUpdater<Reply[]>
channel: string;
replies: Reply[];
setReplies: StateUpdater<Reply[]>;
}
const Base = styled.div`
display: flex;
padding: 0 22px;
height: 30px;
padding: 0 12px;
user-select: none;
align-items: center;
background: var(--message-box);
div {
> div {
flex-grow: 1;
}
margin-bottom: 0;
.actions {
gap: 12px;
display: flex;
&::before {
display: none;
}
}
.toggle {
gap: 4px;
display: flex;
font-size: 0.7em;
font-size: 12px;
align-items: center;
font-weight: 600;
}
.username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.message {
display: flex;
}
.actions {
gap: 12px;
display: flex;
}
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
}
}*/
`;
// ! FIXME: Move to global config
const MAX_REPLIES = 5;
export default function ReplyBar({ channel, replies, setReplies }: Props) {
export default observer(({ channel, replies, setReplies }: Props) => {
useEffect(() => {
return internalSubscribe("ReplyBar", "add", id => replies.length < MAX_REPLIES && !replies.find(x => x.id === id) && setReplies([ ...replies, { id, mention: false } ]));
}, [ replies ]);
return internalSubscribe(
"ReplyBar",
"add",
(id) =>
replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) &&
setReplies([...replies, { id: id as string, mention: false }]),
);
}, [replies, setReplies]);
const view = useRenderState(channel);
if (view?.type !== 'RENDER') return null;
if (view?.type !== "RENDER") return null;
const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id));
const ids = replies.map(x => x.id);
const messages = view.messages.filter(x => ids.includes(x._id));
const users = useUsers(messages.map(x => x.author));
return (
<div>
{ replies.map((reply, index) => {
let message = messages.find(x => reply.id === x._id);
{replies.map((reply, index) => {
const message = messages.find((x) => reply.id === x._id);
// ! FIXME: better solution would be to
// ! have a hook for resolving messages from
// ! have a hook for resolving messages from
// ! render state along with relevant users
// -> which then fetches any unknown messages
if (!message) return <span><Text id="app.main.channel.misc.failed_load" /></span>;
let user = users.find(x => message!.author === x?._id);
if (!user) return;
if (!message)
return (
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
);
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<UserShort user={user} size={16} />
{ message.attachments && message.attachments.length > 0 && <File size={16} /> }
<Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
<div class="username">
<UserShort user={message.author} size={16} />
</div>
<div class="message">
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
</div>
</ReplyBase>
<span class="actions">
<IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
<IconButton
onClick={() =>
setReplies(
replies.map((_, i) =>
i === index
? { ..._, mention: !_.mention }
: _,
),
)
}>
<span class="toggle">
<At size={16} /> { reply.mention ? 'ON' : 'OFF' }
<At size={16} />{" "}
{reply.mention ? "ON" : "OFF"}
</span>
</IconButton>
<IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>
<IconButton
onClick={() =>
setReplies(
replies.filter((_, i) => i !== index),
)
}>
<XCircle size={16} />
</IconButton>
</span>
</Base>
)
}) }
);
})}
</div>
)
}
);
});
src/components/common/messaging/bars/TypingIndicator.tsx
View file @ 1ac5de17
import { User } from 'revolt.js';
import { observer } from "mobx-react-lite";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { Text } from "preact-i18n";
import styled from 'styled-components';
import { useContext } from 'preact/hooks';
import { connectState } from '../../../../redux/connector';
import { useUsers } from '../../../../context/revoltjs/hooks';
import { TypingUser } from '../../../../redux/reducers/typing';
import { AppContext } from '../../../../context/revoltjs/RevoltClient';
interface Props {
typing?: TypingUser[]
channel: Channel;
}
const Base = styled.div`
......@@ -32,7 +30,7 @@ const Base = styled.div`
.avatars {
display: flex;
img {
width: 16px;
height: 16px;
......@@ -54,25 +52,36 @@ const Base = styled.div`
}
`;
export function TypingIndicator({ typing }: Props) {
if (typing && typing.length > 0) {
const client = useContext(AppContext);
const users = useUsers(typing.map(x => x.id))
.filter(x => typeof x !== 'undefined') as User[];
export default observer(({ channel }: Props) => {
const users = channel.typing.filter(
(x) =>
typeof x !== "undefined" &&
x._id !== x.client.user!._id &&
x.relationship !== RelationshipStatus.Blocked,
);
users.sort((a, b) => a._id.toUpperCase().localeCompare(b._id.toUpperCase()));
if (users.length > 0) {
users.sort((a, b) =>
a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
);
let text;
if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) {
const usersCopy = [...users];
const userlist = [...users].map((x) => x!.username);
const user = userlist.pop();
/*for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, ", ");
}*/
text = (
<Text
id="app.main.channel.typing.multiple"
fields={{
user: usersCopy.pop()?.username,
userlist: usersCopy.map(x => x.username).join(", ")
user,
userlist: userlist.join(", "),
}}
/>
);
......@@ -80,7 +89,7 @@ export function TypingIndicator({ typing }: Props) {
text = (
<Text
id="app.main.channel.typing.single"
fields={{ user: users[0].username }}
fields={{ user: users[0]!.username }}
/>
);
}
......@@ -89,9 +98,11 @@ export function TypingIndicator({ typing }: Props) {
<Base>
<div>
<div className="avatars">
{users.map(user => (
{users.map((user) => (
<img
src={client.users.getAvatarURL(user._id, { max_side: 256 }, true)}
key={user!._id}
loading="eager"
src={user!.generateAvatarURL({ max_side: 256 })}
/>
))}
</div>
......@@ -102,10 +113,4 @@ export function TypingIndicator({ typing }: Props) {
}
return null;
}
export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
return {
typing: state.typing && state.typing[props.id]
};
});
src/components/common/messaging/embed/Embed.module.scss
View file @ 1ac5de17
......@@ -3,7 +3,7 @@
iframe {
border: none;
border-radius: 4px;
border-radius: var(--border-radius);
}
&.image {
......@@ -27,8 +27,8 @@
padding: 12px;
width: fit-content;
border-radius: 4px;
background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo {
display: flex;
......@@ -80,8 +80,8 @@
overflow: hidden;
display: -webkit-box;
white-space: pre-wrap;
// -webkit-line-clamp: 6;
// -webkit-box-orient: vertical;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.footer {
......@@ -91,7 +91,43 @@
img.image {
cursor: pointer;
object-fit: contain;
border-radius: 3px;
border-radius: var(--border-radius);
}
}
}
// TODO: unified actions css (see attachment.module.scss for other actions css)
.actions {
display: grid;
grid-template:
"name open" auto
"size open" auto
/ minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.openIcon {
grid-area: open;
}
}
src/components/common/messaging/embed/Embed.tsx
View file @ 1ac5de17
import classNames from 'classnames';
import EmbedMedia from './EmbedMedia';
import { Embed as EmbedI } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import { useContext } from 'preact/hooks';
import { Embed as EmbedRJS } from "revolt.js/dist/api/objects";
import { useIntermediate } from '../../../../context/intermediate/Intermediate';
import { MessageAreaWidthContext } from '../../../../pages/channels/messaging/MessageArea';
import classNames from "classnames";
import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import EmbedMedia from "./EmbedMedia";
interface Props {
embed: EmbedRJS;
embed: EmbedI;
}
const MAX_EMBED_WIDTH = 480;
......@@ -16,61 +20,56 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
}
const client = useClient();
const { openScreen } = useIntermediate();
const maxWidth = Math.min(useContext(MessageAreaWidthContext) - CONTAINER_PADDING, MAX_EMBED_WIDTH);
const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH,
);
function calculateSize(w: number, h: number): { width: number, height: number } {
let limitingWidth = Math.min(
maxWidth,
w
);
function calculateSize(
w: number,
h: number,
): { width: number; height: number } {
const limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min(
MAX_EMBED_HEIGHT,
h
);
const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH.
let width = Math.min(
limitingWidth,
limitingHeight * (w / h)
);
const width = Math.min(limitingWidth, limitingHeight * (w / h));
let height = Math.min(
limitingHeight,
limitingWidth * (h / w)
);
const height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height };
}
switch (embed.type) {
case 'Website': {
case "Website": {
// Determine special embed size.
let mw, mh;
let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large';
const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
switch (embed.special?.type) {
case 'YouTube':
case 'Bandcamp': {
case "YouTube":
case "Bandcamp": {
mw = embed.video?.width ?? 1280;
mh = embed.video?.height ?? 720;
break;
}
case 'Twitch': {
case "Twitch": {
mw = 1280;
mh = 720;
break;
}
default: {
if (embed.image?.size === 'Preview') {
if (embed.image?.size === "Preview") {
mw = MAX_EMBED_WIDTH;
mh = Math.min(embed.image.height ?? 0, MAX_PREVIEW_SIZE);
mh = Math.min(
embed.image.height ?? 0,
MAX_PREVIEW_SIZE,
);
} else {
mw = embed.image?.width ?? MAX_EMBED_WIDTH;
mh = embed.image?.height ?? 0;
......@@ -78,51 +77,91 @@ export default function Embed({ embed }: Props) {
}
}
let { width, height } = calculateSize(mw, mh);
const { width, height } = calculateSize(mw, mh);
return (
<div
className={classNames(styles.embed, styles.website)}
style={{
borderInlineStartColor: embed.color ?? 'var(--tertiary-background)',
width: width + CONTAINER_PADDING
borderInlineStartColor:
embed.color ?? "var(--tertiary-background)",
width: width + CONTAINER_PADDING,
}}>
<div>
{ embed.site_name && <div className={styles.siteinfo}>
{ embed.icon_url && <img className={styles.favicon} src={proxyImage(embed.icon_url)} draggable={false} onError={e => e.currentTarget.style.display = 'none'} /> }
<div className={styles.site}>{ embed.site_name } </div>
</div> }
{embed.site_name && (
<div className={styles.siteinfo}>
{embed.icon_url && (
<img
loading="lazy"
className={styles.favicon}
src={client.proxyFile(embed.icon_url)}
draggable={false}
onError={(e) =>
(e.currentTarget.style.display =
"none")
}
/>
)}
<div className={styles.site}>
{embed.site_name}{" "}
</div>
</div>
)}
{/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
{ embed.title && <span><a href={embed.url} target={"_blank"} className={styles.title}>{ embed.title }</a></span> }
{ embed.description && <div className={styles.description}>{ embed.description }</div> }
{embed.title && (
<span>
<a
href={embed.url}
target={"_blank"}
className={styles.title}
rel="noreferrer">
{embed.title}
</a>
</span>
)}
{embed.description && (
<div className={styles.description}>
{embed.description}
</div>
)}
{ largeMedia && <EmbedMedia embed={embed} height={height} /> }
{largeMedia && (
<EmbedMedia embed={embed} height={height} />
)}
</div>
{
!largeMedia && <div>
<EmbedMedia embed={embed} width={height * ((embed.image?.width ?? 0) / (embed.image?.height ?? 0))} height={height} />
{!largeMedia && (
<div>
<EmbedMedia
embed={embed}
width={
height *
((embed.image?.width ?? 0) /
(embed.image?.height ?? 0))
}
height={height}
/>
</div>
}
)}
</div>
)
);
}
case 'Image': {
case "Image": {
return (
<img className={classNames(styles.embed, styles.image)}
<img
className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)}
src={client.proxyFile(embed.url)}
type="text/html"
frameBorder="0"
onClick={() =>
openScreen({ id: "image_viewer", embed })
}
onMouseDown={ev =>
ev.button === 1 &&
window.open(embed.url, "_blank")
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank")
}
/>
)
);
}
default: return null;
default:
return null;
}
}
src/components/common/messaging/embed/EmbedMedia.tsx
View file @ 1ac5de17
import styles from './Embed.module.scss';
import { Embed } from "revolt.js/dist/api/objects";
import { useIntermediate } from '../../../../context/intermediate/Intermediate';
/* eslint-disable react-hooks/rules-of-hooks */
import { Embed } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props {
embed: Embed;
......@@ -9,66 +13,87 @@ interface Props {
}
export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
}
if (embed.type !== 'Website') return null;
if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
case 'YouTube': return (
<iframe
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen
style={{ height }} />
)
case 'Twitch': return (
<iframe
src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${embed.special.id}&parent=${window.location.hostname}&autoplay=false`}
frameBorder="0"
allowFullScreen
scrolling="no"
style={{ height, }} />
)
case 'Spotify': return (
<iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
frameBorder="0"
allowFullScreen
allowTransparency
style={{ height }} />
)
case 'Soundcloud': return (
<iframe
src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(embed.url!)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0"
scrolling="no"
style={{ height }} />
)
case 'Bandcamp': {
return <iframe
src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${embed.special.id}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless
style={{ height }} />;
case "YouTube":
return (
<iframe
loading="lazy"
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen
style={{ height }}
/>
);
case "Twitch":
return (
<iframe
src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
embed.special.id
}&parent=${window.location.hostname}&autoplay=false`}
frameBorder="0"
allowFullScreen
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
case "Spotify":
return (
<iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
loading="lazy"
frameBorder="0"
allowFullScreen
allowTransparency
style={{ height }}
/>
);
case "Soundcloud":
return (
<iframe
src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
embed.url!,
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0"
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
case "Bandcamp": {
return (
<iframe
src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless
loading="lazy"
style={{ height }}
/>
);
}
default: {
if (embed.image) {
let url = embed.image.url;
const url = embed.image.url;
return (
<img
className={styles.image}
src={proxyImage(url)}
src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({ id: "image_viewer", embed: embed.image })
openScreen({
id: "image_viewer",
embed: embed.image,
})
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")
} />
/>
);
}
}
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
import styles from './Embed.module.scss';
import IconButton from '../../../ui/IconButton';
import { LinkExternal } from '@styled-icons/boxicons-regular';
import { EmbedImage } from "revolt.js/dist/api/objects";
import { LinkExternal } from "@styled-icons/boxicons-regular";
import { EmbedImage } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import IconButton from "../../../ui/IconButton";
interface Props {
embed: EmbedImage;
}
export default function EmbedMediaActions({ embed }: Props) {
const filename = embed.url.split('/').pop();
const filename = embed.url.split("/").pop();
return (
<div className={styles.actions}>
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{embed.width + 'x' + embed.height}</span>
</div>
<a href={embed.url} target="_blank">
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{`${embed.width}x${embed.height}`}
</span>
<a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
</a>
</div>
)
);
}
src/components/common/user/UserCheckbox.tsx
View file @ 1ac5de17
import { User } from "revolt.js";
import UserIcon from "./UserIcon";
import { User } from "revolt.js/dist/maps/Users";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import UserIcon from "./UserIcon";
import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User };
export default function UserCheckbox({ user, ...props }: UserProps) {
return (
<Checkbox {...props}>
<UserIcon target={user} size={32} />
{user.username}
<Username user={user} />
</Checkbox>
);
}
src/components/common/user/UserHeader.tsx
View file @ 1ac5de17
import Tooltip from "../Tooltip";
import { User } from "revolt.js";
import UserIcon from "./UserIcon";
import { Text } from "preact-i18n";
import Header from "../../ui/Header";
import UserStatus from './UserStatus';
import styled from "styled-components";
import { Localizer } from 'preact-i18n';
import { Link } from "react-router-dom";
import IconButton from "../../ui/IconButton";
import { Cog } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { openContextMenu } from "preact-context-menu";
import { Text, Localizer } from "preact-i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import Header from "../../ui/Header";
import IconButton from "../../ui/IconButton";
import Tooltip from "../Tooltip";
import UserStatus from "./UserStatus";
const HeaderBase = styled.div`
gap: 0;
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
* {
min-width: 0;
overflow: hidden;
......@@ -41,10 +45,10 @@ const HeaderBase = styled.div`
`;
interface Props {
user: User
user: User;
}
export default function UserHeader({ user }: Props) {
export default observer(({ user }: Props) => {
const { writeClipboard } = useIntermediate();
return (
......@@ -52,24 +56,28 @@ export default function UserHeader({ user }: Props) {
<HeaderBase>
<Localizer>
<Tooltip content={<Text id="app.special.copy_username" />}>
<span className="username"
<span
className="username"
onClick={() => writeClipboard(user.username)}>
@{user.username}
</span>
</Tooltip>
</Localizer>
<span className="status"
<span
className="status"
onClick={() => openContextMenu("Status")}>
<UserStatus user={user} />
</span>
</HeaderBase>
{ !isTouchscreenDevice && <div className="actions">
<Link to="/settings">
<IconButton>
<Cog size={24} />
</IconButton>
</Link>
</div> }
{!isTouchscreenDevice && (
<div className="actions">
<Link to="/settings">
<IconButton>
<Cog size={24} />
</IconButton>
</Link>
</div>
)}
</Header>
)
}
);
});
src/components/common/user/UserHover.tsx 0 → 100644
View file @ 1ac5de17
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
import UserStatus from "./UserStatus";
interface Props {
user?: User;
children: Children;
}
const Base = styled.div`
display: flex;
flex-direction: column;
.username {
font-size: 13px;
font-weight: 600;
}
.status {
font-size: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tip {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
color: var(--secondary-foreground);
}
`;
export default function UserHover({ user, children }: Props) {
return (
<Tooltip
placement="right-end"
content={
<Base>
<Username className="username" user={user} />
<span className="status">
<UserStatus user={user} />
</span>
{/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
</Base>
}>
{children}
</Tooltip>
);
}
src/components/common/user/UserIcon.tsx
View file @ 1ac5de17
import { User } from "revolt.js";
import { useContext } from "preact/hooks";
import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import { Users } from "revolt.js/dist/api/objects";
import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme";
import IconBase, { IconBaseProps } from "../IconBase";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png";
type VoiceStatus = "muted";
interface Props extends IconBaseProps<User> {
mask?: string;
......@@ -17,17 +22,13 @@ interface Props extends IconBaseProps<User> {
export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext);
return (
user?.online &&
user?.status?.presence !== Users.Presence.Invisible
? user?.status?.presence === Users.Presence.Idle
? theme["status-away"]
: user?.status?.presence ===
Users.Presence.Busy
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"]
);
return user?.online && user?.status?.presence !== Presence.Invisible
? user?.status?.presence === Presence.Idle
? theme["status-away"]
: user?.status?.presence === Presence.Busy
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"];
}
const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
......@@ -43,51 +44,75 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
stroke: white;
}
${ props => props.status === 'muted' && css`
background: var(--error);
` }
${(props) =>
props.status === "muted" &&
css`
background: var(--error);
`}
`;
import fallback from '../assets/user.png';
export default observer(
(
props: Props &
Omit<
JSX.SVGAttributes<SVGSVGElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
const client = useContext(AppContext);
const {
target,
attachment,
size,
status,
animate,
mask,
hover,
...svgProps
} = props;
const iconURL =
client.generateFileURL(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ?? (target ? target.defaultAvatarURL : fallback);
const { target, attachment, size, voice, status, animate, mask, children, as, ...svgProps } = props;
const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
return (
<IconBase {...svgProps}
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject x="0" y="0" width="32" height="32" mask={mask ?? (status ? "url(#user)" : undefined)}>
{
<img src={iconURL}
draggable={false} />
}
</foreignObject>
{props.status && (
<circle
cx="27"
cy="27"
r="5"
fill={useStatusColour(target)}
/>
)}
{props.voice && (
return (
<IconBase
{...svgProps}
width={size}
height={size}
hover={hover}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject
x="22"
y="22"
width="10"
height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicrophoneOff size={6} />}
</VoiceIndicator>
x="0"
y="0"
width="32"
height="32"
class="icon"
mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={iconURL} draggable={false} loading="lazy" />}
</foreignObject>
)}
</IconBase>
);
}
{props.status && (
<circle
cx="27"
cy="27"
r="5"
fill={useStatusColour(target)}
/>
)}
{props.voice && (
<foreignObject x="22" y="22" width="10" height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && (
<MicrophoneOff size={6} />
)}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
},
);
src/components/common/user/UserShort.tsx
View file @ 1ac5de17
import { User } from "revolt.js";
import UserIcon from "./UserIcon";
import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n";
export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
return <span {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</span>;
}
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "./UserIcon";
export const Username = observer(
({
user,
...otherProps
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
let username = user?.username;
let color;
export default function UserShort({ user, size }: { user?: User, size?: number }) {
return <>
<UserIcon size={size ?? 24} target={user} />
<Username user={user} />
</>;
}
\ No newline at end of file
if (user) {
const { server } = useParams<{ server?: string }>();
if (server) {
const client = useClient();
const member = client.members.getKey({
server,
user: user._id,
});
if (member) {
if (member.nickname) {
username = member.nickname;
}
if (member.roles && member.roles.length > 0) {
const srv = client.servers.get(member._id.server);
if (srv?.roles) {
for (const role of member.roles) {
const c = srv.roles[role].colour;
if (c) {
color = c;
continue;
}
}
}
}
}
}
}
return (
<span {...otherProps} style={{ color }}>
{username ?? <Text id="app.main.channel.unknown_user" />}
</span>
);
},
);
export default function UserShort({
user,
size,
}: {
user?: User;
size?: number;
}) {
return (
<>
<UserIcon size={size ?? 24} target={user} />
<Username user={user} />
</>
);
}
src/components/common/user/UserStatus.tsx
View file @ 1ac5de17
import { User } from "revolt.js";
import { observer } from "mobx-react-lite";
import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n";
import { Users } from "revolt.js/dist/api/objects";
import Tooltip from "../Tooltip";
interface Props {
user: User;
user?: User;
tooltip?: boolean;
}
export default function UserStatus({ user }: Props) {
if (user.online) {
export default observer(({ user, tooltip }: Props) => {
if (user?.online) {
if (user.status?.text) {
return <>{user.status?.text}</>;
if (tooltip) {
return (
<Tooltip arrow={undefined} content={user.status.text}>
{user.status.text}
</Tooltip>
);
}
return <>{user.status.text}</>;
}
if (user.status?.presence === Users.Presence.Busy) {
if (user.status?.presence === Presence.Busy) {
return <Text id="app.status.busy" />;
}
if (user.status?.presence === Users.Presence.Idle) {
if (user.status?.presence === Presence.Idle) {
return <Text id="app.status.idle" />;
}
if (user.status?.presence === Users.Presence.Invisible) {
if (user.status?.presence === Presence.Invisible) {
return <Text id="app.status.offline" />;
}
......@@ -28,4 +41,4 @@ export default function UserStatus({ user }: Props) {
}
return <Text id="app.status.offline" />;
}
});
src/components/markdown/Markdown.module.scss
View file @ 1ac5de17
@import "@fontsource/fira-mono/400.css";
.markdown {
:global(.emoji) {
height: 1.25em;
......@@ -14,7 +12,7 @@
margin-bottom: 0;
margin-top: 1px;
margin-right: 2px;
vertical-align: -.3em;
vertical-align: -0.3em;
}
p,
......@@ -28,9 +26,9 @@
&[data-type="mention"] {
padding: 0 6px;
font-weight: 600;
border-radius: 12px;
display: inline-block;
background: var(--secondary-background);
border-radius: calc(var(--border-radius) * 2);
&:hover {
text-decoration: none;
......@@ -63,8 +61,8 @@
blockquote {
margin: 2px 0;
padding: 2px 0;
border-radius: 4px;
background: var(--hover);
border-radius: var(--border-radius);
border-inline-start: 4px solid var(--tertiary-background);
> * {
......@@ -74,9 +72,8 @@
pre {
padding: 1em;
border-radius: 4px;
overflow-x: scroll;
border-radius: 3px;
border-radius: var(--border-radius);
background: var(--block) !important;
}
......@@ -87,9 +84,9 @@
code {
color: white;
font-size: 90%;
border-radius: 4px;
background: var(--block);
font-family: "Fira Mono", monospace;
border-radius: var(--border-radius);
font-family: var(--monospace-font), monospace;
}
input[type="checkbox"] {
......@@ -115,12 +112,13 @@
padding: 0 2px;
cursor: pointer;
user-select: none;
border-radius: 4px;
color: transparent;
background: #151515;
border-radius: var(--border-radius);
> * {
opacity: 0;
pointer-events: none;
}
&:global(.shown) {
......@@ -131,22 +129,19 @@
> * {
opacity: 1;
pointer-events: unset;
}
}
}
:global(.code) {
font-family: "Fira Mono", monospace;
font-family: var(--monospace-font), monospace;
:global(.lang) {
// height: 8px;
// position: relative;
width: fit-content;
padding-bottom: 8px;
div {
// margin-left: -5px;
// margin-top: -16px;
// position: absolute;
color: #111;
cursor: pointer;
padding: 2px 6px;
......@@ -165,10 +160,6 @@
box-shadow: 0 1px #787676;
}
}
// ! FIXME: had to change this temporarily due to overflow
width: fit-content;
padding-bottom: 8px;
}
}
......@@ -185,18 +176,18 @@
input[type="checkbox"] + label:before {
width: 12px;
height: 12px;
content: 'a';
content: "a";
font-size: 10px;
margin-right: 6px;
line-height: 12px;
position: relative;
border-radius: 4px;
background: white;
position: relative;
display: inline-block;
border-radius: var(--border-radius);
}
input[type="checkbox"][checked="true"] + label:before {
content: '✓';
content: "✓";
align-items: center;
display: inline-flex;
justify-content: center;
......
src/components/markdown/Markdown.tsx
View file @ 1ac5de17
import { Suspense, lazy } from "preact/compat";
const Renderer = lazy(() => import('./Renderer'));
const Renderer = lazy(() => import("./Renderer"));
export interface MarkdownProps {
content?: string;
......@@ -9,9 +9,9 @@ export interface MarkdownProps {
export default function Markdown(props: MarkdownProps) {
return (
// @ts-expect-error
// @ts-expect-error Typings mis-match.
<Suspense fallback={props.content}>
<Renderer {...props} />
</Suspense>
)
);
}
src/components/markdown/Renderer.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import MarkdownKatex from "@traptitech/markdown-it-katex";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import "katex/dist/katex.min.css";
import MarkdownIt from "markdown-it";
// @ts-expect-error No typings.
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-expect-error No typings.
import MarkdownSub from "markdown-it-sub";
// @ts-expect-error No typings.
import MarkdownSup from "markdown-it-sup";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";
import { RE_MENTIONS } from "revolt.js";
import { useContext } from "preact/hooks";
import { MarkdownProps } from "./Markdown";
import styles from "./Markdown.module.scss";
import { generateEmoji } from "../common/Emoji";
import { useCallback, useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter";
import { emojiDictionary } from "../../assets/emojis";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import Prism from "prismjs";
import "katex/dist/katex.min.css";
import "prismjs/themes/prism-tomorrow.css";
import { generateEmoji } from "../common/Emoji";
import MarkdownKatex from "@traptitech/markdown-it-katex";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import { emojiDictionary } from "../../assets/emojis";
import { MarkdownProps } from "./Markdown";
// @ts-ignore
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-ignore
import MarkdownSup from "markdown-it-sup";
// @ts-ignore
import MarkdownSub from "markdown-it-sub";
// TODO: global.d.ts file for defining globals
declare global {
interface Window {
copycode: (element: HTMLDivElement) => void;
}
}
// Handler for code block copy.
if (typeof window !== "undefined") {
(window as any).copycode = function(element: HTMLDivElement) {
window.copycode = function (element: HTMLDivElement) {
try {
let code = element.parentElement?.parentElement?.children[1];
const code = element.parentElement?.parentElement?.children[1];
if (code) {
navigator.clipboard.writeText((code as any).innerText.trim());
navigator.clipboard.writeText(code.textContent?.trim() ?? "");
}
} catch (e) {}
};
......@@ -38,97 +48,46 @@ export const md: MarkdownIt = MarkdownIt({
breaks: true,
linkify: true,
highlight: (str, lang) => {
let v = Prism.languages[lang];
const v = Prism.languages[lang];
if (v) {
let out = Prism.highlight(str, v, lang);
const out = Prism.highlight(str, v, lang);
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
}
return `<pre class="code"><code>${md.utils.escapeHtml(str)}</code></pre>`;
}
})
.disable("image")
.use(MarkdownEmoji, { defs: emojiDictionary })
.use(MarkdownSpoilers)
.use(MarkdownSup)
.use(MarkdownSub)
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0
});
// ? Force links to open _blank.
// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
const defaultRender =
md.renderer.rules.link_open ||
function(tokens, idx, options, _env, self) {
return self.renderToken(tokens, idx, options);
};
// Handler for internal links, pushes events to React using magic.
if (typeof window !== "undefined") {
(window as any).internalHandleURL = function(element: HTMLAnchorElement) {
const url = new URL(element.href, location as any);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
internalEmit("Intermediate", "openProfile", pathname.substr(2));
} else {
internalEmit("Intermediate", "navigate", pathname);
}
};
}
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
let internal;
const hIndex = tokens[idx].attrIndex("href");
if (hIndex >= 0) {
try {
// For internal links, we should use our own handler to use react-router history.
// @ts-ignore
const href = tokens[idx].attrs[hIndex][1];
const url = new URL(href, location as any);
if (url.hostname === location.hostname) {
internal = true;
// I'm sorry.
tokens[idx].attrPush([
"onclick",
"internalHandleURL(this); return false"
]);
if (url.pathname.startsWith("/@")) {
tokens[idx].attrPush(["data-type", "mention"]);
}
}
} catch (err) {
// Ignore the error, treat as normal link.
}
}
if (!internal) {
// Add target=_blank for external links.
const aIndex = tokens[idx].attrIndex("target");
if (aIndex < 0) {
tokens[idx].attrPush(["target", "_blank"]);
} else {
try {
// @ts-ignore
tokens[idx].attrs[aIndex][1] = "_blank";
} catch (_) {}
}
return `<pre class="code"><code>${md.utils.escapeHtml(
str,
)}</code></pre>`;
},
})
.disable("image")
.use(MarkdownEmoji, { defs: emojiDictionary })
.use(MarkdownSpoilers)
.use(MarkdownSup)
.use(MarkdownSub)
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0,
maxSize: 10,
strict: false,
errorColor: "var(--error)",
});
// TODO: global.d.ts file for defining globals
declare global {
interface Window {
internalHandleURL: (element: HTMLAnchorElement) => void;
}
}
return defaultRender(tokens, idx, options, env, self);
};
md.renderer.rules.emoji = function(token, idx) {
md.renderer.rules.emoji = function (token, idx) {
return generateEmoji(token[idx].content);
};
const RE_TWEMOJI = /:(\w+):/g;
// ! FIXME: Move to library
const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const client = useContext(AppContext);
if (typeof content === "undefined") return null;
......@@ -136,10 +95,9 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
// We replace the message with the mention at the time of render.
// We don't care if the mention changes.
let newContent = content.replace(
RE_MENTIONS,
(sub: string, ...args: any[]) => {
const id = args[0],
const newContent = content
.replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
user = client.users.get(id);
if (user) {
......@@ -147,26 +105,102 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
}
return sub;
}
);
})
.replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
channel = client.channels.get(id);
if (channel?.channel_type === "TextChannel") {
return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
}
return sub;
});
const useLargeEmojis = disallowBigEmoji ? false : content.replace(RE_TWEMOJI, '').trim().length === 0;
const useLargeEmojis = disallowBigEmoji
? false
: content.replace(RE_TWEMOJI, "").trim().length === 0;
const toggle = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLDivElement;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
}
}, []);
const handleLink = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLAnchorElement;
const url = new URL(element.href, location.href);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
const id = pathname.substr(2);
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
ev.preventDefault();
internalEmit("Intermediate", "openProfile", id);
}
} else {
ev.preventDefault();
internalEmit("Intermediate", "navigate", pathname);
}
}
}, []);
return (
<span
ref={(el) => {
if (el) {
el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
(element) => {
element.removeEventListener("click", toggle);
element.addEventListener("click", toggle);
},
);
el.querySelectorAll<HTMLAnchorElement>("a").forEach(
(element) => {
element.removeEventListener("click", handleLink);
element.removeAttribute("data-type");
element.removeAttribute("target");
let internal;
const href = element.href;
if (href) {
try {
const url = new URL(href, location.href);
if (url.hostname === location.hostname) {
internal = true;
element.addEventListener(
"click",
handleLink,
);
if (url.pathname.startsWith("/@")) {
element.setAttribute(
"data-type",
"mention",
);
}
}
} catch (err) {}
}
if (!internal) {
element.setAttribute("target", "_blank");
}
},
);
}
}}
className={styles.markdown}
dangerouslySetInnerHTML={{
__html: md.render(newContent)
__html: md.render(newContent),
}}
data-large-emojis={useLargeEmojis}
onClick={ev => {
if (ev.target) {
let element: Element = ev.target as any;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
}
}}
/>
);
}
src/components/native/Titlebar.tsx 0 → 100644
View file @ 1ac5de17
import { Wrench } from "@styled-icons/boxicons-solid";
import styled from "styled-components";
import UpdateIndicator from "../common/UpdateIndicator";
const TitlebarBase = styled.div`
height: var(--titlebar-height);
display: flex;
user-select: none;
align-items: center;
.drag {
flex-grow: 1;
-webkit-app-region: drag;
margin-top: 10px;
height: 100%;
}
.quick {
color: var(--secondary-foreground);
> div,
> div > div {
width: var(--titlebar-height) !important;
}
&.disabled {
color: var(--error);
}
&.unavailable {
background: var(--error);
}
}
.title {
-webkit-app-region: drag;
/*height: var(--titlebar-height);*/
font-size: 16px;
font-weight: 600;
margin-inline-start: 10px;
margin-top: 10px;
gap: 6px;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 90000;
color: var(--titlebar-logo-color);
svg {
margin-bottom: 10px;
}
svg:first-child {
height: calc(var(--titlebar-height) / 3);
}
}
.actions {
z-index: 100;
display: flex;
align-items: center;
margin-inline-start: 6px;
div {
width: calc(
var(--titlebar-height) + var(--titlebar-action-padding)
);
height: var(--titlebar-height);
display: grid;
place-items: center;
transition: 0.2s ease color;
transition: 0.2s ease background-color;
&:hover {
background: var(--primary-background);
}
&.error:hover {
background: var(--error);
}
}
}
`;
export function Titlebar() {
return (
<TitlebarBase>
<div class="title">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 193.733 37.438">
<path
d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z"
transform="translate(1.586 11.18)"
fill="var(--titlebar-logo-color)"
stroke="var(--titlebar-logo-color)"
stroke-width="1"
/>
</svg>
{window.native.getConfig().build === "dev" && (
<Wrench size="12.5" />
)}
</div>
{/*<div class="actions quick">
<Tooltip
content="Mute"
placement="bottom">
<div onClick={window.native.min}>
<Microphone size={15}/>
</div>
</Tooltip>
<Tooltip
content="Deafen"
placement="bottom">
<div onClick={window.native.min}>
<VolumeFull size={15}/>
</div>
</Tooltip>
</div>*/}
<div class="drag" />
<UpdateIndicator style="titlebar" />
<div class="actions">
<div onClick={window.native.min}>
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<rect
fill="currentColor"
width="10"
height="1"
x="1"
y="6"
/>
</svg>
</div>
<div onClick={window.native.max}>
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<rect
width="9"
height="9"
x="1.5"
y="1.5"
fill="none"
stroke="currentColor"
/>
</svg>
</div>
<div onClick={window.native.close} class="error">
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<polygon
fill="currentColor"
stroke-width="1"
fill-rule="evenodd"
points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
style="stroke:currentColor;stroke-width:0.4"
/>
</svg>
</div>
</div>
</TitlebarBase>
);
}
src/components/navigation/BottomNavigation.tsx
View file @ 1ac5de17
import IconButton from "../ui/IconButton";
import UserIcon from "../common/user/UserIcon";
import styled, { css } from "styled-components";
import { useSelf } from "../../context/revoltjs/hooks";
import { Message, Group } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components";
import ConditionalLink from "../../lib/ConditionalLink";
import { Message, Group } from "@styled-icons/boxicons-solid";
import { LastOpened } from "../../redux/reducers/last_opened";
import { connectState } from "../../redux/connector";
import { LastOpened } from "../../redux/reducers/last_opened";
import { useClient } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../common/user/UserIcon";
import IconButton from "../ui/IconButton";
const NavigationBase = styled.div`
const Base = styled.div`
background: var(--secondary-background);
`;
const Navbar = styled.div`
z-index: 100;
height: 50px;
max-width: 500px;
margin: 0 auto;
display: flex;
background: var(--secondary-background);
height: var(--bottom-navigation-height);
`;
const Button = styled.a<{ active: boolean }>`
flex: 1;
> a, > div, > a > div {
> a,
> div,
> a > div {
width: 100%;
height: 100%;
}
${ props => props.active && css`
background: var(--hover);
` }
> div,
> a > div {
padding: 0 20px;
}
${(props) =>
props.active &&
css`
background: var(--hover);
`}
`;
interface Props {
lastOpened: LastOpened
lastOpened: LastOpened;
}
export function BottomNavigation({ lastOpened }: Props) {
const user = useSelf();
export const BottomNavigation = observer(({ lastOpened }: Props) => {
const client = useClient();
const user = client.users.get(client.user!._id);
const history = useHistory();
const path = useLocation().pathname;
const channel_id = lastOpened['home'];
const channel_id = lastOpened["home"];
const friendsActive = path.startsWith("/friends");
const settingsActive = path.startsWith("/settings");
const homeActive = !(friendsActive || settingsActive);
return (
<NavigationBase>
<Button active={homeActive}>
<IconButton
onClick={() => {
if (settingsActive) {
if (history.length > 0) {
history.goBack();
<Base>
<Navbar>
<Button active={homeActive}>
<IconButton
onClick={() => {
if (settingsActive) {
if (history.length > 0) {
history.goBack();
}
}
}
if (channel_id) {
history.push(`/channel/${channel_id}`);
} else {
history.push('/');
}
}}>
<Message size={24} />
</IconButton>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<Group size={25} />
</IconButton>
</ConditionalLink>
</Button>
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
if (channel_id) {
history.push(`/channel/${channel_id}`);
} else {
history.push("/");
}
}}>
<Message size={24} />
</IconButton>
</ConditionalLink>
</Button>
</NavigationBase>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<Group size={25} />
</IconButton>
</ConditionalLink>
</Button>
{/*<Button active={searchActive}>
<ConditionalLink active={searchActive} to="/search">
<IconButton>
<Search size={25} />
</IconButton>
</ConditionalLink>
</Button>
<Button active={inboxActive}>
<ConditionalLink active={inboxActive} to="/inbox">
<IconButton>
<Inbox size={25} />
</IconButton>
</ConditionalLink>
</Button>*/}
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
</IconButton>
</ConditionalLink>
</Button>
</Navbar>
</Base>
);
}
});
export default connectState(BottomNavigation, state => {
export default connectState(BottomNavigation, (state) => {
return {
lastOpened: state.lastOpened
}
lastOpened: state.lastOpened,
};
});
src/components/navigation/LeftSidebar.tsx
View file @ 1ac5de17
import { Route, Switch } from "react-router";
import SidebarBase from "./SidebarBase";
import SidebarBase from "./SidebarBase";
import HomeSidebar from "./left/HomeSidebar";
import ServerListSidebar from "./left/ServerListSidebar";
import ServerSidebar from "./left/ServerSidebar";
import HomeSidebar from "./left/HomeSidebar";
export default function LeftSidebar() {
return (
......@@ -29,4 +29,4 @@ export default function LeftSidebar() {
</Switch>
</SidebarBase>
);
};
}
src/components/navigation/RightSidebar.tsx
View file @ 1ac5de17
import { Route, Switch } from "react-router";
import SidebarBase from "./SidebarBase";
import SidebarBase from "./SidebarBase";
import MemberSidebar from "./right/MemberSidebar";
export default function RightSidebar() {
......@@ -16,4 +16,4 @@ export default function RightSidebar() {
</Switch>
</SidebarBase>
);
};
}
src/components/navigation/SidebarBase.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export default styled.div`
......@@ -18,9 +19,12 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
background: var(--secondary-background);
border-end-start-radius: 8px;
${ props => props.padding && isTouchscreenDevice && css`
padding-bottom: 50px;
` }
${(props) =>
props.padding &&
isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`;
export const GenericSidebarList = styled.div`
......