Fix i18n for server settings.

Start work on roles.
Add temporary age gate.
This commit is contained in:
Paul 2021-07-02 22:08:03 +01:00
parent 9e8dde8230
commit 030d743af9
6 changed files with 111 additions and 76 deletions

View file

@ -5,6 +5,8 @@ import { useSelf } from "../../context/revoltjs/hooks";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import ConditionalLink from "../../lib/ConditionalLink"; import ConditionalLink from "../../lib/ConditionalLink";
import { Message, Group } from "@styled-icons/boxicons-solid"; import { Message, Group } from "@styled-icons/boxicons-solid";
import { LastOpened } from "../../redux/reducers/last_opened";
import { connectState } from "../../redux/connector";
const NavigationBase = styled.div` const NavigationBase = styled.div`
z-index: 100; z-index: 100;
@ -26,15 +28,23 @@ const Button = styled.a<{ active: boolean }>`
` } ` }
`; `;
export default function BottomNavigation() { interface Props {
lastOpened: LastOpened
}
export function BottomNavigation({ lastOpened }: Props) {
const user = useSelf(); const user = useSelf();
const history = useHistory(); const history = useHistory();
const path = useLocation().pathname; const path = useLocation().pathname;
const channel_id = lastOpened['home'];
const friendsActive = path.startsWith("/friends"); const friendsActive = path.startsWith("/friends");
const settingsActive = path.startsWith("/settings"); const settingsActive = path.startsWith("/settings");
const homeActive = !(friendsActive || settingsActive); const homeActive = !(friendsActive || settingsActive);
// console.info(channel_id);
return ( return (
<NavigationBase> <NavigationBase>
<Button active={homeActive}> <Button active={homeActive}>
@ -70,3 +80,9 @@ export default function BottomNavigation() {
</NavigationBase> </NavigationBase>
); );
} }
export default connectState(BottomNavigation, state => {
return {
lastOpened: state.lastOpened
}
});

View file

@ -1,8 +1,10 @@
import styled from "styled-components"; import styled from "styled-components";
import { useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import ChannelHeader from "./ChannelHeader"; import ChannelHeader from "./ChannelHeader";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { MessageArea } from "./messaging/MessageArea"; import { MessageArea } from "./messaging/MessageArea";
import Checkbox from "../../components/ui/Checkbox";
import Button from "../../components/ui/Button";
// import { useRenderState } from "../../lib/renderer/Singleton"; // import { useRenderState } from "../../lib/renderer/Singleton";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import MessageBox from "../../components/common/messaging/MessageBox"; import MessageBox from "../../components/common/messaging/MessageBox";
@ -44,6 +46,20 @@ export function Channel({ id }: { id: string }) {
function TextChannel({ channel }: { channel: Channel }) { function TextChannel({ channel }: { channel: Channel }) {
const [ showMembers, setMembers ] = useState(true); const [ showMembers, setMembers ] = useState(true);
if ((channel.channel_type === 'TextChannel' || channel.channel_type === 'Group') && channel.name.includes('nsfw')) {
const [ consent, setConsent ] = useState(false);
const [ ageGate, setAgeGate ] = useState(false);
if (!ageGate) {
return (
<div style={{ maxWidth: '480px' }}>
<h3>this channel is marked as nsfw</h3>
<Checkbox checked={consent} onChange={v => setConsent(v)}>I am at least 18 years old</Checkbox>
<Button onClick={() => consent && setAgeGate(true)}>view content</Button>
</div>
)
}
}
let id = channel._id; let id = channel._id;
return <> return <>
<ChannelHeader channel={channel} toggleSidebar={() => setMembers(!showMembers)} /> <ChannelHeader channel={channel} toggleSidebar={() => setMembers(!showMembers)} />

View file

@ -13,11 +13,12 @@ import ButtonItem from "../../components/navigation/items/ButtonItem";
interface Props { interface Props {
pages: { pages: {
category?: Children, category?: Children
divider?: boolean, divider?: boolean
id: string, id: string
icon: Children icon: Children
title: Children title: Children
hideTitle?: boolean
}[] }[]
custom?: Children custom?: Children
children: Children children: Children
@ -96,7 +97,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
)} )}
{(!isTouchscreenDevice || typeof page === "string") && ( {(!isTouchscreenDevice || typeof page === "string") && (
<div className={styles.content}> <div className={styles.content}>
{!isTouchscreenDevice && ( {!isTouchscreenDevice && !(pages.find(x => x.id === page && x.hideTitle)) && (
<h1> <h1>
<Text <Text
id={`app.settings.${category}.${page ?? defaultPage}.title`} id={`app.settings.${category}.${page ?? defaultPage}.title`}

View file

@ -34,27 +34,28 @@ export default function ServerSettings() {
category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category
id: 'overview', id: 'overview',
icon: <ListUl size={20} />, icon: <ListUl size={20} />,
title: <Text id="app.settings.channel_pages.overview.title" /> title: <Text id="app.settings.server_pages.overview.title" />
}, },
{ {
id: 'members', id: 'members',
icon: <Group size={20} />, icon: <Group size={20} />,
title: "Members" title: <Text id="app.settings.server_pages.members.title" />
}, },
{ {
id: 'invites', id: 'invites',
icon: <Share size={20} />, icon: <Share size={20} />,
title: "Invites" title: <Text id="app.settings.server_pages.invites.title" />
}, },
{ {
id: 'bans', id: 'bans',
icon: <XSquare size={20} />, icon: <XSquare size={20} />,
title: "Bans" title: <Text id="app.settings.server_pages.bans.title" />
}, },
{ {
id: 'roles', id: 'roles',
icon: <ListCheck size={20} />, icon: <ListCheck size={20} />,
title: "Roles" title: <Text id="app.settings.server_pages.roles.title" />,
hideTitle: true
} }
]} ]}
children={[ children={[

View file

@ -78,16 +78,21 @@
} }
.roles { .roles {
.overview { gap: 12px;
height: 85vh; //TOFIX change later height: 100%;
display: flex; display: flex;
.list {
overflow-y: scroll;
}
.permissions { .list {
overflow-y: scroll; width: 160px;
} overflow-y: scroll;
}
.permissions {
flex-grow: 1;
overflow-y: scroll;
}
h2 {
margin: 8px 0;
} }
} }

View file

@ -1,4 +1,4 @@
import Tip from "../../../components/ui/Tip"; import { Text } from "preact-i18n";
import styles from './Panes.module.scss'; import styles from './Panes.module.scss';
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import { Servers } from "revolt.js/dist/api/objects"; import { Servers } from "revolt.js/dist/api/objects";
@ -7,7 +7,7 @@ import Checkbox from "../../../components/ui/Checkbox";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions"; import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
import { Styleshare } from "@styled-icons/simple-icons"; import Tip from "../../../components/ui/Tip";
interface Props { interface Props {
server: Servers.Server; server: Servers.Server;
@ -46,61 +46,57 @@ export function Roles({ server }: Props) {
return ( return (
<div className={styles.roles}> <div className={styles.roles}>
<Tip warning>This section is under construction.</Tip> <Tip warning>This section is under construction.</Tip>
<div className={styles.overview}> <div className={styles.list}>
<div className={styles.list}> <h1><Text id="app.settings.server_pages.roles.title" /></h1>
<h2>select role</h2> { keys
{ selected } .map(id => {
{ keys let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
.map(id => {
let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
return ( return (
<Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}> <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
{ role.name } { role.name }
</Checkbox> </Checkbox>
) )
}) })
} }
<Button disabled={selected === 'default'} error onClick={() => { <Button disabled={selected === 'default'} error onClick={() => {
setSelected('default'); setSelected('default');
client.servers.deleteRole(server._id, selected); client.servers.deleteRole(server._id, selected);
}}>delete role</Button><br/> }}>delete role</Button><br/>
<InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} /> <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
<Button contrast onClick={() => { <Button contrast onClick={() => {
client.servers.createRole(server._id, name); client.servers.createRole(server._id, name);
}}>create</Button> }}>create</Button>
</div> </div>
<div className={styles.permissions}> <div className={styles.permissions}>
<h2>serverm permmissions</h2> <h2>{ selectedRole.name }</h2>
{ Object.keys(ServerPermission) { Object.keys(ServerPermission)
.map(perm => { .map(perm => {
let value = ServerPermission[perm as keyof typeof ServerPermission]; let value = ServerPermission[perm as keyof typeof ServerPermission];
return ( return (
<Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}> <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
{ perm } { perm }
</Checkbox> </Checkbox>
) )
}) })
} }
<h2>channel permmissions</h2> <h2>channel permmissions</h2>
{ Object.keys(ChannelPermission) { Object.keys(ChannelPermission)
.map(perm => { .map(perm => {
let value = ChannelPermission[perm as keyof typeof ChannelPermission]; let value = ChannelPermission[perm as keyof typeof ChannelPermission];
return ( return (
<Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}> <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
{ perm } { perm }
</Checkbox> </Checkbox>
) )
}) })
} }
<Button contrast onClick={() => { <Button contrast onClick={() => {
client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] }); client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
}}>click here to save permissions for role</Button> }}>click here to save permissions for role</Button>
</div>
</div> </div>
</div> </div>
); );
} }