mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-22 15:10:57 -05:00
New design for server roles editor.
This commit is contained in:
parent
c4bbd1e40a
commit
f81f7768f8
9 changed files with 145 additions and 76 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
||||||
Subproject commit ec907eb606a3e1d5046bef503caa0585f6bcbc22
|
Subproject commit 9bb62d1185f7e6f7a3821751797e30cb41e74bf8
|
|
@ -78,7 +78,7 @@
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scroll": "^1.8.2",
|
"react-scroll": "^1.8.2",
|
||||||
"redux": "^4.1.0",
|
"redux": "^4.1.0",
|
||||||
"revolt.js": "4.3.3-alpha.6",
|
"revolt.js": "4.3.3-alpha.7",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"sass": "^1.35.1",
|
"sass": "^1.35.1",
|
||||||
"shade-blend-color": "^1.0.0",
|
"shade-blend-color": "^1.0.0",
|
||||||
|
|
|
@ -61,6 +61,7 @@ export default styled.button<Props>`
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
filter: brightness(1.2);
|
filter: brightness(1.2);
|
||||||
|
background: var(--error);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
|
|
|
@ -31,6 +31,15 @@ const CheckboxBase = styled.label`
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: unset;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CheckboxContent = styled.span`
|
const CheckboxContent = styled.span`
|
||||||
|
@ -52,6 +61,7 @@ const Checkmark = styled.div<{ checked: boolean }>`
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
flex-shrink: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
transition: 0.2s ease all;
|
transition: 0.2s ease all;
|
||||||
|
|
|
@ -31,7 +31,8 @@ export type Screen =
|
||||||
{ type: "create_channel", target: Servers.Server }
|
{ type: "create_channel", target: Servers.Server }
|
||||||
)) |
|
)) |
|
||||||
({ id: "special_input" } & (
|
({ id: "special_input" } & (
|
||||||
{ type: "create_group" | "create_server" | "set_custom_status" | "add_friend" }
|
{ type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
|
||||||
|
{ type: "create_role", server: string, callback: (id: string) => void }
|
||||||
))
|
))
|
||||||
| {
|
| {
|
||||||
id: "_input";
|
id: "_input";
|
||||||
|
|
|
@ -68,7 +68,8 @@ export function InputModal({
|
||||||
}
|
}
|
||||||
|
|
||||||
type SpecialProps = { onClose: () => void } & (
|
type SpecialProps = { onClose: () => void } & (
|
||||||
{ type: "create_group" | "create_server" | "set_custom_status" | "add_friend" }
|
{ type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
|
||||||
|
{ type: "create_role", server: string, callback: (id: string) => void }
|
||||||
)
|
)
|
||||||
|
|
||||||
export function SpecialInputModal(props: SpecialProps) {
|
export function SpecialInputModal(props: SpecialProps) {
|
||||||
|
@ -112,6 +113,17 @@ export function SpecialInputModal(props: SpecialProps) {
|
||||||
}}
|
}}
|
||||||
/>;
|
/>;
|
||||||
}
|
}
|
||||||
|
case "create_role": {
|
||||||
|
return <InputModal
|
||||||
|
onClose={onClose}
|
||||||
|
question={<Text id="app.settings.permissions.create_role" />}
|
||||||
|
field={<Text id="app.settings.permissions.role_name" />}
|
||||||
|
callback={async name => {
|
||||||
|
const role = await client.servers.createRole(props.server, name);
|
||||||
|
props.callback(role.id);
|
||||||
|
}}
|
||||||
|
/>;
|
||||||
|
}
|
||||||
case "set_custom_status": {
|
case "set_custom_status": {
|
||||||
return <InputModal
|
return <InputModal
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
|
|
|
@ -57,7 +57,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.members {
|
.members {
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -84,15 +83,43 @@
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
|
flex-shrink: 0;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.permissions {
|
.permissions {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
padding: 0 8px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
.title {
|
||||||
margin: 8px 0;
|
gap: 8px;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
gap: 8px;
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,101 +1,119 @@
|
||||||
import { Text } from "preact-i18n";
|
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 Overline from "../../../components/ui/Overline";
|
||||||
import { Servers } from "revolt.js/dist/api/objects";
|
import { Servers } from "revolt.js/dist/api/objects";
|
||||||
import InputBox from "../../../components/ui/InputBox";
|
|
||||||
import Checkbox from "../../../components/ui/Checkbox";
|
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 Tip from "../../../components/ui/Tip";
|
import Tip from "../../../components/ui/Tip";
|
||||||
|
import IconButton from "../../../components/ui/IconButton";
|
||||||
|
import ButtonItem from "../../../components/navigation/items/ButtonItem";
|
||||||
|
import isEqual from 'lodash.isequal';
|
||||||
|
import InputBox from "../../../components/ui/InputBox";
|
||||||
|
import { Plus } from "@styled-icons/boxicons-regular";
|
||||||
|
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
server: Servers.Server;
|
server: Servers.Server;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const I32ToU32 = (arr: number[]) => arr.map(x => x >>> 0);
|
||||||
|
|
||||||
// ! FIXME: bad code :)
|
// ! FIXME: bad code :)
|
||||||
export function Roles({ server }: Props) {
|
export function Roles({ server }: Props) {
|
||||||
const [ selected, setSelected ] = useState('default');
|
const [ role, setRole ] = useState('default');
|
||||||
|
const { openScreen } = useIntermediate();
|
||||||
const client = useContext(AppContext);
|
const client = useContext(AppContext);
|
||||||
|
|
||||||
const roles = server.roles ?? {};
|
const roles = server.roles ?? {};
|
||||||
const keys = [ 'default', ...Object.keys(roles) ];
|
|
||||||
|
|
||||||
const defaultRole = { name: 'Default', permissions: server.default_permissions };
|
if (role !== 'default' && typeof roles[role] === 'undefined') {
|
||||||
const selectedRole: Servers.Role = selected === 'default' ? defaultRole : roles[selected];
|
useEffect(() => setRole('default'));
|
||||||
|
return;
|
||||||
if (!selectedRole) {
|
|
||||||
useEffect(() => setSelected('default'), [ ]);
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const [ p, setPerm ] = useState([
|
const v = (id: string) => I32ToU32(id === 'default' ? server.default_permissions : roles[id].permissions)
|
||||||
selectedRole.permissions[0] >>> 0,
|
const [ perm, setPerm ] = useState(v(role));
|
||||||
selectedRole.permissions[1] >>> 0,
|
useEffect(() => setPerm(v(role)), [ role, roles[role]?.permissions ]);
|
||||||
]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
const modified = !isEqual(perm, v(role));
|
||||||
setPerm([
|
const save = () => client.servers.setPermissions(server._id, role, { server: perm[0], channel: perm[1] });
|
||||||
selectedRole.permissions[0] >>> 0,
|
const deleteRole = () => {
|
||||||
selectedRole.permissions[1] >>> 0,
|
setRole('default');
|
||||||
]);
|
client.servers.deleteRole(server._id, role);
|
||||||
}, [ selected, selectedRole.permissions ]);
|
};
|
||||||
|
|
||||||
const [ name, setName ] = useState('');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.roles}>
|
<div className={styles.roles}>
|
||||||
<Tip warning>This section is under construction.</Tip>
|
|
||||||
<div className={styles.list}>
|
<div className={styles.list}>
|
||||||
|
<div className={styles.title}>
|
||||||
<h1><Text id="app.settings.server_pages.roles.title" /></h1>
|
<h1><Text id="app.settings.server_pages.roles.title" /></h1>
|
||||||
{ keys
|
<Plus size={16} onClick={() =>
|
||||||
|
openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
|
||||||
|
</div>
|
||||||
|
{ [ 'default', ...Object.keys(roles) ]
|
||||||
.map(id => {
|
.map(id => {
|
||||||
let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
|
if (id === 'default') {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
|
<ButtonItem active={role === 'default'} onClick={() => setRole('default')}>
|
||||||
{ role.name }
|
<Text id="app.settings.permissions.default_role" />
|
||||||
</Checkbox>
|
</ButtonItem>
|
||||||
)
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<ButtonItem active={role === id} onClick={() => setRole(id)}>
|
||||||
|
{ roles[id].name }
|
||||||
|
</ButtonItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<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>
|
||||||
<div className={styles.permissions}>
|
<div className={styles.permissions}>
|
||||||
<h2>{ selectedRole.name }</h2>
|
<div className={styles.title}>
|
||||||
|
<h2>{ role === 'default' ? <Text id="app.settings.permissions.default_role" /> : roles[role].name }</h2>
|
||||||
|
<Button contrast disabled={!modified} onClick={save}>Save</Button>
|
||||||
|
</div>
|
||||||
|
<section>
|
||||||
|
<Overline type="subtle"><Text id="app.settings.permissions.server" /></Overline>
|
||||||
{ Object.keys(ServerPermission)
|
{ Object.keys(ServerPermission)
|
||||||
.map(perm => {
|
.map(key => {
|
||||||
let value = ServerPermission[perm as keyof typeof ServerPermission];
|
if (key === 'View') return;
|
||||||
|
let value = ServerPermission[key 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={(perm[0] & value) > 0}
|
||||||
{ perm }
|
onChange={() => setPerm([ perm[0] ^ value, perm[1] ])}
|
||||||
|
description={<Text id={`permissions.server.${key}.d`} />}>
|
||||||
|
<Text id={`permissions.server.${key}.t`} />
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<h2>channel permmissions</h2>
|
</section>
|
||||||
|
<section>
|
||||||
|
<Overline type="subtle"><Text id="app.settings.permissions.channel" /></Overline>
|
||||||
{ Object.keys(ChannelPermission)
|
{ Object.keys(ChannelPermission)
|
||||||
.map(perm => {
|
.map(key => {
|
||||||
let value = ChannelPermission[perm as keyof typeof ChannelPermission];
|
if (key === 'ManageChannel') return;
|
||||||
|
let value = ChannelPermission[key 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={((perm[1] >>> 0) & value) > 0}
|
||||||
{ perm }
|
onChange={() => setPerm([ perm[0], perm[1] ^ value ])}
|
||||||
|
disabled={key === 'View'}
|
||||||
|
description={<Text id={`permissions.channel.${key}.d`} />}>
|
||||||
|
<Text id={`permissions.channel.${key}.t`} />
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<Button contrast onClick={() => {
|
</section>
|
||||||
client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
|
<div className={styles.actions}>
|
||||||
}}>click here to save permissions for role</Button>
|
<Button contrast disabled={!modified} onClick={save}>Save</Button>
|
||||||
|
{ role !== 'default' && <Button contrast error onClick={deleteRole}>Delete</Button> }
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3420,10 +3420,10 @@ reusify@^1.0.4:
|
||||||
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
|
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
|
||||||
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
|
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
|
||||||
|
|
||||||
revolt.js@4.3.3-alpha.6:
|
revolt.js@4.3.3-alpha.7:
|
||||||
version "4.3.3-alpha.6"
|
version "4.3.3-alpha.7"
|
||||||
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.6.tgz#054e685a5c0dac2c7ae3e2aa454d1965218cb2b0"
|
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.7.tgz#de6ecef444e8368aac3753761e2e10f516f50712"
|
||||||
integrity sha512-u1/xf+YSQr8DbKsO0raym+F05R75bqYadrPWaIie3m2s2p7ZWeamHlfWIKJlmDO5AL+Lg3xoZWoLwuRHrD1K/Q==
|
integrity sha512-oi76A+EIxrD+tVRTU8s2LISFBpvMf0kpinw5rdukoc1VWpl0bCC6Kko26yC7lhVkWGLTZxHMOKaUkgbOgy0flA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@insertish/mutable" "1.1.0"
|
"@insertish/mutable" "1.1.0"
|
||||||
axios "^0.19.2"
|
axios "^0.19.2"
|
||||||
|
|
Loading…
Reference in a new issue