mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Fix i18n for server settings.
Start work on roles. Add temporary age gate.
This commit is contained in:
parent
9e8dde8230
commit
030d743af9
6 changed files with 111 additions and 76 deletions
|
@ -5,6 +5,8 @@ import { useSelf } from "../../context/revoltjs/hooks";
|
|||
import { useHistory, useLocation } from "react-router";
|
||||
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";
|
||||
|
||||
const NavigationBase = styled.div`
|
||||
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 history = useHistory();
|
||||
const path = useLocation().pathname;
|
||||
|
||||
const channel_id = lastOpened['home'];
|
||||
|
||||
const friendsActive = path.startsWith("/friends");
|
||||
const settingsActive = path.startsWith("/settings");
|
||||
const homeActive = !(friendsActive || settingsActive);
|
||||
|
||||
// console.info(channel_id);
|
||||
|
||||
return (
|
||||
<NavigationBase>
|
||||
<Button active={homeActive}>
|
||||
|
@ -70,3 +80,9 @@ export default function BottomNavigation() {
|
|||
</NavigationBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default connectState(BottomNavigation, state => {
|
||||
return {
|
||||
lastOpened: state.lastOpened
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
import styled from "styled-components";
|
||||
import { useState } from "preact/hooks";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import ChannelHeader from "./ChannelHeader";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { MessageArea } from "./messaging/MessageArea";
|
||||
import Checkbox from "../../components/ui/Checkbox";
|
||||
import Button from "../../components/ui/Button";
|
||||
// import { useRenderState } from "../../lib/renderer/Singleton";
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
import MessageBox from "../../components/common/messaging/MessageBox";
|
||||
|
@ -44,6 +46,20 @@ export function Channel({ id }: { id: string }) {
|
|||
function TextChannel({ channel }: { channel: Channel }) {
|
||||
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;
|
||||
return <>
|
||||
<ChannelHeader channel={channel} toggleSidebar={() => setMembers(!showMembers)} />
|
||||
|
|
|
@ -13,11 +13,12 @@ import ButtonItem from "../../components/navigation/items/ButtonItem";
|
|||
|
||||
interface Props {
|
||||
pages: {
|
||||
category?: Children,
|
||||
divider?: boolean,
|
||||
id: string,
|
||||
category?: Children
|
||||
divider?: boolean
|
||||
id: string
|
||||
icon: Children
|
||||
title: Children
|
||||
hideTitle?: boolean
|
||||
}[]
|
||||
custom?: Children
|
||||
children: Children
|
||||
|
@ -96,7 +97,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
|
|||
)}
|
||||
{(!isTouchscreenDevice || typeof page === "string") && (
|
||||
<div className={styles.content}>
|
||||
{!isTouchscreenDevice && (
|
||||
{!isTouchscreenDevice && !(pages.find(x => x.id === page && x.hideTitle)) && (
|
||||
<h1>
|
||||
<Text
|
||||
id={`app.settings.${category}.${page ?? defaultPage}.title`}
|
||||
|
|
|
@ -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
|
||||
id: 'overview',
|
||||
icon: <ListUl size={20} />,
|
||||
title: <Text id="app.settings.channel_pages.overview.title" />
|
||||
title: <Text id="app.settings.server_pages.overview.title" />
|
||||
},
|
||||
{
|
||||
id: 'members',
|
||||
icon: <Group size={20} />,
|
||||
title: "Members"
|
||||
title: <Text id="app.settings.server_pages.members.title" />
|
||||
},
|
||||
{
|
||||
id: 'invites',
|
||||
icon: <Share size={20} />,
|
||||
title: "Invites"
|
||||
title: <Text id="app.settings.server_pages.invites.title" />
|
||||
},
|
||||
{
|
||||
id: 'bans',
|
||||
icon: <XSquare size={20} />,
|
||||
title: "Bans"
|
||||
title: <Text id="app.settings.server_pages.bans.title" />
|
||||
},
|
||||
{
|
||||
id: 'roles',
|
||||
icon: <ListCheck size={20} />,
|
||||
title: "Roles"
|
||||
title: <Text id="app.settings.server_pages.roles.title" />,
|
||||
hideTitle: true
|
||||
}
|
||||
]}
|
||||
children={[
|
||||
|
|
|
@ -78,16 +78,21 @@
|
|||
}
|
||||
|
||||
.roles {
|
||||
.overview {
|
||||
height: 85vh; //TOFIX change later
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.list {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.list {
|
||||
width: 160px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.permissions {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.permissions {
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import Tip from "../../../components/ui/Tip";
|
||||
import { Text } from "preact-i18n";
|
||||
import styles from './Panes.module.scss';
|
||||
import Button from "../../../components/ui/Button";
|
||||
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 { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
|
||||
import { Styleshare } from "@styled-icons/simple-icons";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
|
@ -46,61 +46,57 @@ export function Roles({ server }: Props) {
|
|||
return (
|
||||
<div className={styles.roles}>
|
||||
<Tip warning>This section is under construction.</Tip>
|
||||
<div className={styles.overview}>
|
||||
<div className={styles.list}>
|
||||
<h2>select role</h2>
|
||||
{ selected }
|
||||
{ keys
|
||||
.map(id => {
|
||||
let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
|
||||
<div className={styles.list}>
|
||||
<h1><Text id="app.settings.server_pages.roles.title" /></h1>
|
||||
{ keys
|
||||
.map(id => {
|
||||
let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
|
||||
|
||||
return (
|
||||
<Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
|
||||
{ role.name }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button disabled={selected === 'default'} error onClick={() => {
|
||||
setSelected('default');
|
||||
client.servers.deleteRole(server._id, selected);
|
||||
}}>delete role</Button><br/>
|
||||
<InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
|
||||
<Button contrast onClick={() => {
|
||||
client.servers.createRole(server._id, name);
|
||||
}}>create</Button>
|
||||
</div>
|
||||
<div className={styles.permissions}>
|
||||
<h2>serverm permmissions</h2>
|
||||
{ Object.keys(ServerPermission)
|
||||
.map(perm => {
|
||||
let value = ServerPermission[perm as keyof typeof ServerPermission];
|
||||
|
||||
return (
|
||||
<Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
|
||||
{ perm }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<h2>channel permmissions</h2>
|
||||
{ Object.keys(ChannelPermission)
|
||||
.map(perm => {
|
||||
let value = ChannelPermission[perm as keyof typeof ChannelPermission];
|
||||
|
||||
return (
|
||||
<Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
|
||||
{ perm }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button contrast onClick={() => {
|
||||
client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
|
||||
}}>click here to save permissions for role</Button>
|
||||
</div>
|
||||
return (
|
||||
<Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
|
||||
{ role.name }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button disabled={selected === 'default'} error onClick={() => {
|
||||
setSelected('default');
|
||||
client.servers.deleteRole(server._id, selected);
|
||||
}}>delete role</Button><br/>
|
||||
<InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
|
||||
<Button contrast onClick={() => {
|
||||
client.servers.createRole(server._id, name);
|
||||
}}>create</Button>
|
||||
</div>
|
||||
<div className={styles.permissions}>
|
||||
<h2>{ selectedRole.name }</h2>
|
||||
{ Object.keys(ServerPermission)
|
||||
.map(perm => {
|
||||
let value = ServerPermission[perm as keyof typeof ServerPermission];
|
||||
|
||||
return (
|
||||
<Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
|
||||
{ perm }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<h2>channel permmissions</h2>
|
||||
{ Object.keys(ChannelPermission)
|
||||
.map(perm => {
|
||||
let value = ChannelPermission[perm as keyof typeof ChannelPermission];
|
||||
|
||||
return (
|
||||
<Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
|
||||
{ perm }
|
||||
</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button contrast onClick={() => {
|
||||
client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
|
||||
}}>click here to save permissions for role</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue