mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
Merge pull request #208 from goaaats/feat/no_channels_design
This commit is contained in:
commit
ffb0443bf6
2 changed files with 55 additions and 2 deletions
|
@ -111,7 +111,7 @@ export default function App() {
|
|||
path="/server/:server/channel/:channel"
|
||||
component={Channel}
|
||||
/>
|
||||
<Route path="/server/:server" />
|
||||
<Route path="/server/:server" component={Channel} />
|
||||
<Route path="/channel/:channel" component={Channel} />
|
||||
|
||||
<Route path="/settings/:page" component={Settings} />
|
||||
|
|
|
@ -3,6 +3,8 @@ import { useParams } from "react-router-dom";
|
|||
import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
|
@ -11,10 +13,14 @@ import { dispatch, getState } from "../../redux";
|
|||
|
||||
import { useClient } from "../../context/revoltjs/RevoltClient";
|
||||
|
||||
import { Hash } from "@styled-icons/boxicons-regular";
|
||||
import { Ghost } from "@styled-icons/boxicons-solid";
|
||||
|
||||
import AgeGate from "../../components/common/AgeGate";
|
||||
import MessageBox from "../../components/common/messaging/MessageBox";
|
||||
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
|
||||
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
|
||||
import Header from "../../components/ui/Header";
|
||||
|
||||
import RightSidebar from "../../components/navigation/RightSidebar";
|
||||
import ChannelHeader from "./ChannelHeader";
|
||||
|
@ -36,10 +42,40 @@ const ChannelContent = styled.div`
|
|||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const PlaceholderBase = styled.div`
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
.placeholder {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
|
||||
.primary {
|
||||
color: var(--secondary-foreground);
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
color: var(--tertiary-foreground);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 2em auto;
|
||||
fill-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function Channel({ id }: { id: string }) {
|
||||
const client = useClient();
|
||||
const channel = client.channels.get(id);
|
||||
if (!channel) return null;
|
||||
if (!channel) return <ChannelPlaceholder />;
|
||||
|
||||
if (channel.channel_type === "VoiceChannel") {
|
||||
return <VoiceChannel channel={channel} />;
|
||||
|
@ -132,6 +168,23 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
|
|||
);
|
||||
}
|
||||
|
||||
function ChannelPlaceholder() {
|
||||
return (
|
||||
<PlaceholderBase>
|
||||
<Header placement="primary">
|
||||
<Hash size={24} />
|
||||
<span className="name"><Text id="app.main.channel.errors.nochannel" /></span>
|
||||
</Header>
|
||||
|
||||
<div className="placeholder">
|
||||
<Ghost width={80} />
|
||||
<div className="primary"><Text id="app.main.channel.errors.title" /></div>
|
||||
<div className="secondary"><Text id="app.main.channel.errors.nochannels" /></div>
|
||||
</div>
|
||||
</PlaceholderBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChannelComponent() {
|
||||
const { channel } = useParams<{ channel: string }>();
|
||||
return <Channel id={channel} key={channel} />;
|
||||
|
|
Loading…
Reference in a new issue